l
o
a
d
i
n
g

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 the 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. For our purposes, let’s build a site map f

  1. Homepage
  2. About Us
  3. Services
  4. Blog
  5. Contact

This is a pretty simple example, but lets 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.

  1. Homepage
  2. About Us
    1. History
    2. Mission and Philosophy
    3. Managing Staff
  3. Services
    1. Business Plans
    2. Business Analysis
    3. Manager Coaching
    4. Marketing Strategies
    5. Growth and Transition
  4. Blog
  5. 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 client 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 content overview:

  1. Homepage
    1. Banner/Image rotator
    2. Welcome Message
    3. Inquiry Form
  2. 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
  3. 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
  4. Blog
  5. Contact

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

If a client possess this kind of knowledge then your project is likely to proceed smoother and with less problems. This 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 completely understanding of the project deliverables.

Hope this helps!