UI & Web Design using Adobe Illustrator CC

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.

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.

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.

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.

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. 

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.

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.

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. 

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.

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.

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

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?” 

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.

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. 

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.