UI Design Roadmap — Step-by-step Learning Path
Visual design: typography, color, layout and design systems
The UI Design roadmap
- Design Foundations — beginner
- Elements of Design (Line, Shape, Form, Space) — beginner
- Principles of Design (Balance, Contrast, Hierarchy) — beginner
- Alignment, Repetition & Proximity — beginner
- Gestalt Principles — beginner
- Visual Hierarchy — beginner
- Color Theory — beginner
- The Color Wheel & Color Relationships — beginner
- Color Psychology in UI — beginner
- Building a Color Palette — beginner
- Color Accessibility & Contrast — beginner
- Dark Mode Design Considerations — intermediate
- Typography — beginner
- Typeface Anatomy — beginner
- Choosing & Pairing Fonts — beginner
- Type Scale & Hierarchy — beginner
- Readability (Line Length, Line Height, Letter Spacing) — beginner
- Responsive Typography — intermediate
- Layout & Composition — beginner
- Grid Systems — beginner
- Spacing & Whitespace — beginner
- Alignment & Visual Balance — beginner
- Visual Weight & Emphasis — beginner
- Design Tools: Figma — intermediate
- Figma Interface & Basics — intermediate
- Frames & Auto Layout — intermediate
- Components & Variants — intermediate
- Constraints & Responsive Resizing — intermediate
- Styles (Color, Text, Effect Styles) — intermediate
- Prototyping in Figma — intermediate
- Plugins & Collaboration Features — intermediate
- UI Components & Patterns — intermediate
- Buttons & Form Elements — intermediate
- Navigation Patterns (Nav Bars, Tabs, Menus) — intermediate
- Cards & Lists — intermediate
- Modals & Overlays — intermediate
- Onboarding Patterns — intermediate
- Empty States & Error States — intermediate
- Common Mobile UI Patterns — intermediate
- Iconography & Imagery — intermediate
- Icon Design Principles — intermediate
- Building an Icon System — intermediate
- Using Illustrations & Photography — intermediate
- Image Optimization for UI — intermediate
- Design Systems — advanced
- What Is a Design System? — advanced
- Atomic Design Methodology — advanced
- Building a Component Library — advanced
- Design Tokens — advanced
- Documentation for Design Systems — advanced
- Maintaining & Scaling a Design System — advanced
- Responsive & Adaptive Design — advanced
- Breakpoints & Responsive Grids — advanced
- Mobile-First Design — advanced
- Adaptive vs Responsive Design — advanced
- Designing for Multiple Screen Sizes & Densities — advanced
- Accessibility in UI Design — advanced
- WCAG Basics for Designers — advanced
- Color Contrast & Accessible Palettes — advanced
- Designing for Screen Readers — advanced
- Touch Target Sizing — advanced
- Accessible Form Design — advanced
- Motion & Micro-interactions — advanced
- Principles of Motion Design — advanced
- Easing & Timing — advanced
- Micro-interactions — advanced
- Prototyping Animations in Figma — advanced
- When Motion Helps vs Hurts — advanced
- Design-to-Development Handoff — advanced
- Preparing Files for Handoff — advanced
- Redlining & Specs — advanced
- Working with Developers (Figma Dev Mode) — advanced
- Understanding CSS Basics for Designers — advanced
- Version Control for Design Files — advanced
- UI Design Process & Collaboration — advanced
- Working with UX Research & Wireframes — advanced
- Design Critiques & Feedback — advanced
- Design QA (Reviewing Implemented UI) — advanced
- Stakeholder Presentations — advanced
- Working in Cross-Functional Teams — advanced
- Portfolio & Career Readiness — advanced
- Building a UI Design Portfolio — advanced
- Case Study Writing — advanced
- Presenting Your Design Process — advanced
- Freelance vs Full-Time Considerations — advanced
- Job Search & Interview Prep for UI Designers — advanced
- Case Studies & Capstone — advanced
- Case Study: Redesigning a Mobile App Screen — advanced
- Case Study: Building a Design System from Scratch — advanced
- Case Study: Designing a Landing Page End-to-End — advanced
- Case Study: Accessibility Audit & Remediation — advanced
- Capstone: Complete UI Design Portfolio Project — advanced