Wireframes / Prototypes

ExplorationEvaluationmediumIntermediate

TL;DR

Low to high fidelity interface representations for user validation.

Category: Interaction design

What is it

Wireframes and Prototypes are visual representations of an interface at different fidelity levels. Wireframes (low fidelity) show structure and hierarchy without visual design. Prototypes (medium-high fidelity) simulate real interaction for user validation before development.

What it is for

Visualize design ideas before investing in development
Validate flows and interactions with real users
Align the team on design direction
Iterate quickly on design solutions

Research methods that feed it

Previous usability test resultsUser Personas and their needsCustomer Journey Map (pain points to solve)Card Sorting / Tree Testing (for structure)

When to use it

Before developing any new interface
To validate design solutions with users
When there's disagreement about design direction
To communicate design ideas to stakeholders and development

When NOT to use it

As a substitute for prior research (research first, design second)
If you won't test with users (a wireframe without validation is an opinion)
For minor changes that don't require prototyping

How to create it step by step

1Define scope: Choose which flows or screens to prototype based on research findings.
2Low-fidelity wireframes: Draw content structure and hierarchy without visual design (boxes, lines, placeholder text).
3Validate structure: Present wireframes internally and adjust before adding detail.
4Interactive prototype: Add real interactions (navigation, forms, states) in Figma, Sketch, or similar.
5Test with users: Conduct usability tests with 5-8 users to validate the flow and comprehension.
6Iterate and document: Adjust the prototype based on findings and document design decisions.

Tips for small teams

Start on paper or whiteboard — you don't need Figma for the first iteration
Low-fidelity wireframes save time and reduce design attachment
Test with 3-5 users before investing in high fidelity
Use reusable design components to accelerate iterations

Common mistakes

Jumping directly to high fidelity without validating structure
Not testing with real users (relying only on team opinion)
Prototyping everything instead of the most critical flows
Getting emotionally attached to the design and resisting post-test changes

Contextualized example

Context: Checkout redesign for an online clothing store.

Wireframe V1: Single long-page checkout. Test: 4/6 users got lost halfway through the form.

Prototype V2: 3-step checkout with progress bar. Test: 5/6 users completed without issues. Additional finding: users wanted to see the order summary at all times, not just at the end.

Wireframes / Prototypes

TL;DR

What is it

What it is for

Research methods that feed it

When to use it

When NOT to use it

How to create it step by step

Tips for small teams

Common mistakes

Contextualized example

Phase

Audience

Complexity

Experience level

Related deliverables

Related methodologies