Skip to content
Design Academy My progress

Stage 6 · Core · Intermediate

UI design and design systems

Turn wireframes into polished interfaces and build a small design system.

  • 13 lessons
  • about 7 h 5 min of reading and practice
  • in writing

Nothing to track yet. Lessons appear here as they are written.

About this stage

This is where structure becomes a finished interface. You will build a visual language, design the core components every product needs, and document them so the next screen is faster and more consistent than the last.

The stage ends with a guided mini design system: colours, type, spacing, tokens, components, states and documentation.

Before this stage Stage 4: Wireframing and ideation, Stage 5: Figma and design tools

Learning outcomes

  • Translate wireframes into polished UI with a consistent visual language.
  • Design buttons, inputs, cards, navigation, dialogs and menus with all their states.
  • Structure tokens into primitive and semantic layers, including a dark theme.
  • Document a small design system clearly enough for someone else to use.

Lessons

The lessons in this stage are being written. Lessons marked “In writing” are listed so you can see the full scope; they are never counted towards your progress. The resource library and glossary cover these topics in the meantime.

  1. Translating wireframes into polished UI In writing

    Applying type, colour and spacing systematically.

    In writing 35 min

  2. Building a visual language In writing

    Defining the look and feel as a set of decisions.

    In writing 30 min

  3. Buttons, inputs, cards, navigation, dialogs and menus In writing

    Anatomy and best practice for core components.

    In writing 50 min

  4. Component states and interaction feedback In writing

    Every state a component can be in.

    In writing 35 min

  5. Design tokens and semantic tokens In writing

    Naming decisions instead of values.

    In writing 35 min

  6. Component architecture and consistency In writing

    Composition, slots and avoiding one-off components.

    In writing 30 min

  7. Responsive design and breakpoints In writing

    Choosing breakpoints from content rather than devices.

    In writing 30 min

  8. Mobile-first and desktop-first approaches In writing

    When each approach fits.

    In writing 25 min

  9. Density, readability and touch targets In writing

    Balancing information density and ease of use.

    In writing 30 min

  10. Dark themes and colour schemes In writing

    Designing dark themes that are not just inverted.

    In writing 30 min

  11. Empty, error, loading and success states in UI In writing

    Polishing the states you wireframed.

    In writing 30 min

  12. Designing for internationalisation and long content In writing

    Translation, text expansion and real data.

    In writing 30 min

  13. Maintaining and documenting a design system In writing

    Docs, versioning and governance. Includes the mini design system project.

    In writing 35 min