Creating a wireframe - High Fidelity - Illustrator

In this video we're going to make this a wireframe. It's a wireframe, it also is just gray boxes and some type; nice and simple. Alright, let's go do it.

So let's start building a wireframe. It's quite like our Sitemap, we've just got lots of rectangles, and some type. Let's go through some tricks and tips to come along, but if you are pretty confident with Illustrator already you might want to skip along this one.

First of all I'm going to grab my rectangle tool. We could just use white boxes. I like to use just a little bit of gray in the box, and a black stroke on the outside, with 1 pixel, '1px', which just means I'm going to draw the box, it’s going to represent where my logo goes, about there. I like that kind of off-white just to make it easy and clear with the different elements. 

Now, in terms of elements, to impress people, when you are at your meeting, the page furniture, and keep a straight face, it's kind of a name for these types of things, the furniture on the page. Kind of stolen from print, but impresses people, sounds like you are in the business. 

The other thing to do is, try not to design this far away, I'm going to zoom down at 50% just so I could see the different artboards, but you want to be designing this thing, or at least mocking it up, and at actual size, so it’s going to look like on an actual website, not kind of zoomed in, or zoomed out too far, because you're going to make some poor decisions in terms of design.

To do it, you hit 'Command 1', or 'Control 1' on a PC, or the long way, 'View', 'Actual Size', that's what it's going to look like on an actual website. So I feel that logo is now a bit too tall, and you got to make sure, when you're dragging these boxes that you do it in the columns, don't try and do that, where it kind of straddles one of these gutters, it has to line up with the edge of one of these columns, it can't go across one of the gutters, so column to column, and I'm going to add a bit of a type just to indicate that this-- I'm going to click ones down here, and type in 'Logo'. 

Font sizes, don't worry about it, 16 pixels is about 12 points in real life, so if you have to print this off, it's nice and legible. I'm going to start drawing this out, I'm going to copy and paste this guy by selecting both of them, holding 'Shift', and then go 'Copy' and 'Paste', that's 'Edit' 'Copy', 'Edit' 'Paste', or 'Control C', 'Control V'. And I'm going to make this my navigation. Remember, not straddling, put in the columns. And in terms of the text here, I'm just going to drag it over. It can be a little hard to drag, this text, especially when you are zoomed out a little bit. You see they're kind of dragging the edges a little bit. The more you zoom in the easier it is to move things around. Or you can just use your arrow keys on your keyboard. If you hold 'Shift' while you drag using arrow keys on your keyboard, it kind of like does it in big chunks, so I'm going to stick mine in the middle there. I need to change the text. I'm going to dump it across a little bit. Okay, back to 'Command 1' on my Mac, or 'Control 1' on your PC, actual size. 

Sometimes it's really hard to see with all these columns on as well, so there's a really nice shortcut to turn the columns on and off, the long way is under 'View', 'Guides', 'Hide Guides', but you can see here, this is the shortcut, 'Command ;', or 'Control ;' on a PC. I'm holding down 'Command' and just tapping ';'. I use this all the time when I'm designing, because it's like, need it lined up, need to see it. 

Next bit is, there's going to be a nice big, what's called a Hero Box. So I'm going to grab my rectangle tool here, pick on my colors, and things, so off-white, black around the outside, one pixel. I'm going to draw-- it's called the Hero box, that kind of big slab in the middle, sometimes it rotates, but it's that big kind of like, "Hey, this is us, and this is what we're doing. Welcome." So that's our box, and I'm going to add a bit of type to it. What I've done previously is I've clicked once and typed, it types on forever. What I want is what's called the fixed width box, I'm going to delete that using delete on my keyboard, and what I'm going to do is grab my type tool again, which is this guy here, the capital 'T', and I'm going to make sure I start on this side of my column, I'm going to click and drag, and if you drag a box out, it means it's going to have like a fixed width, this means, it's going to kind of like bang up to the edge, and then loop back around.

