Creating Sitemaps
Creating Sitemaps
Imagine you're planning a road trip across a new country. Before you start driving, you'd probably want a map showing all the cities, towns, and roads connecting them. A sitemap serves the same purpose for a website or app-it's a visual diagram that shows all the pages or screens and how they connect to each other. In this document, we'll explore what sitemaps are, why they matter, and how to create effective ones that help both your team and your users.
What is a Sitemap?
A sitemap is a diagram that represents the structure of a website or application. It shows all the pages, screens, or sections that exist within a digital product and illustrates the hierarchical relationships between them. Think of it as the blueprint of your digital space-before you start building rooms and decorating, you need to know how many rooms there will be and how they connect.
Sitemaps are primarily visual documents used during the planning and design phases of a project. They help teams answer critical questions like:
- How many pages or screens do we need?
- How is content organized?
- How will users navigate from one section to another?
- What is the most logical path for users to follow?
It's important to distinguish between two types of sitemaps you might encounter:
- Visual sitemaps: The diagrams designers and information architects create to plan site structure (this is what we'll focus on)
- XML sitemaps: Technical files that help search engines crawl and index websites (these are created for SEO purposes and are not visual)
The Role of Sitemaps in Information Architecture
Information architecture is about organizing and structuring information so people can find what they need. A sitemap is one of the primary deliverables that emerges from information architecture work. It translates abstract organizational principles into a concrete visual plan.
Before creating a sitemap, information architects typically conduct research activities like:
- Content audits (cataloging existing content)
- User research (understanding what users need)
- Card sorting (learning how users naturally group information)
- Stakeholder interviews (gathering business requirements)
The sitemap synthesizes insights from all these activities into a single, actionable diagram that guides the rest of the design process.
Why Create Sitemaps?
Creating a sitemap might seem like extra work at first, but it provides tremendous value throughout a project. Let's explore the key benefits.
Clarity and Shared Understanding
When you're working with a team-designers, developers, content writers, stakeholders-everyone needs to be on the same page about what you're building. A sitemap provides a single source of truth that everyone can reference. Instead of abstract discussions about "sections" and "areas," you have a concrete diagram everyone can point to.
For example, when a developer asks, "Where does the user go after they complete the checkout process?" you can point directly to your sitemap and show them the confirmation page and its relationship to the account dashboard.
Identifying Issues Early
Building a sitemap forces you to think through the entire structure before investing time and resources in detailed design and development. This is when you'll discover problems like:
- Orphaned pages (pages with no clear way for users to reach them)
- Redundant sections (multiple pages serving the same purpose)
- Overly deep hierarchies (users having to click through too many levels)
- Missing content (gaps in the user journey)
- Illogical groupings (related content scattered across different sections)
Finding and fixing these issues on a sitemap takes minutes. Finding and fixing them after pages are designed and coded takes days or weeks.
Estimating Scope and Effort
A sitemap provides a clear picture of project scope. When you can see that your website has 47 unique pages, you can estimate design time, development effort, content creation needs, and testing requirements much more accurately than if you're working from a vague description.
Facilitating Navigation Design
Your sitemap directly informs how users will navigate your site. By understanding the relationships between pages, you can design navigation systems that make sense-whether that's a top menu bar, footer links, breadcrumbs, or sidebar navigation.
Basic Components of a Sitemap
Before we dive into creating sitemaps, let's understand the basic building blocks you'll use to construct them.
Pages and Screens
The fundamental unit of a sitemap is a page (for websites) or screen (for apps). Each page is typically represented by a rectangle or box containing the page name or title.
Example:
A rectangle labeled "About Us" represents the About Us page of a website.
Each box in your sitemap should have a clear, descriptive label. Avoid vague labels like "Page 1" or "Info"-instead use specific names like "Product Catalog" or "Contact Information."
Hierarchical Levels
Websites and apps are organized in hierarchies, with some pages being more important or higher-level than others. This is typically represented by levels or tiers:
- Level 0 or Root: The home page or main entry point
- Level 1: Main sections or primary navigation items
- Level 2: Subsections within main sections
- Level 3 and beyond: Increasingly specific content
Think of this like an organizational chart for a company. The CEO is at the top (like the homepage), department heads are one level down (like main sections), team leads are another level down (like subsections), and so on.
Connections and Relationships
Lines or connectors between boxes show how pages relate to each other. In most sitemaps, these lines represent hierarchical relationships-a line from "Products" to "Product Details" shows that Product Details is a child page of Products.
The most common connection types include:
- Parent-child relationships: Solid lines connecting a higher-level page to pages beneath it
- Cross-links: Sometimes shown with dashed lines or different styling to indicate links between pages that aren't in direct hierarchy
- External links: Links to pages outside your site, sometimes marked with special symbols
Page Types and States
Not all pages are the same type. Your sitemap might need to distinguish between:
- Static pages (content that rarely changes, like an "About" page)
- Dynamic pages (content generated from databases, like individual product pages)
- Template pages (pages that share the same structure but have different content)
- Conditional pages (pages that only appear under certain circumstances)
- User-specific pages (pages that require login or have personalized content)
These distinctions are often shown through different colors, shading, or symbols added to the page boxes.
Types of Sitemaps
Different projects require different approaches to site mapping. Let's explore the main types you'll encounter.
Hierarchical Sitemaps
The hierarchical sitemap is the most common type. It shows pages arranged in a tree structure, with the homepage at the top and pages branching out below in levels of decreasing importance or specificity.
This type works well for:
- Traditional websites with clear section divisions
- Corporate sites
- E-commerce sites
- Content-heavy sites with logical categories
The structure flows from general to specific. For example, a hierarchical sitemap for an e-commerce site might look like this conceptually:
Home
→ Shop (Level 1)
→ Men's Clothing (Level 2)
→ Shirts (Level 3)
→ Pants (Level 3)
→ Women's Clothing (Level 2)
→ Dresses (Level 3)
→ Shoes (Level 3)
→ About (Level 1)
→ Contact (Level 1)
Sequential or Linear Sitemaps
A sequential sitemap shows pages that must be completed in a specific order. Instead of branching out, the flow is primarily linear, moving from one step to the next.
This type is ideal for:
- Onboarding flows
- Checkout processes
- Multi-step forms
- Wizards or guided processes
- Tutorial or learning sequences
For example, a checkout process might flow: Cart → Shipping Information → Payment Information → Order Review → Confirmation.
Sequential sitemaps often include decision points or branches where the flow changes based on user choices or conditions.
Hub-and-Spoke Sitemaps
In a hub-and-spoke model, users repeatedly return to a central page (the hub) to access different sections (the spokes). Think of a dashboard or portal where users keep coming back to a main screen to navigate to different tools or areas.
This structure works well for:
- Application dashboards
- User account portals
- Learning management systems
- Admin interfaces
In this model, the hub page is connected to multiple sections, but those sections might not be directly connected to each other-users navigate back to the hub to move between them.
Matrix or Web Sitemaps
A matrix sitemap shows a more complex structure where pages have multiple connections to many other pages. This reflects how users might actually navigate a site-not just up and down a hierarchy, but across sections through various pathways.
This type is useful for:
- Sites with heavy cross-linking
- Knowledge bases or wikis
- Complex applications with multiple navigation paths
Matrix sitemaps can become visually complex, so they're often simplified to show primary pathways while documenting secondary connections separately.
Preparing to Create a Sitemap
Before you start drawing boxes and lines, you need to gather information and make some foundational decisions. Proper preparation makes the actual creation process much smoother.
Gather Requirements and Content
Start by collecting everything you know about what needs to be included in your site or app:
- Business requirements: What does the organization need the site to accomplish?
- User needs: What tasks do users need to complete?
- Content inventory: What content already exists or needs to be created?
- Functional requirements: What features or tools must be included?
- Technical constraints: Are there limitations on the number of pages or types of functionality?
Create a list of everything that needs a page or screen. Don't worry about organization yet-just capture everything.
Understand Your Users' Mental Models
A mental model is how users think about and expect information to be organized. If your sitemap matches users' mental models, navigation feels intuitive. If it conflicts with their expectations, they'll get confused.
Card sorting exercises are particularly valuable here. You give users cards with page names or content topics and ask them to group them in ways that make sense. The patterns that emerge show you how users naturally categorize information.
For example, you might discover that users expect "Returns Policy" to be grouped with "Customer Service" rather than with "Legal Information," even if it technically contains legal content.
Identify Your Primary Organization Scheme
Information can be organized in many different ways. Common organization schemes include:
- Topic-based: Grouping by subject matter (e.g., "Marketing Services," "Design Services," "Technology Services")
- Task-based: Organizing around what users want to do (e.g., "Apply for Loan," "Check Account Balance," "Transfer Money")
- Audience-based: Separating content by user type (e.g., "For Students," "For Faculty," "For Parents")
- Chronological: Ordering by time or sequence (e.g., "Spring Collection," "Summer Collection," "Fall Collection")
- Format-based: Grouping by content type (e.g., "Videos," "Articles," "Podcasts")
You might use different schemes at different levels. For example, top-level navigation might be audience-based, but within each audience section, content is organized by topic.
Determine Hierarchy Depth
Consider how many levels deep your hierarchy should go. Research suggests that users can typically handle 3-4 levels before navigation becomes frustrating. Going deeper requires careful attention to breadcrumbs, navigation aids, and search functionality.
This is a balancing act:
- Too shallow: Means too many options at each level, overwhelming users
- Too deep: Means too many clicks to reach content, frustrating users
A common guideline is the 7±2 rule-people can comfortably process about 5-9 items at once. Try to keep navigation menus and page groupings within this range when possible.
Creating Your Sitemap: Step-by-Step Process
Now that you're prepared, let's walk through the actual process of creating a sitemap.
Step 1: Start with the Homepage
Every sitemap begins with a single starting point-typically the homepage or main entry screen. Place this at the top of your document.
Label it clearly: "Home," "Homepage," "Main Screen," or "Entry Point." This is your Level 0.
Step 2: Add Primary Sections (Level 1)
Identify your main sections-these are the big divisions of your site that will typically appear in primary navigation. These might be things like:
- Products/Services
- About
- Resources
- Support
- Blog
- Contact
Place these boxes on the same horizontal level below the homepage, and draw lines connecting each to the homepage. This shows they're all Level 1 pages that branch directly from the home.
Step 3: Add Secondary Sections (Level 2)
For each Level 1 section, identify what subsections or pages belong beneath it. These are more specific divisions of the main categories.
For example, under "Products," you might have:
- Product Category A
- Product Category B
- Product Category C
Place these below their parent section and connect them with lines. All pages under "Products" should be aligned horizontally at the same level, showing they're siblings in the hierarchy.
Step 4: Continue Adding Deeper Levels
Keep working your way down, adding Level 3, Level 4, and so on as needed. Each time you add a level, ask yourself:
- Is this level necessary, or could this content be combined with its parent page?
- Will users understand why these pages are grouped together?
- Are we making users click too many times to reach content?
Remember that not every branch needs to go to the same depth. One section might only need two levels while another requires four. That's perfectly normal.
Step 5: Add Utility and Global Pages
Utility pages are pages that don't fit neatly into your content hierarchy but need to exist. These often include:
- Login/Logout
- User Profile
- Search Results
- Error Pages (404, 500, etc.)
- Privacy Policy
- Terms of Service
- Site Map (yes, the HTML version)
These might be shown grouped separately, sometimes off to the side or with different visual styling to indicate they're accessible from multiple places.
Step 6: Add Page IDs or Numbers
Assigning a unique identifier to each page helps with communication and tracking. A common system uses decimal notation:
1.0 = Homepage
2.0 = First Level 1 section
2.1 = First page under section 2.0
2.2 = Second page under section 2.0
2.2.1 = First page under section 2.2
3.0 = Second Level 1 section
3.1 = First page under section 3.0
This numbering makes it easy to reference specific pages: "Can we discuss what goes on page 2.3?" is clearer than "Can we discuss the second subpage under Products?"
Step 7: Indicate Page Types or States
Use visual differentiation to show different kinds of pages. You might use:
- Different colors for page types
- Different border styles (solid, dashed, dotted)
- Shading or fill patterns
- Icons or symbols
Create a legend explaining what each visual difference means. For example:
| Visual Style | Meaning |
|---|---|
| Solid box | Static page |
| Dashed box | Template/dynamic page |
| Blue fill | Public page |
| Gray fill | Login required |
Step 8: Show Important Cross-Links
While your sitemap primarily shows hierarchical relationships, important cross-links should be documented. These are connections between pages that aren't parent-child relationships.
For example, a product detail page might link to related products, or an article might link to an author bio page. Use a different line style (like dashed lines) to show these connections without cluttering the hierarchy.
Don't try to show every possible link-focus on architecturally significant connections that affect navigation design.
Step 9: Review and Refine
Step back and evaluate your sitemap:
- Consistency: Are similar content types treated similarly throughout?
- Balance: Is one section much deeper or broader than others? Should it be?
- Completeness: Are there gaps in the user journey?
- Redundancy: Are you repeating content or functionality unnecessarily?
- Accessibility: Can users reach important content easily?
Share your sitemap with team members and stakeholders. Different perspectives will help identify issues you might have missed.
Common Patterns and Best Practices
Over years of web design practice, certain patterns have emerged as particularly effective. Let's explore some best practices to make your sitemaps more useful and your sites more navigable.
The Homepage as a Gateway, Not a Destination
In most cases, your homepage should serve as a launching point that efficiently directs users to the content they need. Users rarely come to a site wanting to "browse the homepage"-they have specific goals.
Structure your sitemap so that every major user goal can be reached within 2-3 clicks from the homepage. This might mean your homepage connects directly to many Level 1 sections.
Group by Task for Utility
When in doubt, organize around what users want to accomplish rather than how your organization is structured internally. Users don't care about your company's departmental divisions-they care about completing their task.
For example, instead of organizing a bank website by internal departments:
Less effective:
→ Retail Banking Department
→ Commercial Banking Department
→ Investment Services Department
Organize by customer tasks:
More effective:
→ Open an Account
→ Manage Existing Accounts
→ Apply for Loans
→ Invest Money
Create Clear Parent-Child Relationships
Each page should have one clear parent (with rare exceptions for utility pages). Avoid creating ambiguous structures where it's unclear which section a page belongs to.
If a page seems to belong equally under two different parents, consider:
- Choosing the most logical primary location and cross-linking from the secondary location
- Creating the content twice if it truly serves different purposes in different contexts
- Restructuring your hierarchy so the categorization is clearer
Keep Similar Content at Similar Depths
If you have several sections of similar importance, they should generally be at the same hierarchical level. For example, if you're creating a recipe site with different cuisine types, don't make Italian recipes Level 2 while Mexican recipes are Level 4-treat them consistently.
Account for User Entry Points
Modern users don't always enter your site through the homepage. They might arrive via:
- Search engine results (landing on deep pages)
- Social media links
- Direct links from other sites
- Email campaigns
Your sitemap should ensure that every page provides context and navigation options that work even if the user didn't start at the homepage. This is why global navigation and breadcrumbs are important.
Plan for Growth
Unless you're creating a very small, static site, your structure should accommodate growth. Leave room for:
- Adding new pages to existing categories
- Adding new categories if needed
- Evolving content types or features
Avoid structures that only work with the exact current content you have. Ask yourself: "If we add 20 more products, does this structure still work? What about 200 more?"
Design for Multiple Paths
Different users think differently and look for content in different places. Where appropriate, provide multiple paths to important content. This doesn't mean every page needs to link everywhere, but key destinations should be reachable through multiple logical routes.
For example, a university's "Apply Now" page might be accessible from:
- The homepage (prominent call-to-action)
- The "Prospective Students" section
- Individual program pages
- The "Admissions" section
Tools and Formats for Creating Sitemaps
You can create sitemaps with various tools, from simple sketches to sophisticated software. The right choice depends on your project's complexity, your team's preferences, and how the sitemap will be used.
Low-Fidelity Options
Pen and paper or whiteboard sketching works great for initial brainstorming and early conversations. The informality encourages experimentation and makes it easy to change things. Use this approach when you're still exploring different structural options.
Sticky notes on a wall are particularly useful because you can easily move pages around, trying different organizations until you find one that feels right. Each note represents a page, and you can cluster and organize them physically before committing to a digital format.
General Diagramming Tools
Tools designed for creating diagrams and flowcharts work well for sitemaps:
- Drawing or diagramming applications offer flexibility and control
- Presentation software with shape tools can create clean sitemaps
- Collaborative whiteboarding tools enable remote teams to work together
- Vector graphic editors provide precise control for detailed sitemaps
These tools give you maximum control over visual styling and can export in various formats for sharing.
Specialized Information Architecture Tools
Some tools are specifically designed for information architecture work and include features like:
- Templates and standard shapes for sitemap components
- Automatic numbering and organization
- Export options optimized for documentation
- Integration with other design tools
- Collaboration features for team review
Spreadsheets as Alternative Formats
For very large or complex sites, a spreadsheet format might be more practical than a visual diagram. A spreadsheet sitemap includes columns for:
- Page ID/Number
- Page Title
- Parent Page
- Hierarchical Level
- Page Type
- URL or Path
- Description
- Notes
This format is particularly useful when you need to track metadata about pages or when your site has hundreds or thousands of pages. You can sort, filter, and analyze the structure in ways visual diagrams don't support.
Choosing the Right Format
Consider these factors when choosing your sitemap format:
- Site complexity: Simple sites work well as visual diagrams; huge sites might need spreadsheets
- Audience: Stakeholders often prefer visual diagrams; developers might prefer detailed spreadsheets
- Stage of process: Early exploration benefits from flexibility; final documentation needs clarity
- Collaboration needs: Will multiple people edit simultaneously?
- Update frequency: How often will this change? Choose formats that are easy to update
Common Challenges and Solutions
Creating sitemaps isn't always straightforward. Let's address some challenges you're likely to encounter and strategies for handling them.
Challenge: The Sitemap Becomes Overwhelming
Large sites can produce massive, incomprehensible sitemaps. When your diagram has 200+ boxes, it stops being useful.
Solutions:
- Create multiple sitemaps at different zoom levels-a high-level overview showing main sections, then detailed sitemaps for each section
- Use abstraction-represent template pages with a single box and a note indicating "multiple instances"
- Consider a spreadsheet format for the complete inventory while keeping visual diagrams for key areas
- Focus on unique page types rather than every instance of a page
Challenge: Stakeholders Disagree on Structure
Different stakeholders often have different visions for how content should be organized, leading to conflicts.
Solutions:
- Ground discussions in user research-what do users expect?
- Create multiple sitemap options and test them with actual users
- Use card sorting data to show empirical patterns in how people group content
- Focus on user tasks and goals rather than internal organizational politics
- Consider hybrid approaches that accommodate different mental models through multiple navigation paths
Challenge: Content That Belongs in Multiple Places
Some content seems to fit equally well in different sections, making it hard to decide where to place it.
Solutions:
- Choose one primary location based on where users are most likely to look first
- Use cross-linking to make the content accessible from other relevant locations
- Create contextually different versions of content for different sections if the usage differs
- Use robust search and filtering to help users find content regardless of where it lives
Challenge: Balancing Depth vs. Breadth
You might struggle with whether to create many top-level sections (broad and shallow) or fewer sections with many subsections (narrow and deep).
Solutions:
- Test navigation with real users-what feels more intuitive?
- Consider your content volume-hundreds of items might need deeper categorization
- Aim for 3-4 levels maximum when possible
- Use progressive disclosure-show high-level categories first, then reveal subcategories as needed
- Provide filtering and sorting options to help users navigate large sets within a category
Challenge: Accommodating Dynamic or Personalized Content
Modern sites often show different content to different users based on login status, preferences, location, or behavior, making it hard to show a single structure.
Solutions:
- Create separate sitemaps for different user states (logged out, logged in, admin, etc.)
- Use annotations to indicate conditional pages or sections
- Show the full structure and note which parts are conditional
- Create flowcharts or user journey maps to complement the sitemap and show how users experience different paths
Challenge: Maintaining Sitemaps as Projects Evolve
Sites change over time, but sitemaps often become outdated and stop being useful reference documents.
Solutions:
- Establish the sitemap as a living document that gets updated with significant changes
- Assign ownership-someone should be responsible for keeping it current
- Use collaborative tools where changes are easy to make
- Include the sitemap in project documentation and review processes
- Schedule periodic sitemap reviews (quarterly or annually)
Testing and Validating Your Sitemap
Once you've created a sitemap, don't assume it's correct-validate it with real users and team members.
Internal Review
Share your sitemap with your team and stakeholders. Ask them to walk through common user scenarios:
- "Where would you go to accomplish [specific task]?"
- "Can you find the path to [specific content]?"
- "Does this structure make sense for our business goals?"
- "Are we missing any essential pages?"
Document questions and concerns that arise. Multiple people struggling to find the same content indicates a structural problem.
Tree Testing
Tree testing is a research method specifically designed to validate information architecture. Users are given task scenarios and shown a text-only version of your site structure (like a sitemap without visual styling). They navigate through the hierarchy by clicking on section names.
This tests whether your structure makes sense independent of visual design, wording, or interface design. You'll discover:
- Whether users can find what they're looking for
- Where they go looking for content
- Where they get stuck or take wrong paths
- How quickly they complete tasks
Failed tree tests indicate structural problems that should be fixed before investing in detailed design.
Cognitive Walkthrough
Conduct a cognitive walkthrough with stakeholders or team members. Choose realistic user goals and walk through the sitemap as if you were that user:
"I'm a new customer wanting to buy running shoes. I arrive at the homepage. Where do I click? Now what do I see? Can I filter by size and price? How do I compare products?"
This exercise often reveals gaps, unclear paths, or missing functionality in your structure.
Comparative Analysis
Look at how successful competitors or similar sites organize content. You're not copying them, but understanding conventions helps you know when you're aligning with user expectations versus requiring users to learn a new pattern.
If every banking site puts "Open Account" prominently in top navigation, users will expect that. If you bury it three levels deep in a different section, you're creating friction.
From Sitemap to Design
A sitemap is an intermediate deliverable-it's not the final product. Let's discuss how sitemaps connect to the next phases of design work.
Informing Navigation Design
Your sitemap directly translates into navigation systems. The top levels of your sitemap typically become:
- Primary navigation (header menu)
- Footer navigation
- Mega-menus showing second-level pages
- Sidebar navigation within sections
Navigation designers will use your sitemap to determine what links appear where and how many clicks are required to reach content.
Guiding Wireframing and Prototyping
Designers creating wireframes reference the sitemap to understand:
- What pages need to be designed
- What navigation elements should appear on each page
- What the primary next steps should be from each page
- How pages relate to and link to each other
The sitemap provides the blueprint; wireframes show what each room looks like.
Planning Content Creation
Content strategists and writers use sitemaps to:
- Understand the full scope of content needed
- Plan content relationships and cross-references
- Ensure consistent terminology across related pages
- Identify opportunities for content reuse
- Plan SEO strategy based on site structure
Informing Development
Developers reference sitemaps to:
- Understand system architecture requirements
- Plan URL structures and routing
- Identify template needs (which pages share structures)
- Plan database structures for dynamic content
- Estimate development effort
Your sitemap becomes part of the technical documentation that guides implementation.
Final Thoughts
Creating sitemaps is a foundational skill in information architecture and web design. A well-crafted sitemap brings clarity to complexity, aligns teams around a shared vision, and serves as a roadmap that guides every subsequent design and development decision.
Remember that your first sitemap is rarely your final sitemap. Structure is something you iterate on-sketch ideas, test them, refine them, and test again. Be willing to restructure when testing reveals problems. The effort you invest in getting the information architecture right pays dividends throughout the project and for the lifetime of your site.
As you create more sitemaps, you'll develop intuition for structure. You'll start to recognize patterns and anticipate problems. You'll know when to apply established conventions and when to innovate. Most importantly, you'll internalize the principle that drives all good information architecture: organize information for the people who need to find it, not for the people who created it.
The sitemap is where that principle takes visual form-where abstract ideas about organization become concrete plans for real websites and applications that real people will use. That's why this seemingly simple diagram is so fundamentally important to the design process.
