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 |