How to Build a Site Map for a Web Project

Sitemaps are the foundation of good information architecture and content strategy.

Whenever we engage in a web production, we always build a site map. A site map is an architectural framework for the project, whether a large-scale system or a five-page website. When clients understand how to build site maps, the web design process becomes increasingly efficient for both parties. The following is a resource we’ve created to assist clients in preparing and organizing for small to medium size websites.

Since information architecture in large scale applications and systems is a bit more intricate, we’ll stay away from that and focus on small to medium size websites, including small five-page sites to larger, more dynamic websites.

For this tutorial, we’ll build a site map for a small business consulting company. Feel free to build your own site map as we go along. Also, I always advise clients to check out their competition and their websites, this is always a good starting point when designing for your industry.

1. Identify All Pages Involved in the Project

After I understand the basic ideas and goals for a project, I usually try to build a list of pages included in the website. I’ll simply put together a numerical list of pages.

Homepage
About Us
Services
Blog
Contact

This is a pretty simple example, but let’s run with it for now. These are considered the primary pages of your website, regardless of how they are going to be displayed across the website.

2. Sub Pages

Now that we have our primary pages, we can build upon our site map with relevant sub-pages. Although some projects don’t require any sub-pages, it is important for any client to know this step.

Homepage
About Us
1. History
2. Mission and Philosophy
3. Managing Staff
Services
1. Business Plans
2. Business Analysis
3. Manager Coaching
4. Marketing Strategies
5. Growth and Transition
Blog
Contact

As you can see, we’ve just added a list of sub-pages to our current primary pages. Whether you want these displayed as drop-down menus or all available at all times is not important right now, we are just building the information architecture.

3. Content Analysis for Each Page

Once we have an outline of all the pages, it is important to build upon our framework. If this site map was all a designer had to work with then you will end up with a bunch of pages with content and nothing else. If you look at other websites, though, you’ll see a nice even distribution of content, related pages, and information spread throughout each page.

Most clients don’t take this step, usually because they are not aware of how to approach it. This step is important for both you and the designer. It helps the designer understand your need and the project deliverables and consequently helps him put together more accurate design concepts. Most of the time, you can save money by identifying these elements prior to design or production, otherwise, it may be extra (unnecessary) work to fill in these elements down the road.

Here is an example of a more comprehensive site map that includes a content overview:

Homepage
1. Banner/Image rotator
2. Welcome Message
3. Inquiry Form
About Us
1. History
  1. History Content
  2. Sidebar w/ link to services and inquiry form
2. Mission and Philosophy
  1. Mission/Philosophy Content
  2. Sidebar w/ link to services and inquiry form
3. Managing Staff
  1. Image, Title and Description for each Manager
  2. Sidebar w/ link to services and inquiry form
Services
1. Business Plans
  1. Business Plans Content
  2. Sidebar w/ link to services and inquiry form
2. Business Analysis
  1. Business Analysis Content
  2. Sidebar w/ link to services and inquiry form
3. Manager Coaching
  1. Manager Coaching Content
  2. Sidebar w/ link to services and inquiry form
4. Marketing Strategies
  1. Marketing Content
  2. Sidebar w/ link to services and inquiry form
5. Growth and Transition
  1. Growth and Transition Content
  2. Sidebar w/ link to services and inquiry form
Blog
Contact

By now, we’ve outlined almost all the content on the website. When a designer sees this kind of starting point, they will be able to play around with the design with a bit more trust in the project. Their first step will be to wireframe the website and then build a nice interface that includes the content from the site map, i.e. rotating image, welcome paragraph, inquiry form, etc.

If a client possesses this kind of knowledge, then your project is likely to proceed smoother and with fewer problems. If not, building this in advance gives the client a clear understanding of the project scope—and it gives the designer a lot to work with, rather than just making things up and waiting for you to comment.

And as it turns out, most successful projects occur when the client and designer are on the same page, share the same thoughts, and are in complete understanding of the project deliverables.