Prototype

By Allen Jay Bercero

A prototype is an interactive, throwaway simulation of a product, something you can actually click through, built to test flows, usability, and ideas before committing to real development. Fidelity varies: from paper cards you shuffle by hand to a fully clickable Figma file that feels like the finished app. What defines it is behavior: unlike a Mockup, a prototype responds to input.

Prototyping exists to answer questions cheaply: Does this flow make sense? Can users find the button? Is this idea worth building? (before the expensive work of engineering it for real).

Also known as

proto · clickable prototype · interactive prototype · (as an activity) software prototyping

Don't confuse with: the fidelity spectrum and its cousins

Within the design trio:

  • Wireframe: structure, static.
  • Mockup: visual design, static.
  • Prototype: interactive. (this article)

Mnemonic: wireframe = skeleton, mockup = skin, prototype = it moves.

Two frequently-confused cousins that are not prototypes:

  • Proof of concept (PoC): tests whether something is technically feasible (“can we even do X?”). A prototype tests the user experience/design. Different question.
  • Minimum viable product (MVP): a real, shippable product with just enough features to learn from real customers. A prototype is a throwaway used before building; an MVP is the first slice of the actual thing.

In plain English

A fake-but-clickable version of the app you let people try, to catch problems before writing the real code.

Kinds of prototyping

  • Throwaway (rapid) prototyping: build it to learn, then discard it. Most UX prototypes.
  • Evolutionary prototyping: keep refining the prototype until it becomes the product.
  • Fidelity ranges from low-fi (paper, rough) to high-fi (looks and behaves like the real app).

Where it fits

Prototyping spans the requirements and design phases of the SDLC, and gives its name to a whole plan-driven relative. Building risky parts first is central to the Spiral model. Common tools: Figma, ProtoPie, or coded prototypes.

See also

References