Depois de algum tempo, volto a postar aqui do blog da @xthor !

Para atingir o sucesso em um projeto Web, são necessários diversos processos alocados em fases de uma metodologia, no caso da Xthor, uma metodologia própria.
A fase mais complexa do projeto é a fase de concepção, onde é realizado o planejamento,  a Arquitetura da Informação e a criação do conteúdo para o mesmo.

Recentemente li em um blog um excelente artigo sobre a relevância do wireframe para a concepção do Projeto. Abaixo transcrevo o artigo.

Boa Leitura!

O wireframe como parte essencial do planejamento de websites

Autora: Bruna Milagres Pires Lopes

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.