You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete UI/UX Product Design Bootcamp: Zero to Mastery
Introduction
Complete UI/UX Product Design Bootcamp: Zero to Mastery (3:16)
Course Outline (7:00)
Exercise: Meet Your Classmates and Instructor
ZTM Plugin + Understanding Your Video Player
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 (4:15)
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
Resources For This Section
Constructive Feedback (4:02)
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
Components (Navigation)
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures