---
title: Wireframe, prototype, or mockup: what's the difference?
description: Learn the difference between wireframes, prototypes, and mockups, and find out when to use each one.
source: https://vitaminaweb.digital/en/blog/wireframe-prototype-or-mockup-whats-the-difference
lang: en
---

![Wireframe, prototype, or mockup: what's the difference?](https://vitaminaweb.digital/storage/blog/BiW1kgwTJY21M2wKz4i516PPTVoUkFiCbJnn4dQ7.webp)

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 |

**Read also:** [The importance of prototypes in project development](https://vitamina.digital/a-importancia-dos-prototipos-em-projetos/)

## Read also

     Digital ecosystem

### [LinkedIn: The B2B Social Network Connecting Business, People, and Digital Strategy](https://vitaminaweb.digital/en/blog/linkedin-the-b2b-social-network-connecting-business-people-and-digital-strategy)

LinkedIn: discover the data, strategies, and importance of the largest B2B social network in the digital maturity journey.

 21 Apr, 2025 · 4 min      Digital planning

### [Independent digital production company](https://vitaminaweb.digital/en/blog/independent-digital-production-company)

Discover the benefits of working with an independent digital production company, including its flexibility, technical expertise and ability to dr...

 09 Jan, 2025 · 4 min      Development

### [What Is a Digital Production Company?](https://vitaminaweb.digital/en/blog/what-is-a-digital-production-company)

A digital production company specializes in planning, developing, and supporting digital projects.

 08 Jan, 2025 · 5 min