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
  • all written
Start this course

Progress is saved in this browser.

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

  1. Translating wireframes into polished UI

    Applying type, colour and spacing systematically.

    Reading 35 min

  2. Building a visual language

    Defining the look and feel as a set of decisions.

    Reading 30 min

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

    Anatomy and best practice for core components.

    Reading 50 min

  4. Component states and interaction feedback

    Every state a component can be in.

    Reading 35 min

  5. Design tokens and semantic tokens

    Naming decisions instead of values.

    Reading 35 min

  6. Component architecture and consistency

    Composition, slots and avoiding one-off components.

    Reading 30 min

  7. Responsive design and breakpoints

    Choosing breakpoints from content rather than devices.

    Reading 30 min

  8. Mobile-first and desktop-first approaches

    When each approach fits.

    Reading 25 min

  9. Density, readability and touch targets

    Balancing information density and ease of use.

    Reading 30 min

  10. Dark themes and colour schemes

    Designing dark themes that are not just inverted.

    Reading 30 min

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

    Polishing the states you wireframed.

    Reading 30 min

  12. Designing for internationalisation and long content

    Translation, text expansion and real data.

    Reading 30 min

  13. Maintaining and documenting a design system

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

    Reading 35 min