Learn more about building a sitemap

When planning the designs for a responsive website in its early stages, it’s important to create a clear organizational path. That’s where sitemaps come in handy! As a reminder, 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.

Let’s dive deeper into one common type of sitemap: a hierarchical sitemap.

Hierarchical sitemap

A 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.

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.
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.
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 to.
4. Start with the homepage. In this example, the homepage is the dark gray box at the top of the sitemap.
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.
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.

After following these steps, here’s what the sitemap of the cooking website might look like:

Your sitemap will look different depending on the size of your website. Small websites (under 100 pages) will use a 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

To learn more about how to enhance your web designs with sitemaps, check out these articles from external sources.

• Read How to create a UX Sitemap: a simple guideline from UX Collective to learn more about building flat and deep sitemaps.
• Connecting pages within a sitemap is critical to how users will navigate a website. Learn about how different content pages can relate to one another by reading Sitemaps and IA from Adobe XD.
• Need a little sitemap inspiration? Adobe XD has you covered with an article that showcases five visual sitemaps so you can start thinking about how you can structure your own: Example sitemaps for websites.

Sources: Google UX Design Professional Certificate

Coursera | Responsive Web Design in Adobe XD