UI/UX Design for Developers
Design interfaces that feel inevitable: then build them
What you'll be able to do
- Run a user-centered design process end to end
- Create wireframes, prototypes, and design systems in Figma
- Apply visual hierarchy, typography, and color
- Test designs with users and iterate on feedback
Before you start
- An eye for detail and willingness to iterate
- No coding required
- Access to a design tool (Figma is free)
Level 1 ·Design Fundamentals
Visual Design Principles
Colour theory, typography, spacing, visual hierarchy, and contrast.
- Learn UI Design Blog: Steve Schogerarticlefree
- Refactoring UI (book by Tailwind creators)coursepaid
- Google Fonts Knowledgearticlefree
- Apply 60-30-10 colour rule
- Type scale with a modular ratio
- Before/after redesign of a bad UI
Figma: Complete Mastery
Components, auto layout, variables, prototyping, and design system setup.
- Auto layout responsive component
- Component variants & props
- Prototype with interactive overlays
UX Research & User Psychology
Heuristics, Gestalt principles, user interviews, affinity mapping, and usability testing.
- Nielsen Norman Group Articles (free)articlefree
- Google UX Design Certificate (Coursera)coursefree
- Conduct a 3-participant usability test
- Heuristic evaluation of an existing app
- Affinity map from user interviews
Level 2 ·Interaction Design & Systems
Design Systems & Atomic Design
Atoms → molecules → organisms → pages: build a reusable component library.
- Atomic Design by Brad Frost (free book)docfree
- Storybook Docsdocfree
- Figma component library with tokens
- Storybook with 10+ documented components
- Dark mode token system
Micro-interactions & Motion Design
Purposeful animation, feedback loops, and Framer Motion implementation.
- Framer Motion Docsdocfree
- Emil Kowalski: Animations on the Webcoursepaid
- Page transition with layout animations
- Shared element transition
- Gesture-driven drag interaction
Accessibility (a11y) in Design
WCAG 2.2, colour contrast, keyboard nav, ARIA patterns, and screen reader testing.
- The A11y Project Checklistdocfree
- web.dev: Accessibilitycoursefree
- Audit your design with aXe DevTools
- Fix all WCAG AA colour contrast issues
- Navigate your app with keyboard only
Level 3 ·Design-to-Code & Portfolio
Building Design Systems with Tailwind & shadcn/ui
Translate Figma designs to production-ready React components.
- shadcn/ui Docsdocfree
- Tailwind CSS Docsdocfree
- Figma → Tailwind design token mapping
- CVA variant system for components
- Publish component library to npm
Portfolio & UX Case Studies
Write compelling case studies: problem → process → outcome. Build a portfolio site.
- 3 case studies with problem + process + metrics
- Portfolio site shipped with custom domain
- At least one before/after with measurable outcome
Frequently asked
Is the UI/UX Design for Developers roadmap free?+
Yes. The entire UI/UX Design for Developers roadmap and every curated resource is free to follow on Commit. You can track your progress, keep a daily streak, and earn a shareable certificate at no cost — there is no paywall.
How long does the UI/UX Design for Developers roadmap take to complete?+
About 120 hours of focused study across 8 courses and 3 stages. At roughly one hour a day that is about 4 months; you can move faster by studying more each day.
Do I get a certificate for finishing the UI/UX Design for Developers roadmap?+
Yes. When you complete the roadmap on Commit you receive a verifiable certificate of completion that you can add to LinkedIn and your public Commit profile as proof of what you finished.
Related roadmaps
Make it stick
Copy this roadmap into Commit and turn it into a tracked program with a streak graph, study logging, and a shareable certificate when you finish. Free forever.
Start UI/UX Design for Developers free