Talking of Design
Site-map and site-plan example
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.
Fear not that this post was created donkey’s years ago — the guidance and points in this post have been a mainstay over the years, and I regularly update this information to reflect how the web has changed and evolved over the years.
OK so, this post will show a ‘made-up’ simple version that will hopefully prove useful to the client at the early stages of project planning.
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 particular 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
- Home
- About
- Blog
- Services
- Contact
- Terms & Conditions
- Privacy Policy
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 content
- Image / 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)
Contact
- Company Name, Address, Telephone, E‑Mail
- Form (Name, E‑mail, Telephone, Enquiry Details)
Terms & Conditions / Privacy Policy
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.