Stage 4 · Core · Beginner
Wireframing and ideation
Generate ideas, sketch quickly and build low and mid-fidelity wireframes.
Progress is saved in this browser.
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
-
Divergent and convergent thinking
Generating many options, then choosing with criteria.
-
Sketching interfaces
Fast, ugly, useful: sketching techniques for non-artists.
-
Low-fidelity and mid-fidelity wireframes
What each level is for and what to leave out.
-
Content hierarchy
Deciding what comes first using user priorities, not layout habits.
-
Wireframing responsive screens
Designing how a layout changes across sizes.
-
Designing empty, loading, success and error states
The screens most beginners forget.
-
Forms, tables, dashboards and common interface patterns
The building blocks behind most product screens.
-
Critiquing wireframes
Reviewing structure, flow and content before visuals.
-
Moving from wireframes to visual design
Applying your visual language without losing the structure.