Prototype

A prototype answers questions that static designs cannot — how a flow feels, whether an interaction is clear — while the cost of changing it is still low. Prototyping well shortens the distance between a sketch and a shipped product.

How it works

A prototype fakes just enough of a product to answer a specific question. Low-fidelity prototypes, clickable wireframes, test whether a flow makes sense. High-fidelity prototypes with real visuals and motion test how an interaction feels. Coded prototypes test what only real data or real devices reveal, such as performance or an unusual input method.

The question comes first; the fidelity is whatever the cheapest way to answer it turns out to be.

Example

Before building a multi-step booking form, a team can click five people through a prototype of the steps and watch where they hesitate. If most stall at choosing a time slot, the design changes there, in minutes, before any booking logic is written.

Common mistakes

• Polishing a prototype until it looks finished, so stakeholders treat it as the product.
• Testing with colleagues who already know how it is supposed to work.
• Shipping prototype code to production because it "already works".