Course Duration: 4 Hours
Chapter 01: Overview
Introduction
Am I a UI or UX designer now?
UI Design: Photoshop vs. Illustrator vs. Sketch vs. InDesign vs. Adobe XD
What is Illustrator’s role when designing a website?
Chapter 02: Getting started
Download the exercise files, completed files & cheat sheet
Getting your workspace & Illustrator preferences ready for UI work
Chapter 03: Planning
Sitemap vs. Wireframe
Creating a sitemap in Illustrator CC 2017
Chapter 04: Setting up your first pages
What screen sizes to use for desktop, tablet & mobile web design
Grid systems & responsive design for mobile & tablet
How to make a responsive 12-column grid in Illustrator
Chapter 05: It all begins with Wireframing
Creating a hand drawn wireframe
Creating a wireframe in Illustrator
Creating the tablet & mobile wireframes in Illustrator
Chapter 06: Designing your first page
Inspiration for your web design
Starting your web design using Illustrator templates
Bringing in your vector logo to the layout
Chapter 07: Color
Using Color.Adobe.com (Adobe Color CC)
Matching brand colors using Adobe Illustrator
Chapter 08: Fonts
Using the right web fonts: Google Fonts & Typekit
Production video: finalizing nav, hero box & fonts
Chapter 09: Images
Free vs. Royalty Free images
Placing, Cropping & Masking images in Illustrator
Washing out images in Illustrator with colored background
How to use layers in Illustrator CC 2017
Chapter 10: Creating symbols & icons
Using the Adobe Market for free icons
Using Iconfinder.com for free website UI social icons
Align & distribute icons in Illustrator for web design
How to adjust vector shapes in Illustrator CC 2017
Creating custom icons & logos using the Shape Builder tool in Illustrator CC 2017
Drawing icons & logos in Illustrator using the Pen tool
Chapter 11: Creating mobile & tablet website versions
Creating a tablet version of our UI web design in Illustrator CC 2017
Creating a mobile responsive UI website design in Illustrator CC 2017
Chapter 12: Exporting
Export your full page web UI mockups from Illustrator CC 2017
Should I be using SVG export in Illustrator CC 2017 for web design?
Exporting images & pictures from Illustrator CC 2017 for web
Exporting logos & icons from Illustrator CC 2017 for UI
Retina – HiDPI & responsive image export from Illustrator CC 2017
Exporting your UI for App design using Illustrator CC 2017
Exporting CSS for developers using Adobe Illustrator CC 2017
Chapter 13: Working as a UI designer
Learning the language of UI user interaction design
How to get your first work as a UI designer
Chapter 14: Next steps
Next steps to becoming an amazing UI designer
Your first project: Adobe Illustrator CC 2017
Chapter 15: Cheat Sheet
Cheat sheet: Adobe Illustrator CC 2017