UI Web Design using Adobe Illustrator CC
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.We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.This course is for people serious about becoming a User Interface design professional.Know that I’ll be around to help – if you get lost you can drop a post on the video ‘Questions and Answers’ below each video and I’ll be sure to get back to you.Now it’s time to upgrade your skills, get that better job, and impress your clients.What are the requirements?You’ll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.No previous design skills are needed.No previous Illustrator skills are needed. What am I going to get from this course45 lectures 4 Hours 7 minutes of content!You’ll learn to design a website with in Adobe Illustrator.User Interface essentials. 27 Completed files so you never fall behind. Learn how to wireframe at all levelsHow to design for a responsive website. Downloadable exercise files & cheat sheet.Forum support from me and the rest of the BYOL crew.Techniques used by professional website designers.Professional workflows and shortcuts.A wealth of other resources and websites to help your new career path.What is the target audience?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 duration 4 hours
Section 1: Overview
Lecture 1 Introduction
Lecture 2 Am I a UI UX designer now?
Lecture 3 UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP
Lecture 4 What is Illustrator’s role when designing a website
Section 2: Getting started
Lecture 5 Download the exercise files, completed files & cheat sheet
Lecture 6 Getting your workspace & Illustrator preferences ready for UI work
Section 3: Planning
Lecture 7 What is the difference between a sitemap and a wireframe?
Lecture 8 Creating a sitemap in Illustrator
Section 4: Setting up your first pages
Lecture 9 What screen sizes to use for desktop, tablet & mobile web design
Lecture 10 What is a grid system & responsive mobile & tablet design
Lecture 11 How to make a responsive 12 column grid in Illustrator
Section 5: It all begins with Wireframing
Lecture 12 Creating a wireframe – Low fidelity – hand drawn
Lecture 13 Creating a wireframe – High Fidelity – Illustrator
Lecture 14 Creating the Tablet and Mobile wireframes in Illustrator
Section 6: Designing your first page
Lecture 15 Inspiration for your web design
Lecture 16 Starting your web design using Illustrator templates
Lecture 17 Bring in your vector logo to the layout
Section 7: Color
Lecture 18 Color.Adobe.com
Lecture 19 Matching brand colors using Adobe Illustrator
Section 8: Fonts
Lecture 20 Using the right web fonts Google Fonts & Typekit
Lecture 21 Production video – finalising nav, hero box and fonts
Section 9: Images
Lecture 22 Free vs Royalty Free images
Lecture 23 Adding Linking Cropping & Masking images in Illustrator
Lecture 24 Washing out images in Illustrator with with coloured background
Lecture 25 How to use layers in Illustrator 2017
Section 10: Creating symbols & icons
Lecture 26 Using the Adobe Market for free icons
Lecture 27 Using Icon finder for free website UI social icons
Lecture 28 Align & distribute icons in Illustrator for web design
Lecture 29 How to adjust vector shapes in Illustrator
Lecture 30 Creating custom icons & logos using the shape builder tool in Illustrator
Lecture 31 Drawing icons & logos in Illustrator using the pen tool
Section 11: Creating mobile & tablet versions of websites
Lecture 32 Creating a tablet version of our UI web design in Illustrator
Lecture 33 Creating a mobile responsive UI website design in Illustrator 2017
Section 12: Exporting
Lecture 34 Export your full page web ui mockups from Illustrator 2017
Lecture 35 Should I be using SVG export in Illustrator 2017 for web design
Lecture 36 Exporting images and pictures from Illustrator 2017 for web
Lecture 37 Exporting logos and icons from Illustrator 2017 for UI
Lecture 38 Retina – HiDPI and responsive image export from Illustrator 2017
Lecture 39 Exporting your UI for App design using Illustrator 2017
Lecture 40 Exporting CSS for developers using Adobe Illustrator 2017
Section 13: Working as a UI designer
Lecture 41 Learning the language of UI user interaction design
Lecture 42 How to get your first work as a UI designer
Section 14: Next steps
Lecture 43 Next steps to becoming an amazing UI designer
Lecture 44 Your first project
Section 15: Cheat Sheet
Lecture 45 Cheat sheet
This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
Udemy | English | 4h 6m | 3.57 GB
Created by: Daniel Walter Scott