Comment créer un diagramme d’arbre pour un site Web

Un diagramme d’arborescence de site illustre l’organisation des pages d’un site Web. Les pages parents sont indiquées au-dessus ou à gauche des pages enfants, indiquant les relations entre les pages Web et la façon dont elles sont consultées.

Les équipes de développement Web utilisent les schémas lors de la création ou de la refonte de sites Web. Les arborescences de site peuvent être simples ou complexes, en fonction de la taille du site et des besoins de l’équipe de développement.

Créer une liste de pages Web sur le site contient ou va contenir

Assurez-vous que chaque élément répertorié sera une page de votre site Web. En fonction de la taille de votre site Web, attribuez une référence numérique à chaque page d’aide afin de construire votre diagramme de site et de suivre ses progrès, tels que le développement de votre site Web.

Organiser la structure

À l’aide des listes à puces, organisez la structure pour afficher les relations parent-enfant entre chaque page de votre site Web. Par exemple, le site Web d’un magasin de vêtements en ligne peut comporter des pages parentales de premier niveau proposant des vêtements pour hommes, femmes et enfants.

Chacune de ces pages comporte des types de vêtements tels que les chemises et les pantalons énumérés ci-dessous dans la structure, ce qui conduit éventuellement à des pages pour des produits individuels.

Créer votre modèle

Commencez par créer votre propre modèle en traçant un rectangle pour chaque catégorie en haut du document. Entrez un court titre pour chaque page Web de haut niveau du diagramme.

Incluez le numéro de référence de la page afin que vous puissiez rechercher plus de détails sur la page dans vos autres documents de planification de site.

Classer par catégories

Dessinez des rectangles pour chaque sous-catégorie dans l’une des catégories de niveau supérieur. Par exemple, tracez quatre rectangles dans la catégorie de niveau supérieur des vêtements pour hommes pour les chemises, les pantalons, les shorts et les manteaux.

Alignez ces rectangles, côte à côte pour illustrer le fait que les pages qu’ils représentent se trouvent au même niveau dans la structure du site Web.

Lier les pages de sous-catégorie

Liez les pages de sous-catégorie à la catégorie de niveau supérieur à laquelle elles appartiennent, comme si vous créiez un graphique de hiérarchie d’organisation.

Par exemple, tracez des lignes allant de la chemise, du pantalon, du short et des pages de la main à la catégorie père des vêtements pour hommes. Créez des lignes similaires à celles d’un organigramme pour améliorer la lisibilité du diagramme de site.

Continuez de créer des branches dans des sous-catégories jusqu’à ce que l’arborescence contienne la quantité de détails dont vous avez besoin pour développer efficacement votre site Web. Par exemple, créez des chemises de ville et des chemises tout-aller dans la catégorie vêtements pour hommes.

Cependant, il n’est peut-être pas nécessaire d’inclure chaque homme occasionnel dans le diagramme du site de la page du maillot.

Complétez ensuite les sections pour toutes les catégories de haut niveau de votre site Web de la même manière. Par exemple, complétez les sections femmes et enfants du site Web sur les vêtements.

Attribuer des symboles d’informations

Modifiez les symboles utilisés dans l’arborescence pour indiquer les informations nécessaires à transmettre à votre équipe.

Par exemple, utilisez des rectangles arrondis pour les pages Web dynamiques et une illustration de plusieurs pages Web empilées pour afficher un groupe de pages Web similaires non répertoriées individuellement. Inclure une légende sur le diagramme pour expliquer vos conventions.