Autoplay
Autocomplete
Previous Lesson
Complete and Continue
UI & Web Design using Adobe Illustrator CC
Overview
Introduction (1:54)
Am I a UI UX designer now? (1:14)
UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP (3:23)
What is Illustrator’s role when designing a website (1:36)
Getting Started
Download the exercise files, completed files & cheat sheet (1:21)
Getting your workspace & Illustrator preferences ready for UI work (2:22)
Planning
Sitemap vs Wireframe (0:52)
Creating a sitemap in Illustrator (7:59)
Setting up your first pages
What screen sizes to use for desktop, tablet & mobile web design (7:06)
What is a grid system & responsive mobile & tablet design (4:39)
11 How to make a responsive 12 column grid in Illustrator (8:49)
It all begins with Wireframing
Creating a wireframe - Low fidelity - hand drawn (2:37)
Creating a wireframe - High Fidelity - Illustrator (10:01)
Creating the Tablet and Mobile wireframes in Illustrator (10:47)
Designing your first page
Inspiration for your web design (1:39)
Starting your web design using Illustrator templates (3:04)
Bring in your vector logo to the layout (5:33)
Color
Color.Adobe.com (3:45)
Matching brand colors using Adobe Illustrator (2:15)
Fonts
Using the right web fonts Google Fonts & Typekit (9:36)
Production video - finalising nav, hero box and fonts (5:54)
Images
Free vs Royalty Free images (5:44)
Adding Linking Cropping & Masking images in Illustrator (8:56)
Washing out images in Illustrator with with coloured background (6:15)
How to use layers in Illustrator (3:12)
Creating symbols and icons
Using the Adobe Market for free icons (3:39)
Using Icon finder for free website UI social icons (5:31)
Align & distribute icons in Illustrator for web design (2:31)
How to adjust vector shapes in Illustrator (7:01)
Creating custom icons & logos using the shape builder tool in Illustrator (10:06)
Drawing icons & logos in Illustrator using the pen tool (18:06)
Creating mobile & tablet versions of websites
Creating a tablet version of our UI web design in Illustrator (8:36)
Creating a mobile responsive UI website design in Illustrator (11:52)
Exporting
Export your full page web ui mockups from Illustrator (2:37)
Should I be using SVG export in Illustrator for web design (5:00)
Exporting images and pictures from Illustrator for web (8:10)
Exporting logos and icons from Illustrator for UI (6:26)
Retina - HiDPI and responsive image export from Illustrator (7:20)
Exporting your UI for App design using Illustrator (3:03)
Exporting CSS for developers using Adobe Illustrator (6:11)
Working as a UI designer
Learning the language of UI user interaction design (3:39)
How to get your first work as a UI designer (4:21)
Next steps
Next steps to becoming an amazing UI designer (1:54)
Your first project (3:33)
Cheat sheet
Cheat sheet (5:52)
Exporting logos and icons from Illustrator for UI
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock