Building a site map for a new website project

How to build a site map for a web design and development project

Sitemaps: A planning tool for a successful web design project. Whenever starting a new web development project, we always build a sitemap. This sitemap is the foundation for the project, no matter the size of the website. Once you understand how to build a site map, the whole process of developing and designing your website becomes so much easier for everyone working on the project.

In this post, we will build a sitemap for a small business website. The same method can be used for any scale project. As we go along, feel free to build your own site map. Some of the pages used here may not be useful to you as much as some might be exactly what you’re looking for. For that reason, I strongly suggest you check out your competition. Yes. There is absolutely nothing wrong with that. People study their competition all the time!

Identifying your pages

Once we know the purpose and goals of the project, we work on building the list of pages included in the website. These are the basic pages; sub-pages will follow right after.

  1. Homepage
  2. About Us
  3. Services
  4. Blog
  5. Contact Us

Pretty simple right? Remember that yours doesn’t necessarily have to be the same, but most websites have a foundation similar to this one. Next.

Sub-pages

Now that we have our main pages, which will most probably be displayed in the menu, let’s build upon that and look at some of the sub-pages we can add. Some projects do not require sub-pages. If you do not have enough content, some of these sub-pages can be combined into the one main page.

  1. Homepage
  2. About Us
    1. Our History
    2. Mission and Philosophy
    3. Team
  3. Services
    1. Service 1
    2. Service 2
    3. Service 3
  4. Blog
  5. Contact Us

Sub-pages. Check! Now these sub-pages can be displayed in the Menu as drop-down items, or they can be available at all times, maybe in the footer, or links in the text. It doesn’t matter for this part of the project, as we are building the information architecture.

Page Content Analysis

What we have so far is pretty awesome, but, it is not enough for a designer to work with. Unless, you were looking for pages with nothing but text. This step is important for both you as well as the designer in the planning process. It helps the designer as well in planning the web page space, giving you more accurate design concepts. Here we can show related content on each page. Here is an example of a more complete site map, including the content overview:

  1. Homepage
    1. Slider
    2. Welcome Message
    3. Inquiry Form
  2. About Us
    1. Our History
      1. History Content (including image)
      2. Sidebar (links to services, form)
    2. Mission and Philosophy
      1. Mission and Philosophy Content (including image)
      2. Sidebar (links to services, form)
    3. Team
      1. Team Content (including image)
      2. Sidebar (links to services, form)
  3. Services
    1. Service 1
      1. Service 1 Content (including image)
      2. Sidebar (links to services, form)
    2. Service 2
      1. Service 2 Content (including image)
      2. Sidebar (links to services, form)
    3. Service 3
      1. Service 3 Content (including image)
      2. Sidebar (links to services, form)
  4. Blog
  5. Contact Us
    1. Map, Form, Contact details, Office locations

You’ve done it! Now you’ve outlined almost all of the content of your new website. When you hand this in to your web designer, he will love you that much more. It gives your web designer a clearer vision of your project. With that, it would be easier to build you a nice interface that matches your project ideas and content. It puts you both on the same page. Your project will flow smoother and you both will encounter less problems throughout the design process. It also gives your web designer a lot to work with, rather than just making things up while you come up with your content, then having to change everything based on the content.

This is a good foundation for a successful web design project. Visit this post for some creative free stock photography websites.

Comments

Leave a Comment