UI/UX Design Learning Roadmap

The UI/UX Designer roadmap, step by step

6 stages and 60 topics, about 28 weeks in all. It starts at beginner level with Design Fundamentals and Principles and ends at advanced level with Design Systems and Component Libraries. It prepares you for roles such as UI Designer, UX Designer, Product Designer.

1. 1

   Stage 1: Design Fundamentals and Principles

   3 weeks, Beginner, 10 topics

   Build a strong foundation in visual design principles, color theory, typography, and layout techniques that form the basis of all great design

   • Visual HierarchyLearn how to arrange and prioritize design elements so users naturally focus on the most important content first.
     • Size, color, contrast, and spacing are the primary tools for establishing visual hierarchy
     • F-pattern and Z-pattern describe common eye-scanning behaviors on web pages
     • Progressive disclosure reveals information gradually to prevent cognitive overload
     • Effective hierarchy ensures users can quickly identify calls to action and key content
   • Typography FundamentalsMaster type selection, pairing, sizing, and spacing to create readable and visually appealing text layouts.
     • Serif and sans-serif fonts convey different moods and suit different contexts
     • A clear typographic scale (sizes, weights, line heights) ensures consistency across a design
     • Line length (measure) and line spacing (leading) significantly affect readability
     • Limit font choices to 2-3 per project and ensure they complement each other
   • Color TheoryUnderstand color relationships, palettes, and psychological associations to create effective and accessible color schemes.
     • The color wheel and relationships (complementary, analogous, triadic) guide palette creation
     • Color psychology influences user perception and emotional responses to designs
     • Ensure sufficient contrast ratios (WCAG AA: 4.5:1 for text) for accessibility
     • Use a 60-30-10 rule for primary, secondary, and accent color distribution
   • Layout & CompositionLearn grid systems, whitespace usage, and compositional techniques to create balanced, organized designs.
     • Grid systems provide structure and consistency across pages and screens
     • Whitespace (negative space) improves readability and draws attention to key elements
     • The rule of thirds and golden ratio offer compositional frameworks for balanced layouts
     • Responsive grids adapt layouts to different screen sizes while maintaining visual harmony
   • Gestalt PrinciplesUnderstand how the human brain groups and interprets visual elements using proximity, similarity, closure, and continuity.
     • Proximity: elements close together are perceived as a related group
     • Similarity: elements sharing visual attributes (color, shape, size) are seen as belonging together
     • Closure: the brain completes incomplete shapes, enabling minimalist iconography and logos
     • Continuity: the eye follows smooth paths, useful for guiding users through sequential content
   • Balance, Contrast & Alignment(recommended)Apply the core design principles of balance, contrast, and alignment to create polished, professional layouts.
     • Symmetrical balance creates formal, stable layouts while asymmetrical balance feels dynamic and modern
     • Contrast in size, color, or weight creates visual interest and directs attention
     • Consistent alignment (left, center, or grid-based) creates visual cohesion and professionalism
   • Iconography & Imagery(recommended)Learn best practices for selecting, creating, and using icons and images to enhance clarity and visual appeal.
     • Icons should be recognizable, consistent in style, and paired with labels for clarity
     • Use a consistent icon set (outlined or filled, not mixed) throughout a product
     • High-quality imagery supports the brand message and improves user engagement
   • Design Thinking Intro(recommended)Get introduced to the design thinking methodology: empathize, define, ideate, prototype, and test.
     • Design thinking is a human-centered, iterative process for solving complex problems
     • The five stages (empathize, define, ideate, prototype, test) are non-linear and often revisited
     • Empathy with real users is the foundation for creating solutions that address genuine needs
   • Mood Boards & Style Tiles(optional)Create mood boards and style tiles to explore and communicate visual direction before committing to full designs.
     • Mood boards collect colors, textures, images, and typography to establish a design direction early
     • Style tiles bridge the gap between mood boards and full mockups by defining key visual elements
     • These artifacts facilitate stakeholder alignment before investing time in high-fidelity designs
   • Design History & Trends(optional)Explore the evolution of design movements from Bauhaus to modern digital design and emerging trends.
     • Understanding design history helps contextualize current trends and avoid repeating past mistakes
     • Movements like Bauhaus, Swiss Design, and Flat Design each addressed specific cultural and technological needs
     • Staying aware of emerging trends (glassmorphism, neumorphism, AI-generated design) keeps skills relevant

   Projects for this stage

   • Style Guide: Create a basic style guide with color palette, typography scale, and spacing system for a fictional brand
   • Poster Design: Design an event poster applying visual hierarchy, contrast, and alignment principles
