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

Wireframe, protótipo ou mockup

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

 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

Referência

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

0 respostas

Deixe uma resposta

Deseja contribuir com o nosso conteúdo?
Deixe abaixo o seu comentário.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *