O wireframe como parte essencial do planejamento de websites

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 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, tempo de permanência no site e 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 esseciais: 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 4 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) utilize retângulos para delimitar áreas de informações. Utilize 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 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 esses 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 referencia de desenvolvimento de wireframes é este aqui:  http://wireframes.tumblr.com/

Até a próxima!

Bruna Milagres

Fonte de pesquisa: revista w edição 117.
Imagens:  Retiradas do site wireframes.tumblr.com
Anúncios

Sobre brunampl

Bruna Milagres é graduada em Produção Multimídia pelo Centro Universitário de Belo Horizonte (Uni-BH) e pós-graduada em Marketing Digital pela Universidade Gama Filho. Na escola de artes visuais “Casa dos Quadrinhos”, cursou ”Desenho Artístico” como complemento ao seu trabalho de design. Atualmente trabalha como freelance na área de design e marketing digital.
Esse post foi publicado em Textos e Dicas. Bookmark o link permanente.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s