(Part 4) How to Build a Smart Website:
Sketching Out Your Sitemap

Starting with a Sitemap

What you are tempted to do when you get the hankering for a nifty new website is jump right in and start building. We understand. We’ve been tempted too. 

But you’re not going to do that this time around because you’re smart. If you’ve been following along in our “How to Build a Smart Website” series, then you’ve already determined your target audience and you’ve set goals for your website. Keep this information close because it is the lens you will use as you walk through these next processes.

Bonus: You don’t need any fancy tools to get started. You can do the next steps with a pencil and paper, although I will give you some digital resources as well. Read on. 

Defining the Term Sitemap

A sitemap is the hierarchical arrangement of a website’s pages illustrated graphically. Here’s an example of the first draft of a sitemap for one of our clients, an animal rescue organization: 

sample sitemap in process

This pictorial representation makes the structure of the website easy to understand. You can easily identify the main menu and the sub-pages that will drop down from this menu...as well as the sub-pages that may drop down or be linked to sub-pages.

Take a look at the screenshot below from the final version of this website. You’ll notice that the categories in the main menu have changed. There is always a difference between the first draft and the final product because we keep refining our ideas as we focus on audience and goals. This shot also highlights one of the drop down menus for the site.

website main navigation with drop down menu

How to Create your own Sitemap

1. Start with brainstorming.

At this stage, you probably want to do some research and see what you like about other websites. Get a sense for how they have arranged web pages in their main menu. You can use this as a starting point and adapt it to the needs of your audience.

Some online resources that may bring inspiration:

  • Go check out your competitors' websites and take note of what you do and do not like
  • Go to Pinterest and search, “Website design.” These results don’t always link up to the website, but I’ve still found it to be a good resource
  • https://beaverbrains.com/showcase/ - This is a compilation of websites you can scour for inspiration.

2. Grab some sticky notes and start arranging!

Next, grab some sticky notes and start creating your sitemap.

Here are some common main menu pages to get you started. Don’t worry about getting fancy with terms here, we can do that later. Just get the general ideas down. 

  • Home
  • Blog
  • About
  • Contact
  • Services

Use those terms above and/or add some terms of your own, then move things around. Try putting some categories into a drop-down menu below a category in the main menu. Keep shuffling, adding and subtracting categories, until the structure makes sense. Keep your target audience in mind and what they would need to see the moment they arrive on your site.

4.  Now make it smart

Want to capture attention quickly? Speak the language of your niche audience, even in the navigation of your website. For example, instead of “Services” on our Magnified Web Homepage, we have “Web Services.” It’s not wildly different, but it adds description and context to what we do right off the bat for someone who is looking for web help.

For that animal rescue website example above? In lieu of writing “Services,” they opted for “Save a Life.” This speaks immediately to an audience who share their core mission of saving animal lives.

5. Write out your final version, digitally or otherwise

The next step is to transfer your sticky note graphic organizer into a more permanent format. Here are some options for capturing the sketch of your sitemap: 

  • Pencil and paper. There’s no shame here! It’s easy and has zero learning curve.
  • Jumpchart: The free version of Jumpchart that allows you to create your pages and sub pages. This software is intuitive; however, do plan for a bit of a learning curve. The nice thing about this site is that you can also write and edit content for each of your pages.
  • Gliffy: This tool also provides a free version. It is incredibly simple to drag and drop boxes and connect those boxes with lines to create your sitemap. The digital sitemap above was created with this tool, but if you use this free version without an account, be warned that your work does not save!

You’ve got your sitemap!

You are well on your way to developing a highly strategic, well-organized website—even if you don’t end up building it yourself—the work you put in will guarantee you better results.  

A sitemap is a great first step in the journey to the final structure of your website. With the sitemap in hand, you’ll feel empowered and confident that you have worked through the key elements to building your smart website.

This is the fourth post in the series, “How to Build a Smart Website.” If you’ve missed previous posts, check out the introductory article here and scroll down to the end of to find a full list of links to the other posts.


April Mann

April Mann used to be co-owner and Digital Marketing Strategist for Magnified Web. Now she currently works at ESRI as a Web Content Specialist. Get more from April on the Magnified Web blog.

April Mann, Co-owner of Magnified Web
April Mann, Co-owner of Magnified Web

Join the community and receive insightful tips.

Leave a Comment

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.