O'Reilly logo

Designing Web Navigation by James Kalbach

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

SITE MAPS

A site map is a document that demonstrates the relationships between content and functionality in the site's architecture.[85] It captures the site's concept, informational structure, and organizational scheme in a visual representation. A site map is a key deliverable in designing a web site, and it's useful to many project team members:

  • Stakeholders use site maps to see how the site will impact their business.

  • Visual designers identify page types and page layout needs from site maps.

  • Programmers visualize the scope and extent of the site from site maps.

ELEMENTS OF A SITE MAP

There are many variations of site maps: the amount of detail shown, arrangement of boxes, use of color and shapes, and so forth can vary from designer to designer. However, the main purpose is the same: to effectively communicate your architecture to others. There are no hard and fast rules on how a site map should appear, but there are common elements of site maps, including:

Nodes

Pages in your site are the basic nodes in the site map, typically shown as squares.

Connectors

Nodes are connected to show relationships. Site maps generally don't show all of the associative links, but instead show structural and utility navigation.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required