Now this text is far too small, I want this big, like an inspirational, ‘Come, do work with us’ thing we're going to put there, and I'm just going to bump up the font size. So the file size, not too something quite large. A cool little shortcut is, with it all selected, like it is here, you hold down the 'Command Shift', and tap the full stop key. So, 'Control Shift' on a PC, and tap the full stop key on your keyboard, and it just makes it nice and big. A comma makes it smaller. They're kind of next to each other, up and down. So we have something that looks like that. If you hate hyphens like I do, you can do a select it all, so I kind of triple clicked it, kind of selected it all, and you can go to your 'Paragraph' tab here and turn 'Hyphenate' off. 

I'm probably going to have to triple click it again. I want my font a little smaller. It sits in here, I grab my black arrow, I've got this box just to kind of-- that's what I want. The next thing I want is going to be-- there's a ‘Call To Action’ button down here. Why it goes there? I don't know. It becomes a style, you need big inspirational quotes that defines you, and then you need a button underneath, that's like your ‘Call To Action’, your ‘Come buy this thing’, or ‘Contact me’, or something like that. So, there's my button, and you can see mine's kind of come, and defaulted to black, center, but no stroke on the outside. I want it to be like the rest of the buttons, so what you can do is you can start using the eyedropper tool, so this one, the eyedropper tool, select it, and I click on this guy, and you'll see he'll steal the styling from this guy, this navigation along the top. I'm going to click on this, grab my logo, copy and paste it, you're going to be my 'Amazing Call To Action'. I probably won't put 'Amazing' on it if I'm sending it to a client. I get very professional about it all. Nice!

So the next thing I want to do is I want to put in some thumbnails underneath here, I'm going to put three of them, and they're going to span four columns each, to make up the twelve, but the bottom of the page is stuck down here, so I'm going to grab the Artboard tool, I want to zoom out a little bit so I can see it all. And I'm going to make it a bit bigger, so I'm just going to grab the bottom. You can make it as long as you like, I tend to make it just really long. And then, when you're finished, drag it out rather than keypadding to move it down. Back to 'Command 1' to get to the right size. 

So, rectangle tool, I'm going to have a fill of my off-white, I'm going to have—Oops, I've got that selected, can you see, my text's selected when I was changing there, and that means that it's changed my text to have that off-white color, it's there but it's the wrong color, so we'll undo that, 'Edit', 'Undo'. I'm going to have nothing selected, black arrow, click on the background, done, grab my rectangle tool. I'm going to draw something else roughly about that size, it's going to span 4 columns. Eyedropper tool.

Now, to indicate that it's not a button kind of thing, to indicate it's an image, people put a cross through it, or they use these special image size, you can see it over there, kind of like landscape looking thing. So what we're going to do is grab the 'Line Segment Tool', and we're going to draw that. I could start dragging this one over, but I want to get the angle right, so it's easier to grab the black arrow, click off, make sure you've just got this guy selected. I want to go to 'Edit' 'Copy', 'Edit' 'Paste', and up the top here, we can go to 'Object', 'Transform', 'Reflect'. I'm going to use horizontal. Click 'OK', and it'll just kind of flipped it over. 

Now, I'm just kind of jam it close to it, not worried too much, because I'm going to select all three of them, and there's  one up here that says align horizontally, and vertically. I want my rectangle back up. I'm going to group them, I'm going to go to 'Object', 'Group', and I'm going to hold down 'Alt' key, and click and drag one out, and it kind of makes a duplicate-- oh, we're dragging, so hold down 'Alt'. You'll notice that when we hold 'Alt' it just kind of moves it across, and often it lines up, and you can force it through, while you're dragging, so holding 'Alt', you can hold 'Shift' as well. It just makes everything lined up. Straight up and down.

Great! So, a lot of time I just do these crosses, people fancy it up, you can see this graphic here, it's like an universal Ironman image, you can add that extra complexity to it, there's no real drama for it, you might like it. You can just use the line segment tool and start drawing mountains, you might have to increase the stroke width to match that, and if you're looking for the Ellipse tool, it's just under the rectangle tool here, and you can mock up your own version of that.

So I've got my images, what I want to do now is, I want to finish off a couple of things. This is where you might skip along because it's just going to be a little bit repetitive, and what I'll actually do is I'll probably stop this video right now and the next video you can skip, because that is me just filling this out, and I'm going to line up the tablet version as well. It’s not going to be super exciting, but-- I'll see you in the next video, or the video after that.