UI & Web Design using Adobe Illustrator CC

4.7 (2351)
Learning paid
4 hours course
Course by Udemy
$ 129.99
$ 129.99
What will you 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.
About the course

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.

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.
Getting started
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.
  • 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.
Daniel Walter Scott
Daniel Walter Scott
Adobe Certified Instructor & Adobe Certified Expert
Instructor HQ
Instructor HQ
Streamline your online course creation processes
Udemy courses are suited to professional development. The platform is organized in such a way that it is experts themselves that decide the topic and when the course will start. All supporting documents are made available to you for lifetime access. On this platform, you can find a course on about any subject, and that is no exaggeration – from a tutorial on how to ride a motorcycle, to managing the financial markets. The language and the course format are established by the teacher. This is why it is important to read the information about the course carefully before parting with any money.
Comments (2351)
Like any other website, konevy uses «cookies». These cookies are used to store information including visitor's preferences, and the pages on the website that the visitor accessed or visited. The information is used to optimize the users' experience by customizing our web page content based on visitors' browser type and/or other information. For more general information on cookies, please read the «What Are Cookies» article on Cookie Consent website.