Unlike the list format, it more clearly indicates paths between pages/experiences, as you can see in the checkout flow that runs across the center of the map. Like the list, it captures a high-level view of the site. Hillary Pitts’ sitemap (at the top of this section) is a horizontal diagram, probably the most familiar form of sitemap out there. That makes a list format handy for, say, a page inventory, but you wouldn’t want to hand it to a client and say, “This is how people will navigate around the site.” 2. Or that each of those pages are linked to from the site’s homepage.
There’s no indication, for instance, that Designer, CMS, Editor, and Hosting all appear under a dropdown labeled Features in the site’s main navigation. What it’s not so good at communicating is user paths between those pages. You can immediately see that the pages for the Designer, CMS, Editor, Hosting, and Customers all receive the same level of prominence, with specific customer stories coming in one level lower. This is great for communicating page topics and relative hierarchy.
Here’s an example based on part of the core Webflow site: The list format is a simple ordered or unordered list that uses nesting to convey hierarchy. In other words, it needs to be capable of conveying the info you want to convey in a manner that’s clear to your audience.įor example, here are 3 common ways of creating a sitemap, along with the information each is best at conveying: 1. Ability to convey the information you need to convey.Ability to capture the information you need to capture.You’ll want to choose your method based on two qualities: You can approach the design of your sitemap in several different ways. Thus, your sitemap should place product indices and pages at or near the top of the hierarchy, so visitors can immediately see where they need to go to fulfill your goal and theirs: buying stuff. That’s because the site’s hierarchy needs to reflect and contribute to the fulfillment of that goal.įor example, if you’re building an ecommerce site, one of your goals will undoubtedly be to sell products. (Note: in this post, we’re discussing the sitemap as a website planning and communication tool, not the literal XML sitemap you’ll create to aid search engine spiders in crawling your site - though the planning tool should essentially define what that XML sitemap will contain.)Īs you’re building out your hierarchy, it’s vital that you continually reference your project’s goals.
Have you ever looked out of an airplane window and seen the outline of a brand-new subdivision taking shape below? It’s kind of like a sitemap: a footprint signaling where structures need to be built, as seen from 30,000 feet.Ī sitemap provides a diagram of the site’s hierarchy and shows where each page fits into this hierarchy. Hillary Pitts’ web design sitemap example breaks down an ecommerce site into its most basic building blocks.