Processo criativo – parte 2

Introdução

Como eu falei no artigo anterior, vou mostrar exemplos de wireframes, exemplos de organogramas de navegação e dizer como e quando eles devem ser aplicados.

Conteúdo

Wireframes

Um exemplo clássico de wireframe é esse abaixo.

Ao elaborar um projeto de um site, antes de mostrar qualquer arte para o cliente é necessário que ele aprove o wireframe para que tudo fique acertado, evitando trabalhos futuros. Nessa hora, é possível fazer qualquer mudança no posicionamento e diagramação do conteúdo.

Em alguns casos, é possível criar um wireframe um pouco mais detalhado após a aprovação do wireframe bruto (este acima). Para aqueles clientes mais exigentes, que gostam de acompanhar de perto cada etapa do projeto, pode elaborar um pouco mais colocando os botões, ícones, tipo de font que será usada e etc, mas nada com cores ou efeitos. Veja o exemplo do livro Experiência Perfeita do Felipe Memória http://www.flickr.com/photos/fmemoria/91940215/in/set-72057594054908097/

Organogra de Navegação

O objetivo de se criar um organograma de navegação é simplesmente para poder exemplificar e mostrar como será feita a navegação entre as páginas e facilita, também, na hora de saber os links e conteúdo que entrará em cada sessão do site.

Veja um exemplo:

Neste exemplo, fiz um fluxo da home onde teríamos os links de quem somos, produtos e serviços, clientes e contato. Explorando um pouco mais o organograma:

Nesse exemplo vemos o conteúdo de quem somos e os links internos desta sessão, são eles: equipe, projetos sociais e artigos. Ao entrar em quem somos, apareceria o texto introdutório.

Considerações finais

Essas duas etapas são feitas na mesma etapa: criação e arquitetura de informação. Algumas empresas ou pessoas fazem em separado, o que não impede em nada suas aplicações. O importante é fazê-las, pois assim você está menos suscetível ao erro e a ter que ficar fazendo ajustes e modificações depois do layout pronto.

Espero ter ajudado mais um pouco nesta etapa. No próximo veremos como aplicar a identidade visual em um layout. Abraços.

Autor: Daniel de Paola – colunista de design e usabilidade

Qualquer dúvida entre em contato por dpaola@gmail.com ou no fórum.