# Site Maps

> A hierarchical diagram showing all pages and how they relate—the blueprint before you design a single page.

*Tags: ux, artifacts, junior*

---



> [!info] Quick Definition
> 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

1. **Start with the homepage** — Top level. This is entry point zero.
2. **Identify main categories** — What are the primary sections? Products? Support? About? These are level two.
3. **List pages under each category** — Under Products, what pages exist? Product A? Product B? These are level three.
4. **Add relationships** — Do any pages link across categories? A FAQ page might link from Products and Support. Show these cross-links.
5. **Account for metadata** — Do you have search? Login? Sitemap page? These are often auxiliary and shown separately.
6. **Test the structure** — Can users find everything they need with 3 clicks? Does the structure match user mental models?
7. **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]]

---

Source: https://www.fernandoux.com/en/wiki/artifacts/site-maps/