2. 2

   Stage 2: Wireframing and Prototyping

   4 weeks, Beginner, 10 topics

   Learn to translate ideas into wireframes, user flows, and interactive prototypes that communicate design intent clearly

   • Low-Fidelity WireframesCreate quick, rough sketches that focus on layout, content placement, and information hierarchy without visual detail.
     • Low-fidelity wireframes focus on structure, not aesthetics, enabling fast iteration
     • Use boxes, lines, and placeholder text to represent content areas and functionality
     • They are ideal for early stakeholder discussions since they invite feedback without attachment to visuals
     • Keep them deliberately rough to encourage constructive critique and exploration
   • User FlowsMap out the step-by-step paths users take to complete tasks, identifying decision points and potential drop-offs.
     • User flows visualize the sequence of screens and actions needed to complete a goal
     • Identify entry points, decision nodes, and exit paths for every key user journey
     • Use standard flowchart symbols (rectangles for screens, diamonds for decisions) for clarity
     • Optimizing user flows reduces friction and improves task completion rates
   • Information ArchitectureOrganize and structure content so users can find information intuitively through clear labeling and logical grouping.
     • Information architecture defines how content is organized, labeled, and connected within a product
     • Sitemaps provide a bird's-eye view of the content structure and page hierarchy
     • Clear labeling and categorization reduce cognitive load and help users navigate efficiently
     • Card sorting and tree testing validate IA decisions with real users
   • High-Fidelity MockupsCreate pixel-perfect, visually complete designs that represent the final look and feel of the product.
     • High-fidelity mockups include final colors, typography, images, and spacing
     • They serve as the primary reference for developers during implementation
     • Include responsive variants showing how the design adapts to different screen sizes
     • Annotation and specification overlays communicate interaction details to engineering teams
   • Interactive PrototypingBuild clickable, animated prototypes that simulate real product interactions for user testing and stakeholder review.
     • Interactive prototypes connect screens with transitions, hotspots, and conditional logic
     • They allow testing real user interactions before any code is written
     • Start simple with basic click-through flows, then add micro-interactions and animations
     • Prototype fidelity should match the question being tested: low for concepts, high for usability
   • Navigation Patterns(recommended)Learn common navigation patterns for web and mobile including tab bars, hamburger menus, breadcrumbs, and sidebars.
     • Tab bars work best for mobile apps with 3-5 primary sections
     • Hamburger menus hide navigation, reducing discoverability but saving screen space
     • Breadcrumbs help users understand their location in deep content hierarchies
   • Responsive Wireframing(recommended)Design wireframes that adapt to multiple screen sizes, planning how layouts reflow from desktop to mobile.
     • Define breakpoints (mobile, tablet, desktop) and plan content priority for each
     • Mobile-first wireframing forces you to prioritize the most essential content
     • Flexible grids and fluid images ensure layouts adapt smoothly between breakpoints
   • Paper Prototyping(recommended)Use paper sketches and cutouts to quickly test ideas and gather user feedback before going digital.
     • Paper prototypes are the fastest way to visualize and test interaction concepts
     • They eliminate tool-learning barriers and encourage broad creative exploration
     • Facilitators manually swap paper screens to simulate navigation during user tests
   • Storyboarding(optional)Visualize user journeys as sequential narratives to communicate context, emotions, and pain points to stakeholders.
     • Storyboards illustrate the user's environment, motivations, and interactions with a product
     • They help teams empathize with users and understand the full context of a problem
     • Storyboards are especially effective for communicating user scenarios to non-design stakeholders
   • Rapid Prototyping Tools(optional)Explore tools beyond Figma and XD for rapid prototyping, including Framer, ProtoPie, and Principle.
     • Framer enables code-backed prototypes with real data and complex interactions
     • ProtoPie specializes in multi-device and sensor-driven prototyping beyond screen taps
     • Choose prototyping fidelity based on the specific question you need to answer

   Projects for this stage

   • Mobile App Wireframes: Design a complete set of wireframes for a task management mobile application
   • Interactive Prototype: Build a clickable prototype of an e-commerce checkout flow with realistic interactions
