How to Design a Website with a Sitemap and Why It’s Important

There are two different ways to design a website. The fast way and the slow way. The slow way means that you have to do all the work yourself. You have to create a list of web pages, wireframe layouts, find a color palette and fonts. This is usually done by a web designer.

If you’re making a website with a website builder like WIX or WordPress, you can skip many of these steps. The WIX template or WordPress theme will handle most of the design work for you. This means you can simply design your website with a sitemap.

Designing a sitemap is an important first step in building your website. A sitemap will help you come up with content ideas, put them into categories and develop your site navigation. It’ll act as a blueprint and save you lots of time as you start to build your website.

Below you’ll learn how to design a visual sitemap for your website. You’ll learn how to draw influence from other websites and how I used it to create the initial design for justmakeawebsite.com. Your final sitemap should look similar to this:

Example Sitemap

Find Similar Websites

The first thing you want to do is find some similar websites. You may have an idea of what kind of website you want to create but haven’t got into the details. Finding similar websites will energize you and get your creative juices flowing. The idea is to find 5 to 10 good websites similar to the one you want to create.

The sites you find will be used to draw influence from. We’ll be looking at the different pages they have and the content they provide. We’ll use this to outline the content and pages for your website.

Don’t worry about copying the similar websites. The goal isn’t to copy or steal their content. When you create your own content, you should be focused on putting your own personal touch on it to make it unique to your website.

Finding similar websites can be broken down into a three-step process:

  1. Use Google or your favorite search engine to find similar websites. You can do this by typing in search phrases related to the website you want to create.
  2. Use tools like keywordtool.io to find a variety of search terms. Keywordtool.io displays the auto complete suggestions from popular websites like Google, YouTube, Amazon and eBay.
  3. Expand your list of websites by using Alexa’s Find Similar Sites tool to find similar websites. Enter the URL of a website and it will display five websites that are similar to the one you entered.

Now use the three steps above to create a list of websites similar to the one you want to create. Make sure the list has a variety of different websites. Try not to add websites with similar designs.

Remember, you should have 5 to 10 websites that are different form each other but similar to what you want to create.

Define Your Web Pages and Posts

Websites are similar to a book. They both have pages that are broken up into different categories with fancy names. Books describe their pages as preliminary matter, main text and end matter while websites use the terms Pages and Posts.

Pages and Posts are commonly used to describe content types in WordPress. When we say Pages, we’re talking about the pages that are common to most websites like the home page, about page, and contact page. When we refer to Posts, we’re talking about the unique articles your visitors come to consume like how to guides, lists and reviews.

In this section, we’re going to look at the Pages and Posts of your similar sites and create a list of Pages and Posts for your website.

Define Your Pages

There are several common pages that you’ll see across most websites. These pages contain information that is specific to your website but isn’t necessarily the content that attracts your site visitors.

The four pages you’ll see on most websites are:

  1. Home

    Your homepage is the most important page on your site. It will be the most frequently visited page on your website. It’s the starting point that leads to all the other content on your website.

  2. About

    The About page is where people go to learn more about you, your website and its mission. Sometimes an about page will also contain ways for people to contact you.

  3. Contact

    The contact page displays information people can use to contact you. This might be your address, phone or an email form they can use to get in contact with you.

  4. 404 page

    Your 404 page is the page that comes up when someone enters a URL that doesn’t exist. The page might not exist because of a broken link or the URL they are typing is incorrect.

It’s also common for websites to have legal agreements that govern the website and how it protects its visitor’s privacy. These two pages contain the:

  1. Privacy Policy

    Privacy policies detail how you collect and use personal information. Even if you don’t collect personal information, applications like google analytics require that you have a privacy policy.

  2. Terms of Service

    Terms of Service, also known as terms of use or terms and conditions, is a legal contract between a service such as a website and its visitors. It defines how the service should be used.

Now it’s time to look at your similar sites and determine which pages you want to add to your website. Use the following steps to create your list:

  1. Start by adding the four most common pages to your list.
  2. Determine if you want to add the legal pages to your site and if so, add those to your list.
  3. Look at your similar sites. Are there any pages that seem to be standard pages for your niche? If so, add those to your list.

Here’s how I defined the Pages for justmakeawebsite.com:

Site Pages

Next, we’ll expand our list by adding Posts to our sitemap.

Define Your Posts

Posts are like the chapters in a book. They’re the individual articles that people come to read.

Before you start defining your Posts, you’ll want to get some content ideas. You can do this by looking at your similar sites. What kind of content do they have? Is there an underlying theme?

