First things first: why should you create a site map? Well, it's as crucial to planning a new website as a roadmap is to planning a cross-country trip. Without it, both your trip and your user's journey through your website would be full of unplanned for (and potentially unpleasant) stops.
A sitemap is a visual representation of your website to-be. It helps you figure out how users look for information. It's a vital step in building a functional, usable site that will take your users where you want them to go instead of X-ing out of your site in frustration.
So, whether you're building a website from scratch or planning an overhaul, you need a sitemap. Building one isn't difficult, but you have to be methodical to get it done right. From coast to coast, here's your roadmap for building a sitemap.
What is a sitemap?
A sitemap is a list or diagram that helps you plan out your website. It should contain all the pages of a website in a way that shows how the user will access them, starting with the homepage and branching out to include all the subpages.
To get started, first create a list of all the pages you think you'll need and then turn your list into a diagram. Even the simplest visual representation, will quickly allow you to spot gaps and awkward transitions. Take this simple website as an example:
A sitemap of animalz.co in diagram form would look like this: (The landing page is “Home” and the only category is “About”.)
A list would look like this:
Both are effective, but visuals tends to be more easily digestible than words, especially if you have to share your concept with somebody else.
3 ways sitemaps help you make website magic
1. To plan content. Laying out all your website pages in advance ensures that you're giving every bit of content consideration before actually putting in the work. This step includes research, writing, getting images, overall design, and all the other elements that go into creating a great website.
2. To help improve UX. With sitemaps, you can easily visualize the user journey so you can see where people end up doubling back or getting stuck.
3. To achieve business goals. One of the most important questions you have to answer when planning a website is what do I want visitors to leave with and how is that helping my business? By laying out what you want to put on your website and how you'll direct users, sitemaps help you keep your business goals on track.
Planning a sitemap diagram
The first step to making a fully-functional sitemap is laying out all the content ideas for your website. At this stage, it's okay to do a huge brainstorm and think about all of the things you could ever want — you'll have time to refine your ideas later.
Now that you have a big list things you want to include, it's time to start organizing them:
- Identify the major categories that your website will have. Think: what will I have across the top bar or in a sidebar to direct people?
- Identify subcategories for each major category.
- Identify which pages fit into which subcategories.
Now, it's time to prune your ideas. At this stage, you may find there are ideas you want to put into your website that just don't fit into categories or subcategories. That might be a sign that you have to table those until a later date, another website, or a redesign that allows them the space to fit into your website. You may also find that you've got some ideas that are very similar to each other — consider lumping those together into one idea, so you don't end up with two different pages with duplicate information.
Once you have your general categories, subcategories, and finalized list of pages, you're ready to start thinking about how to actually organize your user journeys by creating a sitemap.
Building a sitemap
There's no one right way to organize a sitemap, but there are best practices to help you. The goal is to show how the relationships between pages on your site affect UX, so diagrams are commonly used because they give you an at-a-glance understanding of the relationship between all the pages on your site.
To start showing these relationships, write down your categories, subcategories and pages on sticky notes and start moving them around. This is a great way to begin, especially if you're designing with a team. Gather everyone 'round the whiteboard and get a rough idea of what your sitemap should look like. (You can also do this with a diagramming tool like Gliffy, which allows you to share your diagram with anyone.)
Once you've brainstormed a good contender, it's time to take things digital. Again, note each category, subcategory and page, but use different shapes, colors, and lines to denote the relationships between pages. For example, your homepage might be a circle, and each category might be a square:
But don't stick to just labeling with “Home” and “Category 1” — you can also add the URL you want to use or the real title of the page. You should add any data that is going to be useful for a robust plan for building your site. It doesn't have to be extensive, but it should leave anyone with the basic knowledge needed to put together a site model.
Include a legend with your sitemap to let people know what everything means, especially if you are planning on sharing your map with customers or an outside team. Even for internal use, a legend is good practice for keeping things organized and easy to read.
Use annotations to enhance your sitemap and clarify information. Because the sitemap is a planning tool, you might have included parts of your site that will be rolled out on a timeline, or content that you are working on with collaborators. Noting things that require special consideration or planning will maximize your sitemap's effectiveness.
An example of what a draft sitemap might look like for a product launch.
Refining your sitemap
You should have a pretty serviceable sitemap at this point, so it's time to put it to some stress tests.
- Make some pretend user journeys. Take any user profiles you have and ask yourself how those people would navigate the site. Come up with questions customers might have and map out how you'd find the answer to that question. Where are there sticking points or unintuitive leaps? These are spots you might need to reorganize.
- Give it to a stranger. Phone a friend who wasn't involved in making the sitemap and ask them to find what pages would have the answers to questions about your product. If it takes them too long, or if they can't find what they're looking for, take another look at those areas of your map.
- Double check your deets. Sweep your sitemap and make sure every piece of information you need is available there in a standardized way. Are all page titles bolded? Are all your annotations in green? Did you label your legend? These things will make a big difference in legibility, especially if you share your sitemap with customers.
This should be all you need to get a serviceable sitemap for your standard redesign, product or company launch. Feel free to get creative and represent your website in a way that makes sense to you and your team. Color coding, metadata, adding design screenshots — everything is on the table, as long as it will help you work towards that perfect user journey.
When to use a sitemap generator
The steps above may not work if you're planning a redesign of an oversized site with hundreds of pages, URLs, and paths. Don't sweat it. If this is the case for you, your first step is to use a sitemap generator to get the bones of your website. There are a variety of tools out there that will be able to process a list of your pages automatically.
Let's take Gliffy's website, for example. A quick sitemap of our website finds ~490 pages!
A screencap of Gliffy's sitemap reveals pages differentiated by the <url> </url> tag.
But are all these pages necessary? One way to find out is to go through your sitemap with a fine-toothed comb and remove anything that's irrelevant. (If we recruited a five-person team to do this for our 500 page website, we'd get the categorizing done in an hour.) Do you have some blog posts from 2008 that, in retrospect, are pretty bad? Do you have some floating pages hanging around, like an old version of “About Me” from before you published your new one? Hunt these down and remove them, then run your site through a generator again.
Now that you have your cleaned up the sitemap, draw up heavily utilized categories to understand and visualize your website. For example, Gliffy's website has 457 subpages under the category “Blog”. So instead of trying to make a sitemap like this:
You might just show this, filling in whatever categories are your heaviest-hitters.
When you have a heavy, page-filled site, you may also choose to redesign and map your site one category at a time. After going through all the pages, it's possible that you might only be able to reasonably map out one section at a time — and that's totally fine! Just remember that you have to do your big sweep first, so you don't finish revamping the Investments We've Made section only to realize you want to include Investment Philosophy in that part of your site instead of under your Team page.
The truth of the matter is that sitemaps can and will become unwieldy and overwhelming if your site is too big. Pruning outdated pages and using categorical organization will help you better manipulate your site's data.
Build websites that work
Sitemaps help you build websites that work because they're just that — maps. They provide a blueprint you can build off of and directions for everyone involved in the project.
By taking the time to plan and streamline a sitemap, you're helping your business build a website that will actually work for users and get you closer to your business objectives. Gliffy offers design tools that are perfect for sitemap visualization, plus a free trial to get you started today.