Digital planning

Wireframe, prototype, or mockup: what's the difference?

Understanding the difference between a wireframe, prototype, and mockup is important. This article explains in detail when to use each one.

ByRodrigo Neves

05 Jan, 20253 min read

Understanding the difference between a wireframe, prototype, and mockup is important. This article explains in detail when to use each one.

Wireframe

What is a wireframe?

A wireframe can be defined as a low-fidelity representation of a project's design. Its main purpose is to show what we can call the "what," "how," and "where":

What: which content groups will be used;
Where: what the information structure is;
How: how the basic interface will look and how the user will interact with it;

A defining characteristic of wireframes is that they should be created quickly. The most time-consuming part of creating wireframes is communicating with the people involved in the project to resolve architecture and usability issues.

Wireframes don't have a polished design. They are like the skeleton of the design, containing all the important parts of the final project. As a result, all the elements are laid out in a basic form, without a polished or finalized design.

When should we use wireframes?

As part of project documentation, along with notes;
For day-to-day situations in a project. For example, if a developer asks how something should be done, ideally they should receive a wireframe with notes;
To get quick insights into the project;
As part of the design process;

Prototype

What is a prototype?

A prototype is often confused with a wireframe. Prototypes are usually created at medium or high fidelity, while a wireframe represents the final project at low fidelity.

Prototypes are commonly used to:

Simulate user interaction with the project;
Explore the content alongside interface interactions;
Test the main interactions by simulating the final project;

When should we use a prototype?

For user testing that simulates the final interfaces;
For project documentation;

Mockup (or mock-up)

What is a mockup?

A mockup can be defined as a static, medium- to high-fidelity representation of a project. It is usually very close to the project's final design, and when well made, it helps to:

Represent the information structure;
View the content in a static format;
Show the main features (in a static format);
Encourage the people involved to review the project's visual design;

When should we use a mockup?

When you want to sell the idea for a product before it's even ready;
To collect feedback from potential users;
For project documentation;

Conclusions about wireframes, prototypes, and mockups

Fidelity, cost, use, and characteristics

Representation	Fidelity	Cost	Use	Characteristics
Wireframe	low	$	Documentation, quick communication	Sketch, black-and-white representation of the interface
Prototype	medium to high	$$$	Usability testing, reusable framework for interface development	Interactive
Mockup	medium to high	$$	Collecting feedback and selling the product idea	Static visualization