Ken Willes Interactive Designer & Developer

Sitemaps

September 20, 2011

Designing Sitemaps

When creating a website, there’s a lot of information to communicate so you’ll need to organize it in a way that makes the most sense. Not only that, but organizing your information will also result in a project plan or checklist of things you will need to integrate into your website.

What you’ll read about in this post:

       
  • Sitemap Examples
  •    
  • How to Create Your Sitemap (Using Mindjet Mindmanager)
  •    
  • How to use the sitemap to communicate progress with to your client
  •    

Sitemap Examples

You’ve probably seen a website with a sitemap link that, when clicked on, sends you to a page with a bunch of headings and page links under those headings. Check out Wired.com for an example of a website sitemap (the link is at the bottom of the page). This style of a sitemap provides an easy way to browse for things as you would in a directory in a phone book or mall. You will be making a sitemap similar to Wired, but the style is going to be more detailed and specific for the development process of your digital portfolio and will be in the format of a chart instead of headings and sub-headings.

Let’s take a look at an example of a sitemap for Southern Adventist University’s School of Visual Art and Design’s website. Click on the image below for a detailed view of the map.

School of Visual Art and Design Sitemap

Note that the main node in the center reads "Art Sitemap." All the top-tier sections of the website like "About Us" and "News + Events" descend from that node. Compare this sitemap to the finished website. Do you notice any similarities of the sitemap to the navigation of the website? In the "About Us" section, for example, you will find pages under it titled "History of the School" and "School Philosophy."

This style of node-based charting is called an organizational-chart—it shows hierarchy and categorizations clearly. This is the kind of organizational-chart style you will need to make for your website except it won’t be as complicated as the one above (unless you wanted to make it that complicated!).

Using a node-based chart also creates a project plan document. If you look carefully at the larger image example, you’ll find that there are checkmarks and labels with people’s names in them. The checkmarks indicate that a section of the website is done, the person’s name next to the node represents who is responsible for getting it done. In your sitemap, you will be the one getting everything done, so you don’t need to use this label, but you will want to use the checkmarks as you go along.

Here’s another example.

course_sitemap

The "(1) Creating Your Strategy" section is the only thing that is checked off on this view and "(2) Designing Information" is a quarter done.

The example above is known as a tree style chart. It’s good for information that has a sequence to them which is why I used it for this post—I’m taking things step by step.

How to Create Your Sitemap

Mindjet MindManager is the best software on the market for creating sitemaps and in this section I will show you how to use it. There are also other alternatives like mind-meister, google drawings (free), lucid chart.

In the previous unit, you created a categorized list of portfolio items in a program like Microsoft Word. You will want to use that information to create this sitemap. I’m going to use a fictitious, short list of portfolio items.

#1. Create a New File

Open Mindjet Mindmanager and create a new file by clicking on the new page icon at the top left of the screen.

New Page

#2. Rename the Central Node

Click once on the central node and type the name of your website.

Central Node Renamed

Press enter to commit the text.

#3. Create new nodes

With the center node selected press the enter key to create new nodes.

New Main Node

Press the enter key again to create a few more nodes around the central one.

New Extra Nodes

#4. Use the Organizational Chart Format

So far we’ve created nodes around the central topic, but it doesn’t look like the top-down organizational example from the art website. You can move the nodes around by clicking and dragging them, but they stay constrained to this right map node structure.

Changing the chart style is easy. With the central node still selected, go to the format tab and select the growth direction of org-chart.

Growth Direction Formatting

Your layout should look similar to this:

Org-Chart Growth Direction

If your map didn’t automatically adjust to a layout like this, make sure the central node is selected first before clicking on the Format > Growth Direction menu.

#5. Enter Category Names

Rename the new nodes by clicking on them once and type in the names.

Main Categories

If you need to create more nodes just press the enter key. If you need to delete any of the nodes press the delete key (this is different than the backspace key). Or you can remove a node by right-clicking on a node and select "Remove Topic."

#6. Create Nested-Nodes or Sub-Categories

Inside the work category, you’ll have sub-categories and specific portfolio examples within those sub-categories. To create these subnodes click on the work node (yours may be different) and press insert (or shift + enter).

Sub Category

You can easily create more sub-nodes by pressing the enter key.

More Subcategories

Following this process of inserting child nodes and making more nodes will enable you to flesh out your portfolio structure.

Detail of Subcategories

#7. Organize Nodes

You can always click and drag nodes into other nodes.

Dragging Node

And the result here:

Click Drag Node Finished

How to use the sitemap to communicate progress with your client

Once you start getting to the content gathering milestones and onwards, you will want to supply completion checkmarks on your sitemap.

It’s easy to add this information, just right click on a node and select icon markers in the list.

Task Completion Menu

And this is what it looks like when the check-mark is added.

Task Completed

This indicates that the "Living Simply Logo" is finished. If you click on the checkmark it will change to different percent completion pie-chart indicators.

You can also add other markers to nodes like Notes, Callout Topics, and Text Markers. These additional markers will enable you to add more information to a particular node.

Summary

Please keep the following pointers in mind when using the sitemap

     
  • Sitemaps organize information in a clear fashion.
  •  
  • Sitemaps evolve over time.
  •  
  • Sitemaps are a good communication tool.
  •  
  • Sitemaps help determine a plan of action.

« Back to blog index