Slickplan

Sitemap design: how to

Sitemap design: how to design a sitemap for a website easily

Looking to design the perfect sitemap? Well you should be, because sitemap design and planning your site's hierarchy has far reaching effects on everything from search engine optimization to making sure your visitors have a buttery smooth and great user experience.

It’s free to sitemap with Slickplan — Register now

14-day free trial
No credit card required

Below is our straightforward roadmap to help you get started

Spending just that teeny, tiny bit of extra time learning how to properly design your sitemap - essentially a visual flowchart – goes a long way toward saving time, reducing mistakes and preventing costly revisions during the website's coding. Here at Slickplan, we've designed a super intuitive and helpful sitemap creator and website planner that allows you to design sitemaps online, easier than ever before.

Why online website sitemap design is best

Application based sitemap planning has many clear advantages over paper or whiteboards like ease in editing, saving and sharing and iterative design. Taking it a step further, using a cloud based application to create sitemaps online gives you the added benefits of collaborating and sharing with colleagues or clients by granting direct access to the project.

Online sitemap design applications also allow you to easily link to online content as well as upload and share related project materials while keeping everything in one place. Using an online tool also saves you from having to maintain software installations; all our new features are accessible the minute they become available.

Why online website sitemap design is best

Easy collaboration

Easy collaboration

The internet is the great connector and harnessing it to collaborate with colleagues across the office or the ocean is a no-brainer. It's the 21st century after all. Online sitemap design tools like ours mean ease of access for all and intuitive feedback which creates an accelerated workflow to get your project from planning to production as quickly as possible.

Everything in one place

Everything in one place

Slickplan is like the Swiss Army Knife of website planning and design. Everything you need and nothing that you don't – all in one. Are you still going to have 900 tabs open anyhow? Yep, probably, that's life nowadays. But they won't all have to do with planning your website so you can live a little and have a few vacation tabs.

No maintenance

No maintenance

We do the updating for you so you can keep trucking through projects using the most sophisticated tools possible. As soon as our upgrades, improvements or new features are ready to go, you'll have immediate access. No more downloading, installing and eventually getting so annoyed you just stick with an old iteration (we've all been there).

How to build a sitemap logically

There should be an underlying logic to your website and the only way to ensure that that's the case is to construct a sitemap before you code anything. So if you're curious about how to design a website, focus on the underlying structure first.

By building an intelligent and thorough sitemap in advance, you'll be able streamline and trim the fat from your site, create a strategic website content plan and tap into another level of SEO all while making your site user-centric.

The best thing? Creating a sitemap is actually a fairly simple process.

Without further ado, here's how to design a sitemap:

How to build a sitemap logically
1. Preparation before designing a sitemap

1. Preparation before designing a sitemap

Before you begin designing a sitemap, it's key to think about what info you want to deliver to your website users. Start by listing some goals you want to achieve with your website such as sales, blog readership, trial signups, etc. This will all come together to shape the information architecture that'll hone your sitemap and ultimately inform the content you provide to help lead users where you want them to go – your solutions.

It's important to determine who's responsible for the design of the sitemap, who's contributing to it and who will manage approvals. Although it's useful to get input from clients or stakeholders, it's better to limit input to 1-3 critical team members for the sitemap creation process.

You don't want to have too many cooks in the kitchen.

2. Design sitemap navigation

2. Design sitemap navigation

Start designing your sitemap with a home page as the root. Next, begin to design sitemap pages that outline your main navigation which should live directly beneath the home page on the second level. These pages typically include common topics like “About Us” and “Contact” that are often one click from the main navigation or home page.

You really want to think deeply about every aspect of the user journey while you design your sitemap, so remember to include utility pages like “Privacy Policy”.

3. Define parent pages

3. Define parent pages

Consider how you want to organize your subject matter from the user's perspective, so people don't spend excess time hunting to find relevant information.

On this second level, you should create pages that include general information or summaries of a given topic, think of parent pages as chapter headings in a book. All related content should be easy to find on child pages linked to and from the parent page. Parent pages should also contain sub-navigation or links to relevant content.

User friendly navigation normally includes 5-10 items; for more, consider consolidating content or creating additional webpages.

4. Expand child pages into your sitemap page design

4. Expand child pages into your sitemap page design

Add third-level (and sometimes even fourth-level) pages beneath your parent pages that contain the related content. In most cases child pages are reached by parent page links only.

These pages should be highly specific and focused on one main idea per page; picture it as a funnel with the content getting more refined and detailed as you go down.

For the majority of websites, the sitemap page design will only need three levels of page hierarchy but there are rare exceptions for sites with vast amounts of information, like government or education websites, in which 4-5 levels may be required.

5. Sitemap design for website test scenarios

5. Sitemap design for website test scenarios

To land on the best sitemap design for a website, we recommend you duplicate your sitemap and test a few different scenarios to help you visualize and determine the optimal site structure for your users. One which balances the need for unique pages and topics and maintains a shallow click-depth.

Think about other ways to group content; try organizing parent and child pages by user persona, product line, user industry, company size, etc. You may find that alternative groupings encourage users to follow content paths more relevant to their specific needs or demographics and lead to a more successful website.

Creating additional scenarios when website planning will also aid in your page layout (where a mockup tool helps tremendously) and silo architecture with the various scenarios allowing you to pinpoint the most visually appealing and designer friendly website structure.

6. Incorporate descriptive information into your sitemap designs

6. Incorporate descriptive information into your sitemap designs

Once your structure is defined, it's time to add descriptive information about your pages to the sitemap. Slickplan allows you to easily select a page type, identify what content you'll need and even assess the required level of coding for your sitemap designs. You also can add notes to each page; a summary of the on-page content as well as any special instructions, attachments or development concerns that need to be addressed. Pretty sweet.

Previous

What is a sitemap?

What’s the difference between visual sitemaps, HTML sitemaps, and Google sitemaps? See why they are important in modern web design practices.

Discover more

Next

Visual sitemap generator

Visually designing sitemaps is important in properly planning your website. Learn how a visual sitemap generator works.

Discover more