Um diagrama em árvore do site ilustra como as páginas de um site são organizadas. As páginas principais são mostradas acima ou à esquerda das páginas secundárias, indicando os relacionamentos entre as páginas da web e como são acessadas. As equipes de desenvolvimento da Web usam os diagramas ao criar ou redesenhar sites. Os diagramas de árvore do site podem ser simples ou elaborados, dependendo do tamanho do site e das necessidades da equipe de desenvolvimento.
Passo 1
Crie uma lista das páginas da web que o site contém ou conterá. Certifique-se de que cada item listado será uma página em seu site. Dependendo do tamanho do seu site, atribua uma referência numérica a cada página para ajudá-lo a construir o diagrama do seu site e monitorar o progresso conforme você o desenvolve.
Passo 2
Usando listas com marcadores, organize o esboço para mostrar as relações pai-filho entre todas as páginas do seu site. Por exemplo, o site de uma loja de roupas online pode ter páginas principais de nível superior que levam a roupas masculinas, femininas e infantis. Cada uma dessas páginas teria tipos de roupas, como camisas e calças listados abaixo delas no esboço, levando a páginas de produtos individuais.
etapa 3
Comece criando seu diagrama desenhando um retângulo para cada categoria na parte superior de um documento. Insira um título curto para cada página da web de nível superior em seu diagrama. Inclua o número de referência da página para que possa pesquisar detalhes adicionais sobre a página em seus outros documentos de planejamento do site.
Passo 4
Desenhe retângulos para cada subcategoria abaixo de uma de suas categorias de nível superior. Por exemplo, desenhe quatro retângulos na categoria de nível superior de roupas masculinas para camisas, calças, shorts e casacos. Alinhe esses retângulos lado a lado para ilustrar que as páginas que eles representam estão no mesmo nível na estrutura do seu site.
Etapa 5
Conecte as páginas de subcategorias à categoria de nível superior à qual pertencem, como se você estivesse criando um gráfico de hierarquia de uma organização. Por exemplo, desenhe linhas das páginas de camisas, calças, shorts e casacos até a categoria principal de roupas masculinas. Faça linhas retas semelhantes às de um organograma para aumentar a legibilidade do diagrama do seu site.
Etapa 6
Continue ramificando seu diagrama em subcategorias até que o diagrama em árvore contenha a quantidade de detalhes de que você precisa para desenvolver seu site com eficácia. Por exemplo, desenhe caixas de camisas sociais e camisas casuais na seção de camisas da categoria de roupas masculinas. Pode não ser necessário, no entanto, incluir a página de cada camisa masculina casual no diagrama do site.
Etapa 7
Complete as seções do diagrama para todas as categorias de nível superior do seu site da mesma maneira. Por exemplo, preencha as seções femininas e infantis do site de roupas.
Modifique os símbolos usados em seu diagrama de árvore para indicar as informações que você precisa transmitir para sua equipe. Por exemplo, use retângulos arredondados para páginas da web dinâmicas e uma ilustração de várias páginas da web empilhadas para mostrar um grupo de páginas da web semelhantes que não estão listadas individualmente. Inclua uma legenda em seu diagrama para explicar suas convenções.
