Browse our guides or talk to our team.
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 site map 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.
So, whether you're building a website from scratch or planning an overhaul, you need a site map. 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 site map.
A site map 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 site map 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.
Laying out all your website pages in advance ensures that you're giving every bit of content consideration before actually putting in the work of building. This step includes research, writing, getting images, overall design, and all the other elements that go into creating a great website.
With site maps, you can easily visualize the user journey. Look for dead-ends in your content, opportunities to add links between pages, and make sure there aren't any unexpected
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, site maps help you keep your business goals on track.
The first step to making a fully-functional site map 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:
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've collected your ideas, there's no one right way to organize a site map, 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 site map should look like. (You can also do this with a diagramming tool like Gliffy Online or one of our Atlassian Apps, which allow 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 site map 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 site map and clarify information. Because the site map 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.
You should have a pretty serviceable diagram at this point, so it's time to put it to some stress tests.
This should be all you need to get a serviceable site map 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.
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 site map 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 site map with a fine-toothed comb and remove anything that's irrelevant. 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.
In this case, focus the site map you create on heavily utilized categories to understand and visualize your website. For example, Gliffy's website has many pages under our “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!
The truth of the matter is that site maps 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.
Site maps 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 site map, 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 site map visualization, plus a free trial to get you started today.
Try Online Try in Confluence