Com o aprimoramento de ferramentas,
difusão de conhecimentos pela web e a mutação dos desejos dos
consumidores, ampliou-se a necessidade do estudo e do planejamento
sistemático de um projeto de sites. Estudos de usabilidade, arquitetura,
navegação e nomes de rótulos para links são peças-chave na hora de
elaborar um bom benchmarking.

A experiência do usuário, o tempo de
permanência no site e as taxas de conversão nunca foram tão cobiçados
quando tratamos de layout/sistema. Clientes e departamentos de
comunicação estão preocupados com isso, afinal nunca foi tão fácil
analisar a concorrência e estar por dentro das principais novidades do
mercado.

Passar por experiências desgastantes e
chatas durante um projeto geram desvalorização do trabalho, desgaste da
equipe e, principalmente, do cliente. Um bom planejamento permite que o
projeto ganhe tempo, evita retrabalho e abre a mente do cliente para
discutir pontos essenciais: a navegação.

O desenvolvimento do wireframe é
uma etapa importante e auxilia na percepção dos possíveis erros do
projeto, ou seja, uma maneira mais fácil para acertar de primeira.

Essa
etapa é essencial e vem logo depois de aproximadamente quatro fases do
projeto: pesquisa, estudo, estratégia e arquitetura. A arquitetura é
necessária e faz diferença principalmente quando há projetos grandes,
com vários sublinks em links da navegação principal e hiperlinks. Com a
arquitetura bem organizada e definida, fica ainda mais fácil entender se
o objetivo do site está sendo atingido.

Se o objetivo do wireframe é facilitar a
compreensão da navegação e dar a possibilidade de cliente e equipe de
projeto discutirem a organização do site, ele deve conter informações de
navegação, disposição de elementos no layout e elementos que expliquem
as possibilidades de interatividade.

Inicialmente, folha de papel e lápis são
ferramentas excelentes para construção de esboços. Escolha as telas que
necessitam do desenho de wireframe (as principais e com mais
informações) e utilize retângulos para delimitar áreas de informações.
Use algum grafismo para simbolizar retângulos que contenham fotos e
linhas para textos. Use setas para indicar seleções importantes. Simular
botões e numerá-los para explicar esses mesmos números e áreas em um
outro documento é um método ótimo de minimizar a poluição da página.

Se você não tem o costume de fazer
wireframes e no momento do seu primeiro esboço você sentir dificuldades,
separe alguns portais e sites que goste e faça o wireframe deles. Essa
técnica funciona e muito bem!

Após o rascunho em folhas de papel,
passe para algum programa de editoração. Há também programas
especializados em wireframes.

Geralmente quando desenho sites, não
gosto de me prender a tentar já inserir modelos de botões, cores etc.
Uso apenas retângulos, uma fonte e duas cores, para diferenciar áreas.
Assim, é mais fácil se concentrar apenas na navegação, rótulos e
arquitetura, sem nem pensar em como o layout será utilizado. O segredo é
o foco.

Uma outra boa dica é criar seus próprios
padrões de wireframes para todos os projetos. Utilizar padrões facilita
e economiza tempo.

A etapa de apresentação dos wireframes
deve ser muito bem explicada. Mostre principalmente ao cliente a
importância da etapa. Discuta sobre os wireframes, aponte as navegações,
faça a defesa do estudo e esteja aberto a sugestões. O cliente pode até não
entender de desenvolvimento de sites, mas será a pessoa mais indicada,
por exemplo, a definir qual melhor nome para uma determinada área que
envolva conhecimentos sobre o produto ou o serviço a ser vendido.

Anote tudo. Quanto mais detalhado
estiver seu wireframe, consequetemente as próximas etapas sairão de
acordo com os seus objetivos e do cliente. Deixe todo conteúdo com
informações que sejam lidas por qualquer pessoa, mesmo que ela não
esteja na área de comunicação e/ou digital.

Não deixe de anotar os “porquês” das
suas idéias quanto a posicionamento, rótulos, arquitetura. Defenda os
itens que foram dispostos na navegação e como eles podem contribuir
para que o site seja mais intuitivo, usual.

O planejamento de sites e a utilização
de bons wireframes permitem que todos envolvidos no projeto foquem suas
atenções para a navegação, usabilidade e interação. O projeto
consequentemente atingirá seus objetivos. Boa sorte!

Obs.: Um site excelente para você ter
como referência de desenvolvimento de wireframes é este aqui:  http://wireframes.tumblr.com/

Até a próxima!