UI/UX Design Principles

Understand what UX and UI design actually mean, how they differ, and how a repeatable design process turns a vague idea into a tested product.

• 1.1 What Is UX and What Is UI?
  Preview 18:40
• 1.2 The Double Diamond and Design Thinking
  32:15
• 1.3 Roles on a Product Design Team
  24:50
• 1.4 Setting Up Your Figma Workspace
  21:30
• 1.5 Exercise: Audit a Product You Use Daily
  42:00

Learn how to gather and synthesize evidence about your users so design decisions are grounded in real needs rather than assumptions.

• 2.1 Qualitative vs Quantitative Research
  36:10
• 2.2 Planning and Running User Interviews
  44:25
• 2.3 Surveys and Analytics as Research Inputs
  29:50
• 2.4 Building Personas and Empathy Maps
  38:15
• 2.5 Exercise: Create a Persona from Interview Notes
  52:20

Organize content and features so users can find what they need, and map the paths they take to complete key tasks.

• 3.1 Principles of Information Architecture
  33:40
• 3.2 Card Sorting and Tree Testing
  31:05
• 3.3 Site Maps and Navigation Models
  27:55
• 3.4 Mapping Task and User Flows
  35:30
• 3.5 Exercise: Map a Checkout Flow
  48:10

Turn flows into screens quickly with sketches and wireframes, and test ideas before investing in polished visuals.

• 4.1 Sketching and Crazy Eights
  26:20
• 4.2 Low-Fidelity Wireframes in Figma
  41:45
• 4.3 Common UI Patterns and Layouts
  34:10
• 4.4 Linking Wireframes into a Clickable Prototype
  38:55
• 4.5 Exercise: Wireframe a Mobile Onboarding Flow
  55:30

Master the building blocks of visual design: color, typography, layout, spacing, and hierarchy that guide the user's eye.

• 5.1 Color Theory and Building Palettes
  39:20
• 5.2 Typography and Type Scales
  42:35
• 5.3 Grids, Layout, and Spacing Systems
  37:50
• 5.4 Visual Hierarchy and Contrast
  33:15
• 5.5 Iconography and Imagery
  28:40
• 5.6 Exercise: Redesign a Screen for Hierarchy
  58:00

Build a scalable design system in Figma using styles, components, and variants so your work stays consistent and reusable.

• 6.1 What Is a Design System?
  25:30
• 6.2 Color, Text, and Effect Styles in Figma
  34:45
• 6.3 Components, Variants, and Auto Layout
  46:20
• 6.4 Tokens and Maintaining a Library
  31:10
• 6.5 Exercise: Build a Button and Form Component Set
  52:50

Design how interfaces respond to users with states, transitions, and microinteractions, and build high-fidelity prototypes in Figma.

• 7.1 Principles of Interaction Design
  30:40
• 7.2 States, Feedback, and Microinteractions
  35:25
• 7.3 Figma Prototyping: Interactions and Transitions
  44:15
• 7.4 Smart Animate and Interactive Components
  40:30
• 7.5 Exercise: Prototype a High-Fidelity App Flow
  62:10

Validate your designs with real users, iterate based on findings, and ensure your interfaces are accessible to everyone under WCAG guidelines.

• 8.1 Planning a Usability Test
  33:00
• 8.2 Moderated and Unmoderated Testing
  36:45
• 8.3 Synthesizing Findings and Iterating
  31:20
• 8.4 Accessibility Foundations and WCAG
  42:30
• 8.5 Designing for Contrast, Keyboard, and Screen Readers
  38:50
• 8.6 Exercise: Run a Test and Fix Accessibility Issues
  56:15

Pull everything together into a complete case study that documents your process and showcases your skills to employers and clients.

• 9.1 Choosing a Capstone Project Brief
  24:10
• 9.2 Structuring a UX Case Study
  32:40
• 9.3 Presenting and Defending Design Decisions
  28:55
• 9.4 Publishing Your Portfolio
  26:30
• 9.5 Capstone: Complete Case Study Submission
  72:00