Ui Web Design Using Adobe Illustrator 2017

Download the exercise files, completed files & cheat sheet Preview 01:21

First thing we need to do is to get the exercise files, so there'll be a link in the description or on the sites here somewhere, we can go out and get the exercise files, and they are just like the images that we're going to use, any text we use, any kind of resources that I talk about, so download those.

Getting your workspace & Illustrator preferences ready for UI work Preview 02:22

In this course, what we're going to do is look at setting up our Illustrator for working with web and app design. There's couple of things we need to change, because at the moment, by default, when you install it, and when you're using it, it's kind of assuming you're dealing with print based stuff, so it's using physical measurements like mm, cm, or inches, so we need to go off and change a few things.

What is the difference between a sitemap and a wireframe? Preview 00:52

A sitemap is similar to a flowchart which visually displays where the sites pages will go on your website. A wireframe is a simple mockup using placeholders to lay out the general look and feel of the page. The aim of the wireframe is to give an idea of where things will go rather than detailing what colors, fonts and images will be used.

Creating a sitemap in Illustrator Preview 07:59

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.

What screen sizes to use for desktop, tablet & mobile web design Preview 07:06

Hey there, in this tutorial we're going to make these Artboards in Illustrator. This is going to be our desktop size, this is going to be our tablet size, and this is going to be our mobile size. So let's work out what sizes we need to make these first, and then we'll go and build them in Illustrator. 

What is a grid system & responsive mobile & tablet design Preview 04:39

Hey there, in this video we're going to talk about Grid Systems and Responsive Web Design. So, when people talk about responsive, all it means is I'm going to design a site that responds to the different devices that I'm using.

How to make a responsive 12 column grid in Illustrator Preview 08:49

Hello, wonderful people. What we're going to do in this one is actually add these guides to our views, so we can use that lovely 12-column grid, and get started with our design. Let's go and do it.

Creating a wireframe - Low fidelity - hand drawn Preview 02:37

In this video, we're going to look at doing wireframes, but we're going to do some low fidelity, hand drawn ones. I always start with this, I draw on my book and start working that way, and often, if it's my own work I don't get any further than this, I don't mock up beautiful ones in Illustrator because there's no point, there's no one to impress but myself, and it's a bit of ideation, this wireframing, and I work from those. 

Creating a wireframe - High Fidelity - Illustrator Preview 10:01

In this video we're going to make this a wireframe. It's a wireframe, it also is just gray boxes and some type; nice and simple. Alright, let's go do it.

So let's start building a wireframe. It's quite like our Sitemap, we've just got lots of rectangles, and some type. Let's go through some tricks and tips to come along, but if you are pretty confident with Illustrator already you might want to skip along this one.

Creating the Tablet and Mobile wireframes in Illustrator Preview 10:47

Okay, lovely people. This is what we're going to be building in this tutorial, we're going to finish off the desktop, build the tablet and mobile versions of our wireframe. I won't be offended if you just skip to the next video, because it is literally just kind of doing the same thing but working to a different grid.

Inspiration for your web design Preview 01:39

Okay, now we're getting into the design phase. We've done some Sitemaps and Wireframes, and they don't look very sexy, now it's sexy time.

We're going to go through and look at where I get my inspiration, you might have yours. This I find is probably the best of all the sites. It's called 'awwwards', but with www in there. Good gig

Starting your web design using Illustrator templates Preview 03:04

Okay, in this tutorial we're going to look at how to start from templates. You might be really new to design in general, you might be a student, you might be young, you might be older and have never done it before. Whatever reason, you might be a little more daunted by the whole design process. “What is it going to look like?” 

Bring in your vector logo to the layout Preview 05:33

Hey there, in this video we're going to bring in our lovely, sexy, vector logo, and we'll drop in our Nav bar, play with the opacity, and add a bit of ‘Type’ for our navigation. Alright, let's go and do it.

Color.Adobe.com Preview 03:45

