Prototyping

The cheapest way to test an idea is to build a fake version of it. A prototype is a rough, throwaway model of a product — a sketch, a clickable mock-up, a cardboard cut-out — made to try an idea out before committing to the real, expensive thing. The point is not to build the product; it's to learn: to put something in front of users, watch them struggle or smile, and fix the design while changes still cost pennies.

Prototyping is the beating heart of iterative UX design — it's the "make something to test" step of every loop. And the golden rule is: fail cheap, fail early. A flaw caught on a paper sketch costs a rubber; the same flaw caught in shipped code costs a fortune.

Fidelity: how "finished" does it look?

Prototypes sit on a spectrum of fidelity — how closely they resemble the real, final product in look, detail and behaviour. Explore the trade-off from a napkin sketch to a near-real mock-up:

Neither end is "better" — they're for different jobs. Low fidelity is for exploring lots of ideas fast and early; high fidelity is for polishing and validating the chosen one before build.

Low-fidelity: fast, rough, disposable

What it is. Paper sketches, hand-drawn wireframes (skeleton layouts showing where things go — boxes for images, lines for text — with no colour or real content), sticky-note flows, or a "paper prototype" where a person slides paper screens by hand to simulate tapping.
Strengths. Incredibly cheap and quick (minutes, not days), so you can try many ideas and throw the bad ones away without regret. People feel free to criticise a scribble — it obviously isn't precious — so you get honest feedback about structure and flow.
Weaknesses. It can't test the feel of real interaction, timing, or fine visual detail, and some users struggle to imagine the finished product from rough sketches.

High-fidelity: polished, realistic, slower

What it is. A detailed, interactive mock-up that looks and behaves close to the real thing — real colours, fonts, images, and clickable screens (built in tools like Figma), or even a limited working build.
Strengths. Tests the real experience — visual design, precise interactions, timing — and gives realistic user reactions. Great for spotting subtle usability problems and for convincing stakeholders (it looks real).
Weaknesses. Slow and expensive to make and change; people may focus on surface details ("I don't like that blue") instead of the structure; and there's a temptation to get attached to a polished prototype and defend it rather than improve it.

They're often muddled. A wireframe is a static skeleton — the layout: where the header, buttons and content sit, with no styling. A mock-up adds the visual design — colours, fonts, images — a static picture of the finished look. A prototype adds interactivity: you can actually click through it and it responds, so you can test the flow. Roughly: wireframe = structure, mock-up = look, prototype = behaviour.

Choosing the right fidelity

A sensible team starts low and moves high. Early on, when ideas are cheap and plentiful and lots could still change, low-fidelity sketching lets you explore widely and kill bad ideas fast. As the design settles, you raise the fidelity to test the details and get realistic reactions. Jumping straight to a beautiful high-fidelity prototype is a classic waste: you pour effort into polishing an idea you haven't yet checked is the right idea.

Two mistakes examiners love:

Thinking high fidelity is always "better." It isn't — it's just more finished. For fast, early, exploratory testing, low fidelity is often the right and smarter choice. Match the fidelity to the question you're trying to answer.
Falling in love with a polished prototype. The more effort and shine you put into a prototype, the harder it is to throw away — but a prototype is meant to be disposable. Getting attached makes you defend a flawed design instead of learning from the test and moving on.