UI & Web Design using Adobe Illustrator CC

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
46 Lessons (4h 9m)
    • 1. Introduction

      1:54
    • 2. Am I a UI UX designer now

      1:14
    • 3. UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP

      3:23
    • 4. What is Illustrator’s role when designing a website

      1:36
    • 5. Download the exercise files, completed files and cheat sheet

      1:21
    • 6. Getting your workspace and Illustrator preferences ready for UI work

      2:22
    • 7. Sitemap vs Wireframe

      0:52
    • 8. Creating a sitemap in Illustrator

      7:59
    • 9. What screen sizes to use for desktop, tablet and mobile web design

      7:06
    • 10. What is a grid system and responsive mobile and tablet design

      4:39
    • 11. How to make a responsive 12 column grid in Illustrator

      8:49
    • 12. Creating a wireframe Low fidelity hand drawn

      2:37
    • 13. Creating a wireframe High Fidelity Illustrator

      10:01
    • 14. Creating the Tablet and Mobile wireframes in Illustrator

      10:47
    • 15. Inspiration for your web design

      1:39
    • 16. Starting your web design using Illustrator templates

      3:04
    • 17. Bring in your vector logo to the layout

      5:33
    • 18. Using Adobe Color

      3:45
    • 19. Matching brand colors using Adobe Illustrator

      2:15
    • 20. Using the right web fonts Google Fonts and Typekit

      9:36
    • 21. Production video finalizing nav, hero box and fonts

      5:54
    • 22. Free vs Royalty Free images

      5:44
    • 23. Adding Linking Cropping and Masking images in Illustrator

      8:56
    • 24. Washing out images in Illustrator with with coloured background

      6:16
    • 25. How to use layers in Illustrator 2017

      3:13
    • 26. Using the Adobe Market for free icons

      3:39
    • 27. Using Icon finder for free website UI social icons

      5:31
    • 28. Align and distribute icons in Illustrator for web design

      2:31
    • 29. How to adjust vector shapes in Illustrator

      7:01
    • 30. Creating custom icons and logos using the shape builder tool in Illustrator

      10:06
    • 31. Drawing icons and logos in Illustrator using the pen tool

      18:06
    • 32. Creating a tablet version of our UI web design in Illustrator

      8:36
    • 33. Creating a mobile responsive UI website design in Illustrator 2017

      11:52
    • 34. Export your full page web ui mockups from Illustrator 2017

      2:37
    • 35. Should I be using SVG export in Illustrator 2017 for web design

      5:00
    • 36. Exporting images and pictures from Illustrator 2017 for web

      8:10
    • 37. Exporting logos and icons from Illustrator 2017 for UI

      6:26
    • 38. Retina HiDPI and responsive image export from Illustrator 2017

      7:20
    • 39. Exporting your UI for App design using Illustrator 2017

      3:03
    • 40. Exporting CSS for developers using Adobe Illustrator 2017

      6:11
    • 41. Learning the language of UI user interaction design

      3:39
    • 42. How to get your first work as a UI designer

      4:21
    • 43. Next steps to becoming an amazing UI designer

      1:54
    • 44. Next steps to becoming an amazing UI designer

      3:29
    • 45. Your first project

      3:33
    • 46. Cheat sheet

      5:23
84 students are watching this class

Project Description

The project will be to develop a one page website for a small business. This exercise can be used in their own professional portfolio.

I’ll supply images, logo’s & copy. I’ll set tasks to be included in their project.

  • The use of a color scheme from color.adobe.com
  • Download & use 1 new web safe font.
  • Desktop, Tablet & Mobile layouts.
  • At least one new icon created using the Shape Builder or Pen tool.

Student Projects

project card
Daniel Larios
project card
Chloe W.
project card
Juli Krlva
2 comments
project card
David Deasy
1 comment
project card
2 comments
project card
Jeremy Montz
project card
Ana Rosa
project card
Leia F
project card
Teralyn Dang
project card
Adrianne M
project card
Vivian Grenfell
3 comments
project card
Mauany Alencar
1 comment