Skip to main content

UI/UX Design Course 2026 - From Basics to Advanced

Master UI/UX design from user research and design thinking to Figma mastery, design systems, accessibility, and developer handoff. A complete 12-module professional curriculum covering UX foundations, visual design, prototyping, usability testing, and portfolio building. Learn to design real products from scratch!

12
Modules
62
Hours
105
Topics
12
Projects
🎯

Who This Course Is For

For aspiring product designers, developers improving their design eye, and product managers who work with design teams. UX is one of the fastest-growing tech roles globally.

📋

Prerequisites

No coding required. Curiosity about user behavior and design aesthetics is the main prerequisite.

First published May 2024 · Updated 2026

What You'll Learn

  • UX foundations, design thinking, and user-centered design
  • User research methods — interviews, personas, and journey mapping
  • Visual design — color theory, typography, and spacing systems
  • Figma mastery — components, Auto Layout, variants, and Dev Mode
  • Design systems — tokens, component libraries, and Atomic Design
  • Accessibility and inclusive design (WCAG 2.2)
  • Usability testing, A/B testing, and UX metrics
  • Product thinking, developer handoff, and career preparation

Career Opportunities

UX Designer
UI Designer
Product Designer
Interaction Designer
UX Researcher
Design System Designer
Start Learning Now

Course Modules Overview

1
UX Foundations & Design Thinking

8 topics

2
User Research & Insights

8 topics

3
User Flows, Journey Maps & Information Architecture

8 topics

4
UI Design Foundations — Color, Typography & Space

9 topics

5
Layout, Grids & Responsive Design

8 topics

6
Wireframing & Prototyping

9 topics

7
Mastering Figma

10 topics

8
Design Systems

9 topics

9
Component Design & Interaction Design

9 topics

10
Accessibility & Inclusive Design

8 topics

11
Usability Testing & UX Metrics

9 topics

12
Product Thinking, Developer Handoff & Career

9 topics

Keep Learning!

Complete all 12 modules to unlock your course completion certificate

Course Curriculum

12 comprehensive modules covering everything from basics to advanced topics

Beginner (4)Intermediate (4)Advanced (4)
Module 1

UX Foundations & Design Thinking

Build your UX foundation — learn design thinking, user-centered design, the Double Diamond model, and set up your Figma workspace.

Beginner5 hours
UI vs UX vs Product DesignDesign Thinking — The 5-Stage FrameworkUser-Centered Design PrinciplesThe Double Diamond ModelDesign Roles & Team StructureDesign Literacy for Non-DesignersDesign Ethics & Dark PatternsIntroduction to Figma Workspace
Start Module
Module 2

User Research & Insights

Master user research — learn to plan studies, conduct interviews, build personas, and turn raw data into actionable design decisions.

Beginner5 hours
Research Planning & ScreenersUser Interviews — Scripting & FacilitationSurveys & Quantitative ResearchQualitative vs Quantitative DataAffinity Mapping & SynthesisUser Personas — Creation & UsageJobs-to-be-Done FrameworkCompetitive & Heuristic Analysis
Start Module
Module 3

User Flows, Journey Maps & Information Architecture

Structure information and map user journeys — learn IA, navigation design, task flows, journey maps, and service blueprints.

Beginner5 hours
Information Architecture FundamentalsCard Sorting & Tree TestingNavigation Systems — Global, Local & ContextualSitemaps & Content OrganizationUser Task FlowsUser Journey MappingService BlueprintsMental Models & Wayfinding
Start Module
Module 4

UI Design Foundations — Color, Typography & Space

Master the visual building blocks — color theory, typography, spacing systems, and visual hierarchy for interface design.

Beginner5 hours
Design Principles — Contrast, Hierarchy, Alignment & ProximityColor Theory for UI — Hue, Saturation & LightnessColor Systems & Palettes — Primary, Secondary & SemanticColor Psychology in Product DesignTypography FundamentalsType Scales & Modular TypeSpacing Systems — 4pt & 8pt GridWhite Space as a Design ElementVisual Weight & Balance
Start Module
Module 5

Layout, Grids & Responsive Design

Learn layout and grids — master responsive design strategy, mobile-first thinking, breakpoints, and common layout patterns.

Intermediate4.5 hours
Grid Systems — 12-Column, 4-Column & CustomLayout Patterns — F-Pattern, Z-Pattern & Card GridSpacing Systems in PracticeResponsive Design StrategyMobile-First Design PhilosophyBreakpoints & Fluid LayoutsAdaptive vs Responsive DesignLayout Anti-Patterns
Start Module
Module 6

Wireframing & Prototyping

Go from sketch to interactive prototype — learn wireframing at every fidelity level and Figma prototyping techniques.

