Creating a sitemap in Illustrator CC 2017

Course contents
SECTION: 15
Cheat Sheet 5:23

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

45 lessons / 4 hours

Overview

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.



We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the video 'Questions and Answers' below each video and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.


What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

Course duration 4 hours

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

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.

 

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024