Wireframe
- Eles são representações visuais de baixa fidelidade, preocupando apenas em descrever todos os elementos presentes da maneira mais simples possível do projeto.
- Sem se preocupar com cores ou fontes, mas entregando de um modo organizada e limpo.
- Serve para mostrar a forma e as funções do projeto e não sua aparência final.
- Deve ser simples, portanto, utilize sempre o preto e branco ou tons cinzas, links podem usar vermelho ou azul.
- Estático
- Sem representação visual satisfatória
- Fácil de se fazer
- Custo baixo
Atenção! Ele pode sofrer modificações conforme o desenvolvimento do projeto.
Wireframe Média Fidelidade - anotado
- É o meio termo entre o modelo de baixa e alta fidelidade. Além dos elementos visuais organizados, simulando uma página, você coloca legendas e descrições.
- Eles permitem visualizar como as coisas funcionam a partir de uma perspectiva mais geral do fluxo.
Wireframe de alta fidelidade
- Este tipo de wireframe se aproxima ao resultado final do projeto.
- Apenas falta aplicar o UI nele, como: imagens e cores e o projeto está pronto.
Wireframe deve ser para a equipe
Se for mostrado para o cliente
- Explique o que está mostrando ao seu cliente
- Se você não explicar o que é o wireframe e que é uma etapa do processo de criação do projeto, seu cliente pode achar que está realizando um trabalho bem relaxado e ele não vai te ajudar!
- Muitos não conhecem o Wireframe e por esta razão, acha que você está entregando qualquer coisa à ele.
Benefícios do Wireframe
- Estruturação da página
- Arquitetura de Informação
- Definição do User Flow (fluxo do usuário)
- Previsão de Funcionalidades