September 20, 2011
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:
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.
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.
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.
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.
Open Mindjet Mindmanager and create a new file by clicking on the new page icon at the top left of the screen.
Click once on the central node and type the name of your website.
Press enter to commit the text.
With the center node selected press the enter key to create new nodes.
Press the enter key again to create a few more nodes around the central one.
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.
Your layout should look similar to this:
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.
Rename the new nodes by clicking on them once and type in the names.
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."
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).
You can easily create more sub-nodes by pressing the enter key.
Following this process of inserting child nodes and making more nodes will enable you to flesh out your portfolio structure.
You can always click and drag nodes into other nodes.
And the result here:
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.
And this is what it looks like when the check-mark is added.
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.
Please keep the following pointers in mind when using the sitemap