In reference to my previous posts: "What I need to spin a good web" and "Project workflow for a web project", I have realised that it may be useful for my clients to see an example of what a simple site-map and site-plan looks like.

I will often specify that a client supplies these two things to begin with, to give me an idea of how they see their site structured.

It is then for myself (and often my programmer chum) to produce a revision of these documents based on our own recommendations, and, of course, based around the originally supplied brief and spec. There may be areas we can improve on based on our expertise and experience, and possibly elements we can add that will help the client achieve their core goals.

It may be the case that the documents require a few revisions from both parties to get things right, but it is important that both documents are resolved and signed-off by both parties before the next stage of the project can begin. This will lay strong foundations for the project to become a success.

What's what then?

Site-map

The (often nested) list of pages required for the web site.

Site-plan

Each of the pages listed in the site-map displayed as a heading, with required on page elements specific for that page listed beneath. It is also useful to have a heading of "All Pages" as the first item, which would list elements expected on every page of the site regardless of the page the user is on.

It may also be useful to list the elements in order of their importance on the page, so those elements can be positioned and styled according to a hierarchy of importance.

It may be the case that the client is unsure of when elements would be required, and only that they need the page. This section could therefore be left empty for our input. These documents are, in essence, a coming together between the client's knowledge of their subject matter, and the designer's and developer's expertise from a web angle.

Below is a 'made-up' example based on a simple web site offering various services:

Site-map

Site-plan

All Pages

• Logo
• Navigation
• Footer containing basic contact info
• E-news sign-up button
• Links to Twitter and FaceBook pages

Home

• Strap-line / slogan
• General intro (link to about page for more)
• Featured Service
• Featured Blog entry
• Latest Blog entry

Blog

• To be split into 2 columns / sections (main area, search area)
• List of most recent blog entries
• Most recent first by default
• Heading, Date, Title, Author, No. of comments, Preface
• Showing 10 by default (with pagination 'back and next')
• Search Blog section
• Search by Category, Date, Keyword, Most popular
• Same display layout for search results

/ Blog Entry

• To include Search Blog section (see 'Blog' for details)
• Heading, Date, Title, Author, No. of comments, Full article copy
• Image of Video
• Social book-marking options
• Related entries / services
• related external web links
• Comments (Name, Date, Link, Comment link, Comment)
• Comment form (Name, Email, Web site, Spam check, Comment)

Services / Services List

• Overview text
• List of each service (5 but could grow) - Image, Service Name, Preface, Link to details
• Telephone enquiry number

/ Service Details

• Full Details
• Picture Gallery
• Price
• Telephone enquiry number
• Link to enquire

/ / Service Enquiry

• Email Address
• Telephone enquiry number
• Form (Name, Email, Tel., Chosen Service, Enquiry Details field)

Contact

• Company Name, Address, Tel., E-Mail
• Form (Name, E-mail, Tel., Enquiry Details field)

Terms & Conditions / Privacy Policy

• General Text

Obviously the above is a very simple example that goes into the minimum of detail, but hopefully it gives a basic idea of the sort of thing required.