Gdes2000 Example Site Maps - Nov, 2010

Site maps are an important stage in the production process when planning a website. When I used to freelance on a regular basis I used them all the time and they not only acted as a visualisation of the potential site [that was clear to both myself and the client] but also like a visual 'contract' in many ways. These don't replace formal contracts obviously but once the site map is signed-off by your client then you have a clear mandate to work to that structure/size/scope of site [I used to put notes on them too from client meets so that I was aware of all of the refs mentioned from early stages of devt]. Below is a couple of examples of site maps and associated devt/construction thoughts.

Andystevo example: [Click to enlarge]

Click to enlarge.

Roz Port - Andy Stevensons group, Thurs evening

1. I used colour to identify the three levels, Homepage, Main Page and Subpage, and then used the brief as a guide for pages on my site map. I added notes about possible issues I should take into account for my future reference and also begun to generate ideas whilst doing this.

2. Although my site map is incredibly useful for my reference with the notes, I am planning on producing a simplified version, showing the pages planned only, which I would present to the client. As Andy pointed out to me, the site map is an incredibly useful record of your agreement with the client, and I think it will be useful to begin working in this way now.

Click to enlarge.

Creative Ben [Andystevo Group - Thu Eve]

1) I tend to try to maintain simplicity when dealing with any piece of planning the client is going to be viewing,  in this case a site map. 

This method makes it easier for the client to add to, change or amend anything we discuss during the client early meetings by drawing and making notes on a printed a draft site map. 

Once this meeting is over I would then draw up a master version of the site map and make sure that all the changes are confirmed and then this is the version that is signed off and kept on record.

2) A useful area that helps bring simplicity forward is the use of colour coding. 

Keeping the colours relevant to the corporate colours of the client is always a nice touch. 

The colours should also demonstrate a clear division between the multimedia elements, external systems and the various levels of internal pages.

Also, avoid long labels for elements. Try to keep the number of words on the page down when it comes to the actual names of pages etc but try not to abbreviate.

This allows you to set out your site map in an eye-friendly way, making use of whitespace to separate different elements, the more clear and easier to understand you can make the site map appear the better.

Click to enlarge.