---
title: Wireframe, protótipo ou mockup – qual a diferença? · VitaminaWeb
description: Saber a diferença entre wireframe, protótipo ou mockup é importante e este artigo irá mostrar em detalhes em quais situações podemos utilizar cada um.
source: https://vitaminaweb.digital/en/blog/wireframe-prototipo-e-mockup-qual-a-diferenca
lang: en
---

![Wireframe, protótipo ou mockup – qual a diferença?](https://vitaminaweb.digital/storage/blog/BiW1kgwTJY21M2wKz4i516PPTVoUkFiCbJnn4dQ7.webp)

Saber a diferença entre wireframe, protótipo ou mockup é importante e este artigo irá mostrar em detalhes em quais situações podemos utilizar cada um.

## Wireframe

### O que é um wireframe?

Um wireframe pode ser definido como sendo uma representação de baixa fidelidade do design de um projeto e tem como principal objetivo mostrar o que podemos chamar de "o quê", "como" e "onde":

- O quê: quais são os grupos de conteúdo que serão utilizados;
- Onde: qual é a estrutura da informação;
- Como: como será a visualização básica da interface e como o usuário irá interagir com ela;

Um característica marcante dos wireframes é que eles devem ser criados num espaço de tempo curto. O que se gasta mais tempo na criação dos wireframes é no tempo que se gasta com a comunicação com os envolvidos do projeto afim de resolver alguns problemas de arquitetura e usabilidade.

Os wireframes não possuem design bem elaborado e são como se fosse o esqueleto do design, contendo todas as partes importantes do projeto final. Sendo assim, todos os elementos são colocados de forma primária, sem um design elaborado e definido.

### Quando devemos utilizar wireframes

- Parte de documentação de projeto junto com anotações;
- Para situações do dia -a-dia de um projeto, por exemplo: Se um desenvolvedor perguntar como algo deve ser feito, o ideal é ele receber como retorno um wireframe com suas anotações;
- Para conseguir rápidos insights sobre o projeto;
- No contexto do processo de design;

## Protótipo

### O que é um protótipo?

Um protótipo é muitas vezes confundido com um wireframe. Normalmente cria-se protótipos de média e alta fidelidade, deixando para o wireframe uma representação de baixa fidelidade do projeto final.

Os protótipos são utilizados comumente para:

- Simular a interação do usuário com o projeto;
- Experimentar o conteúdo junto com as interações da interface;
- Testar as principais interações de forma a simular o projeto final;

### Quando devemos utilizar um protótipo

- Testes com usuários com simulação das interfaces finais;
- Documentação do projeto;

## Mockup ( ou mock-up)

### O que é um mockup?

O mockup pode ser definido como uma representação estática de média e alta fidelidade de um projeto. Normalmente o mockup está bem próximo do design final do projeto e quando bem elaborado ajuda em:

- Representar a estrutura da informação;
- Visualizar o conteúdo de forma estática;
- Demonstrar as principais funcionalidades (de forma estática);
- Estimular os envolvidos a realmente revisarem a parte visual (design) do projeto;

### Quando devemos utilizar um mockup

- Quando se desejar vender a idéia do produto antes mesmo dele estar pronto;
- Coletar feedback de potenciais usuários;
- Documentação do projeto;

## Conclusões sobre wireframe, protótipo ou mockup

### Fidelidade, custo, uso e características

| Representação | Fidelidade | Custo | Uso | Características |
| --- | --- | --- | --- | --- |
| Wireframe | baixa | $ | Documentação, comunicação rápida | Rascunho, representação preta e branca da interface |
| Protótipo | média a alta | $$$ | Teste de usabilidade, esqueleto reutilizável para o desenvolvimento da interface | Interativo |
| Mockup | média a alta | $$ | Coletar feedback e conseguir vender a ideia do produto | Visualização estática |

**Leia também:** [A importância dos protótipos no desenvolvimento de projetos](https://vitamina.digital/a-importancia-dos-prototipos-em-projetos/)

   Próxima leitura

## Continue afinando

     Ecossistema digital

### [LinkedIn: A Rede Social B2B que conecta Negócios, Pessoas e Estratégia Digital](https://vitaminaweb.digital/en/blog/linkedin-a-rede-social-b2b-que-conecta-negocios-pessoas-e-estrategia-digital)

LinkedIn: conheça os dados, estratégias e a importância da maior rede social B2B na jornada de maturidade digital.

 21 Apr, 2025 · 4 min      Planejamento digital

### [Produtora digital independente](https://vitaminaweb.digital/en/blog/produtora-digital-independente)

Descubra as vantagens de trabalhar com uma produtora digital independente, sua flexibilidade, expertise técnica e como ela pode impulsionar proje...

 09 Jan, 2025 · 4 min      Desenvolvimento

### [O que é uma produtora digital?](https://vitaminaweb.digital/en/blog/o-que-e-uma-produtora-digital)

Uma produtora digital é uma empresa que é especializada em planejar, desenvolver e suportar projetos digitais.

 08 Jan, 2025 · 5 min