Wireframe, protótipo e mockup – Qual a diferença?

O problema com essa visão simplificada é que eles nunca sabem o que esperar do trabalho de um designer de User Experience e muitas vezes ficam confusos. “Por que raios isso não é clicável?”, “Bem, eu não sabia que eu deveria clicar aqui…” – esses são comentários típicos em projetos de UX.

Confundir wireframes com protótipos é como assumir que uma planta de uma casa e aquelas casas modelo decoradas para amostra são a mesma coisa.

Embora você provavelmente queira morar numa casa modelo (você sabe, ela é bonita e supostamente mostra o quão legais são as casas na região), você não pode contar com uma estadia confortável numa planta de imóvel – é apenas uma folha de papel.

Uma casa de showroom e uma planta são diferentes formas de comunicação na área de arquitetura:

– uma planta serve como um plano de construção e deveria especificar como o prédio/casa deveriam ser construídos

– uma casa modelo funciona como um test drive para futuros moradores

A mesma distinção pode ser feita com wireframes, protótipos e mockups. Eles aparentam diferente, comunicam algo diferente e servem para propósitos diferentes.

Porém, uma casa modelo e uma planta tem uma coisa em comum: as duas são representações do produto final – uma casa real. E novamente, o mesmo tratamento pode ser aplicado aos wireframes, protótipos e mockups: todos eles são formas de representação do produto final.

Acredite ou não, a diferença entre um protótipo, um wireframe e um mockup é sempre uma das primeiras coisas que tento ensinar aos membros do meu time de design de UX.
Sim, esse assunto é realmente importante.

Vamos discutir wireframes, protótipos e mockups em detalhe, assim você poderá entender em quais situações utilizar cada um.

Wireframes: o que são, como são feitos, para o que servem

Wireframes são a ponta do iceberg de um projeto digital que inclua um ambiente no qual os usuários terão experiências. 

Os wireframes são a ferramenta para comunicar a estratégia na interface. Portanto, antes de desenhar um wireframe, o ideal é que muita coisa já tenha acontecido. No mínimo, a definição dessa estratégia… Um projeto ideal pode incluir uma imersão com o cliente/donos do produto, uma boa etapa de especificação e conversas sobre demandas e expectativas, e pelo menos alguma metodologia de pesquisa com os usuários.