How to create a modern web site - part 2: the site map

In this case we are not talking about the actual page “Site map” many sites have, and we don’t talk about the Sitemap protocol that crawlers use to index sites either. The topic is about drawing a conceptual site map which will eventually become a real web site so the “Site map” page and the Sitemap protocol data could derive from it.

What is a site map?

In fact, it is a very simple thing. My definition would be that it’s a hierarchical organization of important pages. It is the starting point for the site information architecture. A lot things derive from the site map:

• basic information architecture
• navigation  
• list of wireframes and design layouts
• structure of URL-s
• content structure in the CMS

Why is it important?

The conceptual site map is important because it gives a sense of how complex the site will be and how to organize navigation in that respect.

Usually, we note all links on the site map with some letters to specify what type of page is needed. E.g. “A” for article, “C” for category, “BP” for blog post, etc. That can also show how complex the site will be regarding page diversity. From that, the information architecture sheet can be started.

Also, we try to identify cross links by traversing across the tree, which can also show how complex the site will be regarding page content. E.g. an article could have some related products so we draw a line from the article to a product. Later on a "related product" box should be implemented.

Number of important top level links will influence the solution of the top level navigation. Usually, top level navigation is placed on the top of the page horizontally, however, with to many first level links more suitable would be to use top level navigation on the left. Maximum level of site map depth will dictate the overall navigation solution. Is one level sub menu enough or a multi level tree would do the job?

How to create it?

As the site map is really simple, there are many ways how to do it:

• sketch it on paper (scan it later)
• use some web services like writemaps.com
• write in in some spreadsheet like Excel or Google Docs or any text application (from Notepad to Word)
• specify it in Visio
• or use more specific apps like for mind mapping or similar

Obviously there are many way to skin a cat, some are better suited than other, but the bottom line is to do it.

To summarize, a good site map will show to all parties involved what are they dealing with. With site map as common ground, creative staff can begin to work on the concept and do some prototyping/wireframing, which precedes the design process and technical people can start working on the information architecture.

That’s all for today’s post. In the next one, we will cover a web information architecture and what it is used for.

ps.

Netgen web revamp example

Check our new site map on writemaps.com and how it started on paper :)