3. 3

   Stage 3: Figma Essentials

   3 weeks, Intermediate, 10 topics

   Master Figma as your primary design tool, from basic interface navigation to advanced component systems and collaboration

   • Figma Interface & ToolsNavigate Figma's interface including the toolbar, layers panel, properties panel, and master keyboard shortcuts.
     • Master the toolbar (frame, shape, pen, text tools) and properties panel for efficient design
     • Learn essential keyboard shortcuts (V, F, R, T, Ctrl/Cmd+D) to speed up your workflow
     • Understand the difference between pages, frames, and groups for file organization
     • Use constraints and layout grids to create responsive designs within frames
   • Frames, Layers & GroupsUnderstand Figma's hierarchy of frames, layers, and groups, and how they affect layout, constraints, and exports.
     • Frames are the primary container in Figma, supporting constraints, auto layout, and clipping
     • Groups simply combine elements while frames define their own coordinate space and properties
     • Layer naming conventions and organization are critical for team collaboration and handoff
     • Use sections to organize large canvases into logical areas within a page
   • Auto LayoutUse Figma's auto layout feature to create responsive, flexible designs that adapt to content changes automatically.
     • Auto layout arranges child elements in rows or columns with configurable spacing and padding
     • Resizing modes (fixed, hug, fill) control how elements respond to content and container changes
     • Nested auto layouts create complex, responsive component structures like cards and navigation bars
     • Absolute positioning within auto layout frames allows overlay elements like badges and icons
   • Components & VariantsCreate reusable components with multiple variants, properties, and states for scalable, consistent design systems.
     • Components define a single source of truth; instances inherit changes from the main component
     • Variants group related component states (size, style, state) into a single component set
     • Component properties (boolean, text, instance swap) make variants more flexible without combinatorial explosion
     • Consistent naming conventions (Type/Size/State) enable intuitive component discovery for teams
   • Prototyping in FigmaBuild interactive prototypes with transitions, smart animate, overlays, and scroll behaviors directly in Figma.
     • Connections link frames with triggers (click, hover, drag) and transition animations
     • Smart Animate automatically interpolates between matching layers for smooth transitions
     • Overlays and modals are created using the 'Open Overlay' action with manual positioning
     • Scrollable frames and horizontal carousels add realistic content browsing to prototypes
   • Design Tokens(recommended)Define and manage design tokens (colors, spacing, typography) as reusable variables for consistent theming.
     • Design tokens abstract visual values (colors, spacing, radii) into named, reusable variables
     • Figma variables support modes for light/dark themes and responsive breakpoints
     • Token aliasing (semantic tokens referencing primitive tokens) enables flexible theming
   • Figma Plugins(recommended)Extend Figma's functionality with plugins for content generation, accessibility checking, and workflow automation.
     • Content Reel and Unsplash plugins populate designs with realistic placeholder content
     • Accessibility plugins (Stark, A11y) check contrast ratios and color blindness compatibility
     • Icon plugins provide instant access to icon libraries like Phosphor, Feather, and Material icons
   • Collaborative Workflows(recommended)Work effectively in teams using Figma's real-time collaboration, comments, branching, and sharing features.
     • Real-time multiplayer editing allows designers to work simultaneously on the same file
     • Comments and annotations streamline feedback loops with stakeholders and developers
     • Branching enables parallel design exploration without disrupting the main file
   • Dev Mode & Handoff(optional)Use Figma's Dev Mode to streamline design-to-code handoff with inspect tools, measurements, and code snippets.
     • Dev Mode provides developers with CSS, iOS, and Android code snippets for selected elements
     • Inspect panel shows spacing, sizing, colors, and typography values in developer-friendly formats
     • Ready for Dev markers signal which designs are approved for implementation
   • Figma to Code(optional)Explore tools and workflows for converting Figma designs into production-ready code using plugins and external tools.
     • Tools like Anima and Locofy generate React, Vue, or HTML/CSS from Figma designs
     • Generated code often requires manual cleanup but accelerates initial development
     • Well-structured Figma files with consistent naming produce significantly better code output

   Projects for this stage

   • Component Library: Build a reusable UI component library with buttons, inputs, cards, and navigation components using variants and auto layout
   • App Redesign: Redesign an existing mobile application using Figma's prototyping and component features
