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