UI Design Learning Path

I. Foundations of Design

1. Design Thinking Basics

   • What is UI vs UX vs Product Design
   • Double Diamond Model (Discover–Define–Develop–Deliver)
   • Understanding Human-Centered Design

2. Visual Design Principles

   • Gestalt principles (proximity, similarity, continuity)
   • Balance, hierarchy, contrast, rhythm
   • Cognitive load & Hick’s Law in UI

3. Color & Psychology Basics

   • Color psychology in branding
   • Accessibility in color choices
   • Color harmony & contrast ratios

4. Typography Foundations

   • Anatomy of type (x-height, ascenders, descenders)
   • Readability vs legibility
   • Choosing typefaces for different brands

---

II. Tools & Setup

1. Figma (Core Tool for 2025)

   • Frames, constraints, autolayout
   • Components, variants, styles
   • Figma plugins for UI design

2. Other Helpful Tools

   • FigJam (collaboration, wireframes)
   • Whimsical/Miro (flows & ideation)
   • AI tools (Uizard, Galileo AI) for design inspiration

---

III. UI Design Fundamentals

1. Layout & Composition

   • Grids, spacing, rhythm
   • Responsive design principles
   • Using white space effectively

2. Consistency & Design Systems

   • What is a design system?
   • Tokens (colors, typography, spacing)
   • Intro to Material Design & Human Interface Guidelines

3. UI Components & States

   • Buttons, inputs, modals, navigation
   • States (default, hover, active, disabled, error)
   • Micro-interactions (animations, transitions)

4. Imagery & Iconography

   • Icon styles & best practices
   • Choosing stock images & illustrations
   • AI-generated assets (when & how to use safely)

---

IV. Advanced UI Topics

1. Design for Platforms

   • Mobile-first design
   • iOS vs Android differences
   • Web apps vs mobile apps vs desktop apps

2. Accessibility in Practice

   • WCAG basics
   • ARIA labels in UI
   • Testing with screen readers

3. Motion & Interaction Design

   • Animation principles (ease-in, bounce, timing)
   • Micro animations in Figma
   • Lottie files for real apps

4. Dark Mode & Theming

   • Designing for multiple themes
   • Color contrast in dark mode
   • Brand-based theming systems

---

V. From Design to Development

1. Prototyping

   • Click-through prototypes in Figma
   • High-fidelity vs low-fidelity
   • Testing designs with real users

2. Developer Handoff

   • Figma inspect panel
   • Exporting assets
   • Writing design documentation

3. Working with Developers

   • Design tokens & component libraries
   • How developers implement your designs
   • Collaboration best practices

---

VI. Career & Portfolio

1. Building a Portfolio

   • Case study structure (problem → process → solution → impact)
   • Redesign projects (apps, websites, dashboards)
   • How to write about your process

2. Job Readiness

   • UI design interviews & whiteboard challenges
   • Freelancing vs full-time design
   • Networking & building personal brand (Dribbble, Behance, LinkedIn)

3. Continuous Learning

   • Following design trends
   • UI challenge platforms (DailyUI, Frontend Mentor)
   • Books: Don’t Make Me Think, Refactoring UI, The Design of Everyday Things