Join Justin Seeley for an in-depth discussion in this video Starting with a wireframe, part of Illustrator for Web Design.
Web site mockups just don't magically create themselves; we actually build them from a skeletal system known as a wireframe. If you need a little bit more help with creating wireframes, like the one you see here, I would suggest going back and watching chapter 5 of this course, where I explained in depth on how I create basic mockups by utilizing shapes inside of the Illustrator. And so once you get a wireframe completed or someone sends you a wireframe and says "hey, build a web site mockup out of this," where do you go from there? Well, you start off with the mockup like the one you see here on my screen, and the first thing you need to do is start building in an organizational structure for the mockup that you are going to be creating.
Now in this case there are some placeholders in place here that tell me where certain aspects of the web site are going to go. And so what I need to do is first put those in a logistical order so that as I start to build objects around them, it makes a little bit more sense. So that's what I'm going to do first. In order to do that, I'm going to bring up the Layers panel here. And when I create any sort of web site mockup, I go ahead and I create three layers: I create a header layer, a footer layer and then what I call a content layer. The header and footer layers are what I call anchor content, because that's pretty much going to say the same throughout the entire design. And usually what I'll do once I get those completed is I'll lock them down.
But I'll discuss more about that as I talk about adding master elements to your pages. Once I create these three layers, I now have a basic organizational structure in place where I can put different things as I work. So I'll go ahead and create a new layer here and I'll call this layer Header; I'll create another new layer, double-click to rename it, call it Footer; and I'll create another new layer and I'll call it Content. I'll usually put my Header layer at the top, like so, Content in the middle, Footer right there.
I'm also going to add a background layer to this, because particular site that I'm going to be working on has a really elaborate background image. So I'm going to create another new layer, in this case it will say layer 5, and I'll call this Background. And I'll move it all the way to the bottom. I'm going to open the layer 1 down here at the bottom, and I'm going to start moving pieces of this around. So first I need to find the elements that I need to move around. For instance, this right down here is the Footer. Once I click on that, I'll be able to see it right there. There it is. And so I can actually move this up in the order, and I want to move it up all the way until I get right on the Footer layer, and I'll drop it right there.
So it drops right in on the Footer layer by itself. And for now I'm just going to lock that layer, because it's the only thing going on in that layer right now. I'm also going to select this big piece of content here. This is the background for the page elements. And so this is going to live on the Content layer, so I'm going to drag that up and I'll drop it on the Content layer. Even though this strip right here and this big logo are technically a part of the header, they're going to be at the top of every single content piece, so I'm also going to put those on the Content layer as well.
So I'm going to select one, hold down Shift, and select the other. It should be displayed down here. And I'll take this one and drag it up and I'll drop it right on the Content layer like so, and go back and get the second one, and I'll drop it on the Content layer as well. Oops! It didn't drop it quite good enough. Let's drop it this time right there on the Content layer, and they should appear on top of it just like this. And so I'm going to go ahead now, I'll toggle this open, and I'm going to lock those two layers. I'll lock everything that's not going to change from page to page. This makes it easier to create what I call Anchored Content, content that never moves.
And so I'll toggle that back up. I have now got my content and my footer area in place and I'm ready to put my header objects where they need to go. So this is going to be a top navigation bar followed by the background, so I'm just Shift+Clicking on this. And then to the right, this will be a little search field. And so all of this stuff is down here, and I'll select the layers that I need. I'm just Shift+Clicking. And then this bottom one here, I'll Command click on that to grab it, and then I'll just move these up and I'll drop them on to the Header layer, like so.
Now the rest of these layers are nothing more than guides down here at the bottom, and so what I'm going to do now is go to View and I'm just going to choose Guides, and make sure Lock Guides is turned on, and it is. And so I'll toggle this up and I'll go ahead and double-click and rename this Guides, and I'll lock that layer down. That way I can't select anything on it or anything else. And so now I have all of the basic pieces in place for my mockup. I have got my header area defined. I've got this big square where my logo is going to go. This is another navigational area.
This is going to be the main body of my page, and in the bottom we've got a footer that goes all the way across. And so I've taken the mockup that was either given to me, or I quickly did up here inside of Illustrator, and I have given it some organizational structure that makes sense to me. I've divided it up into a header, content, footer, and background layers, so that I can easily distribute objects as I continue to make my design going forward. So once you have your mockup open inside of Illustrator, go through, organize it as you see fit, and then once you have everything organized, start to move the content around in a logistical way that makes sense to you, and then once you get everything moved into place, it's time to start adding what I call master or anchor objects to your designs.
- Customizing a web workspace
- Decoding the mysteries behind screen size and resolution
- Working with Pixel Preview and anti-aliasing
- Coloring web graphics
- Renaming and grouping layers
- Working with shapes and symbols
- Creating wireframes on a grid
- Styling text
- Creating image sprites
- Simulating web pages with artboards
- Optimizing and exporting your work