Course Curriculum
Introduction
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Inspiration
Available in
days
days
after you enroll
The Basics of Figma
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Sitemaps
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Spacing and Grids
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Design Patterns
Available in
days
days
after you enroll
Mobile Design
Available in
days
days
after you enroll
Visual Style and Exploration
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
- 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
Available in
days
days
after you enroll
Where To Go From Here?
Available in
days
days
after you enroll
Web Portfolio
Available in
days
days
after you enroll
From Figma To Website: Building Our Landing Page
Available in
days
days
after you enroll
Bonus: How The Internet Works
Available in
days
days
after you enroll
Bonus: History Of The Web
Available in
days
days
after you enroll
Bonus: HTML 5
Available in
days
days
after you enroll
Bonus: CSS 3
Available in
days
days
after you enroll
Bonus: Bootstrap, Templates, And Building Your Startup Landing Page
Available in
days
days
after you enroll
Bonus: CSS Grid + CSS Layout
Available in
days
days
after you enroll