profile pic

by Eric Sharp on October 28, 2014

Topics: Planning & Strategy


Pretend you’re a home builder for a moment.

Would you break ground on a new home that didn’t have approved floor plans? Are you OK with improvising for the next few months? Will your team of contractors be confident in the final result?

(If you said ‘yes’, please stick with your day job!)

Similarly to how floor plans communicate a home’s structure, a sitemap communicates a website’s structure.

Designing a detailed sitemap involves eight steps, and each step will prevent a “wing it” approach during your website planning and build clarity and confidence along the way.

What is website sitemapping and why is it needed?

Sitemapping is the visual process of outlining a website’s structure, high-level functionality and navigation scheme. The end deliverable can be a sketch, image, PDF, or presented in a tool like SlickPlan (my full list of sitemapping tools towards bottom).

A website’s sitemap should be defined early in the website planning process. There’s only a handful of activities that should precede this step (e.g. Business Objectives, User Research).

An example sitemap of Colors are used to represent the different tiers of navigation (e.g. blue = primary navigation)

Sitemapping is a critical phase to the structure of a website because it represents a crucial deliverable of information architecture (IA) — the foundation to the five competencies of user experience design.

How critical? Well, bad information architecture causes most user failures.

A website’s sitemap is a deliverable of Information Architecture

How to plan & create a website structure with a site map

Here’s the overview:

  1. Prepare for the activity of sitemapping
  2. Brainstorm the types of content
  3. Define primary navigation
  4. Flesh out second & third level structure & content
  5. Don’t forget about utility pages
  6. Create notes and high-level specifications for each page
  7. Designate the type of design template
  8. Iterate. Iterate. Iterate.

Now, let’s deconstruct each step.

Step #1 — Prepare for the activity of sitemapping

Before jumping into your site map design, you’ll need to prime the pump by addressing three areas:

  1. Time – A strong sitemap isn’t designed in 20 minutes. Does your organization have the necessary collaboration time?
  2. People – Key stakeholders should contribute to the sitemap design. Who are these people? Are they the right people?
  3. Research – What are the website’s objectives? Who are our users? What kind of information do they need? What does our analytics tell us?

HELPFUL HINT: Don’t assume that Marketing and Sales know it all — involve various departments. The diversity of company, industry, service and product knowledge will be beneficial.

You might like this video:

Interview with Slickplan Founder, Ian Lawson [VIDEO]

We interviewed Ian Lawson, Founder and Product Manager of Slickplan, a super-intuitive sitemapping design tool for planning websites.

Step #2 — Brainstorm the types of content

