How to Create a Sitemap for Your Web Developer

Video Transcription

Hey there! I’m Kaili, and I’m going to walk you through designing your sitemap.

A sitemap is just what it sounds like - it’s a map of your website, all of the pages that you want to have and how they will connect together. Before you really get into the nitty gritty of designing your website, you absolutely need to have a sitemap - it makes the process so much simpler if you have this planned out first.

I’m going to walk you through a few simple ways to create this.

As you create your sitemap, you should be thinking about the different pages you want on your website and the hierarchy they’ll follow. What pages will your home page link to? You’ll probably have enough space for 5 or 6 top tier pages - like your about page, contact page, and then maybe you have products, services, or locations as other pages. From each of those top tier pages you can link to other subpages - like specific services, products or product categories, team member bios and so on. But I’ll get more into how you can do that later.

List Sitemap

The first sitemap that I’ll show you is a simple list that you can make in any text document - word, Google docs, notepad, you can even write it down on paper. This type of sitemap is great for smaller websites with 10-15 pages or less.

I’m going to open up a new Google doc to make my sitemap.

First, you’ll want to think of those top tier pages I mentioned. These will be your main navigation - the top menu on your website. Try to keep this list at a maximum of 5 or 6 items.

• Home
  • About Us
  • Products
  • Services
  • Contact Us

Your pages don’t have to follow this exact order, or even be the same items we’ve chosen, but this is a good place to start.

From there, you’ll want to decide what other kinds of pages these top tier pages will link to. Will you have executive bios? Specific products or product categories? A list of services? These will be the “second tier” pages.

• Home
  • About Us
    • Executive Bios
    • About Our Team
    • Mission Statement
  • Products
    • Product (or category) 1
    • Product (or category) 2
    • Product (or category) 3
  • Services
    • Service 1
    • Service 2
    • Service 3
  • Contact Us

This took me less than 2 minutes to write up. This is the sitemap for a 14 page website. It’s really simple and quick to write up. Writing your sitemap like this will give you a clear direction to take when you start designing, and it will help you create a clear navigation that will make your site more user friendly.

Flowchart Sitemap

The other option that we suggest using for creating your sitemap is making a flowchart. This is great for websites that are more than 10-15 pages. There are a ton of different programs out there for creating a sitemap in a flowchart. You can even draw one like this:

I’ll post some different options below the video and walk you through my favorite.

The one I like to use is on slickplan.com. You’ll have to sign up for a free 30-day trial, but it does not require any credit card information, and it takes like 30 seconds to sign up.

Go to slickplan.com, click signup & pricing at the top, and then go to “30 Day Free Trial.” Sign up real quick, and then click create a new sitemap.

Start with your home page, and then add your top tier pages - about, products, services, maybe locations, and your contact page. Once you have each of those pages up, you can add all of your subpages for each section. And from each of your subpages you can add more subpages if that’s what you need.

This is how our example turned out, but yours might look completely different based on the needs for your website.

When you are done creating your sitemap in Slick Plan, make sure to save it. You can even export it as a PDF with the middle button on the toolbar (shown in them image above). Click “import/export”, make sure that it is saving as a PDF, check any features that you want to include in your exported sitemap, and export it.

Once you’ve created your sitemap - whether you created a list or a flowchart - take a picture, bring the hard copy, or save a file that you can easily share with us when you come in for your design meeting.

We look forward to seeing you!

Free Online Resources

SlickPlan - the flowchart resource used in the video
Gliffy - another free resource for creating flowchart sitemaps
Miro - a free resource for creating flowchart sitemaps and team collaboration