Intermediate5 hours
The Purpose of WireframingLow-Fidelity Wireframes — Paper & DigitalMid-Fidelity WireframesHigh-Fidelity MockupsFigma Prototyping FundamentalsPrototype Flows & ConnectionsSmart Animate & Component StatesPrototyping for Usability TestingSharing & Presenting Prototypes
Start Module
Module 7

Mastering Figma

Master Figma end-to-end — components, variants, Auto Layout, variables, collaboration workflows, and developer handoff features.

Intermediate6 hours
Figma Workspace & File OrganizationFrames, Groups & LayersFigma Components — Creating, Nesting & DetachingComponent Properties & VariantsAuto Layout — Fundamentals & ResponsiveFigma Variables & Design TokensStyles — Color, Text, Effect & GridCollaboration — Comments, Multiplayer & BranchingFigma Plugins EcosystemDev Mode & Inspect Panel
Start Module
Module 8

Design Systems

Build a production-ready design system — from design tokens and Atomic Design to component libraries, documentation, and code integration.

Intermediate5.5 hours
What is a Design System & Why It MattersDesign Tokens — Color, Spacing, Typography & RadiusComponent Library ArchitectureAtomic Design MethodologyBuilding Core Components in FigmaComponent Documentation & Usage GuidelinesDesign System GovernanceVersion Control for DesignIntegrating with Storybook & Code
Start Module
Module 9

Component Design & Interaction Design

Design production-quality components — buttons, forms, cards, states, micro-interactions, and animation principles.

Advanced5 hours
UI Component AnatomyDesigning Buttons — Hierarchy, States & VariantsForm Design Best PracticesCards, Lists & Data DisplayEmpty States, Loading States & Error StatesMicro-interactions & Their PurposeInteraction States — Hover, Active, Focus & DisabledGesture Design for MobileAnimation Principles for UI
Start Module
Module 10

Accessibility & Inclusive Design

Make your designs accessible to everyone — master WCAG 2.2, color contrast, keyboard navigation, screen readers, and inclusive design.

Advanced5 hours
Why Accessibility is Non-NegotiableWCAG 2.2 — The Four Principles (POUR)Color Contrast Requirements — AA vs AAATypography AccessibilityKeyboard Navigation & Focus ManagementScreen Reader Design ConsiderationsAccessible Forms & Error HandlingInclusive Design Beyond Disability
Start Module
Module 11

Usability Testing & UX Metrics

Validate your designs with real users — learn usability testing, A/B testing, UX metrics, analytics tools, and stakeholder communication.

Advanced5 hours
Types of Usability TestingModerated vs Unmoderated TestingCreating Test Plans & TasksRemote Testing Tools — Maze & UserTestingAnalyzing Test ResultsA/B Testing FundamentalsUX Metrics — HEART Framework, NPS & Task SuccessAnalytics for Designers — Hotjar, Mixpanel & GA4Communicating Findings to Stakeholders
Start Module
Module 12

Product Thinking, Developer Handoff & Career

Think like a product designer — learn feature prioritization, developer handoff, design specs, portfolio building, and interview preparation.

Advanced5 hours
Product Thinking for DesignersFeature Prioritization — RICE & MoSCoWProblem Framing & Opportunity MappingDesign QA & Pixel-Perfect HandoffWriting Design SpecsDeveloper Handoff in FigmaDark Mode & ThemingBuilding a Winning PortfolioDesign Interview Preparation
Start Module

Your Learning Roadmap

Follow this structured path — from first concepts to production-ready mastery

🌱
Step 01 · Beginner

Learn UX foundations, user research, information architecture, and visual design principles

⚡
Step 02 · Intermediate

Master Figma, wireframing, prototyping, layout systems, and design systems

🚀
Step 03 · Advanced

Build production components, accessibility, usability testing, and career preparation

Tools & Technologies

Essential tools you'll master during this course

Figma

Industry-standard collaborative design tool

Design & Prototyping

Miro

Online whiteboard for journey maps & brainstorming

Whiteboarding

Maze

Remote usability testing platform

Usability Testing

Hotjar

Heatmaps, recordings & user behavior analytics

Analytics

Storybook

Component documentation & testing environment

Component Dev

Stark

Accessibility checker Figma plugin

Accessibility

Ready to Start Learning?

Begin your journey with Module 1 and build your skills step by step. Completely free, no registration required.

Start Learning Now

Related Free Courses

Continue your learning journey with these related courses — all 100% free

HTML Course

Implement your designs

Learn Free

CSS Course

Styling and animations

Learn Free

React.js Course

Build interactive UIs

Learn Free

JavaScript Course

Add interactivity

Learn Free