Complete Web Designer Mobile Designer Zero To Mastery

  1. Home
  2. Mobile-app-design
  3. Complete Web Designer Mobile Designer Zero To Mastery

Tags: Mobile App Design

Become a Designer in 2022! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS

Last updated 2022-01-10 | 4.6

- Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2022
- Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
- Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects

What you'll learn

Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2022
Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
Learn best practices that takes years to learn in the design industry
Learn to make professional logos and design choices for all branding needs
Learn UI/UX best practices using the latest trends in the industry
Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

* Requirements

* No requirements. We teach you and show you everything from scratch! From Zero to Mastery
* Get ready to fall in love with Design and making everything you touch into beautiful projects for the rest of your life!

Description

  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2022
  • Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
  • Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
  • Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
  • Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
  • Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
  • Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
  • Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
  • Learn best practices that takes years to learn in the design industry
  • Learn to make professional logos and design choices for all branding needs
  • Learn UI/UX best practices using the latest trends in the industry
  • Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!

Course content

38 sections • 266 lectures

Introduction 10 lectures

Course Outline Preview 07:00

Join Our Online Classroom! Preview 01:15

Exercise: Meet The Community Preview 01:27

Meeting The Client Preview 04:13

The 2 Paths Preview 01:55

Exercise: Building Your Logo Preview 01:28

Design Resources Preview 01:59

Designer vs Developer Preview 06:53

Skills To Be A Top Designer Preview 07:06

Monthly Coding Challenges, Free Resources and Guides Preview 00:40

1: GETTING STARTED - Sketching, Inspiration, User Flows 1 lectures

Getting Ready For This Section Preview 00:48

Sketching 7 lectures

Introduction To Sketching Preview 03:27

The Sketching Process Preview 07:05

Sketching User Flows Preview 08:05

Sketching User Flows 2 Preview 05:49

Sketching User Flows 3 Preview 09:49

Sketching User Flows 4 Preview 10:02

Sketching Tips Preview 08:01

Inspiration 2 lectures

How To Stay Inspired Preview 07:59

How To Find Inspiration Preview 13:47

Introduction To Figma 9 lectures

Getting Started With Figma Preview 00:43

Introducing Figma Preview 01:49

Figma Dashboard Preview 05:12

Figma Tools Preview 05:45

Layers & Pages Preview 03:22

The Top Bar Preview 10:27

Design Properties Preview 11:16

Prototyping With Figma Preview 03:35

Exercise: Creating A Responsive Layout Preview 16:43

User Flows 7 lectures

What Are User Flows? Preview 06:16

The Do's And Don'ts Preview 04:38

Speed Up Workflow With Components Preview 06:39

Creating Our Own User Flows Preview 12:49

Creating Our Own User Flows 2 Preview 13:10

Creating Our Own User Flows 3 Preview 13:19

Endorsements On LinkedIN Preview 00:39

Sitemaps 6 lectures

Introduction To Sitemaps Preview 01:44

Creating A Basic Sitemap Preview 04:16

Before You Start Preview 07:57

Creating A Sitemap Preview 15:24

Creating A Sitemap 2 Preview 06:11

Tips For Getting Started Preview 04:33

2: EXPLORE & ITERATE - Wireframes, Prototyping, and Feedback 1 lectures

Getting Ready For This Section Preview 00:33

Wireframes 6 lectures

What Is A Wireframe? Preview 06:51

How To Create A Wireframe Preview 06:43

Wireframes In FIgma Preview 05:13

Creating Our Home Page Preview 16:57

Creating A Product Page Preview 12:19

Creating A Checkout Page Preview 10:56

Prototyping 6 lectures

Prototyping Basics In Figma Preview 11:32

Prototyping Basics In Figma 2 Preview 07:31

Prototyping Basics In Figma 3 Preview 05:32

Prototyping Basics In Figma 4 Preview 10:00

Linking Together A Quick User Flow Preview 11:00

Working On Small Interactions Preview 11:50

Feedback 2 lectures

Why Is Feedback Important? Preview 04:18

Constructive Feedback Preview 06:48

3: VISUAL DESIGN - Design Theory + Accessibility 1 lectures

Getting Ready For This Section Preview 00:45

Spacing And The Grid 5 lectures

What Is A Grid? Preview 04:03

Grid Basics Preview 05:56

Responsive Grids And Breakpoints Preview 07:36

Making Our Grid In Figma Preview 08:51

Grid Guidelines Preview 04:51

Typography 8 lectures

Serifs Preview 03:21

Sans Serifs Preview 03:41

Display & Mono Preview 04:38

Picking Typefaces Preview 01:39

Choosing Typefaces For A Project Preview 10:12

Choosing Typefaces For A Project 2 Preview 10:00

Choosing Typefaces For A Project 3 Preview 11:46

Creating Our Own Type System Preview 11:13

Color 7 lectures

Color Schemes Preview 03:53

Important Questions To Ask Preview 02:44

Creating Color Palettes Preview 02:55

