How to Create Your First Sitemap

 

What is a Sitemap?

A sitemap is a document that outlines the structure of a website, typically represented as a list, chart, or visual diagram. It displays the hierarchical organization of a site's pages and serves as a planning tool for web design. By illustrating the site's navigation and content layout, a sitemap provides an overview of the site's architecture and page hierarchy.
 

How Does It Help?

1. Improves Usability: Organizing content into logical categories enhances user experience by providing clear pathways for navigation and helping visitors find what they’re looking for.

2. Structures Site Flow: It helps organize the order and flow of site pages, creating logical user paths that align with the website’s objectives.

3. Visualizes User Flow: A sitemap allows you to map out and visualize how users will navigate through the site, helping to identify any potential obstacles in the user journey.

4. Aligns with Business Goals: It helps present content in a way that supports the organization’s business objectives, ensuring that key messages and actions are prioritized.

5. Plans Effective Navigation: By mapping out navigation, a sitemap ensures users can easily access and engage with the content they need in a user-focused way.

Sitemaps typically consist of page names or IDs that represent the hierarchy and grouping of content. They often include a legend to explain the structure of the sitemap diagram. 

Ways to Represent a Sitemap

1. Outline Format: Lists pages in a structured outline format, showing parent-child relationships.
2. Diagram Format: Uses a visual diagram to illustrate the hierarchical structure of the website.

Note: Sitemaps are different from XML sitemaps, which are used by search engines to index a website’s searchable pages.
 

Sitemap Outline:

• List view or also known as the Outline View is a simple way to represent the page hierarchy. 
• Horizontal tree diagram like an org chart styled as a simple list with indentation. 
• Can be horizontal or vertical tree diagram

 

Sitemap Diagram:

A sitemap diagram is a visual representation of a website's structure, using icons and illustrations to highlight key elements. This method provides a clear, graphic depiction of the website's navigation and content layout.

Several tools can be used to create visual sitemaps, including:

• Microsoft Visio and professional design software like Adobe Illustrator or Photoshop for detailed diagrams.
• Web-based tools such as Gliffy and Creately are also popular for drafting sitemaps with a range of symbols to represent different navigation points.

Tools and Requirements for Creating a Sitemap

What You Need to Create Your Sitemap:

1. Creative Brief: A document outlining clear business goals and website objectives.
2. Website Objectives: Details on the features and functionalities needed to meet business and user goals.
3. User Goals and Tasks: Understand what users aim to accomplish during their visit.
4. Card Sorting Results: A technique where each page is represented by a card, which can be rearranged to reflect the ideal structure.

Key Considerations for Creating Your First Sitemap:

1. User Intent: Why is the user visiting the site? For example, to register, learn, purchase, or donate?
2. Logical User Path: What is the most intuitive path for users to achieve their goal? For example, Home > Services > Quote Form.
3. Business Goals Alignment: Does the navigation structure help the business achieve its goals?
4. Page and Content Relationship: How do the pages link and relate to each other? Is there a logical flow?

Steps to Create a Sitemap:

1. Start with a Sketch: Use hand-drawn sketches or sticky notes (similar to card sorting) to draft the initial sitemap.
2. Refine with Tools: Once satisfied with the draft, move to your preferred tool such as:
   • Microsoft Visio
   • Adobe Illustrator or Photoshop
   • Gliffy, Creately, or Lucidchart

Presenting the Sitemap:

The sitemap should communicate the overall structure of the website to stakeholders, providing enough detail for the development team. It serves as a collaborative tool, helping to clarify and eliminate uncertainties in the project's scope and structure.

1. Label Pages Clearly: Use established naming and numbering conventions for consistency.
2. Include Future Pages: Add any future or proposed pages that fall within the project scope, using callouts to clarify.
3. Client Presentations: Keep it simple when presenting to clients, demonstrating user flow from page to page.

Key Questions to Answer for Each Major User Group:

1. Who is the primary user of the site?
2. What is the user’s purpose for visiting the site?
3. What is the user’s path to achieve their goal?

By addressing these questions, you can create a sitemap that effectively guides users and aligns with business objectives.