Before you start defining navigational elements (Step #3), you’ll need to discuss your website’s content. What services/products are we marketing? How much company info will be presented? Do we have testimonials? What helpful resources can we provide?

Don’t focus on where that content goes in the sitemap just yet (Step #4). Give yourself the freedom to think openly — even wildly! Bad content ideas will naturally work their way out with time.

HELPFUL HINT: Follow the 80/20 rule of content (80% valuable content / 20% promotion)

Step #3 — Define primary navigation

Also referred to as “1st Tier”, “Main”, “Top Level”, or “Global”, primary navigation is typically found at the top of a website in a horizontal design. Though there’s a case against vertical navigation, some websites still take this approach (e.g. Amazon).

Your sitemap’s primary navigation should…

  1. Be concise – each element should target 1 to 5 words (‘About’, ‘Contact Us’) rather than full sentences
  2. Use common language – avoid naming navigation that only make sense internally. Use the KISS principle (Keep It Simple Stupid)
  3. Communicate top-down hierarchy – can someone easily peruse or find information?
  4. Allow the site to grow – your primary navigation shouldn’t need re-tooled every time you add new content or features
Primary navigation of includes 8 concise elements ranging from one to four words

HELPFUL HINT: There’s no magic number to how many elements live in your primary navigation. Even though 7 items or less is a UX Myth, it’s still important to practice brevity. If your site map design outlines 10+ elements, there might be an opportunity to consolidate.

Step #4 — Flesh out second/third level structure & content

With primary navigation established, it’s time to drill deeper into each section.

For most websites under 50 pages, a second level of structure should be sufficient. For larger websites, third level is typically needed to maintain a solid hierarchy. I’ve even seen some websites go four levels deep (this is pretty typical of academic websites where there’s gobs of content).

Unlike your primary nav where the number of elements should be concise, secondary/tertiary levels of content is somewhat unlimited — within reason of course. The challenge with multiple levels is designing menu systems that allow for easy scanability and findability.

HELPFUL HINT: As you flesh out page after page, your overarching primary nav will be put to the test. Don’t be afraid to tweak as your website structure comes into view.


Step #5 — Don’t forget about utility pages

Privacy policies, disclaimers, legal information — all critical pages that need a home in your website. Don’t lose track of these in your sitemap. Carve out a spot for them in your footer or elsewhere. This content could take weeks or even months to finalize!

We want our website’s privacy policy to hold up launch.

Said no one ever

HELPFUL HINT: Contact your legal department sooner rather than later.

Step #6 — Create notes and high-level specifications for each page

“We’ll just have some basic content for this page.”

No. NO. NO!

Take a moment to think, specifically, about each page’s content. What existing assets are available? What new assets need created? How deep do our archives go? What will be our blog topics?

Put content first because it’s the heart of every website.

Documenting notes and specs for each page helps you focus on specifics

HELPFUL HINT: If you need a good starting point, lead with word count. Short and sweet (under 100 words) or rich and hearty (500+ words)?

Step #7 — Designate the type of design template

Is this page a photo gallery? Conversion form? Table of contents? PDF?

Specifying a page’s design type warms the engine for UI (User Interface) design

This activity can become the curious case of chicken or the egg. How can you identify what design template your content needs when the content isn’t finished?

The key here is that you’re not actually designing the user interface (UI), you’re identifying the type of content. This identification helps guide the content curation process and warms the engine for UI design down the road.

HELPFUL HINT: Designate every page’s template. If you don’t know it yet, label it “TBD” and iron out as you iterate.

Final Step — Iterate. Iterate. Iterate.

Version 1 of your sitemap will almost never be the final and best version. Create a new version as your sitemap undergoes heavy change. You can always revert to a previous version.

I like to create new versions for different days of brainstorming. New day = new version.

Choose a sitemapping tool with version control

HELPFUL HINT: Shoot for ~85% accuracy with your website’s structure before prototyping or wireframing

Sitemapping Tools

I’m a big advocate of web-based tools that don’t require software and are operating system agnostic. Speed, version control, and shareability trump everything when it comes to designing a site map.

That’s why we stopped using Mindjet’s MindManager, would never recommend a bloated software like Illustrator, and fell in love with SlickPlan (tryout their service with 30 day free trial). Other sitemap tools that will help you plan the structure of a website:

Remember, activity over tool

The sitemapping tool itself is not more important than the actual activity of sitemapping. Tools facilitate collaboration, capture ideas and help you iterate on them.

However, the actual discussions, idea generation and decisions are the keys to a successful sitemapping phase. Focus on principles first and foremost and find a tool that embodies those principles.

What steps and sitemapping tools do you use to design a website’s structure? I’d love to hear in the comments below!

You may also like:

How to Improve Your Website in 12 Practical Ways

Looking for easy-to-understand, actionable tips to improve your website? These 12 practical ways will detail more than the typical generic advice you hear.

Author Info

profile pic
Hey there, thanks for reading! My name is Eric Sharp and I’m the Founder of ProtoFuse. Learn more about me, follow me on Twitter or find me on Google+. Oh, and I’ll call you family if you’re a Chicago Bears fan. Daaa Bearsss.
  • We Are Goldtree

    Great article and some awesome points – however I’m a sucker for short, powerful process that reduce rather than increase my workload. This looks like it could add a couple of days which I am not keen on doing. But great article anyways :D

    • Thanks for the comment! I too am a sucker for a concise a powerful solution when it comes to client collaboration.

      It sounds like you’re looking to build a sitemap in a single day, rather than the process stretching over a few days. Is this for smaller websites or a general rule of thumb you have? Interested to hear your pros of taking that approach.

      Thanks again for reading!

      • We Are Goldtree

        I’ll normally include the sitemap discussions in the Ideation stages so that it ties in with the goals of the project at a time when ideas are free flowing and we have not solidly committed. That allows for greater flexibility in the later stages.

  • Tony Ferrini

    A nice article, Eric. What are your reasons for switching from MindJet? I recently found Slickplan. I have been using MindJet. We are considering the switch. Started Googling and that’s how I found your article. What are the advantages you’ve found with Slickplan? Thanks.

    • Thanks @tony_ferrini:disqus

      I was a big user of MindJet years ago when it was only a desktop application. I know they’ve made drastic improvements there, now offering a web-based version, but things still felt clunky and bloated for me.

      When it comes to sitemapping, at least for me, the faster and simpler the tool, the better. I love SlickPlan’s features because it feels like they’re focused on doing one thing well: creating, collaborating, and iterating on sitemaps.

      Their sharing, version control, and speed are its advantages over Mindjet.

      Hope that helps! Thanks for stopping by man.

  • Jenny Bergman

    Thank you, this was VERY helpful! Jenny (

    • Glad you found it useful Jenny! Good luck as you start sitemapping your site.