Creating A Monochromatic Color Palette Preview 05:07

Applying Our Color Palette Preview 11:57

Expanding A Strict Color Palette Preview 07:07

Creating Our Own Color Palette Preview 11:33

Forms + UI Elements 13 lectures

What Are Forms + UI Elements? Preview 04:19

Best Practices For Forms Preview 14:53

Best Practices For Inputs Preview 04:47

Best Practices For Inputs 2 Preview 07:47

Best Practices For Inputs 3 Preview 03:11

Best Practices For Inputs 4 Preview 07:42

Best Practices For Buttons Preview 06:38

Creating Components In Figma Preview 04:04

Using Atomic Elements Preview 06:59

Using Instances In Figma Preview 03:28

Editing Instances Preview 05:04

Responsive Components Preview 05:05

Creating A Registration Form In Figma Preview 19:09

Visual Assets 6 lectures

Visual Assets Introduction Preview 03:37

Working With Photos In Figma Preview 18:01

Working With Photos In Figma 2 Preview 08:49

Working With Illustrations In Figma Preview 13:56

Figma Plugins And Icons Preview 08:56

Custom Icons Preview 13:15

Accessibility 5 lectures

What Is Accessibility? Preview 02:30

Assistive Technologies Preview 02:51

Visual Patterns For Accessibility Preview 04:30

Tools To Make Your Design Accessible Preview 06:24

Visual Patterns For Accessibility Part 2 Preview 06:42

4: DESIGN EXPLORATION - Application Design + Design Systems 1 lectures

Getting Ready For This Section Preview 00:43

Design Patterns 5 lectures

What Are Design Patterns Preview 06:00

Why Are Design Patterns Valuable Preview 02:24

How To Apply Design Patterns Preview 04:29

Analyzing Design Patterns Preview 05:39

Dissecting And Choosing Design Patterns Preview 06:13

Mobile Design 2 lectures

Mobile Design Best Practices Preview 06:58

Mobile Design Best Practices 2 Preview 11:10

Visual Style + Exploration 5 lectures

Design Fidelity Preview 08:01

Style Exploration Preview 12:05

Style Exploration 2 Preview 16:10

Style Exploration 3 Preview 12:57

Style Exploration 4 Preview 14:36

Motion 4 lectures

The Importance Of Motion Preview 07:03

The Purpose Of Motion Preview 07:56

Intro To Smart Animate Preview 14:13

The Power Of Smart Animate Preview 10:14

Microinteractions 6 lectures

What Is A Microinteraction? Preview 10:23

Why Microinteractions Are Important Preview 09:14

Creating Our Own Microinteraction Preview 08:46

Creating Our Own Microinteraction 2 Preview 10:17

Using Figmotion Preview 11:10

Using Figmotion 2 Preview 11:49

5: PUTTING IT ALL TOGETHER – Design Systems and Final Compositions 1 lectures

Getting Ready For This Section Preview 00:34

Design Systems 11 lectures

What Is A Design System? Preview 04:04

Foundation - Color Preview 06:30

Foundation - Grids + Spacing Preview 04:13

Foundation - Iconography Preview 04:40

Foundation - Typography Preview 06:50

Components - Button Preview 11:26

Components - Inputs Preview 09:34

Components - Cards Preview 14:11

Recipes - Vertical Cards Preview 10:25

Recipes - Search Preview 13:07

Recipes - Order List Preview 11:00

Final Compositions 7 lectures

Using Our Design System Preview 11:58

Using Our Design System 2 Preview 09:31

Using Our Design System 3 Preview 09:33

Final Prototypes Preview 07:11

Final Prototypes 2 Preview 06:58

Final Prototypes 3 Preview 06:38

Final Prototypes 4 Preview 13:02

Working With A Client Revisited 8 lectures

Design Resources Preview 00:17

The Product Alignment Canvas Preview 05:02

Project Goals Preview 08:30

Target Users Preview 08:39

User Journey Map Preview 10:22

Risky Assumptions Preview 04:32

What is a User Story Map? Preview 05:56

Creating a User Story Map Preview 07:40

Where To Go From Here? 8 lectures

Is Bruno Happy? Preview 01:11

Project Handoff Preview 03:41

Next Step: Project Handoff Preview 00:36

Learning Guideline Preview 00:10

Become An Alumni Preview 00:37

LinkedIn Endorsements Preview 00:39

Course Review

The Final Challenge

Web Portfolio 4 lectures

Design Resources Preview 00:16

How To Export And Place Designs Preview 09:51

Content For Your Portfolio Preview 10:57

Where To Host Your Web Portfolio Preview 04:58

From Figma To Website: Building Our Landing Page 4 lectures

Quick Note: Upcoming Videos Preview 00:19

Initial Setup - Figma Handoff Preview 12:57

Build UI - Adding Image Assets Preview 09:24

Build UI - Styling Image Assets Preview 09:17

Extra: How The Internet Works 10 lectures

