Just launched with all modern Design tools and best practices for 2021! Join a live online community of over 400,000+ students and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto for top companies. A great Designer is becoming harder and harder to find and it isn't rare to find designers make $160,000+ salaries now because it is such a valuable skill. We will teach you how to get there!

Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently getting you from zero to a point where you can get hired or win freelance contracts. We will use in demand tools like Figma to show you a full workflow from start to finish. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

The course also includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects. We guarantee you this is the most comprehensive online resource on Design skills!

The curriculum is going to be very hands on as we walk you from start to finish of working as a Designer, all the way into learning how to create final professional designs and then converting them into actual websites or apps using HTML and CSS.

The topics covered in the course are...

00 Web & Mobile Design Principles + Design vs Web Development

01 GETTING STARTED – Sketching, Inspiration + Structure

1. Sketching

Intro to sketching

Sketching UX flows

Sketching tips

2. Inspiration

How to stay inspired

How to find inspiration online

3. User Flows

What are user flows?

The do’s and don’ts

Speeding up our workflow with components

Creating our own user flows (Registration) Part 1

Creating our own user flows (Search) Part 2

Creating our own user flows (Checkout) Part 3

4. Sitemaps

An intro to sitemaps

Creating a basic sitemap

What you should be doing before you start

Creating a sitemap (part 1)

Creating a sitemap (part 2)

Tips for getting started

02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback

1. Wireframes

What is a wireframe?

How do I create a wireframe?

Speeding up your workflow in Figma

Creating our home page

Creating a product page

Creating a checkout page

2. Prototyping

Prototyping basics in Figma (Device + Triggers)

Prototyping basics in Figma (Actions)

Prototyping basics in Figma (Overflow)

Prototyping basics in Figma (Presentation + Collaboration)

Linking together a quick user flow in Figma

Working on small interactions with Figma

3. Getting feedback

Why is feedback so important?

How to get constructive feedback

03 VISUAL DESIGN – Design Theory + Accessibility

1. Grids + Spacing

Spacing and Grid Basics

Responsive Grids in Figma

Creating our own grid in Figma

The rules of the grid

2. Typography

Typography basics Part 1

Matching typefaces to an era

Typography basics Part 2

Selecting the right typeface

Typography basics Part 3

Picking a typeface

Does your typeface suit your scenario?

Expanding an existing type system

Choosing typefaces in Google Fonts

Narrowing down your typography choices

Creating a type system in Figma

3. Color

Color Schemes

Important questions to ask before picking colors

Helpful tips for creating color palettes

Creating a monochromatic color palette

Applying a our simple color palette

Expanding a strict color palette

Creating our own color palette

4. Forms + UI Elements

What are UI Elements

Best practices Part 1: Forms

Best practices Part 2: Inputs Part 1

Best practices Part 2: Inputs Part 2

Best practices Part 2: Inputs Part 3

Best practices Part 2: Inputs Part 4

Best practices Part 3: Buttons

How to create components in Figma

Using atomic elements in Figma

Using Instances in Figma

Editing instances to create new components

Using constraints to create responsive components

Creating a registration form in Figma

5. Imagery + Iconography

Resources and techniques to create great visual assets

Working with photos in Figma Part 1

Working with photos in Figma Part 2

Working with illustrations in Figma

Using Figma plugins to find Icons quickly

Creating our very own custom icons

6. Accessibility

What is accessibility?

Assistive technologies

Visual patterns for accessibility (Part 1)

Tools to make your design accessible

Visual patterns for accessibility (Part 2)

04 DESIGN EXPLORATION – Application Design + Design Systems

1. Design Patterns

What are design patterns?

Why are design patterns valuable?

How to apply design patterns

Analyzing design patterns together

Dissecting and choosing design patterns together

2. Mobile Design

Mobile design best practices (Part 1)

Mobile design best practices (Part 2)

3. Applying Visual Design

Design Fidelity

Style exploration (Navigation)

Style exploration (Cards)

Style exploration (Interests)

Style exploration (New elements)

4. Motion

The importance of motion

The purpose of motion

Intro to Smart Animate

Showcasing the power of Smart Animate

5. Microinteractions

What are microinteractions?

Why are they so important?

Creating our own microinteractions (Part 1)

Creating our own microinteractions (Part 2)

Using Figmotion (Part 1)

Using Figmotion (Part 2)

05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma

1. Design Systems

What is a design system?

Foundation (color)

Foundation (grids and spacing)

Foundation (typography)

Foundation (iconography)

Components (buttons)

Components (Inputs)

Components (cards)

Recipes (card layouts)

Recipes (search)

Recipes (orders)

2. Final Compositions

Using our design system (Search)

Using our design system (Product Description)

Using our design system (Cart)

06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)

07 HTML + HTML5

08 CSS + CSS3 - CSS Basics, CSS Grid, Flexbox, CSS Animations

09 PUTTING YOUR WEBSITE ONLINE