Gestão Dev & TIARTIGO

Documentação de Projetos Web – Arquitetura da Informação

A definição teórica de arquitetura da informação pode ser encontrada Arquitetura da informação, porém vou tentar explicar de uma maneira mais clara o que é, e como desenvolver uma boa arquitetura da informação para um projeto web.

Arquitetura da informação é a ciência que estuda a disposição dos elementos na página, a estrutura de navegação e o conteúdo das páginas. Portanto, fazem parte dela, além de outras coisas, o mapa do site, a descrição das informações que estarão contidas na página e o wireframe.

Dessas três partes da arquitetura da informação, irei falar nesse artigo das duas primeiras, pois o wireframe merece um artigo inteiro só pra ele, que virá mais para frente.

Descrição das Páginas

Levando-se em consideração que o briefing já foi feito, e que já se sabe o escopo do projeto já é possível definir o que cada página deve conter em termos de informação.

Vamos usar como exemplo o website de uma agência de produção (web e DTP), assim, vocês que já estão pensando em criar o seu, já podem usar como exemplo.

Uma agência cria um website geralmente com o objetivo de divulgar o seu trabalho de produção e oferecer formas de contato para que possa ter os seus serviços contratados. Logo, um site deve conter uma página inicial, uma seção de contato, uma de portifólio, uma seção com a descrição dos serviços prestados por essa agência e seção página “sobre”.

Nesse ponto temos que lembrar que uma seção não significa uma e somente uma página. Uma seção pode conter mais de uma página. Vamos ao exemplo do portifólio. A agência em questão trabalha com serviços de web e DTP, portando o portifólio pode ser dividido em algumas páginas como:

  • Web
  • Identidade Visual
  • Publicidade
  • Impressos

Cada uma dessas páginas contém imagens dos projetos já realizados e uma breve descrição sobre cada um deles, e no caso de projetos web um link externo para o projeto pronto.

Já a seção “sobre” será composta por somente uma página, com informações sobre a empresa, fundação, crescimento no mercado, principais clientes, etc.

A página de contato terá um formulário de contato para que os visitantes possam solicitar serviços ou informações, e a página de serviços também será composta de uma página, só que dividida em 4 partes, as mesmas partes do portifolio, com descrições sobre os serviços prestados, tecnologias utilizadas para cada tipo de serviço, etc.

Ficamos então com a página inicial em aberto. Essa é a abertura do site, a primeira página que um usuário vê quando acessa o site diretamente, o que não significa que deve ser supervalorizada e que as outras páginas sejam deixadas de lado. Nem sempre um usuário acessa um site digitando o endereço na barra do navegador. Eles também podem acessar seu site através de links em outras páginas que linkem direto para uma página secundária do seu site, e por isso deve se ter o mesmo cuidado com todas as páginas do site.

Mas voltando ao conteúdo da página inicial, já é sabido que ela deve conter um menu de acesso às demais páginas do site. Esse deve estar contido nas demais páginas do site, para que o usuário tenha acesso fácil de qualquer lugar, para qualquer outro lugar do site, fazendo com que a navegação flua.

Além do menu, seria interessante para uma agência mostrar o projeto atualmente em andamento, ou ao menos o mais importante em termos de marketing de todos os que estão em andamento, uma área com notícias rápidas sobre a área de atuação dessa empresa também é interessante.

Feito isso, conseguimos descrever todas as páginas do site. Resta agora organizá-las hierarquicamente.

Mapa do Site

O mapa do site é uma estrutura hierárquica das páginas contidas no site feita após a etapa de descrição das páginas, um serviço web gratuito que ajudo a desenvolver os mapas de sites é o WriteMaps, o mapa do site do exemplo acima ficaria representado da seguinte forma:

Mapa do Site (Hierarquico)Mapa do Site (Hierarquico)

Repare que não é um diagrama de difícil entendimento. As páginas estão dispostas de maneira hierárquica como em uma árvore genealógica, mostrando quais serão as páginas do projeto e qual o fluxo de navegação desse site.

Existe também uma outra maneira de representar o mapa do site, utilizando uma estrutura de tópicos dessa maneira:

Mapa do Site (Tópicos)Mapa do Site (Tópicos)

PS: utilizando o WriteMaps, é possível escrever a descrição das páginas no próprio elemento do mapa do site que representa a página em questão

Com isso terminamos esse artigo. Em breve farei uma pausa na arquitetura da informação para falar sobre o Banco de DadosBanco de dados134 conteúdosSQL ou NoSQL: eis a questão!!Data · mar 2020Banco de dados: como organizar e dar segurança para milhões de dados de loteriasData · mai 20215 serviços gratuitos na cloud para bancos de dados PostgresData · fev 2025Ver tudo em Data , mas em seguida volto com o wireframe.

é profissional da área de web, atuando nela profissionalmente desde 2005 com tecnologias como XHTML, CSS, Webstandards, PHP, JavaScript, Jquery, CodeIgniter, cursando atualmente faculdade de Sistemas de Informação na Unniversidade Anhembi Morumbi de São Paulo, Atuando. Mantém o blog pessoal (www.pauloeduardo.com) e a Psyco Media Development, empresa de desenvolvimento de Sistemas.

Ver perfil