Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

UI/UX Product Design Bootcamp

via Zero To Mastery

Overview

Go from beginner to hired as a UI/UX Designer this year! This is the only design bootcamp you need to learn and master web design, mobile design, Figma, UI & UX, and HTML + CSS.
  • Build beautifully designed web and mobile projects for your customers using modern tools used by top companies
  • Immediate access to 100+ assets and premium design templates that you can keep and use to customize all your future projects
  • Learn Figma from scratch for all types of design needs and then how to convert your designs into a live HTML and CSS website
  • Master both Web design and Mobile design principles and how to go from sketching to fully-fledged high fidelity designs that will wow customers
  • Learn design best practices and expert tips & tricks that would take you years to learn working full-time
  • Learn UI/UX best practices using the latest trends in the industry

Syllabus

  •   Introduction
    • Complete UI/UX Product Design Bootcamp: Zero to Mastery
    • Course Outline
    • Exercise: Meet Your Classmates and Instructor
    • Understanding Your Video Player
    • Meeting The Client
    • The 2 Paths
    • Exercise: Building Your Logo
    • Cheatsheet
    • Design Resources
    • Designer vs Developer
    • Skills To Be A Top Designer
    • Set Your Learning Streak Goal
  •   Sketching
    • Resources For This Section
    • Introduction To Sketching
    • The Sketching Process
    • Sketching User Flows
    • Sketching User Flows 2
    • Sketching User Flows 3
    • Sketching User Flows 4
    • Sketching Tips
    • Let's Have Some Fun (+ Free Resources)
  •   Inspiration
    • Resources For This Section
    • How To Stay Inspired
    • How To Find Inspiration
  •   The Basics of Figma
    • Resources For This Section
    • Intro to Figma: Introduction
    • Intro to Figma: Where to use Figma
    • Figma UI: File Browser
    • Figma UI: Files
    • Figma UI: Toolbar
    • Figma UI: Left Sidebar
    • Figma UI: Right Sidebar
    • Shapes and Tools: Working with Containers
    • Shapes and Tools: Basic Shapes and Boolean Operations
    • Designing in Figma: Images
    • Designing in Figma: Getting Started with Text
    • Designing in Figma: Constraints
    • Designing in Figma: Using Auto Layout
    • Resources and Collaboration: Community Files
    • Resources and Collaboration: Community Plugins
    • Resources and Collaboration: Sharing and Comments
    • What We Are Going to Learn
    • Exercise: Create a Quick Logo Using Shapes
    • Exercise: Autolayout Buttons
    • Exercise: Responsive Navigation
    • Exercise: Responsive Text
    • Exercise: Imagery and Gradients
    • Exercise: Layout and Responsiveness
    • Assignment: Create Complex Interactive Components
  •   User Flows
    • Resources For This Section
    • User Flows Explained
    • The DOs and DON'Ts
    • What We Are Going To Build
    • Reusable User Flow Assets
    • User Flows in Figma (Onboarding)
    • User Flows in Figma (Search)
    • Course Check-In
  •   Sitemaps
    • Resources For This Section
    • Introduction To Sitemaps
    • Creating A Basic Sitemap
    • What We Are Going To Learn
    • Reusable Sitemap Assets
    • Figma Check In (Basic Components and Variants)
    • Sitemaps in Figma (The Top Layer)
    • Sitemaps in Figma (Digging Deeper)
    • Sitemaps in Figma (Digging Deeper Cont.)
    • Tips for Creating Great Sitemaps
    • Implement a New Life System
  •   Wireframes
    • Resources For This Section
    • What Is A Wireframe?
    • How To Create A Wireframe
    • What We Are Going To Learn
    • Figma Check In (Basic Button Component)
    • Figma Check In (Variants)
    • How To Use Our Wireframe Components
    • Wireframes (Home)
    • Wireframes (Cart)
    • Wireframes (Profile)
  •   Prototyping
    • Resources For This Section
    • What We Are Going to Learn
    • Figma Check In (Prototyping in Figma - Intro)
    • Prototyping in Figma (Flows and Starting Points)
    • Prototyping in Figma (Connections)
    • Prototyping in Figma (Interactions)
    • Prototyping in Figma (Animations)
    • Prototyping in Figma (Prototype Settings)
    • Prototyping in Figma (Prototype Presentation)
    • Project (Navigation)
    • Project (Removing an Item from Your Wishlist)
    • Project (Finding a Product)
    • Exercise: Imposter Syndrome
  •   Feedback
    • Resources For This Section
    • Constructive Feedback
    • Feedback Drives Better Design
    • Recap: What Did We Learn?
  •   Spacing and Grids
    • Resources For This Section
    • What Is A Grid?
    • Grid Basics
    • What We Are Going to Learn
    • Figma Check In (Fixed and Fluid Grids)
    • Figma Check In (Breakpoints)
    • Figma Check In (Grid Style)
    • Project (Mobile Layout Grid)
    • Project (Desktop Layout Grids)
    • Simple Rules to Follow
  •   Typography
    • Resources For This Section
    • Serifs
    • Sans Serifs
    • Display & Mono
    • Picking Typefaces
    • What We Are Going to Learn
    • Figma Check In (Text Properties)
    • Exercise (Elevating a Brand)
    • Exercise (Typeface Scenarios)
    • Exercise (Google Fonts)
    • Project (Typeface Exploration)
    • Project (Pairing Font Families)
    • Project (Headings, Body and Labels)
    • Project (Typeface System)
    • Figma Check In (Text Styles)
  •   Color
    • Resources For This Section
    • Color Schemes
    • Important Questions To Ask
    • Creating Color Palettes
    • What We Are Going to Learn
    • Figma Check In (Paints)
    • Exercise (Expanding Upon a Strict Color Palette)
    • Exercise (Creating a Color Palette)
    • Figma Check In (Color Styles)
    • Exercise (Using Color Styles)
    • Project (Primary and Neutrals)
    • Project (Accents)
  •   Imagery and Iconography
    • Resources For This Section
    • Visual Assets Introduction
    • What We Are Going to Learn
    • Figma Check In (Image Plugins)
    • Figma Check In (Image Styles)
    • Figma Check In (Masks)
    • Exercise (Image Exploration)
    • Exercise (Text and Imagery Working Together)
    • Figma Check In (Illustration Plugins)
    • New Exercise (Adding Illustrations to Your Designs)
    • Figma Check In (Icon Plugins)
    • Figma Check In (Pen Tool)
    • Exercise (Custom Icons with the Pen Tool)
  •   Forms and UI Elements
    • Resources For This Section
    • What Are Forms + UI Elements?
    • What We Are Going to Learn
    • Best Practices (Forms)
    • Best Practices (Basic and Advanced Inputs)
    • Best Practices (Inputs)
    • Best Practices (Buttons)
    • Figma Check In (Component Properties)
    • Properties vs. Variants
    • Figma Check In (Button Component Properties)
    • Figma Check In (Button Variants)
    • Figma Check In (Combining Components)
    • Figma Check In (Form Component Possibilities)
    • Project (Registration Flow Part 1)
    • Project (Registration Flow Part 2)
    • Project (Registration Flow Part 3)
  •   Accessibility
    • Resources For This Section
    • What Is Accessibility?
    • Assistive Technologies
    • Visual Patterns For Accessibility
    • Tools To Make Your Design Accessible
    • Visual Patterns For Accessibility Part 2
  •   Design Patterns
    • Resources For This Section
    • What Are Design Patterns
    • Why Are Design Patterns Valuable
    • How To Apply Design Patterns
    • Analyzing Design Patterns
    • Dissecting And Choosing Design Patterns
  •   Mobile Design
    • Resources For This Section
    • Mobile Design Best Practices Part 1
    • Mobile Design Best Practices Part 2
  •   Visual Style and Exploration
    • Resources For This Section
    • What We Are Going to Learn
    • Design Fidelity
    • Visual Exploration (Navigation)
    • Visual Exploration (Buttons)
    • Figma Check In (Effect Styles)
    • Visual Exploration (Product Cards)
    • Visual Exploration (Text Cards)
    • Screen Design (Home)
    • Screen Design (Product Page)
  •   Motion in UX Design
    • Resources For This Section
    • Misconceptions of Motion Design
    • Motion Supports Usability
    • Narrative and Mental Models
    • What is a Microinteraction?
    • The Structure of a Microinteraction
    • Not Every Element is a Microinteraction!
    • How Microinteractions Impact User Experiences
    • What We Are Going To Learn
    • Figma Check In (Intro to Smart Animate)
    • Figma Check In (Smart Animate Properties)
    • Exercise (Parallax)
    • Exercise (New Message)
    • Exercise (Overlays)
    • Figma Check In (Interactive Components)
    • Exercise (Interactive Buttons)
    • Project (Parallax Welcome Screen)
    • Project (Drag Onboarding)
    • Project (Cart Overlay)
    • Project (Button Microinteraction)
  •   Design Systems
    • Resources For This Section
    • What We Are Going to Learn
    • Foundational Styles and Components vs. Product Specific Components
    • Building Fidelity and Organizing Potential Components and Styles
    • Foundational Styles and Components
    • Components (Buttons)
    • Components (Cards)
    • Components (Headers)
    • Components (Inputs)
    • Components (List Items)
    • Components (Navigation)
    • Components (Misc. Elements)
  •   Execution
    • Resources For This Section
    • What We Are Going to Learn
    • Working Towards Our Final Designs
    • Execution (Introduction Screen)
    • Execution (Onboarding Screens)
    • Execution (Registration Screens)
    • Execution (Home Screen)
    • Execution (Wishlist Screens)
    • Execution (Profile Screen)
    • Execution (Cart and Checkout)
    • Prototypes (Registration)
    • Prototypes (Adding to Cart)
    • Prototypes (Checkout)
    • Prototypes (Lottie Files Plugin)
    • Prototypes (Search and Filters)
  •   Working With A Client Revisited
    • Resources For This Section
    • The Product Alignment Canvas
    • Project Goals
    • Target Users
    • User Journey Map
    • Risky Assumptions
    • What is a User Story Map?
    • Creating a User Story Map
  •   Where To Go From Here?
    • Is Bruno Happy?
    • Project Handoff
    • Next Step: Project Handoff
    • Thank You!
    • 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
    • Content For Your Portfolio
    • Where To Host Your Web Portfolio
  •   From Figma To Website: Building Our Landing Page
    • Quick Note: Upcoming Videos
    • Initial Setup - Figma Handoff
    • Build UI - Adding Image Assets
    • Build UI - Styling Image Assets
  •   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

Taught by

Andrei Neagoie and Daniel Schifano

Reviews

Start your review of UI/UX Product Design Bootcamp

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.