Wireframe: o que é e por que utilizar?

Ao desenvolver um site ou um aplicativo, é comum pensarmos em como ele será, quais funcionalidades, menus… Essa ideia inicial, muitas vezes rabiscadas no papel, tem um nome: wireframe.

O que é um wireframe?

O wireframe é uma etapa do desenvolvimento de um projeto, onde criamos um “esqueleto”, que serve para ilustrar, de maneira simplificada, um site ou aplicativo.

O objetivo principal do wireframe é focar na organização do conteúdo, dentre outras características da Arquitetura da informação. Já temos um artigo que aborda o papel da Arquitetura de Informação, mas de forma bem resumida, ela tem o foco em ajudar o usuário a encontrar o que ele está procurando.

Um wireframe é considerado um protótipo de baixa fidelidade, pois ele está distante do entregável, não sendo tão fiel, podendo ser modificado e refeito. Ele serve mais para termos uma ideia do que vai vir a ser o produto final. Aqui vamos focar mais em um protótipo de um site/app/sistema, mas ele pode servir para qualquer coisa, não somente um app ou site.

Abaixo temos alguns dos benefícios de se utilizar wireframes:

• Apresenta resultados mais tangíveis e compreensíveis, servindo também para um entendimento do que será feito;
• Facilita o alinhamento da expectativa do cliente quanto ao que o usuário quer e ao projeto criado;
• A entender quantas telas o projeto precisará e como elas devem ser desenhadas;
• Auxilia na diagramação do conteúdo, facilitando o trabalho do designer;
• Promove o desenvolvimento de variações de layout;
• Sua revisão e adaptação são mais baratas de serem feitas.

Curso UX/UI - Introdução

Conhecer o curso

Como seu foco é ser simples, muitas vezes ele pode aparentar estar incompleto, mas a magia dele está justamente em sua simplicidade. Esse esboço facilita muito para que você não perca muito tempo criando algo elaborado. A partir desse esboço mais básico podemos ter mais ideias de mudanças e melhorias.

É importante ressaltar que o wireframe serve para mostrar termos de estrutura e não aparência. Sendo assim, nesta etapa devemos pensar e observar outras coisas, como por exemplo, como as informações ficarão organizadas, quais menus ele irá ter, como será o fluxo de uma página, como será a navegação principal, etc…

Isso deve ser feito antes de começarmos a pensar em cores, formas, formato, imagens, fontes, etc. Isso vale também porque o seu cliente/usuário pode não se atentar no que ele realmente tem que ver. Ele tem que ver o que realmente importa neste momento: se está intuitivo, se a navegação está correta, etc.

No wireframe você só precisa ter uma ideia aproximada das informações que estão acontecendo na página, do que vai tratar o projeto.

Tipos de wireframes

Podemos dividir os tipos de wireframes em três principais:

• Wireframe de baixa fidelidade: como já vimos neste artigo, é a versão mais simples possível, tendo os elementos principais, feitos em papel e caneta, por exemplo;
• Wireframe anotado: neste tipo já temos um upgrade, podendo adicionar mais detalhes ao wireframe, como por exemplo, colocar legendas e anotações para facilitar o entendimento do que cada item faz;
• Wireframe de fluxo de usuários: neste tipo é mostrado como um usuário irá navegar pelo conteúdo. Aqui tudo pode ser estático, sem interação. O foco é mostrar como funciona um fluxo de usuário;
• Wireframe interativo: aqui já podem entrar a utilização de softwares para criarmos uma interação, seja com cliques, toques, zoom, etc.

Onde fazer um wireframe?

Para cada contexto que vimos acima, o wireframe tem uma quantidade de detalhes: ele pode ser simples, feito no papel, numa lousa… Depois você pode ir para uma ferramenta, deixando-o mais interativo, feito em softwares como o Axure e o Sketch.

Lembre-se sempre de evitar adicionar elementos visuais complexos. Nesta etapa, menos é mais. Esses elementos podem te distrair da tarefa principal.

Você pode utilizar algumas técnicas no desenvolvimento do wireframe, como a técnica “Crazy 8’s”, onde você dobra um pedaço de papel em 8 seções diferentes e depois faz 8 diferentes ideias de um wireframe o mais rápido possível.

Também não se esqueça de aproveitar as 10 heurísticas de Nielsen, para melhorar a usabilidade da sua interface. Com o uso desse esboço, você poderá diminuir drasticamente os riscos de errar ao criar aplicativos e sites.