By the end of this lesson you can
- Create a sitemap that shows the structure and hierarchy of a product.
- Decide the right depth and breadth for a structure.
- Use a sitemap to communicate with stakeholders and developers.
The idea
A sitemap is a diagram of a product's structure: the main sections, the pages within them and how they relate. It is a planning tool for the team, not the "sitemap" page some websites link to in the footer.
Hierarchy
Sitemaps are usually drawn as a tree. The top level holds the main sections that appear in the primary navigation. Each level below holds more specific content. Use consistent shapes: boxes for pages, a different style for external links or content that appears in many places.
Depth and breadth
A broad structure has many items at each level and few levels. A deep structure has few items per level and many levels. Very deep structures make people click through many layers and lose their way; very broad ones overwhelm with choices. Most products work best with a moderately broad top level and two or three levels of depth, but test with your own users and content.
What to annotate
Useful sitemaps note page types (list, detail, form), which pages are behind sign-in, and which are new, changed or removed compared with the current product.
Why it matters in real projects
A sitemap lets the whole team see the product's shape at a glance. It makes gaps and duplication obvious, helps estimate effort, and gives developers a clear picture of routes and page templates. It is also a strong artefact in a portfolio, because it shows structural thinking.
A realistic example
A dental practice is getting its first proper website. The designer drafts a sitemap with five top-level sections: Treatments, Prices, Our team, Book an appointment and Contact. Under Treatments sit eight treatment pages using one template.
Colour coding shows two pages behind a patient login (appointments and forms). The sitemap reveals that "Prices" and each treatment page both describe costs, risking contradictions. The team decides to keep prices in one place and link to it from each treatment, which also makes updates easier.
Step by step
Start from research
Use your content inventory and card sort results.
Define top-level sections
Choose five to seven main sections based on users' main tasks.
Add lower levels
Place pages under each section, keeping depth to two or three levels where possible.
Mark page types
Note which pages share a template.
Annotate
Show sign-in areas, new and removed pages, and links between sections.
Review with the team
Walk through key tasks on the sitemap with developers and stakeholders.
Common mistakes
Mistake Drawing the sitemap before understanding the content.
Instead Start from an inventory and user research.
Mistake Very deep hierarchies.
Instead Flatten where possible and test whether people can find deep items.
Mistake No legend or annotations.
Instead Explain shapes, colours and page types.
Check your understanding
Choose an answer, then check it. There is an explanation either way.
Practice exercise
Exercise · about 45 min
Sitemap for a small product
Create a sitemap for a community sports club website.
Steps
- List the content the site needs.
- Define five to seven top-level sections.
- Add lower levels and mark page types.
- Annotate sign-in areas and add a legend.
Deliverable
An annotated sitemap diagram.
Self-assessment
Tick each item when it is true of your exercise. Be honest; this is for you.
4 items
Summary
- Sitemaps show the structure and hierarchy of a product.
- Balance depth and breadth.
- Annotate page types and special areas.
- Use sitemaps to align the team and spot problems early.
Further reading
Third-party sources, chosen for reliability. They open in a new tab.
- Flat vs. deep website hierarchies (opens in a new tab)Nielsen Norman Group
Your notes
Marking complete updates your course and roadmap progress.