UI & Web Design using Adobe Illustrator CC
4.6 (2,263 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,918 students enrolled

UI & Web Design using Adobe Illustrator CC

Build professional web & app designs using Adobe Illustrator CC
4.6 (2,262 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
12,915 students enrolled
Last updated 7/2019
English, Indonesian [Auto], 6 more
  • Italian [Auto]
  • Polish [Auto]
  • Portuguese [Auto]
  • Romanian [Auto]
  • Spanish [Auto]
  • Thai [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 27 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Work as a UI designer building web design & app designs.
  • Use Illustrator to a professional level.
  • Know how to build wireframes.
  • Know how to build site maps.
  • Know how to design for a responsive website.
  • Professional workflows and shortcuts.
  • You'll need a copy of Adobe Illustrator CC 2018 or above. A free trial can be downloaded from Adobe.
  • No previous design skills are needed.
  • No previous Illustrator skills are needed.

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 CC. 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.

Who this course is for:
  • 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 content
Expand all 45 lectures 04:05:34
+ Overview
4 lectures 08:07

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. 

Preview 01:54

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. 

Preview 01:14

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.

Preview 03:23

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. 

Preview 01:36
+ Getting started
2 lectures 03:43

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.

Preview 01:21

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.

Preview 02:22
+ Planning
2 lectures 08:51

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.

Preview 00:52

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.

Preview 07:59
+ Setting up your first pages
3 lectures 20:34

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 screen sizes to use for desktop, tablet & mobile web design

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.

What is a grid system & responsive mobile & tablet design

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.

How to make a responsive 12 column grid in Illustrator
+ It all begins with Wireframing
3 lectures 23:25

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 - Low fidelity - hand drawn

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 a wireframe - High Fidelity - Illustrator

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.

Creating the Tablet and Mobile wireframes in Illustrator
+ Designing your first page
3 lectures 10:16

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

Inspiration for your web design

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

Starting your web design using Illustrator templates

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.

Bring in your vector logo to the layout
+ Color
2 lectures 06:00

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.

Matching brand colors using Adobe Illustrator
+ Fonts
2 lectures 15:30

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.

Using the right web fonts Google Fonts & Typekit

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.

Production video - finalising nav, hero box and fonts
+ Images
4 lectures 24:09

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.

Free vs Royalty 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.

Adding Linking Cropping & Masking images in Illustrator

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.

Washing out images in Illustrator with with coloured background

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.

How to use layers in Illustrator 2017
+ Creating symbols & icons
6 lectures 46:54

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 the Adobe Market for free icons

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.

Using Icon finder for free website UI social icons

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.

Align & distribute icons in Illustrator for web design

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.

How to adjust vector shapes in Illustrator

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.

Creating custom icons & logos using the shape builder tool in Illustrator

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.

Drawing icons & logos in Illustrator using the pen tool