UI & Web Design using Adobe Illustrator 2017

Daniel Scott, Microsoft and Adobe guru for BYOL international

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
45 Videos (4h 7m)
    • 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
    • Download the exercise files, completed files and cheat sheet

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

      2:22
    • Sitemap vs Wireframe

      0:52
    • Creating a sitemap in Illustrator

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

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

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

      8:49
    • 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
    • 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
    • Using Adobe Color

      3:45
    • Matching brand colors using Adobe Illustrator

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

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

      5:54
    • Free vs Royalty Free images

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

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

      6:16
    • How to use layers in Illustrator 2017

      3:13
    • Using the Adobe Market for free icons

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

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

      2:31
    • How to adjust vector shapes in Illustrator

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      3:29
    • Your first project

      3:33
    • Cheat sheet

      5:23