4. 4

   Stage 4: Adobe XD Fundamentals

   3 weeks, Intermediate, 10 topics

   Learn Adobe XD for UI design, prototyping, and animation, leveraging Adobe Creative Cloud integrations

   • XD Interface & ArtboardsNavigate Adobe XD's workspace, tools, and artboard system for creating multi-screen designs efficiently.
     • XD uses artboards to represent individual screens, with preset sizes for common devices
     • The Design and Prototype modes separate static design work from interaction configuration
     • Pasteboard area allows organizing multiple artboards for complex multi-screen projects
     • Keyboard shortcuts (R, E, L, T, A) speed up switching between common drawing tools
   • Repeat GridUse XD's Repeat Grid feature to quickly create lists, galleries, and repeating UI patterns with dynamic data.
     • Repeat Grid duplicates elements in rows or columns with adjustable spacing
     • Drag data (images, text files) onto repeat grids to populate them with realistic content
     • Editing one cell automatically updates all repeated elements for consistent changes
     • Ungroup repeat grids when you need individual control over specific cells
   • Components & StatesCreate reusable components with multiple states (hover, active, disabled) for consistent, interactive design systems.
     • Main components serve as the source of truth; instances inherit updates automatically
     • States (default, hover, active, toggled) define different visual appearances for interactions
     • Override instance properties (text, images, visibility) without breaking the component link
     • Nested components create complex UI patterns like navigation bars and card lists
   • Animations & TransitionsCreate smooth auto-animate transitions and micro-interactions that bring XD prototypes to life.
     • Auto-Animate interpolates property changes (position, size, opacity, rotation) between artboards
     • Name layers consistently across artboards for Auto-Animate to correctly match and animate elements
     • Easing curves (ease-in, ease-out, bounce) control animation feel and timing
     • Combine drag triggers with Auto-Animate for swipe gestures and carousel interactions
   • XD PrototypingWire artboards together with triggers, transitions, and overlays to create interactive prototypes for user testing.
     • Connect artboards using interaction triggers (tap, drag, time, voice) in Prototype mode
     • Overlays create modals, tooltips, and slide-out panels without duplicating entire screens
     • Share prototypes with stakeholders via public links with optional commenting enabled
     • Preview prototypes on actual devices using the XD mobile app for realistic testing
   • Adobe Creative Cloud Integration(recommended)Leverage Adobe ecosystem integrations to bring assets from Photoshop, Illustrator, and After Effects into XD.
     • Import Illustrator vectors and Photoshop layers directly into XD while preserving editability
     • Adobe Fonts provides access to thousands of typefaces synced across all Creative Cloud apps
     • Creative Cloud Libraries enable sharing colors, styles, and assets across Adobe applications
   • XD Plugins(recommended)Extend Adobe XD's capabilities with plugins for content generation, UI kits, animations, and developer handoff.
     • UI Faces and Content Generator plugins populate designs with realistic placeholder data
     • Export plugins generate code, specs, and assets for developer handoff
     • Animation plugins extend XD's motion capabilities beyond built-in Auto-Animate
   • Responsive Resize(recommended)Use XD's responsive resize feature to automatically adapt designs to different screen sizes and orientations.
     • Responsive Resize intelligently adjusts element positions and sizes when artboards are resized
     • Pin elements to edges or center to control how they reposition during resize
     • Manual constraints override automatic behavior for precise responsive control
   • Voice Prototyping(optional)Create voice-controlled prototypes in XD using speech playback and voice triggers for conversational UI design.
     • Voice triggers respond to spoken keywords to navigate between artboards
     • Speech playback provides audio feedback as part of the prototype interaction
     • Voice prototyping enables testing conversational interfaces and accessibility scenarios
   • 3D Transforms in XD(optional)Apply 3D perspective transforms to elements in XD for creating depth, card flips, and immersive design effects.
     • 3D transforms rotate elements along X and Y axes to create perspective and depth
     • Combined with Auto-Animate, 3D transforms enable card flip and rotation animations
     • Use 3D sparingly to enhance visual interest without compromising usability

   Projects for this stage

   • Dashboard Design: Design an analytics dashboard with charts, data tables, and interactive filtering in Adobe XD
   • Animated Prototype: Create a mobile app prototype with auto-animate transitions and micro-interactions
