Tree Diagram
Create a tree diagram to help plan your website.
This activity will help you build effective navigation for your online space as well as plan the structure of your website and online spaces.
A website tree diagram is a diagram representing the structure of a given website. Above you can see an example website tree diagram. Labelled at the top of the diagram is the first page on a website, this could be titled “Homepage” or the website title. Other labels are written below leading from this top label, and more labels leading from these, and so on.
Each label represents a page or content area on a website, and the lines represent how the pages are structured together within the website. This type of diagram both provides a map of the structure of the website but also how a website vistor might navigate their way through the website content.
Create your own tree diagram
Draw your own tree diagram to plan your website. Use a blank sheet of paper or the template below. You should think about what the first pages people will see are, and create them at the top of the page, using the diagram at the top of this page as an example. Think about what pages will link to one another, and how that affects how visitors will navigate through your website.
Once you have made your diagram you can then create the different spaces to build your website and use the diagram labels to create a navigation menu for your website.
Multiple online spaces
Want to create multiple websites and for your visitors to navigate their way from one to the next? You can follow this same activity to plan how these spaces will site alongside each other and where and how to link them together.
Frederick Lanchester Library, Coventry University
Gosford Street, Coventry CV1 5DD
dmll@coventry.ac.uk | 02477 659495
@disrupt_learn
