Começando uma série de posts mais focado em você que está migrando para a área de UX, entenda exatamente o que é wireframe, algumas perguntas e exemplos.
Confira neste post:
Para que serve um wireframe?
Wireframe, ou wire, é a estrutura básica de uma interface, um dos planejamentos iniciais seja para um aplicativo, um site, um sistema, etc.
Pense na construção de uma casa onde idealmente fazem sua planta antes de levantar paredes e comprar materiais. A planta é o wireframe de uma casa.
É obrigatório em todo projeto?
Não é obrigatório. O bacana dele é o poder que ele nos dá em conseguir focar mais na arquitetura de informação do projeto do que em UI (interface de usuário). Deixa para pensar em harmonia de cores e escala tipográfica depois!
Agora se você já tem um Design System e quer propor algo novo, talvez pegar os componentes já prontos seja mais eficiente, afinal eles já foram validados (foram, né?).
Algo importante também é alinhar totalmente com sua chefia ou cliente que o wireframe será ou não um entregável. Não adianta pegar aquele freela, entregar o wire todo feliz e o cliente tava esperando um HTML
Como fazer wireframe?
Partindo do princípio que você já tem o briefing bem definido em mãos, algumas dicas gerais giram em torno de focar inicialmente em grandes blocos de informações, se pergunte o que realmente é importante nessa tela. Seções maiores devem ter mais destaque, seções secundárias podem ficar menores.
Não precisa ficar muito bitolado(a) com o tal do above the fold (acima da dobra), as pessoas rolam a tela sim, desde que você indique para elas que existe algo a mais ali.
Importante usar tons de cinza mais escuros para o que você quer dar ênfase como botões CTA e tons mais claros para coisas secundárias como o fundo de um card. Isso vai te ajudar muito na hora de projetar a interface e escolher as cores para os elementos.
Se já validou o que precisava ser validado com um rabisco num guardanapo, não esqueça de documentar tirando uma foto para que aquele conteúdo não se perca.
Se estiver construindo o wire direto no computador e se for usá-lo para apresentar algo, use textos reais. No começo tudo bem usar o “lorem ipsum”, mas assim que possível o substitua por textos reais ou próximos disso. Copywriting é uma parte essencial na UX e você deve ter um carinho com ela também na hora de fazer seus wireframes.
Se está atrás de construir seu portfolio de UX, o wire pode ser interessante para demonstrar em como você chegou na solução final. Não esqueça de contar detalhes, problemas no meio do caminho, motivos das suas escolhas, etc. Portfolio de UX vale um post a parte no futuro. 😉
Existe ferramenta wireframe gratuita?
Você pode usar a ferramenta que tiver mais familiaridade e fizer mais sentido para você, alguns exemplos de ferramentas gratuitas e pagas para fazer wireframes:
- Wireframe.cc
- Balsamiq
- Moqups
- UXPin
- Invision Freehand
- Figma
- Adobe XD
- E claro: papel e lápis
Pontos importantes para fazer seu wire
- Foco na estrutura, não na interface
- Espaço negativo é um ótimo aliado
- Pode ser usado para validação de fluxos
- Rabiscado na mão mesmo ou digital no Figma
- Estudar sobre Gestalt vai ajudar bastante
- Via de regra, use tons de cinza
- Simples e direto é melhor que robusto e demorado
Diferença entre wireframe e protótipo
Além dos pontos acima, se temos dois wires e os linkamos para simular navegação, ele oficialmente vira um protótipo navegável de baixa fidelidade. Tela solta é wireframe, telas conectadas é protótipo.
Um exemplo de um protótipo gerado com alguns wireframes:
Confira esse conteúdo que escrevi para aprender como fazer um protótipo no Figma.
Exemplos de wireframe
Veja abaixo outros exemplos de wireframes de sites mobile, aplicativos, etc.