5. 5

   Stage 5: User Research and Testing

   4 weeks, Intermediate, 10 topics

   Learn research methodologies to understand user needs, validate design decisions, and measure usability through systematic testing

   • User InterviewsConduct structured and semi-structured interviews to uncover user needs, pain points, and behavioral patterns.
     • Open-ended questions encourage participants to share detailed experiences and motivations
     • Avoid leading questions that suggest a preferred answer or confirm existing assumptions
     • Active listening and follow-up probes reveal deeper insights beyond surface-level responses
     • Recruit 5-8 participants per user segment for qualitative interview studies
   • Surveys & QuestionnairesDesign and distribute surveys to gather quantitative data on user preferences, satisfaction, and behavior at scale.
     • Mix Likert scales, multiple choice, and open-ended questions for balanced quantitative and qualitative data
     • Keep surveys focused and short (under 10 minutes) to maximize completion rates
     • SUS (System Usability Scale) and NPS (Net Promoter Score) are standardized benchmarking tools
     • Avoid double-barreled questions that ask about two things at once
   • Usability TestingPlan, conduct, and analyze usability tests where real users attempt tasks to reveal design problems and opportunities.
     • Task-based scenarios test whether users can accomplish specific goals with the design
     • Think-aloud protocol asks participants to verbalize their thought process during tasks
     • 5 participants typically uncover about 85% of usability problems in a given design
     • Document findings with severity ratings to prioritize which issues to fix first
   • User PersonasCreate evidence-based persona profiles that represent key user segments to guide design decisions and team alignment.
     • Personas synthesize research data into relatable user archetypes with goals, frustrations, and behaviors
     • Base personas on real research data rather than assumptions to avoid stereotyping
     • Include demographic context, goals, pain points, and preferred technology in each persona
     • Primary personas drive core design decisions; secondary personas inform edge cases
   • Competitive AnalysisSystematically evaluate competitor products to identify strengths, weaknesses, and opportunities for differentiation.
     • Evaluate 4-6 direct and indirect competitors across features, usability, and design quality
     • Create comparison matrices to identify patterns, gaps, and differentiation opportunities
     • Heuristic evaluation of competitor UIs reveals common patterns and innovative solutions
     • Document findings visually with annotated screenshots and feature comparison tables
   • A/B Testing(recommended)Design and run controlled experiments comparing two design variants to determine which performs better with real users.
     • Test one variable at a time to isolate the factor causing performance differences
     • Statistical significance (typically 95% confidence) determines when results are reliable
     • Sample size calculators help determine how many users are needed for meaningful results
   • Card Sorting & Tree Testing(recommended)Use card sorting to discover how users categorize information and tree testing to validate navigation structures.
     • Open card sorts let users create their own categories, revealing natural mental models
     • Closed card sorts validate a predefined category structure with user input
     • Tree testing measures findability by asking users to locate items in a text-based hierarchy
   • Heatmaps & Analytics(recommended)Analyze user behavior quantitatively using heatmaps, scroll maps, and analytics tools to identify UX patterns and issues.
     • Click heatmaps reveal where users tap or click most and least frequently on a page
     • Scroll maps show how far users scroll, indicating content engagement and drop-off points
     • Session recordings provide qualitative context for quantitative analytics patterns
   • Diary Studies(optional)Collect longitudinal, in-context user data by asking participants to log their experiences over days or weeks.
     • Diary studies capture real-world usage patterns over time that lab studies cannot replicate
     • Structured prompts and regular reminders improve participant compliance and data quality
     • They are especially valuable for understanding habitual behaviors and long-term adoption
   • Remote User Testing(optional)Conduct unmoderated and moderated usability tests remotely using specialized platforms and video conferencing tools.
     • Unmoderated remote tests allow participants to complete tasks on their own time and devices
     • Moderated remote tests use video calls for real-time observation and follow-up questions
     • Remote testing provides access to geographically diverse and representative user populations

   Projects for this stage

   • Usability Study: Plan and conduct a usability study for an existing product, documenting findings and recommendations
   • Research Report: Create a comprehensive UX research report including personas, journey maps, and competitive analysis
