Como construir wireframes - técnicas e programas

Wireframes são documentos elaborados durante a fase de arquitetura de informação de um projeto web com o objetivo de estruturar o conteúdo das principais páginas, organizando os elementos que devem compor a interface, indicando a marcação dos textos e o peso dos itens. Neste artigo vamos ver algumas técnicas e programas para a construção de wireframes.

Elaborando wireframes, podemos concentrar-nos somente nas questões da interface - como acessibilidade e usabilidade - deixando questões estéticas para uma próxima etapa. Além disso, é possível discutir melhor com o cliente em cima de um wireframe. Se ele decide mudar alguma coisa, é mais fácil mudar um esboço do que um layout pronto (portanto mais rápido e mais barato). A seguir alguns pontos que devem ser levados em consideração.

Fidelidade

A primeira coisa a se fazer quando começamos a projetar wireframes é definir se eles serão construídos em baixa, média ou alta fidelidade. Todos têm suas vantagens e desvantagens e a opção por um deles varia de acordo com as necessidades do projeto.

Os de baixa-fidelidade não possuem elementos gráficos nem conteúdo real. Os de média-fidelidade possuem um grau de detalhamento maior, indicando aspectos de conteúdo, layout e sistemas de navegação. Já os de alta-fidelidade chegam mais próximo do que será o design gráfico, simulando com exatidão tamanho da página e das fontes e podendo servir como protótipos.

Cores

O uso de cor deve ser evitado. Se elas forem utilizadas, deve-se deixar claro para o design gráfico que elas não representam necessariamente o esquema de cores e ser utilizado no projeto real.

Consistência

Consistência é essencial quando elaboramos muitos wireframes para um mesmo projeto. Portanto, é ideal manter um mesmo posicionamento e tamanho de elementos que se repetem ao longo das páginas que serão esboçadas nos wireframes.

Anotações

Quem elabora o wireframe deve legendar pontos obscuros e esclarecê-los através de anotações ao lado do wireframe. Tais anotações servem de guia para o design gráfico - fazendo-o perder menos tempo em busca de informações - e também ficam documentadas para consultas futuras.

Também é importante manter nos wireframes uma numeração lógica, o nome do autor, o projeto a que ele se refere, quando foi construído e quando foi modificado pela última vez. Se for necessário, um histórico de modificações também pode ser providenciado.

Programas para construção de wireframes

O melhor programa que conheço para construção de wireframes é o Axure RP Pro. Como ele foi concebido quase que exclusivamente para esta função, é um software bastante completo e que já vem com todas as tradicionais formas do wireframes embutidas em uma biblioteca própria.

Outra grande vantagem do Axure é que ele gera protótipos navegáveis. Ou seja, você pode fazer com que os links levem a determinado wireframe, permitindo que o protótipo seja testado e validado antes de seguir para o design gráfico. Esses protótipos são exportados em HTML, levando consigo tanto o índice geral no lado esquerdo quanto as anotações no rodapé da página.

O software mais utilizado no mercado, no entanto, é o Microsoft Visio. O Visio é uma ferramenta para construção de gráficos em geral, bastante fácil de usar e com a possibilidade de importar bibliotecas de formas que ajudam na construção dos wireframes.

O arquiteto de informação Garrett Dimon oferece em seu site opções de download de templates para wireframes e uma biblioteca de formas bastante completa.

Na mesma página é possível encontrar extensões para o Omnigraffle, um software para Mac apontado por muitos como superior ao próprio Visio. Como não utilizo Mac, infelizmente, nunca tive a oportunidade de testar o Omnigraffle.

Na verdade qualquer programa que permita construir gráficos com quadros e linhas serve para elaboração de wireframes - há pessoas que utilizam até mesmo o PowerPoint. Os citados acima somente otimizam essa produção, economizando-nos o precioso tempo de trabalho.

Mais sobre wireframes

• IAwiki: WireFrames (em inglês)
• Strange Systems: Using Wireframes (em inglês)
• Webinsider: Wireframe, documento cada vez mais importante
• Ivo Gomes: Wireframes
• Usabilidoido: Quanto mais simples o wireframe, melhor
• Fernando Aquino: Wireframes - Sugestões para problemas comuns
• Fator W: Função de designer é pintar caixinha de wireframe?