A sitemap is a diagram of a website or an app that shows how pages are prioritized, linked, and labeled. Sitemaps help outline the pages of a website you need to design and can help you spot necessary pages that you’ve forgotten to include, need to remove, or need to combine. This is useful when planning the design for a responsive website in its early stages, It helps designer create a clear organizational path.

Sitemap is part of the information architecture for a webiste. Information architecture organizes content to help users understand where they are in a product and where the information they want is. The common site structures are hierachical, sequential, matrix and database.

Hierarchical – a top down approach to structure that starts with broader categories of information (parent) that narrows into more detailed information (child).

Sequential – a website structure that leads users through a step-by-step process.

Matrix – allows users to follow their own path, since content is linked in several ways.

Database – a website structure that mixes a database, or an organized collection of information, with search functionality.

In this article, we will dive deeper into one of common type of sitemap: a hierarchical sitemap. Hierarchical sitemap outlines the relationship between pages in order of importance. The image below shows an example of a blank hierarchical sitemap.

• The dark gray rectangle at the top of the sitemap represents the homepage. Almost every website has a homepage where the user enters the site.

• Under the homepage, pages are listed by priority. The parent pages, or primary categories, connect directly to the homepage. In the example below, these pages are shown as blue rectangles. Remember, on a website, these categories usually appear in a navigation bar at the top of the home page.

• The child pages, or subcategories, connect underneath each parent page. In this example, the child pages are shown as light gray rectangles.

An example sitemap: Cooking website

Imagine that you want to create a sitemap for a cooking website that has videos and recipes that teach users how to cook. Follow the steps that were outlined in the previous video to create a sitemap.

Step 1: Think about pages that are commonly found on websites. As you review existing cooking websites and revisit what you’ve learned from the competitive audit you conducted, you notice that most cooking websites have a search functionality and some kind of an account section to create a profile and save recipes. You should consider whether you want to include these common pages on the website you’re designing, too.

Step 2: Recall information about users. While conducting research during the empathize phase of the design process, you learned that users want to find videos and recipes by food type. Users also want to be able to easily search for a recipe or video.

Step 3: Decide on a website structure. For this example, you choose to create a hierarchical sitemap because there will be one top-level page, the homepage, with pages hanging from it that users can easily find their way too.

Step 4: Start with the homepage. In this example, the homepage is the dark gray box at the top of the sitemap.

Step 5: Name the main categories of content. These categories will be represented in the row of blue rectangles, which are connected to the homepage. For the cooking website, you might want to have a category for cooking videos and for recipes, since those are the types of content that the website provides. You might also want a category for search and for account, since those are pages that are commonly found on other cooking websites and were revealed during user research.

Step 6: Add subcategories. Remember, the subcategories are the column of gray rectangles that come below each blue rectangle. For example, you might decide to categorize cooking videos by quick fixes, slow cookers, and recommendations. Keep in mind that categories will not necessarily have the same number of subcategories.

The sitemap will look something like this in after following all the steps:

Your sitemap will look different depending on the size of your website. Small websites (under 100 pages) will use flat sitemap. Flat sitemaps have no more than four vertical levels. The cooking website example sitemap is considered a flat sitemap. For larger websites of 1,000 pages or more, you’ll create a deep sitemap, which includes five or more vertical levels.

Remember, a clear organizational structure is key for all users to be able to move through and use your website’s design successfully. Sitemaps are the perfect tool for planning out the architecture behind your web designs.

Additional resources

• How to create a UX Sitemap: a simple guideline from UX Collective

• Sitemaps and IA from Adobe XD.

• Example sitemaps for websites from Adobe XD.

Good luck!