Quick Note: Upcoming Videos Preview 00:11

Browsing the Web Preview 06:00

Breaking Google Preview 02:59

Exercise: Break Google Yourself Preview 00:32

The Internet Backbone Preview 05:29

Traceroute Preview 02:24

Exercise: Running traceroute Preview 00:53

DEVELOPER FUNDAMENTALS: I Preview 03:08

What Does A Developer Do? Preview 01:39

Web Developer Monthly Preview 00:21

Extra: History Of The Web 6 lectures

WWW vs Internet Preview 03:30

HTML, CSS, Javascript Preview 05:04

DEVELOPER FUNDAMENTALS: II Preview 02:55

Developer History Preview 03:08

Exercise: Adding CSS and JavaScript to Tim's website Preview 00:21

Optional Resource: More About the History of the Web Preview 00:10

Extra: HTML 5 21 lectures

Build Your First Website Preview 07:48

Resources: Your Text Editor Preview 00:57

DEVELOPER FUNDAMENTALS: III Preview 03:31

Quick Note About w3schools Preview 00:14

How To Ask Questions Preview 01:03

HTML Tags Preview 08:39

HTML Tags 2 Preview 01:49

Self Closing HTML Tags Preview 05:34

Anchor Tag Preview 04:52

Q&A: index.html Preview 02:05

Q&A: Relative vs Absolute Path Preview 03:46

HTML Forms Preview 10:57

HTML Forms 2 Preview 03:09

Submitting A Form Preview 08:18

HTML Tags 3 Preview 03:51

HTML vs HTML 5 Preview 06:38

Copy A Website Preview 02:26

HTML Challenge Preview 01:07

HTML Lesson Files Preview 00:36

Exercise: HTML Quiz Preview 00:24

Optional Exercise: More HTML Preview 01:05

Extra: CSS 3 23 lectures

Exercise Files: Code-Along Preview 00:13

Your First CSS Preview 13:48

CSS Properties Preview 10:31

CSS Selectors Preview 16:28

Optional Exercise: CSS Selectors Preview 00:28

Text and Font Preview 07:37

Images In CSS Preview 04:15

Box Model Preview 05:06

px vs em vs rem Preview 03:03

Optional: PX, EM, REM, %, VW, and VH Preview 00:23

Exercise: CSS Quiz Preview 00:22

Critical Render Path Preview 04:04

Exercise File: Code-Along Images Preview 00:16

Flexbox Preview 08:29

Optional Exercise: Flexbox Froggy Preview 00:17

CSS 3 Preview 08:24

Optional Exercise: Mastering Transitions and Transforms Preview 00:14

Responsive UI Preview 01:40

Image Gallery Files Preview 00:08

Exercise: Robot Animation Preview 00:55

Exercise: Robot Animation Starter Files Preview 00:36

Solution: Robot Animation Preview 00:16

Optional Exercise: CSS Preview 01:13

Extra: Bootstrap, Templates, And Building Your Startup Landing Page 20 lectures

Evolving Technology Preview 04:47

Bootstrap Introduction Preview 03:59

Bootstrap Preview 08:51

Bootstrap 5 Update Preview 04:18

Bootstrap Grid Preview 05:18

Free Resources For Our Project Preview 00:13

Exercise: Startup Landing Page Preview 00:54

Exercise: Startup Landing Page 2 Preview 03:58

Exercise: Startup Landing Page 3 Preview 08:23

Exercise: Startup Landing Page 4 Preview 08:25

Exercise: Startup Landing Page 5 Preview 11:33

Exercise: Adding Email Subscribe Form With MailChimp Preview 09:21

Quick Note: Upcoming Videos Preview 00:22

Exercise: Putting Your Website Online Preview 05:48

Exercise: Putting Your Website Online 2 Preview 02:50

Quick Note: Upcoming Video Preview 00:28

DEVELOPER FUNDAMENTALS: IV Preview 07:15

Using Templates Preview 03:18

Resources for FREE Templates Preview 00:21

Startup Landing Pages by Students Preview 00:30

Extra: CSS Grid + CSS Layout 17 lectures

Section Overview Preview 01:50

CSS Grid vs Flexbox vs Bootstrap Preview 04:40

Quick Note: Upcoming Video Preview 00:19

CSS Grid 1 Preview 07:55

CSS Grid 2 Preview 04:14

CSS Grid 3 Preview 06:25

CSS Grid 4 Preview 07:07

CSS Grid 5 Preview 01:56

Optional Exercise: CSS Grid Preview 00:15

Exercise: CSS Layout Preview 03:37

Solution: Navigation Bar Preview 08:37

Solution: Navigation Bar 2 Preview 04:22

Solution: Cover Preview 04:41

Solution: Project Grid + Footer Preview 08:54

Quick Note: Upcoming Video Preview 00:16

Solution: Prettify Preview 06:59

The Truth About CSS Preview 03:51

BONUS SECTION 1 lectures

Bonus Lecture Preview 00:15