Uma das etapas mais fundamentais durante o processo de desenvolvimento de um produto, no nosso caso, web sites ou aplicativos, é a geração de ideias e protótipos. Após compreender o problema que temos que resolver, independente de sua complexidade, é necessário gerar ideias de como será sua solução para então poder implementá-la. Existem várias formas de representar uma ideia e projetar sua solução. O artigo abaixo explica a diferença entre mockups, wireframes e protótipos e é uma tradução livre que fiz do post feito por Marcin Treder no Design Modo. O original pode ser lido aqui.

"Alguns anos atrás me dei conta de que muitos amigos meus de TI, não-designers, usam nomenclaturas de design deliberadamente como se fossem sinônimos. Eles assumem que wireframes, protótipos e mockups são exatamente a mesma coisa – um rascunho meio cinza, com várias formas retangulares que representam uma ideia engenhosa.

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.

Wireframe

1. O que é um wireframe?

Um wireframe é uma representação de baixa fidelidade de um design. Ele deve mostrar claramente:

os principais grupos de conteúdo (o quê?)
a estrutura da informação (onde?)
uma descrição e visualização básica da interface e interação do usuário (como?)

Wireframes não são apenas caixas meio sem sentido desenhadas em p&b, embora pareçam exatamente isso. Considere-os como o esqueleto do seu design e lembre-se que os wireframes devem conter a representação de todas as partes importantes do produto final.

UXPin_DM1

“Representação” é um termo crucial aqui, que te ajuda a encontrar a fidelidade certa – e equilíbrio de velocidade de desenvolvimento. Você não pode mergulhar em muitos detalhes, mas, por outro lado, você precisa criar uma representação sólida do produto final que não sentirá falta de nenhuma parte importante. Você está definindo um caminho para todo o projeto e para as pessoas com quem você trabalha (desenvolvedores, designers gráficos, redatores, gestores de projetos – todos eles precisam de wireframes bem-feitos). Na verdade você está criando o mapa de uma cidade. Cada rua é representada no mapa, porém de uma forma bastante simplificada. Você consegue sentir a arquitetura da cidade ao olhar um mapa, mas não pode ver sua beleza.

Wireframes devem ser criados num espaço de tempo curto: a maior parte do tempo deve ser gasta na comunicação com seus colegas e… pensando. A simples atividade de criar o wireframe deve ser realmente muito rápida.

A visualização de um wireframe se dá esteticamente, mas de uma forma bastante simplificada. Preto e branco são as cores típicas que você irá usar (você pode adicionar o azul para especificar os links).

Se algumas escolhas tomarem bastante tempo (por exemplo a escolha de ícones, subir imagens), você deve representá-las de uma forma primária (ex. utilizando espaços reservados para certos elementos – retângulos vazios com um “X” no meio para imagens acompanhados de uma descrição). Nós costumamos chamar wireframes de “entregáveis de baixa fidelidade” (lo-fi).

Lembre-se: um wireframe bem-feito deve comunicar o design de uma maneira cristalina e definir o caminho a ser seguido por todo o time.

2. Quando utilizar wireframes.

Wireframes normalmente são utilizados como parte da documentação de um projeto. Como eles são estáticos e congelam a interação em um ponto específico no tempo, eles devem ser acompanhados de descrições por escrito (de pequenas anotações explicando as interações até documentações técnicas mais complexas, quando necessário).

No entanto, eles também podem ser utilizados em situações mais informais. Já que são simples e rápidos de serem feitos, servem também como rascunhos claros para serem usados na comunicação interna do time. Se os desenvolvedores perguntarem como algo deve ser feito, a resposta pode ser dada com a criação rápida de um wireframe.

Considere isso: a UXPin é uma start-up com ciclos de desenvolvimentos realmente rápidos (releases a cada dois dias). Nós utilizamos wireframes para a visualização rápida de tarefas (até as pequenas!). Isso elimina desentendimentos e é realmente barato.

Wireframes são dificilmente utilizados como material de teste, ainda que possam ajudar a coletar feedback inicial, estilo guerrilha; ou como uma pesquisa na qual você não se importe muito sobre metodologia, mas sim em conseguir rápidos insights.

