Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Web & Mobile Designer in 2024: UI/UX, Figma + more
Introduction
Complete Web & Mobile Design: Zero to Mastery (3:16)
Course Outline (7:00)
Exercise: Meet Your Classmates and Instructor
Understanding Your Video Player (notes, video speed, subtitles + more)
Meeting The Client (4:13)
The 2 Paths (1:55)
Exercise: Building Your Logo (1:28)
Cheatsheet
Design Resources
Designer vs Developer (6:53)
Skills To Be A Top Designer (7:06)
Set Your Learning Streak Goal
Sketching
Resources For This Section
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)
Let's Have Some Fun (+ Free Resources)
Inspiration
Resources For This Section
How To Stay Inspired (7:59)
How To Find Inspiration (13:47)
The Basics of Figma
Resources For This Section
Intro to Figma: Education Plans and Signup (1:34)
Intro to Figma: Introduction (0:56)
Intro to Figma: Where to use Figma (0:32)
Figma UI: File Browser (2:20)
Figma UI: Files (1:31)
Figma UI: Toolbar (5:31)
Figma UI: Left Sidebar (4:06)
Figma UI: Right Sidebar (4:24)
Shapes and Tools: Working with Containers (4:38)
Shapes and Tools: Basic Shapes and Boolean Operations (5:41)
Designing in Figma: Images (2:49)
Designing in Figma: Getting Started with Text (4:04)
Designing in Figma: Constraints (2:50)
Designing in Figma: Using Auto Layout (5:59)
Resources and Collaboration: Community Files (1:40)
Resources and Collaboration: Community Plugins (2:42)
Resources and Collaboration: Sharing and Comments (3:24)
What We Are Going to Learn (2:35)
Exercise: Create a Quick Logo Using Shapes (2:15)
Exercise: Autolayout Buttons (5:37)
Exercise: Responsive Navigation (3:07)
Exercise: Responsive Text (4:15)
Exercise: Imagery and Gradients (3:12)
Exercise: Layout and Responsiveness (3:15)
Assignment: Create Complex Interactive Components (1:02)
User Flows
Resources For This Section
User Flows Explained (5:11)
The DOs and DON'Ts (2:27)
What We Are Going To Build (2:06)
Reusable User Flow Assets (6:54)
User Flows in Figma (Onboarding) (10:58)
User Flows in Figma (Search) (8:54)
Course Check-In
Sitemaps
Resources For This Section
Introduction To Sitemaps (1:44)
Creating A Basic Sitemap (4:16)
What We Are Going To Learn (1:18)
Reusable Sitemap Assets (9:32)
Figma Check In (Basic Components and Variants) (8:51)
Sitemaps in Figma (The Top Layer) (5:53)
Sitemaps in Figma (Digging Deeper) (4:39)
Sitemaps in Figma (Digging Deeper Cont.) (7:43)
Tips for Creating Great Sitemaps (3:06)
Implement a New Life System
Wireframes
Resources For This Section
What Is A Wireframe? (6:51)
How To Create A Wireframe (6:43)
What We Are Going To Learn (1:58)
Figma Check In (Basic Button Component) (3:56)
Figma Check In (Variants) (5:34)
How To Use Our Wireframe Components (5:32)
Wireframes (Home) (13:02)
Wireframes (Cart) (7:04)
Wireframes (Profile) (5:47)
Prototyping
Resources For This Section
What We Are Going to Learn (1:19)
Figma Check In (Prototyping in Figma - Intro) (1:56)
Prototyping in Figma (Flows and Starting Points) (5:05)
Prototyping in Figma (Connections) (2:51)
Prototyping in Figma (Interactions) (2:57)
Prototyping in Figma (Animations) (3:30)
Prototyping in Figma (Prototype Settings) (3:12)
Prototyping in Figma (Prototype Presentation) (5:29)
Project (Navigation) (3:40)
Project (Removing an Item from Your Wishlist) (6:16)
Project (Finding a Product) (6:13)
Exercise: Imposter Syndrome (2:56)
Feedback
Constructive Feedback (4:02)
Resources For This Section
Feedback Drives Better Design (2:58)
Recap: What Did We Learn? (1:33)
Spacing and Grids
Resources For This Section
What Is A Grid? (4:03)
Grid Basics (5:56)
What We Are Going to Learn (0:51)
Figma Check In (Fixed and Fluid Grids) (4:32)
Figma Check In (Breakpoints) (5:22)
Figma Check In (Grid Style) (4:28)
Project (Mobile Layout Grid) (6:56)
Project (Desktop Layout Grids) (4:51)
Simple Rules to Follow (6:32)
Typography
Resources For This Section
Serifs (3:21)
Sans Serifs (3:41)
Display & Mono (4:38)
Picking Typefaces (1:39)
What We Are Going to Learn (0:48)
Figma Check In (Text Properties) (7:35)
Exercise (Elevating a Brand) (9:55)
Exercise (Typeface Scenarios) (7:13)
Exercise (Google Fonts) (4:37)
Project (Typeface Exploration) (5:46)
Project (Pairing Font Families) (6:35)
Project (Headings, Body and Labels) (6:35)
Project (Typeface System) (4:29)
Figma Check In (Text Styles) (7:12)
Color
Resources For This Section
Color Schemes (3:53)
Important Questions To Ask (2:44)
Creating Color Palettes (2:55)
What We Are Going to Learn (0:58)
Figma Check In (Paints) (4:59)
Exercise (Expanding Upon a Strict Color Palette) (10:36)
Exercise (Creating a Color Palette) (3:59)
Figma Check In (Color Styles) (6:04)
Exercise (Using Color Styles) (8:20)
Project (Primary and Neutrals) (6:36)
Project (Accents) (6:31)
Imagery and Iconography
Resources For This Section
Visual Assets Introduction (3:37)
What We Are Going to Learn (0:59)
Figma Check In (Image Plugins) (3:15)
Figma Check In (Image Styles) (4:20)
Figma Check In (Masks) (2:39)
Exercise (Image Exploration) (9:07)
Exercise (Text and Imagery Working Together) (8:33)
Figma Check In (Illustration Plugins) (3:49)
New Exercise (Adding Illustrations to Your Designs) (8:05)
Figma Check In (Icon Plugins) (2:20)
Figma Check In (Pen Tool) (5:05)
Exercise (Custom Icons with the Pen Tool) (11:05)
Forms and UI Elements
Resources For This Section
What Are Forms + UI Elements? (4:19)
What We Are Going to Learn (1:53)
Best Practices (Forms) (7:08)
Best Practices (Basic and Advanced Inputs) (5:24)
Best Practices (Inputs) (11:30)
Best Practices (Buttons) (3:52)
Figma Check In (Component Properties) (4:10)
Properties vs. Variants (2:13)
Figma Check In (Button Component Properties) (5:18)
Figma Check In (Button Variants) (5:20)
Figma Check In (Combining Components) (6:25)
Figma Check In (Form Component Possibilities) (6:51)
Project (Registration Flow Part 1) (10:38)
Project (Registration Flow Part 2) (8:24)
Project (Registration Flow Part 3) (6:42)
Accessibility
Resources For This Section
Assistive Technologies (2:51)
What Is Accessibility? (2:30)
Visual Patterns For Accessibility (4:30)
Tools To Make Your Design Accessible (6:24)
Visual Patterns For Accessibility Part 2 (6:42)
Design Patterns
Resources For This Section
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
Resources For This Section
Mobile Design Best Practices Part 1 (6:58)
Mobile Design Best Practices Part 2 (11:10)
Visual Style and Exploration
Resources For This Section
What We Are Going to Learn (1:47)
Design Fidelity (4:57)
Visual Exploration (Navigation) (13:20)
Visual Exploration (Buttons) (8:56)
Figma Check In (Effect Styles) (2:42)
Visual Exploration (Product Cards) (11:10)
Visual Exploration (Text Cards) (8:51)
Screen Design (Home) (13:04)
Screen Design (Product Page) (7:35)
Motion in UX Design
Resources For This Section
Misconceptions of Motion Design (3:36)
Motion Supports Usability (3:20)
Narrative and Mental Models (5:15)
What is a Microinteraction? (1:33)
The Structure of a Microinteraction (1:57)
Not Every Element is a Microinteraction! (2:03)
How Microinteractions Impact User Experiences (4:32)
What We Are Going To Learn (1:41)
Figma Check In (Intro to Smart Animate) (2:07)
Figma Check In (Smart Animate Properties) (3:50)
Exercise (Parallax) (5:21)
Exercise (New Message) (5:13)
Exercise (Overlays) (5:17)
Figma Check In (Interactive Components) (4:43)
Exercise (Interactive Buttons) (7:54)
Project (Parallax Welcome Screen) (5:19)
Project (Drag Onboarding) (7:19)
Project (Cart Overlay) (6:52)
Project (Button Microinteraction) (12:56)
Design Systems
Resources For This Section
What We Are Going to Learn (1:07)
Foundational Styles and Components vs. Product Specific Components (3:44)
Building Fidelity and Organizing Potential Components and Styles (3:28)
Foundational Styles and Components (6:23)
Components (Buttons) (7:18)
Components (Cards) (8:41)
Components (Headers) (6:32)
Components (Inputs) (6:08)
Components (List Items) (4:42)
Components (Navigation) (8:27)
Components (Misc. Elements) (5:41)
Execution
Resources For This Section
What We Are Going to Learn (1:43)
Working Towards Our Final Designs (6:18)
Execution (Introduction Screen) (6:00)
Execution (Onboarding Screens) (10:08)
Execution (Registration Screens) (16:02)
Execution (Home Screen) (10:02)
Execution (Wishlist Screens) (8:14)
Execution (Profile Screen) (10:02)
Execution (Cart and Checkout) (14:50)
Prototypes (Registration) (9:47)
Prototypes (Adding to Cart) (6:06)
Prototypes (Checkout) (5:10)
Prototypes (Lottie Files Plugin) (4:18)
Prototypes (Search and Filters) (7:52)
Working With A Client Revisited
Resources For This Section
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
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
Web Portfolio
Resources For This Section
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
Watch How the Internet Works Section
Bonus: History Of The Web
Watch History of The Web Section
Bonus: HTML 5
Watch HTML Sections
Bonus: CSS 3
Watch CSS Sections
Bonus: Bootstrap, Templates, And Building Your Startup Landing Page
Watch Bootstrap, Templates and Startup Landing Page Section
Bonus: CSS Grid + CSS Layout
Watch CSS Grid + CSS Layout Section
Designer vs Developer
Download