Como criar um diagrama de árvore para um site |
Por Michelle Castle Atualizado em 17 abril, 2017 Traduzido por Daniel Villarreal
Um diagrama de árvore de um site ilustra como as páginas são organizadas. As páginas pai são mostradas acima ou à esquerda das páginas filhas, indicando as relações entre eles e como são acessadas. As equipes de desenvolvimento da Web usam os diagramas ao criar ou redesenhar websites. Os diagramas de árvore de um site podem ser simples ou elaborados, dependendo do tamanho do site e das necessidades da equipe de desenvolvimento.
Os diagramas de árvore de um site são uma representação visual da sua estrutura, semelhante a um organograma (Ryan McVay/Photodisc/Getty Images)
Crie uma lista das páginas que o site contém ou conterá. Certifique-se de que cada item listado seja uma página em seu site. Dependendo do tamanho dele, atribua uma referência numérica para cada página para ajudá-lo na construção de seu diagrama e rastrear o progresso à medida que desenvolve o projeto.
Usando listas de marcadores, organize o esquema para mostrar as relações pai e filha entre cada página em seu site. Por exemplo, o site de um loja de roupas on-line pode ter páginas pai de nível superior que leva a homens, mulheres e vestuário infantil. Cada uma dessas páginas teriam tipos de vestuário, como camisas e calças, listadas abaixo deles no esquema e eventualmente levando a páginas para produtos individuais.
Comece a criar o seu diagrama, desenhando um retângulo para cada categoria na parte superior de um documento. Insira um título curto para cada página de nível superior. Inclua o número de referência da página para que você possa procurar detalhes adicionais sobre elas em seus outros documentos de planejamento do website.
Desenhe retângulos para cada subcategoria embaixo de uma das categorias de nível superior. Por exemplo, desenhe quatro retângulos sob a categoria de nível superior de roupa masculina para camisas, calças, bermudas e casacos. Alinhe esses retângulos lado a lado para ilustrar que as páginas que eles representam estão no mesmo nível dentro da estrutura do seu site.
Ligue as páginas de subcategorias com a categoria de nível superior dentro da que pertencem como se você estivesse criando um gráfico de hierarquia de uma organização. Por exemplo, desenhe linhas para as páginas de camisa, calças, bermudas e casacos na categoria pai de roupas dos homens. Faça linhas retas semelhantes às de um organograma para aumentar a legibilidade do diagrama no site.
Continue a ramificação de fora do seu diagrama em subcategorias até que ele contenha a quantidade de detalhes que você precisa para desenvolver efetivamente o seu site. Por exemplo, desenhe caixas de camisas sociais e camisas casuais na seção de categoria vestuário dos homens. Pode não ser necessário no entanto, incluir a página para cada camisa casual de homens no seu diagrama.
Complete as seções do diagrama para todas as categorias de nível superior do seu site da mesma forma. Por exemplo, conclua as seções de mulheres e infantis do website de vestuário.
Modifique os símbolos utilizados no diagrama de árvore para indicar as informações que você precisa transmitir à sua equipe. Por exemplo, use retângulos arredondados para páginas dinâmicas e uma ilustração de várias páginas empilhadas juntas para mostrar um grupo de páginas similares que não estão listadas individualmente. Inclua uma legenda em seu diagrama para explicar suas convenções.
University of Texas at Austin: Estrutura do site [em inglês]
Boxes and Arrows: Diagramas de sites: Mapeamento e informação de espaço; Jason Withroe; agosto de 2004 [em inglês]