Articles, Blog

Creating a sitemap in Illustrator – Adobe Illustrator CC 2017 Course [08/45]

November 10, 2019


Hi, my name is Dan. In this video we’re going
to be using Illustrator… to build UI and web graphics. There’s lots of free stuff here
on my channel, please subscribe. Hit the little bell next to this
subscribe button to get notifications. If you want more, loads is more. Check out bringyourownlaptop.com, or
check out the link in the description. 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 presentation… 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 align 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 not
actually not drawing a line. It’s 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. 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 style
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. How good was that? If you want more… go check out bringyourownlaptop.com or
check out the link in the description.

2 Comments

  • Reply Syed Raza Shah August 1, 2017 at 9:40 pm

    What's the difference between your paid and free course?

  • Reply Kebe Maro August 18, 2018 at 7:51 am

    Your free videos are awesome , when I start making money because of them I'll start paying for your paid courses

  • Leave a Reply