Site Planning: How to Make a Site Map

If you're thinking of building a new web site - whether you're doing it yourself, or hiring us to build it for you - a great first step to planning your site is to make a site map of it.  A site map is a simple, tree-like diagram that shows all the pages of your site, and how they are grouped together into sections.  A site map makes it very easy to organize your site and create an inventory of content items that you will need to complete your site.

When working with our clients, we usually create this for them as part of the site planning process, then we use the diagram to assign work to our content editors.  We realized it might save us and our clients some time in the planning process if we shared with them this process of making a site map.

Example 1:  A Simple 4-page Site

Let's say we're building a pretty basic 4-page site.  It will have a Home page (as every site has), plus an About page, a Contact page, and a Links page.

In most sites, the home page is the page that ties the entire structure of the site together.  All the other pages are considered to be "sub-pages" of it.  To put it another way, you could say the home page is the "trunk" of the tree-like diagram we're making, and all the other pages are "branches" of it.

In the diagram at the left, you can see the four pages, and how the 3 pages containing detailed content - the About, the Contact, and the Links pages - are grouped together underneath the Home page.

At this point, we're just looking at pages.  To help give us an idea what we want on those pages, we can add some branches to the pages that represent pieces of content, like text and images.

Just a short phrase or title is all the detail we need at this point.

Here, I've expanded the About page to show the branches I created for the content on it.  I have added similar branches to the Contact page.  But this should show enough to give you the idea.

And this completes the site map for this example.  Now, let's try another one that has a few more pages.

Example 2: Small Ecommerce Site

In this example, I want to make a site map for a client who has a retail shop, and wants to sell his products online.

This site will probably have all the same pages the first one does, but it will also need pages for the products he sells.  He also will need to provide his customers more information about his store, such as shipping, return, and other store policies.  This site will also need some programming, like a shopping cart, but we don't have to worry about that right now.  We are mainly concerned with how we want to organize the content on the site into pages and sections.

Let's start with what's easiest.  We know we need a Home page, an About page, a Contact page, a Store Policy page.  These pages are all really just "supporting" content for the main content of the page, the items for sale.  So we still have some work to do here.

My client has about 5 different types of products for sale, and has an average of about 30 products in each category.  In order to make browsing the catalogue section easy for my client's customers, we want to organize the site into categories and products in some kind of logical manner.

To begin a new section of any site, we start with just a page.  For this site, we'll add a sub-page under the Home page called "Catalog".  Then we can create sub-pages of the Catalog page for each of the product categories.

It doesn't necessarily have to be arranged this way.  On another site where products are sold, the Home page itself could be the main catelog page.  Deciding how to organize your site content is usually a very creative process.  There are also a lot of marketing considerations, but these are topics for other articles.

So now we have a Catalog page to form the main page of the section where all the product information will be.  I've also added sub-pages for each of the product categories.  Our client has a very fascinating line of products for sale - a full assortment of Widgets, Thingamabobs, Thingies, Doodads, and (very hard-to-find) Whatchamacallits.

The product category pages will probably contain an index of products in that category, with links that point to pages containing detailed information for each individual product.  So each of the category pages will also have sub-pages for each of the products.  That seems like a lot of pages, doesn't it?  This gives you an idea how much work goes into building out a typical ecommerce web site.  But diagramming it like this is easy and it takes a lot of the guess work out of building it.

Now I've added more branches to show the individual product pages, and what goes in them.  Since all the individual product pages have basically the same content in them, I just created enough of them in my diagram to establish the pattern to follow for all the product pages.

If you also want your site visitors to have an opportunity to add something to their shopping cart from one of the category pages (which is usually a good idea), you can also add more branches to the category pages to show this.

That's It!

This is really simple to do, once you get the idea.  Once you get something roughed-out, have fun moving things around and seeing how you like different arrangements of your content.

And by the way, if you're wondering what I used to create the diagrams in this article, I used a great program called XMind; you can download a free version of it from xmind.net.