In this video we're going to talk about adding color to your site, we're going to start using something called Adobe Color CC. It used to be called Cooler, if you remember him, but if you go to color.adobe.com and you sign in with your Creative Cloud license you'll get to here. 

Matching brand colors using Adobe Illustrator Preview 02:15

In this video we're going to look at pulling colors from existing branded logos to use within your UI design.

Using the right web fonts Google Fonts & Typekit Preview 09:36

In this video we're going to look at bringing in really specific web safe fonts, from Google Fonts, and Typekit, like this little sexy guy here, and these little plain Janes, but very cool fonts up the top here.

Production video - finalising nav, hero box and fonts Preview 05:54

In this production video-- production video just means, I’m not really doing anything new, I’m just going to be filling in the holes for our design, you can watch or you can skip it along, it's alright. So this is what we're going to get to at the end of this video, we're going to be putting in some text, some colored boxes, but we know how to put  text and colored boxes in, so let's go and do that now.

Free vs Royalty Free images Preview 05:44

Hi there, in this video we're going to look at where we get free images from, and what royalty free images are. We'll start with the free images.

Adding Linking Cropping & Masking images in Illustrator Preview 08:56

In this video what we're going to do is we're going to bring in some images, and we're going to look at how to crop them into these little thumbnails here. We'll look at both squares and circles.  Alright, let's go.

Washing out images in Illustrator with with coloured background Preview 06:16

Hey there, in this video we're going to do this little image in the background here where it's kind of like a full stretchy background, and it's kind of washed out, it's got a green tone. We'll look at how to do that in Illustrator.

How to use layers in Illustrator 2017 Preview 03:13

Howdy, campus! In this video we are going to look at layers in Illustrator, and what we're going to do is we're going to end up looking like this, where we've got one layer with all that kind of art work, and one layer with the background layer. The cool thing about the background layer is that it's kind of locked. There's a locking icon here, so we can't move it around. So let's go and do that now.

Using the Adobe Market for free icons Preview 03:39

Alright, in this video we're going to cheat, we need a tick, and we're going to just steal it. Okay, stealing is the wrong word, we're going to appropriate it from Creative Cloud market place, and there's lots of good stuff in there that we can use, and we're allowed to use legally, and it's all scalable and vectoriness, and that will save us from drawing it, so let's go and look at that now.

Using Icon finder for free website UI social icons Preview 05:31

Hello! In this video, what we're going to do is, we're going to get these images, these icons, these social icons, and we're going to get them for free, from a place called Iconfinder, then we're going to go off and change the colors to match our design. Let's go.

Align & distribute icons in Illustrator for web design Preview 02:31

Hello, UI designers. What we're going to do now is get these icons just kind of aligned nicely, and balanced in these columns. Alright, let's go do it.

How to adjust vector shapes in Illustrator Preview 07:01

Alright, in this video we're going to look at editing vectors that already exist, that we've downloaded, and we want to start playing around with, and kind of adjust them a little bit. We're going to do it to this simple arrow down here, we're going to change the stroke size, and adjust it a little bit along with the color. We're also going to mess around with them, make them kind of rounded, and do all sorts of fun stuff. Alright, let's go and do that now.

Creating custom icons & logos using the shape builder tool in Illustrator Preview 10:06

Hi there, in this video we're going to build this logo shape here using the Shape Builder. We're also going to build all of these fun little guys. So let's go and do that, and learn how to use the Shape Builder tool.

Drawing icons & logos in Illustrator using the pen tool Preview 18:06

In this exercise, we're going to draw this little Kiwi, and this clover leaf down the bottom here, and we're going to draw a crown, and they're all vector, they're nice, and vector bits, and we're going to show you how to use this lovely pen tool. There he is there. Let's go do that.

Creating a tablet version of our UI web design in Illustrator Preview 08:36

In this tutorial, we're going to create our tablet version, it's going to look very similar, we're going to play with some of the padding on the sides here, so it's not so fat and dented, we're going to rearrange the stacking order of these thumbnails, and little bits and pieces, but we'll get ready for tablet. Okay, so let's get started.

