Wireframe, protótipo ou mockup – qual a diferença?

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

Leia também: A importância dos protótipos no desenvolvimento de projetos