Skip to content
Design Academy My progress

Stage 4 · Core · Beginner

Wireframing and ideation

Generate ideas, sketch quickly and build low and mid-fidelity wireframes.

  • 9 lessons
  • about 4 h 50 min of reading and practice
  • in writing

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

About this stage

Wireframes let you decide structure and behaviour before spending time on colour and polish. They are cheap to change, which makes them the right place to explore many ideas and throw most of them away.

You will practise divergent and convergent thinking, sketch on paper, design every state of a screen, and learn the common patterns behind forms, tables and dashboards.

Before this stage Stage 1: Visual design fundamentals, Stage 3: Information architecture

Learning outcomes

  • Generate several distinct solutions before choosing one.
  • Sketch and wireframe responsive screens with clear content hierarchy.
  • Design empty, loading, success and error states, not just the happy path.
  • Critique wireframes and move them into visual design with intent.

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. Divergent and convergent thinking In writing

    Generating many options, then choosing with criteria.

    In writing 25 min

  2. Sketching interfaces In writing

    Fast, ugly, useful: sketching techniques for non-artists.

    In writing 30 min

  3. Low-fidelity and mid-fidelity wireframes In writing

    What each level is for and what to leave out.

    In writing 35 min

  4. Content hierarchy In writing

    Deciding what comes first using user priorities, not layout habits.

    In writing 30 min

  5. Wireframing responsive screens In writing

    Designing how a layout changes across sizes.

    In writing 35 min

  6. Designing empty, loading, success and error states In writing

    The screens most beginners forget.

    In writing 35 min

  7. Forms, tables, dashboards and common interface patterns In writing

    The building blocks behind most product screens.

    In writing 45 min

  8. Critiquing wireframes In writing

    Reviewing structure, flow and content before visuals.

    In writing 25 min

  9. Moving from wireframes to visual design In writing

    Applying your visual language without losing the structure.

    In writing 30 min