courseIllustrator CC 2017: UI & Web Design

Learn how to produce stunning Web & UI Designs with Illustrator CC

In the duration of this course, you will be shown how to use Adobe Illustrator CC to produce stunning visuals for development. It will teach you various subjects, such as wrieframes, how to design pages and what to include, colours & fonts and much more.

What is Adobe CC?

Adobe CC (or Creative Cloud) is the latest version of the Adobe Suite. Adobe CC has much more features than prior versions such as CS5 and CS6. Its suite is comprised of design and development applications.

Wiki_tick  Unlimited access for 12 months

Wiki_tick  Access anywhere, any time

Wiki_tick  Fast effective training, written and designed by industry experts

Wiki_tick  Track your progress with our Learning Management System

Wiki_tick  Unlimited support

Wiki_tick  Save money, time and travel costs

Wiki_tick  Learn at your own pace and leisure

Wiki_tick  Easier to retain knowledge and revise topics than traditional methods

Wiki_tick  Exam preparation quizzes, tests and mock exams to ensure that you are 100% ready

pexels-photo-57690What the course will teach you:

  • Setting up your first pages
  • How to use wireframing
  • Designing your first page
  • How to use colours, fonts and images
  • How to create mobile and tablet versions
  • Much more

Buy Now

Units Of Study

Illustrator CC 2017: UI & Web Design

Course Duration: 4 Hours

Chapter 01: Overview

Am I a UI or UX designer now?
UI Design: Photoshop vs. Illustrator vs. Sketch vs. InDesign vs. Adobe XD
What is Illustrator’s role when designing a website?

Chapter 02: Getting started

Download the exercise files, completed files & cheat sheet
Getting your workspace & Illustrator preferences ready for UI work

Chapter 03: Planning

Sitemap vs. Wireframe
Creating a sitemap in Illustrator CC 2017

Chapter 04: Setting up your first pages

What screen sizes to use for desktop, tablet & mobile web design
Grid systems & responsive design for mobile & tablet
How to make a responsive 12-column grid in Illustrator

Chapter 05: It all begins with Wireframing

Creating a hand drawn wireframe
Creating a wireframe in Illustrator
Creating the tablet & mobile wireframes in Illustrator

Chapter 06: Designing your first page

Inspiration for your web design
Starting your web design using Illustrator templates
Bringing in your vector logo to the layout

Chapter 07: Color

Using (Adobe Color CC)
Matching brand colors using Adobe Illustrator

Chapter 08: Fonts

Using the right web fonts: Google Fonts & Typekit
Production video: finalizing nav, hero box & fonts

Chapter 09: Images

Free vs. Royalty Free images
Placing, Cropping & Masking images in Illustrator
Washing out images in Illustrator with colored background
How to use layers in Illustrator CC 2017

Chapter 10: Creating symbols & icons

Using the Adobe Market for free icons
Using for free website UI social icons
Align & distribute icons in Illustrator for web design
How to adjust vector shapes in Illustrator CC 2017
Creating custom icons & logos using the Shape Builder tool in Illustrator CC 2017
Drawing icons & logos in Illustrator using the Pen tool

Chapter 11: Creating mobile & tablet website versions

Creating a tablet version of our UI web design in Illustrator CC 2017
Creating a mobile responsive UI website design in Illustrator CC 2017

Chapter 12: Exporting

Export your full page web UI mockups from Illustrator CC 2017
Should I be using SVG export in Illustrator CC 2017 for web design?
Exporting images & pictures from Illustrator CC 2017 for web
Exporting logos & icons from Illustrator CC 2017 for UI
Retina – HiDPI & responsive image export from Illustrator CC 2017
Exporting your UI for App design using Illustrator CC 2017
Exporting CSS for developers using Adobe Illustrator CC 2017

Chapter 13: Working as a UI designer

Learning the language of UI user interaction design
How to get your first work as a UI designer

Chapter 14: Next steps

Next steps to becoming an amazing UI designer
Your first project: Adobe Illustrator CC 2017

Chapter 15: Cheat Sheet

Cheat sheet: Adobe Illustrator CC 2017

System Requirements

Minimum specifications for the computer are:


Microsoft Windows XP, or later
Modern and up to date Browser (Internet Explorer 8 or later, Firefox, Chrome, Safari)


OSX/iOS 6 or later
Modern and up to date Browser (Firefox, Chrome, Safari)

All systems:

Internet bandwidth of 1Mb or faster
Flash player or a browser with HTML5 video capabilities (We recommend Google Chrome)

Please note: Although this course will work with the system requirements stated above, the software talked about and used in the course may vary. It is recommended that you check with the software suppliers website before making a purchase.