Qual é a diferença entre wireframe, mockup e protótipo?

Imersos em nossas profissões, não percebemos que usamos termos no dia a dia, que muitas vezes não são claros para todo mundo. Muita gente também troca os nomes, seja pra facilitar o entendimento ou por desconhecimento. Seja qual for o motivo, conferira a diferença entre wireframe, mockup e protótipo?

Tudo é projeto. Chegou e-mail com missão nova, é um novo projeto diante de mim. Alguns são bem simples, outros exigem bastante estudo e simulações. Tudo isso para termos uma maior segurança – talvez certeza seja pretensão demais -, de que tudo dará certo. Dentro do valor disponível para a confecção, escolhas de materiais e, claro, testes.

Qual é a diferença entre wireframe, mockup e protótipo?

Wireframe

Um wireframe é, em uma escala de fidelidade, mais distante do produto final. Tem por finalidade apresentar um design, porém com os elementos essenciais para o entendimento do projeto e seu funcionamento.

Podemos imaginar o wireframe como a planta de um edifício ou um croqui de moda. Quanto mais complexo, mais estudos, medições, cálculos precisam ser feitos, até que um prédio ou roupa comecem a ganhar forma no mundo real.

O wireframe também é uma excelente forma e de baixo custo para ver o todo de um projeto, como ele pode se comportar, ser encaixado, incorporado etc.

Algumas características comuns de um wireframe:

• Mostra os principais blocos de um conteúdo, sua estrutura;
• Descreve a UI ou User Interface (Interface do Usuário) de forma mais básica;
• Ser uma das soluções mais baratas e acessíveis para qualquer tipo de projeto.

A forma de um wireframe pode variar bastante, desde um traço sobre papel, até o uso de softwares sofisticados como o UXpin, Balsamiq, Adobe XD etc.

Mockup

Um mockup é uma forma visual de representar um produto. Enquanto um wireframe representa principalmente a estrutura de um produto, um mockup mostra como o produto será. Ou seja, ele possui alta fidelidade visual, mas ainda assim não é clicável, testável ou manipulável no mundo real.

Diferente do wireframe, não há como esboçar um mockup. Ele já requer recursos mais sofisticados, seja uma ferramenta de maquete, uma foto manipulada, uma modelagem digital 3D ou um duplo clique em um mockup baixado na internet e trabalhado no Photoshop.

Algumas características comuns de um mockup:

• Ajuda a tomar decisões finais sobre os esquemas de cores, estilo visual e tipografia de um produto;
• Possibilidade de experimentar o lado visual do produto para ver o que parece melhor – tomando melhores decisões;
• Obter feedback de seus usuários em potencial e ainda ter a possibilidade de fazer as alterações necessárias imediatamente. – economizando tempo, dinheiro e recursos;
• Identificar problemas antes de iniciar a produção de um protótipo ou do produto final.

Para criar ou trabalhar um mockup, você pode usar softwares como o Marvel, o InVision, Moqups ou o Photoshop, em casos mais simples, utilizando algum mockup da internet.

Protótipo

Um protótipo é geralmente uma representação de alta fidelidade do produto final, que tem como objetivo simular a interação do usuário. Ao contrário dos dois anteriores, um protótipo é clicável e, portanto, permite que o usuário experimente o conteúdo e as interações na interface.

Algumas características comuns de um mockup:

• Ser parecido com o próprio produto final – porém, fim de reduzir custos, a interface e o back-end nem sempre estão vinculados. É como ter um monte de gambiarras, digamos, e só depois de testado e aprovado, que a equipe faz a codificação;
• Altamente interativo, permitindo que os usuários experimentem a interface de forma fidedigna e apontem possíveis problemas e desconfortos.

Para criar um protótipo, existem as ferramentas Mockplus, Adobe XD e demais ferramentas de prototipagem.

Agora que já sabemos o que é cada uma, é importante compreender que elas não concorrem entre si. Elas se somam. Escolha a alternativa que melhor se adequar ao seu projeto.

Com informações: UX Planet.

Receba mais sobre Website wireframe na sua caixa de entrada

E-mail:

* ao se inscrever você aceita a nossa política de privacidade