Wireframes inseridos no contexto do processo completo do design podem ser surpreendentemente eficazes e, ainda que nos últimos anos tenham ganhado má reputação, continuam indispensáveis na fase inicial de projetos complexos.

Protótipo

1. O que é um protótipo?

Um protótipo, muitas vezes confundido com um wireframe, é uma representação de média a alta fidelidade do produto final e que simula a interface de interação do usuário. Ele deve possibilitar ao usuário:

experimentar o conteúdo e as interações da interface
testar as principais interações de forma similar ao produto final

Um protótipo é uma simulação da interação final entre o usuário e a interface. Pode não parecer exatamente com o produto final, mas deve ser bastante similar (definitivamente não é um coisa cinzenta e com cara de rascunho, como são os wireframes). As interações devem ser moldadas com cuidado e apresentar uma semelhança significante com a experiência que o usuário terá no produto final. A interdependência entre a interface e o funcionamento do backend é frequentemente omitida para reduzir custos e acelerar os ciclos de desenvolvimento.
2. Quando utilizar um protótipo.

UXPin_DM2

Protótipos são utilizados em seu máximo potencial nos testes de usuário. A simulação das interações finais geram um ótimo material para testar a usabilidade da interface antes do desenvolvimento iniciar de fato.

Os protótipos normalmente não são a melhor forma de documentação, já que exigem do “leitor” um certo esforço para entender a interface. Por outro lado, um protótipo é a forma mais engajante de documentação do design, uma vez que a interface é palpável e direta.

Lembre-se que criar protótipos pode ser caro e consumir bastante tempo. Uma sugestão é criar protótipos que possam ser utilizados no desenvolvimento (sim, isso significa que você deve saber programar um pouco de HTML e CSS). Isso é especificamente eficaz em projetos relativamente simples.

Feita de forma correta e combinada com testes de usuário, a criação de protótipos consegue pagar seu custo.

Mockup (mock-up)

1. O que é um mockup?

Um mockup é uma representação estática de média a alta fidelidade de um design. Muitas vezes um mockup é um rascunho bem próximo do design final do produto, ou até o próprio design visual do produto final. Um mockup bem feito:

representa a estrutura da informação, visualiza o conteúdo e demonstra as principais funcionalidades de uma forma estática
estimula as pessoas a realmente revisarem a parte visual do projeto

Mockups são muitas vezes confundidos com wireframes, por causa dos nomes de certas empresas de software.
2. Quando utilizar um mockup.

UXPin_DM3

Os mockups são particularmente úteis quando você quer vender a ideia do produto antes dele estar pronto para seu público estratégico (stakeholders). Graças a sua natureza visual, mockups não possuem a resistência dos entregáveis de baixa fidelidade (wireframes) e são bem mais rápidos de criar do que protótipos. Eles são ótimos coletores de feedback e, se inseridos no contexto geral do processo de criação do design, podem criar um bom capítulo da documentação.

Resumo

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

Por onde começar?

Antes de escolher um meio de comunicação do processo de design você precisa:

especificar o problema que você está tentando resolver
entender o seu público-alvo
dar uma olhada no que os concorrentes tem feito na área
definir os requisitos gerais do produtos

Isso é o mínimo. Agora pense qual entregável será mais apropriado para você. Considere seu produto e seu time. O que funcionará melhor para vocês? Uma documentação formal ou rascunhos mais informais e discussões presenciais? Você tem tempo e dinheiro para uma pesquisa mais consistente de usabilidade ou vai apenas a um café local desenhar alguns rascunhos a mão para os seus futuros clientes?

Quais habilidades você possui? Você sabe programar?

Olhar para si mesmo(a), seu time e seu projeto deve lhe guiar pelo processo de escolher o melhor entregável.

Você pode, é claro, criar todos e... na maioria dos casos você vai! Não tenha receio de dar esse passo. Os três fazem sentido e, se forem bem executados, podem te levar a um ótimo produto final."

Artigo original: http://designmodo.com/wireframing-prototyping-mockuping/