Creating a mobile responsive UI website design in Illustrator 2017 Preview 11:52

Hello, beautiful people! In this tutorial we're going to make our mobile version. You can see it's a little bit different, we've done lots of left aligning, and columns. In mobile, we're going to break it down, we're going to remove some boxes, you can see, we're missing some, we're missing some lines, and we've gone for some centred bits, and probably the main bit is our lovely mobile menu, or our Nav sandwich, or our Hamburger menu. So let's go and build that stuff.

Export your full page web ui mockups from Illustrator 2017 Preview 02:37

In this tutorial we're going to export our different screens, or our different artboards so that we can put them into a PDF, so that we can send them off to the client to see, or for our web designer to maybe give us a costing on, just a nice way to make a PDF straight from Illustrator. Let's go and do that now.

Should I be using SVG export in Illustrator 2017 for web design Preview 05:00

In this tutorial we're going to talk about SVGs, and should I be using them, or should I not? SVG’s a reasonably new file format. It's like a JPEG, or PNG, and it's really good for use online because it's scalable. SVG is a vector graphic, which means it can be scaled up and down without loss of resolution, whereas JPEGs, if you stretch it really big, it gets all kind of pixelated and yucky.

Exporting images and pictures from Illustrator 2017 for web Preview 08:10

In this video we're going to look at exporting our images, things like photographs, and there's background graphic here, you can see that we're going to end up in this ‘Export’ panel, and then we're going to end up in this lovely group I've exported. Awesomeness! All right, let's get started.

Exporting logos and icons from Illustrator 2017 for UI Preview 06:26

Hi, in this tutorial we're going to look at exporting logos and icons from Illustrator for web or app use. 

When we're dealing with SVGs - We talked about that in our earlier video - it's super easy.

Retina - HiDPI and responsive image export from Illustrator 2017 Preview 07:20

Hi there, in this video we're going to talk about what we do about retina, or high dpi, or responsive images, whatever you may want to call it, it's all about quality of images.

Exporting your UI for App design using Illustrator 2017 Preview 03:03

This video is going to be more about exporting for apps but let's pretend we're not building a desktop and tablet version, we're just building a mobile app, so we've kind of build some icons to be used in here. It's very easy. 

Exporting CSS for developers using Adobe Illustrator 2017 Preview 06:11

Hi there, in this video we're going to look at exporting some of the code from Illustrator. Oh, code!

If you've never used code before, and this is something that will be really helpful for the person building your site. If you're going to be building your site, this is going to be super helpful for you.

Learning the language of UI user interaction design Preview 03:39

All right, now that we've created our first project together in Illustrator, you can now proudly call yourself a User Interface designer. Are you the world's best UI designer? Probably, not yet.

How to get your first work as a UI designer Preview 04:21

So how do you get your first work as a UI designer? You've done the course, and you're really keen to get started, but how do you get work?

There's kind of like two streams, if you are young, or ready for a complete career change, you're going to ditch being a baker and now you’re going to become a UI designer, or you're young, a student, and looking to get into it, that direction, just starting as a junior UI designer

Next steps to becoming an amazing UI designer Preview 01:54

All right, now it's time for the next steps. What do I do now, I've finished the course. I'm getting started in UI, what can I do next?

Your first project Preview 03:33

All right, it is project time, homework time, professional development time, whatever you might want to call it. This bit is super important, I promise you. The people that I teach, I teach a lot of people, it’s the people that do this, like extra step, because you've been following me step by step through this course, which is amazing, and you’ll get the ideas, but it's only about your own practice, where you have to think for yourself, on to your own problems, so this little project I'm going to set for you-- I bet you, the people that do this are the ones that are going to remember, probably later.

Cheat sheet Preview 05:23

Alright, this is our Cheat Sheet. We're going to go through some of the bits we've covered in real quick bullet points, and add some super extra fancy tips and tricks. Let's go do it.