How to Create a Tree Diagram for a Website
By Michelle Castle
A website tree diagram illustrates how pages on a website are organized. Parent pages are shown above or to the left of child pages, indicating the relationships between webpages and how they are accessed. Web development teams use the diagrams when creating or redesigning websites. Website tree diagrams can be simple or elaborate, depending on the size of the website and the needs of the development team.
Step 1
Create a list of the webpages the website contains or will contain. Ensure that every item listed will be a page on your website. Depending on the size of your website, assign a numerical reference to each page to aid you in building your site diagram and tracking progress as you develop your website.
Step 2
Using bulleted lists, organize the outline to show the parent-child relationships between every page on your website. For example, an online clothing store's website may have top-level parent pages that leads to men's, women's and children's clothing. Each of those pages would have types of clothing such as shirts and pants listed under them in the outline, eventually leading to pages for individual products.
Step 3
Begin creating your diagram by drawing one rectangle for each category across the top of a document. Insert a short title for each top-level webpage into your diagram. Include the page's reference number so you can look up additional details about the page in your other website planning documents.
Step 4
Draw rectangles for every subcategory beneath one of your top-level categories. For example, draw four rectangles under the top-level category of men's clothing for shirts, pants, shorts and coats. Align these rectangles side-by-side to illustrate that the pages they represent are at the same level within your website's structure.
Step 5
Connect the subcategories pages to the top-level category they belong within as if you were creating an organization's hierarchy chart. For example, draw lines from the shirt, pants, shorts and coats pages to the men's clothing parent category. Make straight lines similar to those in an organizational chart to increase the readability of your site diagram.
Step 6
Continue branching your diagram off into subcategories until the tree diagram contains the amount of detail you need to effectively develop your website. For example, draw boxes of dress shirts and casual shirts under the shirts section of the men's clothing category. It may not be necessary, however, to include the page for every casual men's shirt in your site diagram.
Step 7
Complete the diagram sections for all the top-level categories of your website in the same manner. For example, complete the women's and children's sections of the clothing website.
Step 8
Modify the symbols used in your tree diagram to indicate the information you need to convey to your team. For example, use rounded rectangles for dynamic webpages and an illustration of several webpages stacked together to show a group of similar webpages that aren't listed individually. Include a legend on your diagram to explain your conventions.
References
Tips
- Consider drawing a portion of your diagram on paper before beginning to create the diagram using a computer.
Warnings
- Website tree diagrams can be very large. Chunk your diagram into smaller diagrams that each represent one small section of the website in order to print the diagram. Assemble the diagram on a wall for a large visual representation of your website, or put the diagrams in a notebook for reference as you develop the website's many pages.
Writer Bio
Michelle Castle began writing professionally in 2005. She has written technology news and tutorials for consumers, brochure and web copy for the Ehlers-Danlos National Foundation, and promotional materials for religious nonprofits including the International Pentecostal Holiness Church. Michelle has a Bachelor of Arts in English from Oklahoma State University.