Illustrator - UI & Web Design using Adobe Illustrator

Creating a sitemap in Illustrator CC 2017

Daniel Walter Scott || VIDEO: 1 of 45

Download Exercise Files



You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Hey, in this video we're going to look at making a site map. Now, we can do this in a couple of programs. I'm going to show you how to do it in Illustrator because it's an Illustrator class, but then I want to show you why I don't do it in Illustrator, mainly because it takes so long. First of all let's talk about how I traditionally do it. I'll do a site map just by hand in my notebook. If I'm dealing with my own site, just by hand, that's it, game over; I draw it up. If I'm doing it for a client, they're expecting a higher level of presentations, so I'll do it in either Illustrator or I'll do it something called Muse, which I'll show you quickly in a second, but there's no real kind of tool specifically for it. So we're going to use Illustrator to get started, so we'll go to 'File', ‘New', and we'll make-- probably because it's going to be printed and sent to the client, it's going to be A4, and I will make it Landscape, and I will hit 'Create'. If in US, go to 'Letter', and what you do is not particularly exciting, it is, grab rectangle tool, I'm going to give my fill either white or no fill, and I'm going to put a black line around the outside. In terms of the stroke I'm going to set it to 1 pixel. Yours might be set to point still, don't worry, just use 1 point for the moment, we're going to change that over in a little bit.

Site map is to show the client the flow of the website of where things are going to go, how it's going to be structured, so what you can do is draw a box, and grab the 'Type' tool, and you say, 'Home Page'. I'm going to center these two together by selecting them both, and at the top here I've got some options, and here's that one that says 'Center'. Now I'm going to draw my next page. I'm going to probably move that over a little bit and I'm going to copy and paste them, so 'Edit', 'Copy', 'Edit', 'Paste', I'm going to line it up. This one here is going to be my 'Product' page. I tap that using my keyboard. Next page. You can kind of see that it's a little bit monotonous, it's not too bad, depends on how big the structure needs to be. So I'm going to go into here, this is going to be my 'About Us' page. I should probably center this text to make it easier, but you get the idea. Now I need to join these up, and there's a 'Line Segment Tool' here. Yours might be hidden under some of these ones, so click and hold down, and grab the 'Line Segment'. And I'm going to click, hold, and drag. You can see, it joins these two up. It's pretty good at lining things up. If your thing is not lining up-- you can see mine's got this lovely intersect-- it's always like-- see these pink lines jumping everywhere, you can turn that on and off under 'View', there's one called 'Smart Guides'. Have that 'on' at the moment.

You can see my one here is actually not drawing a line, you can see it's actually left there behind, it's because when I started drawing I've got no 'stroke', no 'fill', and that can catch you out. So I'm going to grab my black arrow, I've got it selected, and I'm going to say, "You my friend need a black stroke." And you can see the stroke is kind of the liner on the outside, this first one here is the 'fill'. And because it's aligned it doesn't have a 'fill'. This guy here still exists but he's got no 'strokes' or 'fills', it doesn't print so it's not very useful. So I'm going to turn this guy on. Now it's fine, now you want to build this out, so we want to grab the 'Line Segment' tool-- join this one out-- and that's it, just a lot of boxes, a lot of copying and pasting, a lot of joining lines to them, making sure they snap, so it's not super hard, but if I'm going to do a wireframe I'm probably not going to build it up this way, I'm going to jump into something called Muse because it's super easy, and it's part of the Creative Cloud License, so if you've got the latest version you’ll have Muse, and if you'll use it you totally can use Illustrator, keep going with Illustrator, keep building this thing out. Probably the biggest problem comes-- not so much building, it's when we need to change things, we need to kind of move this over here, and this needs to come as well, so we're selecting all these, and these adjustments become a little bit harder.

So let's go jump into Muse and see why I love it, for just doing the wireframing. So, download and install Muse, you don't have to. I'm going to make a new site. And in terms of page Width, we're not worried about this at the moment, so we're going to click 'OK, and we're going to open-- We’re just going to stay here actually. Muse is just a web design program without using any code, and it's really cool, and I've got a course on that if you want to go and do it, but we're going to use it just in this case, it's part of Illustrator process, and UI design because of this beautiful 'Plan' view, so just make sure you're in 'Plan'. You can see here, I've already got a home page, which is handy, then I can click this little '+' button, and you can see, I can put in my 'Product' page. When I say product page, it's for building a site for widgets, that's where the widgets would go there. Now I'm going to put in my "About Us' page. You can see how fast this work flow is. 'Contact Us'. And then when we go to 'Product', we can say 'Product A'. Watch this, this is kind of nice, you can see, it's kind of done this, joined those lines, it's got a cool little flow chart going. It just becomes very easy to build a site map.

You can keep building this up, you can keep adding bits, you can move them. Watch this. Say your 'About Us' page needs to be there, you can see, this switches around, and that's probably why I like it the most. Now depending on the kind of site map you're making, you can draw that up here, you can go horizontal, vertical, whatever displays it more clearly for your client or for yourself. So I'm going back to 'Size', you can make it big or small to fit in lots of different pieces, and that's it. They're already labeled, they've got nice little lines and flow charts. 

The question might be, "What do I do with it now?" There is no export PDF of this site map, which should be a really cool function in Muse, but it's not. All I do is take a screenshot and then add it in Designer or Illustrator just as an image. So that's my work flow. You might not like this black here, you can do some basic stuff. You can't go through and install the fonts and everything, but you can do some stuff. Say that I want to put this-- I'm going to Adobe Muse, and go to 'Preferences'. If you're on a PC, that 'Preferences' is hiding under 'Edit', down the bottom here. So I'm going to go 'Preferences'. What you can do is switch out the backdrop for this kind of lighter color here, then you can do a screenshot, on a PC there is actually a button called screenshot, it's around where your 'Home' and 'End', 'Page Up' buttons are. On a Mac, it's going to be 'Command-Shift-4'. And then just click, hold, and drag it out. I'm going to take a screenshot. And then what I do is I just open up Illustrator, get rid of you guys, you take too long, and then  I'm going to go 'File', 'Place', and find my screenshots. Put it in there, then I kind of design around it, I might put in things like the job name, the client name. This version of the site map is quite important. There’s one I made, 'Sitemap', there you are there.

I took a screenshot of the black version. I just added my client name, my design agency name, I gave it a version, and I put in my logo. Just to brand it up, and give it a bit of look and feel for your client that you're delivering it to.

Remember, by hand is perfectly fine when you're dealing with your friends, and your buddies, and your parents. I find that I don't go further than that, but when there's a paying client, often, this kind of expectation, or this kind of level would be expected. You can either use Illustrator, drag boxes, join them up, nothing wrong with that. Or you can jump to Muse, and just use that cool little tool, take a screenshot, dump it into here. 

Alright, so that is setting up our site map for your website design.