Website Structure

Although the navigation and visual appearance of a website dominate the end user's experience, for the web designer, the structure of the site determines how easy it is to work with, modify and extend. Also, the structure of the site can be a significant issue in the design of the navigation. Because of this, the structure of the site is probably the most important aspect of the design for the developer.

Some writers call this aspect of the design the information architecture (see, for example, the Two Step Designs article here). The scale and complexity of your site, and the nature of your client's content, will have implications for the amount of effort that you need to put into designing a good information architecure. Whilst a single hierarchy diagram might suffice for a simple site; a site with a database backend and dynamically generated page content, will need considerably more thought. However complex your site, if you get the information architecture right, the rest of the design should follow naturally. If you get it wrong, then you'll probably find yourself struggling to make all the components fit together.

A vital secondary use for the structure design is to allow you to check with your client whether you have correctly interpreted their requirements. Your information architcture should contain all of the key elements that you identified from the brief. If you have missed anything, hopefully your client will identify this when reviewing the site structure diagrams.

Top Level Structure

The top level structure of a site will usually correspond to the main navigation choices offered to the user. It should also reflect the organization of the content that the site delivers. If you think about this site, an initial top level design would be drawn using a tree structure as shown below (click on the image for a full size version):

Top Level Design

The order that the items appear in on the design diagram doesn't mean they have to appear in that order in the navigation; at this point we're just designing the structure of the site.

For each of these sections in the diagram, we would usually have a separate folder in the site to hold all the files for that section.

Additional Elements

However, this diagram only shows the structure of the site content. In addition to these sections, a site will normally contain a number of additional folder to help with the basic organization. For example, we would usually add a special folder in the top level to hold all of the site images. These are the images that are used throughout the site for navigation buttons and so on. By convention, this folder is usually called img. Having all these images in one places means that they are easy to find when you are marshalling page content.

Also, if I am working with scripts and style sheets that are going to be used by many different pages on the site, I also create a specific folder to store them. Usually I follow the programming convention and call this folder include, because the items it contains will be included in many other pages.

Also, remember that Dreamweaver itself may add folders to your structure as you develop the site. For example, if you add one of the supplied AJAX controls to a page, then Dreamweaver creates a top level folder called SpryAssets. So, if you suddenly see a folder in your site that you didn't create, don't delete it, it was almost certainly generated by Dreamweaver to provide a feature that you asked for!

This means that the final top level design will almost certainly include a number of additional sections that are not directly connected to the structure of the site, but which are needed to make the design work efficiently. Usually I would not put all of these folders in the site structure diagram. If I am using these diagrams to discuss site structure with a client, then too much extra information can be confusing, rather than helpful.

NextOnce you have the top level design in place, it's time to start thinking about more of the details of the structural design...