Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

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 Videos (4h 9m)
    • 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

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

      3:29
    • Your first project

      3:33
    • Cheat sheet

      5:23

About This Class

UI design skills are one of the most employable opportunities of our lifetime. In this course you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.

This is a project based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.

We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.

This course is for people serious about becoming a User Interface design professional.

Know that I’ll be around to help - if you get lost you can drop a post on the class discussion board and I'll be sure to get back to you.

Now it’s time to upgrade your skills, get that better job, and impress your clients.

8d3ed52d

What are the requirements?

  • You'll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.

  • No previous design skills are needed.

  • No previous Illustrator skills are needed. 

What am I going to get from this course?

  • 45 lectures 4 Hours 7 minutes of content!

  • You'll learn to design a website with in Adobe Illustrator.

  • User Interface essentials. 

  • 27 Completed files so you never fall behind. 

  • Learn how to wireframe at all levels

  • How to design for a responsive website. 

  • Downloadable exercise files & cheat sheet.

  • Forum support from me and the rest of the BYOL crew.

  • Techniques used by professional website designers.

  • Professional workflows and shortcuts.

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.

93 of 93 students recommendSee All

Very insightful class. Thanks Daniel for being detailed and making the class so easy to follow!
Really helpful and Dan made things easy to follow
You can always tell the quality of a Skillshare class by the quality of the projects that students are able to create. You can tell when an instructor is good when it's not just all theory or copycatting what the instructor created, but rather when you can apply what was learned to create your own unique projects.

1,335

Students

9

Projects

Daniel Scott

Adobe Certified Trainer & UI/UX Expert

I'm a Digital Designer & teacher at BYOL international. Sharing is who I am, and teaching is where I am at my best, because I've been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

I've spent a long time watching others learn, and teach, to refine how I work with you to be efficient, useful and, most importantly, memorable. I want you to carry what I've shown you into a bright future.

I have a w...

See full profile