Autoplay
Autocomplete
Speed
Previous Lecture
Complete and Continue
Complete Web & Mobile Designer in 2022: UI/UX, Figma + more
Introduction
Complete Web & Mobile Design: Zero to Mastery (3:16)
Course Outline (7:00)
Join Our Online Classroom!
Exercise: Meet The Community
How-to's: Speed up videos, Downloading videos, Subtitles
Meeting The Client (4:13)
The 2 Paths (1:55)
Exercise: Building Your Logo (1:28)
Design Resources
Designer vs Developer (6:53)
Skills To Be A Top Designer (7:06)
Section 1: GETTING STARTED - Sketching, Inspiration, User Flows
Getting Ready For This Section
Sketching
Introduction To Sketching (3:27)
The Sketching Process (7:05)
Sketching User Flows (8:05)
Sketching User Flows 2 (5:49)
Sketching User Flows 3 (9:49)
Sketching User Flows 4 (10:02)
Sketching Tips (8:01)
Inspiration
How To Stay Inspired (7:59)
How To Find Inspiration (13:47)
Introduction To Figma
Getting Started With Figma
Introducing Figma (1:49)
Figma Dashboard (5:12)
Figma Tools (5:45)
Layers & Pages (3:22)
The Top Bar (10:27)
Design Properties (11:16)
Prototyping With Figma (3:35)
Exercise: Creating A Responsive Layout (16:43)
User Flows
What Are User Flows? (6:16)
The Do's And Don'ts (4:38)
Speed Up Workflow With Components (6:39)
Creating Our Own User Flows (12:49)
Creating Our Own User Flows 2 (13:10)
Creating Our Own User Flows 3 (13:19)
Endorsements On LinkedIn
Sitemaps
Introduction To Sitemaps (1:44)
Creating A Basic Sitemap (4:16)
Before You Start (7:57)
Creating A Sitemap (15:24)
Creating A Sitemap 2 (6:11)
Tips For Getting Started (4:33)
Section 2: EXPLORE & ITERATE - Wireframes, Prototyping, and Feedback
Getting Ready For This Section
Wireframes
What Is A Wireframe? (6:51)
How To Create A Wireframe (6:43)
Wireframes In FIgma (5:13)
Creating Our Home Page (16:57)
Creating A Product Page (12:19)
Creating A Checkout Page (10:56)
Prototyping
Prototyping Basics In Figma (11:32)
Prototyping Basics In Figma 2 (7:31)
Prototyping Basics In Figma 3 (5:32)
Prototyping Basics In Figma 4 (10:00)
Linking Together A Quick User Flow (11:00)
Working On Small Interactions (11:50)
Feedback
Why Is Feedback Important? (4:18)
Constructive Feedback (6:48)
Section 3: VISUAL DESIGN - Design Theory + Accessibility
Getting Ready For This Section
Spacing and The Grid
What Is A Grid? (4:03)
Grid Basics (5:56)
Responsive Grids And Breakpoints (7:36)
Making Our Grid In Figma (8:51)
Grid Guidelines (4:51)
Typography
Serifs (3:21)
Sans Serifs (3:41)
Display & Mono (4:38)
Picking Typefaces (1:39)
Choosing Typefaces For A Project (10:12)
Choosing Typefaces For A Project 2 (10:00)
Choosing Typefaces For A Project 3 (11:46)
Creating Our Own Type System (11:13)
Color
Color Schemes (3:53)
Important Questions To Ask (2:44)
Creating Color Palettes (2:55)
Creating A Monochromatic Color Palette (5:07)
Applying Our Color Palette (11:57)
Expanding A Strict Color Palette (7:07)
Creating Our Own Color Palette (11:33)
Forms + UI Elements
What Are Forms + UI Elements? (4:19)
Best Practices For Forms (14:53)
Best Practices For Inputs (4:47)
Best Practices For Inputs 2 (7:47)
Best Practices For Inputs 3 (3:11)
Best Practices For Inputs 4 (7:42)
Best Practices For Buttons (6:38)
Creating Components In Figma (4:04)
Using Atomic Elements (6:59)
Using Instances In Figma (3:28)
Editing Instances (5:04)
Responsive Components (5:05)
Creating A Registration Form In Figma (19:09)
Visual Assets
Visual Assets Introduction (3:37)
Working With Photos In Figma (18:01)
Working With Photos In Figma 2 (8:49)
Working With Illustrations In Figma (13:56)
Figma Plugins And Icons (8:56)
Custom Icons (13:15)
Accessibility
What Is Accessibility? (2:30)
Assistive Technologies (2:51)
Visual Patterns For Accessibility (4:30)
Tools To Make Your Design Accessible (6:24)
Visual Patterns For Accessibility Part 2 (6:42)
Section 4: DESIGN EXPLORATION - Application Design + Design Systems
Getting Ready For This Section
Design Patterns
What Are Design Patterns (6:00)
Why Are Design Patterns Valuable (2:24)
How To Apply Design Patterns (4:29)
Analyzing Design Patterns (5:39)
Dissecting And Choosing Design Patterns (6:13)
Mobile Design
Mobile Design Best Practices (6:58)
Mobile Design Best Practices 2 (11:10)
Visual Style + Exploration
Design Fidelity (8:01)
Style Exploration (12:05)
Style Exploration 2 (16:10)
Style Exploration 3 (12:57)
Style Exploration 4 (14:36)
Motion
The Importance Of Motion (7:03)
The Purpose Of Motion (7:56)
Intro To Smart Animate (14:13)
The Power Of Smart Animate (10:14)
Microinteractions
What Is A Microinteraction? (10:23)
Why Microinteractions Are Important (9:14)
Creating Our Own Microinteraction (8:46)
Creating Our Own Microinteraction 2 (10:17)
Using Figmotion (11:10)
Using Figmotion 2 (11:49)
Section 5: PUTTING IT ALL TOGETHER – Design Systems and Final Compositions
Getting Ready For This Section
Design Systems
What Is A Design System? (4:04)
Foundation - Color (6:30)
Foundation - Grids + Spacing (4:13)
Foundation - Iconography (4:40)
Foundation - Typography (6:50)
Components - Button (11:26)
Components - Inputs (9:34)
Components - Cards (14:11)
Recipes - Vertical Cards (10:25)
Recipes - Search (13:07)
Recipes - Order List (11:00)
Final Compositions
Using Our Design System (11:58)
Using Our Design System 2 (9:31)
Using Our Design System 3 (9:33)
Final Prototypes (7:11)
Final Prototypes 2 (6:58)
Final Prototypes 3 (6:38)
Final Prototypes 4 (13:02)
Working With A Client Revisited
The Product Alignment Canvas (5:02)
Project Goals (8:30)
Target Users (8:39)
User Journey Map (10:22)
Risky Assumptions (4:32)
What is a User Story Map? (5:56)
Creating a User Story Map (7:40)
Where To Go From Here?
Is Bruno Happy? (1:11)
Project Handoff (3:41)
Next Step: Project Handoff
Learning Guideline
LinkedIn Endorsements
Become An Alumni
Web Portfolio
How To Export And Place Designs (9:51)
Content For Your Portfolio (10:57)
Where To Host Your Web Portfolio (4:58)
From Figma To Website: Building Our Landing Page
Quick Note: Upcoming Videos
Initial Setup - Figma Handoff (12:57)
Build UI - Adding Image Assets (9:24)
Build UI - Styling Image Assets (9:17)
Bonus: How The Internet Works
Browsing the Web (6:00)
Breaking Google (2:59)
Exercise: Break Google Yourself
The Internet Backbone (5:29)
Traceroute (2:24)
Exercise: Running traceroute
DEVELOPER FUNDAMENTALS: I (3:08)
What Does A Developer Do? (1:39)
Web Developer Monthly
Bonus: History Of The Web
WWW vs Internet (3:30)
HTML, CSS, Javascript (5:04)
DEVELOPER FUNDAMENTALS: II (2:55)
Developer History (3:08)
Exercise: Adding CSS and JavaScript to Tim's website
Optional Resource: More About the History of the Web
Bonus: HTML 5
Build Your First Website (7:48)
Resources: Your Text Editor
DEVELOPER FUNDAMENTALS: III (3:31)
Quick Note About w3schools
How To Ask Questions
HTML Tags (8:39)
HTML Tags 2 (1:49)
Self Closing HTML Tags (5:34)
Anchor Tag (4:52)
Q&A: index.html (2:05)
Q&A: Relative vs Absolute Path (3:46)
HTML Forms (10:57)
HTML Forms 2 (3:09)
Submitting A Form (8:18)
HTML Tags 3 (3:51)
HTML vs HTML 5 (6:38)
Copy A Website (2:26)
HTML Challenge (1:07)
HTML Lesson Files
Exercise: HTML Quiz
Optional Exercise: More HTML
Bonus: CSS 3
Exercise Files: Code-Along
Your First CSS (13:48)
CSS Properties (10:31)
CSS Selectors (16:28)
Optional Exercise: CSS Selectors
Text and Font (7:37)
Images In CSS (4:15)
Box Model (5:06)
px vs em vs rem (3:03)
Optional: PX, EM, REM, %, VW, and VH
Exercise: CSS Quiz
Critical Render Path (4:04)
Exercise File: Code-Along Images
Flexbox (8:29)
Optional Exercise: Flexbox Froggy
CSS 3 (8:24)
Optional Exercise: Mastering Transitions and Transforms
Responsive UI (1:40)
Image Gallery Files
Exercise: Robot Animation (0:55)
Exercise: Robot Animation Starter Files
Solution: Robot Animation
Optional Exercise: CSS
Bonus: Bootstrap, Templates, And Building Your Startup Landing Page
Evolving Technology (4:47)
Bootstrap Introduction (3:59)
Bootstrap (8:51)
Bootstrap 5 Update (4:18)
Bootstrap Grid (5:18)
Free Resources For Our Project
Exercise: Startup Landing Page (0:54)
Exercise: Startup Landing Page 2 (3:58)
Exercise: Startup Landing Page 3 (8:23)
Exercise: Startup Landing Page 4 (8:25)
Exercise: Startup Landing Page 5 (11:33)
Exercise: Adding Email Subscribe Form With MailChimp (9:21)
Quick Note: Upcoming Videos
Exercise: Putting Your Website Online (5:48)
Exercise: Putting Your Website Online 2 (2:50)
Quick Note: Upcoming Video
DEVELOPER FUNDAMENTALS: IV (7:15)
Using Templates (3:18)
Resources for FREE Templates
Startup Landing Pages by Students
Bonus: CSS Grid + CSS Layout
Section Overview (1:50)
CSS Grid vs Flexbox vs Bootstrap (4:40)
Quick Note: Upcoming Video
CSS Grid 1 (7:55)
CSS Grid 2 (4:14)
CSS Grid 3 (6:25)
CSS Grid 4 (7:07)
CSS Grid 5 (1:56)
Optional Exercise: CSS Grid
Exercise: CSS Layout (3:37)
Solution: Navigation Bar (8:37)
Solution: Navigation Bar 2 (4:22)
Solution: Cover (4:41)
Solution: Project Grid + Footer (8:54)
Quick Note: Upcoming Video
Solution: Prettify (6:59)
The Truth About CSS (3:51)
The 2 Paths
Download