• 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

Como criar o Wireframe