A great way to find content ideas is to look at the XML sitemap of your similar sites. A website creates an XML sitemap to help search engines index their content.

You can view most website’s XML sitemap by typing /sitemap.xml after the domain name. For example: https://justmakeawebsite.com/sitemap.xml.

If the sitemap doesn’t exist there the website will usually redirect you to the XML sitemap. The XML sitemap will show you most if not all of the pages and posts on a website.

Yoast SEO Sitemap

As you start to get Post ideas, write them down in a list. Your list should have at least 10 content ideas with a variety of different content.

The list doesn’t have to be an exhaustive list of Posts. Just enough to get you started. You’ll add and remove Posts as you build your website.

For justmakeawebsite.com my list would look like this:

  • Designing Your Website
  • Registering a Domain Name
  • WIX vs WordPress
  • How to Make a WIX Website
  • 10 Extremely Popular WIX Templates
  • 15 Best WIX Apps
  • How to Make a WordPress Website
  • Free WordPress Themes
  • Essential WordPress Plugins
  • Top 5 Web Hosting Companies

Now that you have a list of Pages and Posts, you can use it to define your site navigation.

Define Your Site Navigation

A good site navigation helps your visitors find your Posts and tells them what the main categories are. Without a good site navigation, visitors might struggle to find your Posts and leave.

Site Navigation Best Practices

There are a few things you want to keep in mind when creating your site navigation. Here are some tips to help you create a successful site navigation:

  • Don’t use more than six links.
  • Make your links descriptive.
  • The links should sum up the content on your website.
  • Links should be one word – two if absolutely necessary.
  • Use your logo to link to your homepage.
  • Use keywords when possible.

So, what does a good site navigation bar look like?  Apple’s site navigation bar is a great example of a high-quality site navigation bar.

Apple Site Navigation Menu

It sums up the kind of content you can expect to find on their website.

Note: The list above said don’t use more than six links for your site navigation, but Apple’s navigation bar has eight links. When designing your website, don’t be afraid to break the rules when it makes sense to do so. Design rules were meant to be broken.

Create Post Categories

The first step in creating your site navigation is to take your post list and organize the posts into categories. These are the categories I came up with for justmakeawebsite.com:

Beginners Guides

  • Designing Your Website
  • Registering a Domain Name
  • WIX vs WordPress

Website Builders

  • How to Make a WIX Website
  • 10 Extremely Popular WIX Templates
  • 15 Best WIX Apps
  • How to Make a WordPress Website
  • Free WordPress Themes
  • Essential WordPress Plugins

Web Hosting

  • Top 5 Web Hosting Companies

When organizing your posts don’t worry about picking the perfect name for the category, we’ll perfect it below.

Finalize Your Site Navigation

Now it’s time to create our site navigation bar. Start with the list of content categories you created in the last section.

I’d like to shorten mine down to one word, so they do a better job of summing up the content on my website. After a little thought, here’s what I came up with:

  • Start-Here
  • WIX
  • WordPress
  • Hosting

Start-Here: Start-Here is a nice improvement on Beginners Guides. It’s a catchy call to action that grabs a visitor’s attention and shows them where to start.

WIX and WordPress: WordPress made up quite a few articles under Website Builders and technically WordPress isn’t a website builder. To be more specific, I decided to create two categories: WIX and WordPress.

Hosting: Web Hosting is an important part of building a website, so I wanted to include it on my site navigation. Not much was done here, I just shortened Web Hosting to Hosting so it fit in with my one-word link strategy.

At this point, I’m pretty satisfied with my site navigation but there’s one more link I want to add. Since I wanted my site navigation to point to the main categories and sum up what my sites about, I thought it would be fitting to include a link to the About page. It’s the icing on the cake.

Here’s what my final site navigation bar looks like:

Sitemap Navigation

After completing your site navigation, you should have enough information to complete your sitemap. When finished, your sitemap should look similar to this:

Simple Sitemap

Conclusion

Designing your website with a sitemap is the fastest way to design your website and will save you a lot of time in the development phase. It’ll also help you define a niche for your website and stay focused as you create content.

Traditionally, the design process would include creating a list of web pages, wireframe layouts, finding a color palette and fonts. If you’re creating a website with a website builder like WIX or WordPress, you can skip those steps and quickly design your website with a sitemap.

Now that you’ve designed your website, the next step is to give it a name. Learn how to Find And Register A Great Domain Name in the next article.