What is a Relation Tree Diagram?

To be honest I’m not sure whether that’s actually a technical term or not but I decided it sounds better than ‘one of those diagram things with boxes and words and arrows and stuff’, so I’m gonna roll with it.

A relation tree diagram in Web Design is a diagram which, at its simplest, maps out the pages of a website and how they relate to each other (hence the relational bit). From the diagram below we can easily see what pages we need to create and how they link to each other. We know from this that the top level pages should be easily accessible from everywhere in the site and that the sub-pages can be emphasised more on the pages in their own category.

Why are Relational Tree Diagrams so Awesome?

For you (the client):
It gives you the opportunity to think about what content you need to cover and how to organise it without investing too much time worrying about the actual content itself.

For us (the developers):
A good diagram included in a brief is the single most important way for us to get an instant idea of the size and scope of a project. It is important not just for planning the content itself but also for designing the layout and planning the site’s navigation and user interface. For more complex sites it gives us an idea of what sort of functionality we need to accommodate. The example below for a simplified e-commerce site gives us an idea not only of the pages we need to make, but also things such as user profiles and permissions, the shopping process and many other details about the site’s functionality.

While we don’t expect our clients to come up with a full working diagram of how the site will operate (that’s our job!), the more information you can give that is displayed in a simplified way, the easier it is for us to assess your needs.

So how do I make a tree diagram to send to you?

I always find the best way is to draw it up on paper first, its quick and easy, and without the inevitable annoyances of drawing on a computer. Once your mock-up is made there’s a host of tools available for drawing up diagrams on your pc (or mac) – some free, some super expensive!

The top diagram in this post was drawn up using Google Docs drawing program which is free for users with a google account. The bottom diagram was drawn using adobe FireWorks, a premium web-design program from the Adobe design suite.

There are various online tools for diagram drawing and a great post detailing some of them can be viewed here.

Liked this Post? Share it with your friends!

Or read some more from the Client Information Series!

• Writing effective content for your site.
• The importance of relational tree diagrams in planning your website
• What is a content management system or CMS?
• Designing for different screen resolutions
• All about browsers (and why we hate Internet Explorer)
• What is Search Engine Optimisation or SEO and why is it important?
• An introduction to HTML and CSS snd other coding languages.
• How to take a screen capture.