Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
An essential part of any good web site design is going to be to have a really nice navigation system. And you can really mock up some great-looking stuff inside of Illustrator by utilizing just basic shapes that really translate well into a navigational system. What you have to understand is that these navigation systems are not just going to be accessed via the web with a mouse or a tablet or something like that. They're going to be accessed with mobile phones, tablet devices, different things like that, where people will be interacting with them not just with a mouse, but also their finger and a stylus and things like that.
So, when we're creating navigation for any type of web site, we need to make sure that it's both desktop- and touch-friendly. So, in this movie, I'm going to be exploring how to create a basic navigation system mock- up, and I'm also going to touch on several different ways that you can make this a little bit more touch friendly. So let's get started. I'm going to go ahead and go to the File menu and choose New, and inside of this dialog box, I want to make this about 960 pixels wide, and let's make it about 500 pixels tall.
It doesn't matter how tall it is necessarily. I'm mainly concerned with the width of the document. So I'm going to go ahead and hit OK. Let's assume that this is going to be for a 960-pixel-wide web site, and this is going to be something that lives at the very top of the web site. So, the first thing that I do when I'm designing a navigation system is I determine what type of navigation system I'm going to create. Is this going to be something that goes horizontal, is this something that goes vertical? It is going to have dropdown menus inside of it or are all the navigational items going to be included in this horizontal or vertical layout? That's all up to you.
For this project, I'm going to do a horizontal menu with some dropdowns. So, the first thing I'm going to do is I'm going to draw out a rectangle and when I'm drawing out this rectangle, I'm going to keep in mind that this needs to be a touch-friendly graphic, meaning that it needs to be big enough so that when someone taps on it with their finger, it will be selectable. And so the desired size for most touch- friendly aspects of a web site is generally around 35 to 40 pixels in height. So just keep that in mind. It needs to be at least 35 to 40 pixels in height, and I would say I wouldn't go any smaller than about 50 or 60 pixels in width either.
So in this case, I'm going to make all of my buttons the exact same size, and I'm just going to distribute them across the page. So let's say that I wanted to have five buttons that go across the page. Then I would need to take 960 pixels and divide that by 5, which makes this about 192 pixels apiece. So in order to create these things as precise as possible, I'm just going to click once, and I'm going to type out 192 for the width, and then I'm going to type out about 40 pixels for the height and I'll hit OK.
So, once I do that, there is the basic setup for my first button. And I'm going to grab the Selection tool and I'm going to flush it over to the left, just like so. And if you really want to make sure it's right up against the edge of the artboard, you can come up to your Control panel and choose Align to Artboard, and then hit this first button here to align it right to the left side. Now, I'm going to copy this and then I'm going to paste it on top of itself four times: one, two, three, four. That gives me five total copies.
So now if I select all of these by clicking and dragging across, I can align them and go to Horizontal Distribute. And since I had that aligned to the artboard, those automatically distributed across, like so. So there is the basis for my navigation system. I need to determine what these are going to look like, so I'm going to focus on one button at a time and then I'll just copy the appearance to the rest of the buttons. So, let's go ahead and select this button here, and we'll start on this one first. So I want this to be an orange color, so we'll make it orange. And I'm going to give it no stroke, just like that.
I want to make sure that these are all fitting in the right area, so I'm going to flush that left. And I can realign these after the fact. It's the stroke that kind of threw it off, while I go. That's no big deal. We've got that selected. I also want to bring up the Appearance panel. I can do that by going to Window and selecting Appearance. And if it's already onscreen, you should just be able to locate it, and I'll find mine and drag it out. I'm going to add something to the top of this, just to give it a little bit of something extra, so I'm going to add a fill. So, I'll select the fill that's already there, and then I'll go down and hit Add New Fill.
And I'm going to select a gradient, just like this. Once I have that gradient selected, I'm going to toggle open that fill. I'm going to change the opacity of this gradient by going to the blend modes here on the left, and I'll change this to Soft Light. Then I'll find the Gradient panel and change the angle to something like 90 degrees. And if you don't like that, you might want to switch it over to something like -90. There we go! The final thing I'm going to do is I am going to add a stroke to this.
So, let's go up to the Stroke panel, open it up, and I'll add a 1-point stroke to it. I'm going to make sure that it is aligned to the inside of this. Then I'm going to go to the color, and I'm going to pick kind of a darker reddish-orange color. I may even go a little bit darker than that. And if you want to get real custom with it, you can just go down here, target the stroke, double-click, and kind of mix your own. In this case, I'll use a dark orange like this.
The hex code for this is 824106. So, I hit OK. That looks better. So, that's the overall appearance that I want for each one of my buttons. So, the easy way to do this is to save it as a graphic style of course. So, what I'll do is bring up the Graphic Styles panel by going to Window > Graphic Styles, and I'll open those up. And I'll make sure I have this button selected, create a new graphic style just like that. I don't have to worry about naming it right now. I'm going to reset my workspace. Use Command or Ctrl+0, and I'll just select all of these at once, bring up the Graphic Styles panel, and apply that graphic style to them.
And with all those still selected, I can then go back to the Align panel and I can align them with the artboard again, making sure they're all ready to go. So there you have it! There is a basic navigation style. So now what you want to focus on is adding some text to this. It's a mockup after all, so we need to know what it's going to say. So I'm going to grab the Text tool, and I'll just type out "HOME," in all caps. Once I have that typed out, I'll select the text. And I'm going to increase the font size just a little bit, so maybe something like 14 pixels. That might be a little small for this, so I may even bump that up to something like 16.
Then I'm also going to hold down the Option key on the Mac, the Alt key on a PC, and tap the right arrow key a few times to kind of spread that out a little bit, add some tracking in there. Once I do that, put that right on top of that button. I can select this button here, and then I'll change the alignment to the selection and align those to each other's center point, just like that. I can also align them to the vertical center as well.
I'll just move that back into place. If at any time your buttons get out of place like this, you can just realign them by moving them around. Select that and just kind of move it down. If you zoom in closer, you'll get a better level of control on these. Let's do that. And you can always move these around and change them any way you want. It's okay that those are misaligned for now. I can fix that later. So I've got my HOME button ready to go. I'm going to change the color of the text, though, to white. The next thing that I try to do is I try to figure out if these buttons are going to have hover states or over states, and once we do that, we need to figure out what those are going to look like.
The easiest way to do that is to just take what you've created so far and duplicate it. So what I'm going to do is take this button and select it. I'll copy it--Command or Ctrl+C--and then paste it--Command or Ctrl+V. That just puts it right there, and I'll put it right underneath it. So this way you can kind of see the over and regular state of the button. So, I'll take this button, and all I'm going to do here is go into the Appearance panel and I'll bring that out so you can see it.
I'm going to target the gradient fill so that I'm working on that gradient fill, and I'll go to the Gradient box here and I'll change that angle to 90. So, when somebody hovers over this, the gradient will change. So, that's what I'll tell the developer is okay, this is the up state, this is the over state, et cetera. And the easy way to get through this, where this makes sense for your developer, is to select something like this, group it with Command or Ctrl+G, and then use your Layers panel. So, I'll do this. And I'm working on this group right here, so I'll call this Home Up.
So that's the up state. If you can't see this, you can expand it out a little bit. I'll select this. Command or Ctrl+G gives me this group. Double-click and I'll call this Home Over, and then I will move it until it's right on top of it, like so. So now anytime I want to see what it's going to look like-- I'll just turn off the over state for now-- so there is the up state, and if I want to see what it looks like rolled over, just click that on, just like that. So it looks like I'm actually hovering over it right now. So that's a great way to show interactivity to your clients and also to the developer.
I am going to rest my workspace really quick. So, the easy thing to do here would be just to copy this and paste it as many times as you want. But we have one final thing we need to do. We need to do a dropdown, because we need to see exactly what that's going to look like. So, I'm just going to grab my Rectangle tool again, come right to the intersect point, and we'll do 192 x 40 again. We'll keep this the same, except this time I'm going to make sure it is a solid fill, just like this, and there is no stroke, like that.
So that's my dropdown. And I'll copy that, and I'll paste in front, Command or Ctrl+F. Then I'll move it down till it intersects, just like this. And we'll copy it again, paste it again, Command or Ctrl+F, and we'll put it down like that. So that's going to be my dropdown whenever I roll over this. So now what I need to do is give this a little bit of a differential I think. So, I'll select all three of them at once, and I'm just going to add sort of a lighter gray stroke. And we'll align this to the inside, like so. There we go! Kind of a little panel-like dropdown, and I can move that up so it's flushed with the rest of it.
Then I can take this HOME text and I'll double- click until I get a hold of the HOME text, and I'll copy that, double-click to exit. Then I'll select this, and I'm going to group this together--Command+G or Ctrl+G. Then in my Layers panel--I'll bring this out so you can see it--double-click, and I'll name this DropDown, just like so. So, with this selected now, I'll double- click to enter in Isolation mode for the group so I'm only working in the group. I'll paste, get that lined up.
And again, it doesn't matter what these words say, because they're always going to change based on whatever button you're working on, but this just gives the developer, or whomever is creating this, an idea of what this is going to look like. And so I'll just copy and paste in front--Command or Ctrl+F--and then I'll move this down till it gets about in the center there, Command or Ctrl+F, keeping that in line, just like so. So there is my dropdown. Then we can double-click the canvas to exit. So really, I don't even need these extra ones over here on the side.
I can actually get rid of these if I wanted to and just use this. I'll just move this to the center. If you wanted to create the entire thing, you could, but in this case, I think one example works really well. And if I go to the Window menu and bring my Layers panel back up, you can actually see what I've got. I've got the Home Up, I've got the Home Over, and I've got the dropdown all set there, so if I wanted to turn on the over state for this, I can do that. And it's actually over here. I need to move that with it, so I'll just move that back over till it lines up, just like that.
So, if I were to send this to somebody, I can say, okay, this is what your navigation is going to look like. And I'll turn off the dropdown and turn off the over state. This is what it looks like normal. This is what happens when I hover over it and when the dropdown appears. So you can turn those off to show the regular button state after the fact. As you continue to develop your navigational style, you may find that vertical navigation works best, horizontal works best. It's just totally up to you which one works best for whatever design you're working on. Also, the dropdowns and things like that are always going to be different for each design that you work on, but hopefully this gives you a better idea of how to create these things, how to mock them up, how to showcase them to a developer or a client, and also, how to make them touch friendly, so that they can be used effectively on any device or screen.
Get unlimited access to all courses for just $25/month.Become a member
120 Video lessons · 58320 Viewers
119 Video lessons · 67587 Viewers
84 Video lessons · 16871 Viewers
125 Video lessons · 29766 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.