Para manter você sempre atualizado, disponibilizamos artigos super interessantes sobre Internet e assuntos relacionados.

Todos os artigos publicados, neste web site, são de inteira responsabilidade de seus autores, não refletindo obrigatoriamente a opinião da Tecmedia Internet Design.

O wireframe como parte essencial do planejamento de websites

07/07/2010

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.

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/

Autor: Bruna Milagres Pires Lopes

---

Mais artigos

• 06/01/2012 - 2012: Confira as tendências para o marketing digital
• 21/12/2011 - O que é Google Analytics?
• 08/12/2011 - Tendências para o E-Commerce no Brasil em 2012
• 18/11/2011 - A sua marca já faz o monitoramento online?
• 08/11/2011 - Mente, coração e bolso: o ciclo da fidelidade
• 26/10/2011 - Dicas para o profissional de TI diante do cliente
• 18/10/2011 - Mantenha os clientes na loja virtual
• 13/10/2011 - A influência online
• 19/08/2011 - Seis regras essenciais para incrementar o e-commerce das pequenas e médias empresas
• 02/05/2011 - Por que não dá certo manter sites?
• 11/04/2011 - A força da comunicação online no e-commerce
• 17/03/2011 - Mídias sociais causam mais danos a marcas que Procon
• 02/03/2011 - A Geração Y e o Empreendedorismo na web
• 22/02/2011 - Internet, 20 anos!
• 26/01/2011 - Como gerenciar crises nas redes sociais
• Todos os artigos