Wireframe, Protótipo e Mockup — É tudo a mesma coisa?

Allan Ramos
Jun 2, 2018 · 3 min read

Uma etapa muito importante: a geração de um modelo visual para representar o produto, em nosso caso, sites e aplicativos. Após verificarmos a necessidade geramos ideias para representar a solução visualmente, ai então é criado o wireframe ou protótipo ou mockup.

Não foram poucas as vezes — e aprendi assim em cursos e na faculdade — onde wireframe, protótipo e mockup foram usados como sinônimos, sendo sempre aquela coisa opaca e feia.

Wireframe

A primeira demonstração visual do produto. Pegue lápis e papéis(Sim, você irá gastar muitos) e comece os esboços. Wireframes são representações visuais de baixa fidelidade, preocupando-se em descrever todos os elementos presentes da maneira mais simples possível, sem preocupar-se com cores ou fontes, mas sempre mostrando os elementos de uma forma organizada e limpa.

Seu objetivo é comunicar a ideia primária do produto em pouco tempo e de forma clara, geralmente vindo com legendas, explicando cada item presente.

Protótipo

Esse é o que mais é confundido com Wireframe. Usado para simular o ambiente com o usuário, sendo exemplos visualmente rústicos — Diferentes do Wireframe, pois já são usadas imagens, paleta de cores e fontes — porém interativos, mostrando ao usuário todas as funções planejadas para implementação.

São muito importantes por serem a primeira interação com usuário, permitindo obter resultados de testes de usabilidade — Botões mal colocados, com cores que confundem os usuário, mal posicionamento de objetos na tela, textos pequenos ou muito grandes.

É recomendável criar protótipos para serem usados na implementação do produto. Isso significa fazer o protótipo manualmente utilizando suas habilidades de HTML e CSS, ou você pode usar algum software para automatizar o processo, como na imagem abaixo, usando o Axure RP.

Mockup

A representação “final” de um design. Muitas vezes um rascunho quase idêntico do produto final, ou até o próprio visual dele. Um mockup bem feito deve ajudar na representação do conteúdo, ou seja, na fácil visualização da estruturação da informação, fácil visualização do conteúdo, demonstrar de forma estática o funcionamento e já ter um visual mais definido.

Comparativo

Wireframe

  • Estático;
  • Representação Visual — Baixa
  • Comunicação rápida, fácil de se fazer.

Protótipo

  • Interativo;
  • Representação Visual — Média;
  • Ótimo para teste de usabilidade.

Mockup

  • Estático;
  • Representação Visual — Alta;
  • Representa quase que fielmente o visual final do produto, e muitas vezes é usado para vender o produto antes mesmo que esteja pronto.

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Allan Ramos

Written by

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade