MUF #24: Elaborando Wireframes do Café Colombo

Depois que o mapa do site foi enviado e aprovado pelo cliente, chegou o momento de elaborar os wireframes do site do Café Colombo, projeto cujo deenvolvimento está sendo acompanhado aqui no blog através do Reality Show Meu Último Freela.

Wireframes (do inglês, linhas e quadros) devem ser entendidos como o esqueleto ou a planta baixa das principais páginas que compõem um projeto web. Em outras palavras, eles mostram como a página ficará sob a perspectiva da arquitetura de informação.

É na elaboração dos wireframes que o arquiteto de informação deve decidir - com as restrições físicas do espaço - onde deve entrar o sistema de navegação, qual a ordem dos itens no menu, qual o peso do destaque principal em relação ao secundário, etc.

Esses esqueletos devem ser criados para as páginas mais importantes do projeto, como a home, o resultado da busca e outras seções que possam servir como modelo para as demais páginas do site.

Particularmente não acho necessário criar wireframes para absolutamente todas as páginas que formarão o projeto, somente para as páginas mais importantes ou difíceis. No caso do Café Colombo, criei wireframes para a home, para a página dos programas e para as seções institucional, artigos e indicações.

Wireframes do Café

Para o projeto do Café Colombo, elaborei os wireframes em média-fidelidade. Acredito ser a melhor opção, já que ao passo em que os wireframes de baixa-fidelidade não dizem muita coisa sobre a interface, os de alta fidelidade acabam consumindo tempo e preocupações que caíriam melhor na fase de desenvolvimento do design gráfico em si.

Há que se considerar também que, como se trata de um projeto freelancer, os wireframes são feitos por mim e para mim mesmo. Claro que nesse intervalo entra o cliente para avaliar e aprovar os esboços, mas é diferente do que elaborar wireframes para outro designer gráfico. Por isso também a falta das anotações típicas dos wireframes, como pode ser conferido na figura abaixo:

Seguindo o que havia sido planejado na fase de diagnóstico, destaquei na home o último programa que foi ao ar. Logo abaixo, no segundo espaço mais nobre, vem o grande diferencial da internet: a área de interatividade. Dois outros boxes compõem a parte principal da home, um dizendo qual será o assunto do próximo programa e outro com uma navegação direto ao ponto no arquivo de programas.

A coluna da direita - que se repetirá em várias páginas internas - foi destinada à fidelização (newsletter e feeds) e rentabilização (vendas comissionadas e links patrocinados). A parte inferior da página foi destinada aos bastidores (blog), artigos, contato e informações institucionais.

Apresentando wireframes ao cliente

Apresentar wireframes ao cliente é um ponto um tanto quanto delicado. É preciso explicar a ele quais as finalidades daquele esboço e esclarecer que ele não representa design gráfico.

A experiência com o Café Colombo foi positiva. Discuti com o interlocutor da equipe do programa o posicionamento e peso dos elementos e tive que fazer apenas duas mudanças em relação ao projeto original (posicionamento de itens no menu e a troca de posição de duas chamadas).

Nos próximos posts - fora da série Meu Último Freela - irei falar um pouco sobre quem deve construir os wireframes e sobre os softwares (antes que perguntem, utilizei o Microsoft Visio) e técnicas para construção desses elementos.