Website Structure

Previous Back to the Top Level Design

The top level design gives you the basic structure, but for a real site with any complexity, it is also necessary to think about more detail within the sections.

Heirarchical Tree Structure

Many of the sections of your site will probably have further subsections, and those subsections may also have sub-subsections within them. In many cases, these subsections will correspond to items on submenus in the navigation. But not always: you may decide to use a different navigation scheme - remember we're just designing the logical structure of the site, not its appearance. Also, these subsections will usually correspond to subfolders within the main section folders.

If we take the previous top level design as our starting point, and think about expanding our design of two of the sections, we would get the following diagram. This is known as a tree structure diagram or a heirarchy diagram.

Tree Structure

This clearly shows the relationships between sections and subsections. So, for example, it is clear that the Overview section is subordinate to the Front Page, and within the Overview section, is the Tools section and, finally, within that is the Editor section. This structure starts to suggest navigational choices such as menus with nested submenus. In that case, I might decide, based on this design, that I would not expect to be able to go directly to the Editor section from the Front Page without using some intermediate navigation control.

I would usually expect the final elements in the tree design, unsurprisingly called leaves, to correspond to actual pages in the site. So, looking at this tree, I would expect there to be at least the following pages in addition to the Front Page:

The intermediate nodes in the tree, such as Overview and Tools may also correspond to pages, or they may not - they may instead be realized as elements in the navigation design.

Clearly, putting the full design for a complete site onto a single diagram would get very complicated! Usually I would do a series of diagrams, one for each subsection, indicating how they were connected into the top level design.

Some simplification in the presentation of the design are acceptable. For example, consider the use of a "Home" button. Most sites have a Home button on every page, which takes you directly back to the front page of the site. To show all those connections on the tree diagram would make it very cluttered, so they are usually left out. The use of explicit "back" and "up" buttons, which allow the user to backtrack to previous elements in the site can also usually be left out.

NextThere are a number of other aspects of structural design that we need to look at...