Preparation for the course. I'll go over what you're about to learn and why.
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.
Am I a UI UX designer now?
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.
UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP
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.
What is Illustrator’s role when designing a website
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.
I'll show you how to access your awesome exercise and completed files, as well as my handy downloadable Cheat Sheet!
Download the exercise files, completed files & cheat sheet
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
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.
I'll show you how to plan out your design to get the best end result.
Sitemap vs Wireframe
In this video we're going to quickly talk about what a Sitemap is versus a Wireframe. Those two kind of get mixed up when I'm talking to people so very easy just to show you.
Creating a sitemap in Illustrator
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.
Setting up your first pages
I'll show you how to set up your Illustrator documents to make the whole design process MUCH easier.