MUF #23: Como construir o mapa do site
Publicado em 11.08.2006 na categoria AI
Com as seções do site do Café Colombo classificadas e rotuladas, chegou a hora de colocá-las em um diagrama que permita uma visão geral do que irá ao ar. Ou seja, é hora de construir o mapa do site. Não aquele link que cheg ao usuário final, mas um documento interno de desenvolvimento que ajuda bastante no andamento do projeto.
O mapa do site do Café Colombo foi criado utilizando o vocabulário visual criado por Jesse James Garret, que hoje já é quase uma padronização entre os arquitetos de informação e designers de interação - ao menos no exterior.
Gosto de esboçar primeiramente o mapa no papel, como pode ser visto na figura acima. É mais rápido do que ficar mexendo nos elementos no computador, mesmo em programas otimizados para essa tarefa, como o Microsoft Visio e o Smart Draw. Tentei abranger praticamente todos os processos que acontecerão no site para ter exata noção de quantas páginas terei que produzir posteriormente.
Quando tudo já está decidido e devidamente no lugar, simplesmente passo a limpo no software específico. No caso do Café Colombo, utilizei o Adobe Illustrator para chegar ao resultado que pode ser visto abaixo (clique na imagem para vê-la ampliada ou baixe o PDF).
No próprio site do Information Architecture Institute é possível baixar o arquivo EPS com a biblioteca de formas para o Illustrator.
O Visio, no entanto, é mais otimizado para essa tarefa, pois conecta facilmente os elementos e não os distorce quando eles são ampliados. Além disso, o Illustrator tem o problema de possuir uma única página.
A biblioteca de formas também está disponível para ser colocada no Visio 2000, Visio 5 e Visio 4, além de outros softwares.
Vocabulário Visual de Garrett
O vocabulário visual de Garrett é um conjunto de símbolos usado para descrever um sistema, estrutura ou processo. Ele pode ser usado por um arquiteto de informação ou desiner de interação para descrever a estrutura e/ou o fluxo da experiência do usuário de um website, intranet ou qualquer outro sistema.
Neste mapa do Café Colombo, a única notação que não consta no vocabulário de Garrett é a página semi-transparente para designar um phantom label, como fiz com a seção livro. Um caso desses, se fôssemos seguir à risca o vocabulário visual, deveria ser informado através de uma legenda.
O sitemap do Café Colombo não utiliza (porque não há necessidade) todas as formas do vocabulário visual, então é bom dar uma lida na explicação em português do Instituto de Arquitetura de Informação para ter uma visão mais geral dos significados de cada elemento. Bons estudos e até o próximo post, que vai falar sobre a construção de wireframes.
Compare Preços de: Lavadora, purificador, refrigerador, bebedouro no JáCotei.
Ótimo post.
Tô acompanhando, tá muito bom.
Também estou nessa!
soh lendo e tageando….um dia vou precisar, com certeza!
muito bom o reallity….!
flw
“[...] Seguinte, já tem um tempo que eu estou acompanhando a série de posts Meu último freela, do blog fatorW do Walmar Andrade.
Como o próprio autor definiu, é como um “reality show” do desenvolvimento de um site, deeeesde os primórdios nas reuniões com o cliente, até o desenvolvimento final. [...] “
Parabéns Walmar, é ótimo ver como a teoria é aplicada ..
Cara achei 10 sua iniciativa… vc só tem a ganhar com isso.
Estou acompanhado diariamente como se fosse uma novela…
Peguei dicas importantissimas para os proximos projetos.
Só não gostei do nome do reality Show.
“Meu último Freela”
Último ? dá uma impressão que vc não vai fazer nenhuma freela daqui para frente.
Sei que é ultimo, porque foi o ultimo q vc pegou. Mas na lei do KISS é melhor ficar mais ou menos assim “Freela Café Colombo”.
Só uma sugestão, nao me cosidere como entrão.
ok
Obrigado.
Edu
Além dos programas citados, o Axure RP Pro também é uma ótima opção.
Eduardo,
Na verdade é último de último mesmo, não de mais recente. Decidi não mais fazer duplo expediente para melhorar a qualidade de vida. Só farei freelas a partir de agora se for algo realmente irrecusável, do contrário fico só no trampo na empresa, que já consome bastante.
Mais detalhes neste post.
Fred,
O Axure é muito bom (muito bom mesmo, melhor que o Visio) para fazer wireframes, mas para mapas nem tanto. Falarei sobre ele nos posts sobre wireframes.
Preciosíssimo esse reality show! Acabei de ler todos os 23 capítulos de uma só vez! hehe
A TV devia produzir reality shows assim, ao invés das porcarias de BBB’s… :P (tudo bem que existe O Aprendiz, mas é um no meio de vários)
Muito obrigado por compartilhar essas informações tão valiosas assim, de uma forma tão aberta. A web te agradece…
Um grande abraço
Correção - o illustrator TINHA problema com múltiplas páginas, agora não tem mais. ;)