Site Maps
A hierarchical diagram showing all pages and how they relate—the blueprint before you design a single page.
What is a Site Map?
A site map is a visual representation of a website’s structure. It shows every page and how they connect. The homepage sits at the top. Product pages branch down. Support pages branch separately. Each page has a clear parent and siblings.
A site map answers: “Where does this page live? What pages are at the same level? What pages are nested inside?” Without a site map, designers design pages in isolation. Pages feel disconnected. Navigation feels random.
One sentence punch: A site map is the architecture before the design—get this right or everything after feels broken.**
Why is it important?
- Prevents Duplicate Content: Without a site map, different team members create similar pages in different places. A site map forces decisions: One support page or many? One product listing or dozens?
- Enables Consistent Navigation: When structure is clear, navigation is obvious. Every page knows its parent. Every page can link to siblings. Users understand the architecture.
- Guides Design Decisions: A site map reveals scope. “This website has 200 pages” changes design priorities. A mega-menu works differently for 10 pages versus 200.
- Facilitates Development: Developers need to know the structure before building. A site map prevents “where does this page go?” questions mid-development.
How to Create a Site Map
- Start with the homepage — Top level. This is entry point zero.
- Identify main categories — What are the primary sections? Products? Support? About? These are level two.
- List pages under each category — Under Products, what pages exist? Product A? Product B? These are level three.
- Add relationships — Do any pages link across categories? A FAQ page might link from Products and Support. Show these cross-links.
- Account for metadata — Do you have search? Login? Sitemap page? These are often auxiliary and shown separately.
- Test the structure — Can users find everything they need with 3 clicks? Does the structure match user mental models?
- Share and iterate — Show stakeholders. “Does this feel right?” Structure changes are cheap now; they’re expensive after design.
Site Map Levels
- Level 1: Homepage (typically one page)
- Level 2: Main sections (Products, Support, About, etc.)
- Level 3: Pages within sections (Product A, FAQ, Contact, etc.)
- Level 4+: Sub-pages and content (Product A Details, Shipping FAQ, etc.)
Most sites work best with 3-4 levels. More than 4 and navigation becomes burdensome.
Mentor Tips
- First tip: Site maps aren’t final. As you design, you’ll discover new pages needed. As you research, user needs will change structure. Site maps are living documents that evolve.
- Avoid the “everything is important” trap. If every page is level two, the site map is useless. Hierarchy forces difficult decisions. That’s the value.
- Distinguish between mental maps and actual structure. Users’ mental models don’t always match your org chart. A site map should reflect user thinking, not company structure.
- Use site maps to cut scope. Stakeholders always want “just one more page.” Show the site map. Does it fit the hierarchy? No? It’s a new category or it doesn’t exist.
Resources and Tools
- Books: “Information Architecture: For the Web and Beyond” by Louis Rosenfeld and Peter Morville, “Designing with the Mind in Mind” by Jeff Johnson
- Tools: Miro or Figma for site maps, Lucidchart for more formal diagrams
- Articles: Information architecture guides on Nielsen Norman, site structure articles on UX Collective