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.


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:


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


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

Get Designing Web Navigation now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.