Originally published February 2007
(aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)
Sitemaps – along with Wireframes – are my bread and butter of information architecture diagrams. When setting out to analyze and document an existing Web site one of my first steps is to sketch out a rouhg site map. The sitemap will show the major sections of a Web site, but not necessarily every page. For large sites it’s not always necessary or feasible to include all pages in a site map.
Similarly, when I’m creating an information architecture for a new site, one of my first tasks is laying out a rough site map. This helps to chunk and group content and functionality.
Web sitemaps and Wireframes
Combining a detailed site map and illustrative wireframes creates a valuable document that can guide programming and future requirements. In some cases such a document has become the default requirments document for systems my group is building.
How to Create Web Sitemaps
There is no standard best practice for creating sitemaps. I happen to prefer to use Visio – as do many others. Visio allows you to easily lay out page hierarchys and create connections between them. But wireframes could also be created in Word, Power Point, Excel, by hand, or any other method you find helpful.
Web Sitemap Examples
Site maps can be constructed in a wide variety of formats, but the general structure and principles remain relatively consistent.
- Sample Web Sitemap (pdf)
This site hierarchy map was used for a project in which we had to combine 6 separate Web sites into a single, cohesively – yet distinct, branded Web prescence. One of the first steps was to analyze the existing sites and document the main content sections using sitemaps. The sitemaps were used to identify duplicate content and functionality that was no longer relevant.
- Web Sitemap Diagram 2 (pdf)
This is a sitemap that was created for an update to a small marketing site. A key is used to distinguish revised and new content.