Sitemap/Wireframe

(aka Site Map, Site Hierarchy Map, Site Diagram, Blueprint, Web Map)

When setting out to analyze and document an existing Web site one of the first steps is to sketch out a rough 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 for a new site, a sitemap is created 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. Visio as an example, 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.
Advertisements
By max macapagal Posted in Posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s