What is a prototype in UX?
A prototype in UX is an early, interactive model of a product that lets you test how it works and feels before spending time building the real thing.
also calledinteractive mockup · clickable prototype · design prototype
An architect builds a scale model before pouring concrete, and a designer builds a prototype before writing code. It does not have to be pretty or complete. It only has to be real enough that someone can try it, get confused by it and tell you exactly where.
- A prototype is an interactive stand-in for the product, built to test ideas early.
- Use the lowest fidelity that can answer your question.
- Prototype the key path, not the whole product, and use realistic content.
- It shows intent, but it does not replace written specifications.
What a prototype is, and what it is not
A prototype simulates the experience of using a product. Screens are linked, buttons respond, and a person can walk through a task. Behind the scenes there is usually no working database, no real payments and no production code.
It differs from a wireframe, which is a static layout, and from a mockup, which shows visual styling without interaction. Of course, people mix these words up all the time, so check what someone means before you agree on a deadline.
Low fidelity to high fidelity
Prototypes sit on a spectrum. A low fidelity prototype might be sketches on paper that you swap by hand while a user taps on them. It takes an hour and is perfect for testing concepts and flows.
A mid fidelity one uses digital wireframes linked together, which works for checking structure and navigation. A high fidelity prototype looks and behaves much like the final product, with real colors, text and transitions. It suits detailed usability tests and stakeholder demos.
The temptation is to jump to high fidelity because it looks impressive. Resist it until the basic idea has survived cheaper tests.
How to build one that is worth testing
- Decide what you want to learn. A prototype needs a question, such as "Can people find the booking button?"
- Prototype only the path that answers it. You do not need every screen.
- Pick the lowest fidelity that makes the question answerable.
- Write a test scenario so participants have a reason to click, like "Book a table for Friday evening".
- Fill in realistic content, since placeholder text hides problems with real labels and long names.
- Run it with a few people and note where they hesitate.
Many teams build prototypes in design tools such as Figma, but paper, slides and even spreadsheets can do the job.
Why prototyping saves money
Fixing a flow in a prototype means moving a few boxes. Fixing it after development means rewriting code, retesting and often renegotiating deadlines. Prototypes also help the team agree. It is much easier to discuss a thing people can click than a paragraph in a spec.
They are also a persuasion tool. A stakeholder who tries the prototype and gets lost is more convincing than any slide that says users might get lost.
Common mistakes
Over-polishing is the favorite. Teams spend weeks on animation for an idea nobody tested. Close behind is the prototype that fakes too much, so the test says nothing about real conditions like slow loading or errors. And some teams treat the prototype as the specification, handing it to developers and expecting every pixel and edge case to be inferred. A prototype shows intent, but the details still need to be written down.
Prototype: your questions, answered
What is a prototype in UX design?
It is an early version of a product or feature that people can interact with to test ideas. It can range from paper sketches to a clickable digital model, and its purpose is to uncover problems before development begins.
What is the difference between a wireframe and a prototype?
A wireframe is a static layout that shows structure and content placement. A prototype adds interaction, so you can click through screens and simulate tasks. Wireframes help plan the layout, while prototypes help you test how it behaves.
What are the types of prototypes in UX?
The usual split is by fidelity: low fidelity prototypes like paper sketches, mid fidelity ones built from linked wireframes and high fidelity ones that look and behave close to the final product. You choose based on what you need to learn.
Which tools are used for prototyping?
Designers commonly use interface design tools with built-in prototyping, such as Figma, and some use code-based or specialized tools for complex interactions. Paper and slide decks work too. Pick the one that lets you answer your question fastest.
How many screens should a prototype have?
Only as many as it takes to test your question. A single task flow might need five or six screens. Building more adds time without adding learning, so keep the scope narrow and extend it later if needed.
More quick answers
What is the difference between a prototype and an MVP?
A prototype simulates a product to test ideas. An MVP is a working product, small enough to launch and learn from real usage.
What is fidelity in prototyping?
Fidelity describes how closely a prototype resembles the final product in looks and behavior. Low fidelity is rough and quick, high fidelity is polished.
When should you start prototyping?
As soon as you have an idea worth testing. Early rough prototypes are cheap, and they often prevent bigger changes later.
Can you test a prototype with users?
Yes, and you should. Give participants realistic tasks and observe where they struggle, then adjust the design before building.
Is a prototype the final design?
No. It is a tool for learning. The final design comes after testing, iteration and detailed handoff to developers.
A wireframe in UX is a simple, low-detail blueprint of a screen that shows layout, content placement and functionality before any visual styling is added.
A mockup in UX is a static, high-fidelity picture of a screen that shows the final look, including colors, type, images and layout, but not how it works.
Fidelity in UX describes how closely a design artifact, such as a sketch, wireframe or prototype, resembles the finished product in looks, detail and behavior.
Iterative design in UX is a cycle of designing, testing and refining a product in repeated rounds, so each version learns from the one before.
Usability testing in UX is a method where you watch real people try to complete realistic tasks with a product to find where they struggle.
Figma is a browser-based design tool where teams create interfaces, build prototypes and collaborate on the same file in real time.
Found this useful? A GitHub star helps other designers find it.