6. 6

   Stage 6: Design Systems and Component Libraries

   3 weeks, Advanced, 10 topics

   Build scalable, maintainable design systems with documented component libraries, design tokens, and governance processes

   • Design System FoundationsUnderstand what design systems are, why they matter, and how to plan and structure one from the ground up.
     • A design system is a collection of reusable components, guidelines, and standards for consistent product design
     • Start with an audit of existing patterns to identify inconsistencies and duplication
     • Design principles serve as the decision-making framework guiding all system choices
     • Successful systems balance flexibility with consistency to support diverse product needs
   • Component ArchitectureDesign a scalable component hierarchy from atoms (buttons, inputs) to organisms (headers, forms) using atomic design principles.
     • Atomic design organizes components into atoms, molecules, organisms, templates, and pages
     • Component APIs (props, variants, slots) determine flexibility and ease of use for consumers
     • Composable components that combine smaller pieces are more maintainable than monolithic ones
     • Naming conventions should be intuitive, consistent, and aligned between design and code
   • Design Tokens & VariablesDefine a token architecture with primitive, semantic, and component-level tokens for scalable theming.
     • Primitive tokens define raw values (colors, sizes) while semantic tokens give them contextual meaning
     • Token aliasing (e.g., color-primary references blue-600) enables theme switching without redesigning components
     • Figma variables and CSS custom properties keep tokens synchronized between design and code
     • A well-structured token hierarchy enables light/dark themes, multi-brand support, and responsive sizing
   • Documentation StandardsCreate comprehensive documentation covering usage guidelines, do's and don'ts, code examples, and accessibility notes for every component.
     • Each component should document its purpose, anatomy, variants, states, and usage guidelines
     • Include do's and don'ts with visual examples to prevent common misuse patterns
     • Code snippets and live examples bridge the gap between design documentation and implementation
     • Versioning and changelog documentation track how components evolve over time
   • Accessibility in Design SystemsBake accessibility into every component with proper color contrast, keyboard navigation, ARIA attributes, and screen reader support.
     • All interactive components must be fully keyboard navigable with visible focus indicators
     • Color contrast must meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text)
     • ARIA roles, labels, and live regions ensure screen readers convey component meaning and state
     • Include accessibility annotations in design specs to communicate requirements to developers
   • Multi-Brand Systems(recommended)Architect design systems that support multiple brands or products through theming layers and token abstraction.
     • Separate brand-specific tokens from structural tokens to enable theme switching
     • Core components remain the same while brand themes override colors, typography, and spacing
     • Token modes in Figma allow previewing different brand themes within the same component
   • Design System Governance(recommended)Establish contribution models, review processes, and decision-making frameworks for sustainable design system growth.
     • Federated models balance centralized quality control with distributed team contributions
     • Contribution guidelines define how teams propose, review, and merge new components
     • Regular design system office hours and communication channels drive adoption and feedback
   • Developer Handoff(recommended)Streamline the design-to-development workflow with clear specifications, token mapping, and collaborative handoff practices.
     • Design tokens should map directly to code variables (CSS custom properties, theme objects)
     • Component specs should include spacing, sizing, responsive behavior, and interaction states
     • Regular design-engineering sync meetings reduce misinterpretation and rework
   • Measuring DS Adoption(optional)Track design system usage, coverage, and impact through analytics, surveys, and component adoption metrics.
     • Component coverage measures what percentage of product UI uses design system components
     • Developer satisfaction surveys reveal friction points in using the design system
     • Time-to-build metrics show whether the design system accelerates product development
   • Open Source Design Systems(optional)Study leading open source design systems like Material Design, Carbon, and Polaris to learn best practices and patterns.
     • Material Design, Carbon (IBM), and Polaris (Shopify) demonstrate different approaches to design systems
     • Studying existing systems reveals proven component APIs, token structures, and documentation patterns
     • Open source systems provide excellent starting points for building custom design systems

   Projects for this stage

   • Design System: Create a complete design system with tokens, foundational elements, and complex components including documentation
   • Multi-brand Theme: Extend a design system to support multiple brand themes using design tokens and variable modes