UI & Web Design using Adobe Illustrator CC

Hi there, my name is Dan, and I'm a Certified Adobe Instructor for Illustrator. In this video series we're going to use Adobe Illustrator to build a web and UI design project together. We'll use a real world project, we'll start with our portfolio. You know the portfolio, the one that you've been planning to build forever but haven't got around to. Let's you and me build that now together. 

Alright, now the question is, after this course, am I going to be a UI/UX designer? They kind of go hand in hand. They are very different things. After this course, you can say, "Yes, I am a UI designer. I can build user interfaces,” like websites that we're going to be doing, and app design, that is user interface. We use tools like Illustrator amongst other ones that you potentially could use to be a UI designer. 

In this video we're going to talk about what products do what, because Adobe has loads of them, and there are some other competitors as well about the way the UI is designed, so let's talk about the main Adobe products.

So, what is Illustrator's role in this whole business? As a web designer you might decide you finish at the limits of where Illustrator stops, and what you'd be expected to do-- say you're the designer, you'd have to work with the developer, or a web designer, somebody who does the HTML in CSS, because Illustrator itself doesn't actually make websites; it designs it, the look and feel, gets everything in the right position, the colors, the fonts, and we use that as a template to build that in code. 

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.

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.

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.

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.

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.

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.

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.

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.

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. 

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.

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.

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

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?

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.