UI & Web Design using Adobe Illustrator CC
- Italian [Auto]
- Polish [Auto]
- Portuguese [Auto]
- Romanian [Auto]
- Spanish [Auto]
- Thai [Auto]
- 4 hours on-demand video
- 27 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business- 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.
- This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
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.
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?”
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.
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.
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.
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.