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

Go to class Write review

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

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.