This repository is an internal learning roadmap designed to help developers build, improve, and mature their visual culture in the age of AI-assisted development.
The goal is not to turn developers into designers, but to help them develop visual judgment, restraint, and system thinking so they can build clearer, more coherent products — with or without AI.
AI has made execution cheaper and faster.
What remains valuable is:
- Taste
- Hierarchy
- Restraint
- System coherence
- Product clarity
These are visual skills — and they can be learned by developers.
This roadmap provides a structured, time-boxed way to do exactly that.
This roadmap exists to help developers build the visual culture required to:
- Kickstart projects without waiting for design
- Make reasonable, defensible visual decisions while building
- Handle simple and medium-complexity UI independently
- Collaborate with designers as reviewers and guides, not prerequisites
In modern teams, designers can already build simple applications using AI and low-code tools, bringing developers in only when complexity demands it.
This roadmap enables the same flexibility in the opposite direction.
Developers should be able to:
- Design simple layouts and flows responsibly
- Apply spacing, typography, and hierarchy with restraint
- Build interactive prototypes and small products end-to-end
- Seek designer input for critique, refinement, or complex UX — not to unblock basic work
This is not about replacing designers. It is about reducing unnecessary dependency and increasing team autonomy.
Designers remain essential for:
- Product vision
- Brand systems
- Complex UX problems
- Visual critique and refinement
Visual culture allows developers to start. Design expertise helps teams finish well.
Developers already understand the functional and technical constraints of building software:
- performance implications
- data structures and edge cases
- platform limitations
- long-term maintainability
When developers also have strong visual culture, they can contribute meaningfully during the design phase, not only during implementation.
This allows developers to:
- flag unrealistic design assumptions early
- suggest alternative patterns that preserve intent while reducing complexity
- help designers make decisions that scale better in code
- bridge the gap between visual intent and technical reality
This does not diminish the role of designers.
Instead, it creates a shared foundation where:
- designers make better-informed design decisions
- developers provide higher-quality, design-aware feedback
- both roles collaborate earlier and more effectively
Visual culture gives developers the vocabulary to collaborate — not just execute.
This roadmap is organized into phases, not tracks.
Everyone eventually completes the same phases. The only difference is where you start.
- Start at Phase One
- Optionally skim Phase Zero
- Start at Phase Zero
- Then continue sequentially
| Phase | Description |
|---|---|
| Phase Zero | Core visual literacy (layout, spacing, hierarchy) |
| Phase One | Visual re-activation & judgment training |
| Phase Two | Design systems & constraint-based thinking |
| Phase Three | Interaction & motion discipline |
| Exercises | Monthly reverse-engineering & application |
roadmaps/phase-zero.mdroadmaps/phase-one.mdroadmaps/phase-two.mdroadmaps/phase-three.mdroadmaps/exercises.md
These tools are used throughout the roadmap:
- Chrome DevTools
- CSS Overview panel
- VisBug
- Visual spacing, alignment, and layout inspection
- WhatFont
- Quick typography inspection
- Optional:
- CSS Scan
- Polypane / Sizzy (multi-viewport testing)
Use these for daily and weekly analysis:
- Stripe
- Vercel
- Linear
- Notion
- Shopify
- Intercom
- Webflow
Avoid inspiration-only galleries for daily practice. Prefer real, inspectable production UI.
- Refactoring UI — Adam Wathan & Steve Schoger
- The Non-Designer’s Design Book — Robin Williams
- Design Systems — Alla Kholmatova
- Practical Typography (online, free)
- Daily: 10–15 minutes
- Weekly: 1–2 hours
- Monthly: 2–3 hours (Exercises)
This roadmap is designed to fit into real work schedules.
This roadmap is not about making things “look pretty”.
It is about learning to ask:
- Is this coherent?
- Is this intentional?
- Is this restrained?
- Is this system-driven?
These are skills AI does not reliably have.
A visually literate developer does.
This roadmap is informed by widely recognized practices in design systems, UX research, and cross-functional product teams. The phases and exercises are not arbitrary — they align with how modern teams build visual quality, reduce friction, and scale collaboration.
Below are selected references that influenced specific parts of this learning path.
Nielsen Norman Group — Visual Hierarchy in UI Design
https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
Nielsen Norman Group — Visual Design: Glossary https://www.nngroup.com/articles/visual-design-cheat-sheet/
- Provides a clear definition of visual hierarchy in UX
- Explains how hierarchy guides user attention via color, scale, and contrast
- Supports Phase Zero and Phase One practices by grounding hierarchy in recognized UX principles
Nielsen Norman Group — UX Basics: Study Guide
https://www.nngroup.com/articles/ux-basics-study-guide/
- Lists essential UX fundamentals useful for developers learning visual and interaction basics
- Reinforces core design thinking principles that complement visual literacy training
- Supports Phase Zero and Phase One practices by grounding them in basic UX concepts
Smashing Magazine — Design Systems Handbook
https://www.smashingmagazine.com/design-systems-book/
- Supports Phase Two (Design Systems Upgrade)
- Emphasizes consistency, reuse, and constraints
- Validates token-first, system-first thinking
Design Tokens for Non-Designers — UX Collective
https://uxdesign.cc/design-tokens-for-non-designers-f68b8b0fbf0a
- Explains design tokens in accessible terms for designers and developers
- Reinforces token-first workflows
- Aligns with defining constraints before building components
Material Design 3 — Motion Overview
https://m3.material.io/styles/motion/overview/how-it-works
- Supports Phase Three (Interaction & Motion Discipline)
- Frames motion as a tool for feedback and hierarchy
- Reinforces clarity and restraint over decorative animation
Nielsen Norman Group — The Role of Animation in UX
https://www.nngroup.com/articles/animation-purpose-ux/
- Supports purposeful motion usage (Phase Three)
- Explains how motion should communicate state change and feedback
- Reinforces motion as a UX tool, not decoration
Sparkbox — Design System Maturity Model (Ben Callahan)
https://sparkbox.com/foundry/design_system_maturity_model
- Supports the collaboration philosophy behind the roadmap by framing design systems as a cross-discipline effort
- Reinforces shared ownership between design and engineering as systems mature
- Validates early, cross-functional involvement and continuous improvement over time
Google Design — Airbnb Invites You In (Design Characteristics) https://design.google/library/airbnb-invites-you-in
- Captures Airbnb’s guiding design characteristics (e.g., unified, universal, iconic, conversational)
- Reinforces principle-led design thinking over surface-level visuals
- Supports the monthly reverse-engineering exercises (extract principles, don’t copy UI)
This roadmap reflects:
- Visual literacy research
- Deliberate practice models
- Modern design system practices
- Proven collaboration patterns in product teams
The goal is not to turn developers into designers, but to equip them with the visual culture needed to:
- initiate work independently
- collaborate earlier and more effectively
- make better design decisions during development