What is a sitemap in UX?
A sitemap in UX is a diagram or list showing every page of a website or app and how those pages are organized and linked, usually as a hierarchy.
also calledsite map · site structure diagram · page hierarchy
A sitemap is the floor plan of a website. Before anyone picks colors or writes headlines, it shows which rooms exist, which ones sit on which floor, and which doors lead where. It is usually a simple tree of boxes and lines, and it is one of the cheapest ways to catch structural problems early.
- A design sitemap is a diagram of pages and their hierarchy, made for planning.
- It is different from an XML sitemap, which is a file for search engines.
- Base the structure on how users group content, and keep key pages shallow.
- Use it to find duplicates, orphans and gaps before you design screens.
Two kinds of sitemap
The word is used for two quite different things, and it helps to separate them. A design sitemap is a planning document for people: a diagram that shows the pages and their hierarchy, used while designing or redesigning a site. An XML sitemap is a file for search engines, listing the URLs you want them to find.
In UX work we usually mean the first. It is a thinking tool that shows the shape of the whole product on a single page, which is hard to see when you are looking at one screen at a time.
What a sitemap shows
At the top is the home page or main entry point. Below it are the main sections, then their subpages, and so on. Lines show parent and child relationships, and extra lines or notes can mark cross-links, gated pages that need a login, or pages that only exist on mobile.
It answers questions like: How many levels deep is this? Is anything orphaned with no way to reach it? Do two sections overlap? Is the top level crowded with nine items when five would do?
How to build one
Work from content and research, not from habit. A practical sequence:
- List every page or content type you have or will need
- Group related items, ideally informed by card sorting with real users
- Arrange groups into levels, keeping important things shallow
- Name each page the way users would describe it
- Draw it, with a whiteboard, sticky notes or a diagramming tool
- Review it with stakeholders and check it with a tree test
A sitemap on sticky notes is a perfectly good sitemap. Use software when you need to share or maintain it.
Common mistakes
Mirroring the company's departments is the standard one: visitors do not know or care who owns what. Another is going too deep, where useful pages are buried four or five levels down. Equally awkward is a flat structure with thirty top-level links.
Also, a sitemap is not a navigation menu. Not every page in the tree deserves a spot in the header. Decide separately how people will move around.
Why bother
It gets disagreements out into the open while they are still cheap to resolve. It gives developers and writers the scope of the project at a glance. And it makes it easy to ask the question that saves months later: do we really need this page?
Sitemap: your questions, answered
What is a sitemap in UX design?
It is a diagram that shows all the pages of a website or app and how they are grouped and connected. Designers use it to plan structure, spot gaps and align the team before moving on to wireframes and visual design.
What is the difference between a sitemap and a wireframe?
A sitemap shows the whole structure of pages and how they relate, while a wireframe shows the layout of a single page or screen. The sitemap answers what pages exist, and the wireframe answers what is on each of them.
How do you create a sitemap?
List all pages, group them with help from card sorting, arrange them into a hierarchy, label them in user language and draw the result. Then review it with stakeholders and test it with a tree test to confirm people can find things.
What tools can I use to make a sitemap?
Sticky notes and a whiteboard work well at the start. For sharing, any diagramming or whiteboarding tool, a design tool like Figma, or even a simple indented list will do. The tool matters less than the structure.
Do I need a sitemap for SEO?
An XML sitemap helps search engines discover pages, especially on large sites. A planning sitemap does not affect SEO directly, but it leads to cleaner structure and linking, which does help search engines and visitors.
More quick answers
What is the difference between a sitemap and information architecture?
Information architecture is the practice of organizing and labeling content. A sitemap is one of the diagrams that shows the result.
How is a sitemap different from a user flow?
A sitemap shows how pages are organized. A user flow shows the path a person takes through them to complete a task.
How many levels should a sitemap have?
There is no magic number, but most important content should be within two or three clicks of the home page. Deeper levels are fine for specialized material.
Should a sitemap be public?
A planning sitemap is internal. Some sites also offer an HTML sitemap page for visitors, and an XML sitemap for search engines.
When should a sitemap be created in a project?
After research and content gathering, and before wireframing. That timing lets you fix structure while changes are still cheap.
Information architecture in UX is the practice of organizing and labeling a product's content so people can find what they need and understand where they are.
Card sorting in UX is a research method where people group labeled cards into categories, showing how they expect content to be organized.
Tree testing in UX is a research method where people try to find items in a text-only outline of your site structure, showing whether the hierarchy makes sense.
A user flow in UX is a diagram showing the steps a person takes through a product to complete a task, including decisions and possible detours.
A wireframe in UX is a simple, low-detail blueprint of a screen that shows layout, content placement and functionality before any visual styling is added.
Navigation in UX is the set of menus, links and cues that help people find content, move between pages and always know where they are.
Found this useful? A GitHub star helps other designers find it.