Tip:
Highlight text to annotate it
X
We're going to be using Pencil from the Pencil Project, which is a free open source tool
for prototyping and doing wireframes. A wireframe is a way of logically planning where components
are going to go in your web page or your app or on a tablet. And they are very useful.
Now when you're doing your wireframe, it's important to remember that it's really intended
as a placement tool. It's usually done all in gray scale except for links, which are
blue because it's like a blueprint on a house. Which will tell you where your kitchen is,
where the window is, where the refrigerator is, how long the counters are but typically
won't tell you whether you're using the pine finish or the maple finish or what color you're
painting the walls. We're not really getting into the colors here. We're just getting into
placement of items on the page. So you can go to pencil.evolus.vn and you can download
it, and you can download it as a free standing program or as a tool which you can drag in
to a web page and it will add to Firefox if you want to add it into here. So it can work
either way. Now make sure you're saving frequently. Especially before you go and try to publish
it because if you don't it will shut and you'll use everything that you did. Voice of experience
here. So I'm going to start by creating a new page. And you want to do that the first
time because you want it to be a normal web page size or a large web page size. Either
one of these is fine. And then I'm going to typically do a background color which I'm
going to generally make black because it just shows where the page is. And then I'm going
to put in my page title, which I will just call sample. Actually I don't want this to
Large Web Page, I think I'm going to do a Normal Web Page. OK, then I'm going to start
adding things to it and you can use the common shapes but it really doesn't have everything
that you need. The one tool set that's going to have everything that you need is actually
the Sketchy GUI. This is everything you're going to need. And I usually start with a
box and I'm going to set the size here to 30 for the y coordinate, 5 for the x. Not
50, 5. And I like to make it 960 wide and well say 700 long. Let's see what that does.
We'll say 720. And so that's just the area that I'm going to have. This represents my
page. I'm going to set the page color to medium gray and this is just how I'm going to set
up my div tags. So it's easy to see. I'm going to use a really standard layout for div tags
here. And again I can go in here and I can set this up exactly the way that I want it
and put in the numbers, which I'm making it go all the way across. And I'm going to set
it up to 120 in width. OK, so that's where my header will go. And then I'm usually going
to put in a side bar for my navigation if I choose to use that layout. Typically you're
going to use a one, two or three column layout, with or without header and footer. So this
will represent my navigation. Local navigation on the side here. And when I translate this
into a actual web page, typically you're not going to see this gray coming through behind
it because usually it will be the same color. This is just helping me plan how big my div
tags are going to be. Because I can actually go and grab how many pixels these are planned
on the pixel level, which is really nice. And then I'll put in potentially a footer.
That a bit smaller, drop it in here, and this would be one very common layout. We'll set
the x to 30, that to 960 and make it go all the way across. And so there we have my standard
header, left column, main area, footer layout. This is not the only layout that's available
by any means. But it's a really common one. And then what I like to do is select the whole
thing, and you can try to drag a box around it all. It's easy to miss a part so Ctrl A
or Command A, if you're on a Mac. And then lock these backgrounds because I'm just going
to add stuff on top of them. Then I'm going to start adding content. And I'll typically
put in local navigation on the left-hand side. And I will do some sort of site name up at the top, and you can change
the font. I know it's Comic Sans, the enemy of all good designers. But since it's supposed
to be a sketchy feel it's sort of why they use it. You can keep going bigger and if you
don't like it you can change it to something else. But this is really not where we're picking
the font. This is supposed to look sort of hand sketched. And then I would put in my,
I have a logo, I can represent that by going here. You'll notice that if I were to re-size
it. Sizes change, which is nice. You might have a spot for people to log in and then
you would add a button to that. You can also do top level navigation up here. Don't need
to do that. OK, you can use the button. Pull it out. You can use your arrow keys on your
keyboard as well to move things around. Now when you're doing these, this represents navigation
but you shouldn't leave them all saying button. You would say things like Home, Products,
Specials, About. Gizmos, Widgets, Thing-a-ma-bob. All of those really technical terms. And then
you can put representations of what your page would look like. So maybe if it's a product
page, you might have images, notice I can just copy and paste. Couple of them here.
So I might have a products page and then I would typically separate these with lines.
We can copy, past that. And then I would typically have, maybe put a bread crumb up here. They
typically have labels, Gizmo 1. And typically we can represent it if we wanted to, this
would be like h1 tag. So a little bit bigger. Possibly bold. Gizmo 1, Gizmo 2, Gizmo 3.
That just represents the label. And then typically to represent text you just drop thick lines
because we don't want to worry about what it's saying. I'm going to make it relatively
thick, copy, paste, paste, paste, paste. And I can represent paragraph text just like that.
And usually it's better if the ends aren't completely even because typically paragraphs
are left aligned. And then if I want to reuse that I could group it, copy it and paste in,
paste. And there I go, I've got my paragraph on each product and then I can put in a little
bit of stuff here at the bottom. Typically I would have links down here that generally
echo buttons up at the top as far as the content you have. And you should make this real content.
Such as Home, Products, Specials, About, and you just double click and type Home, Products,
Specials, and About. And there you go. I've got a basic wireframe done. At this point
I should save this, and I'm just going to save it on my desktop as "sample" and then
I could copy this by duplicating the page and changing various items on here to make
it represent new pages. Now to export it, I don't recommend using the pdf. It's just,
it's being a nightmare tying to get it to work. It wants a template, that doesn't work
and makes everything corrupt, so don't do this. What yo want to typically do is png
files. And all pages. You could uncheck, If you only wanted specific pages, you could
uncheck specific ones. So we'll just do one sample page. Hit Next. Choose destination.
I'm going to Browse, I'm going to drop it on my desktop and I'm going to hit Finish.
And so it will export it with these page names up here. So now if I go to my page, I should
see sample right here. I have a nice picture of the wireframe that I did. This is what
you're going to hand in on Canvas.