iNoobs: Process of Designing a Website | Part 2 Sitemap

Categories Articles, How To, iNoobs, Web Design

Welcome to the second installment of the iNoobs’ Process of Designing a Website series (check out Part 1 here). That last sentence makes me feel like I should be taking off my jacket and shoes and slipping on a sweater like Mr. Rogers.

Today we’ll be discussing the creation of a sitemap. Before we get there, let’s recap the total 8 step process:

  1. Develop site plan – Use Case Development (optional)
  2. Create Sitemap
  3. Content
  4. Wireframing
  5. Design
  6. Technical
  7. Testing
  8. Launch

What is a Sitemap?

Website Sitemap
Visual Sitemap

You’ve probably heard the term used before, and I can promise you’ve seen a link to “sitemap” on every major website you’ve visited. A sitemap is simply a list of all of the content on your site. Often times websites will have a link at the bottom of their site called “sitemap” as it’s very beneficial from a user and search engine marketing perspective. For the purpose of your first exposure to sitemaps we’ll ignore that for now and instead concentrate on them from a website planning and execution perspective.

A sitemap is a break down of all of the sections, subsections, pages, and information on your site.

Here’s a very simple example of a business website’s sitemap:

This business is involved in the home maintenance industry.

  • Home
  • About
  • Services
    • Lawn Care
    • Pool Maintenance
  • Contact

And we’re done!

The above example has 6 total pages, and as you can see I indented “lawn care” & “pool maintenance” implying that these are “under” services – which they are! In technical speak we could call “services” the “parent” and “lawn care” a “child.”

I like to create a sitemap in two ways – first is an overall sitemap – which will feature every single element I can think of or know about and how it fits into the site structure (including some marketing elements). After that first step is complete I go back around and ask myself, somewhat from a design perspective how will users navigate to this content? I then create another sitemap directly underneath that one with a breakdown of all of the pages from a navigational perspective.

More Sitemap Examples!

We were just working on a sitemap for a client with a large website. This client is in the commercial bathroom products industry and specializes in the online sales of Hand Dryers (I know who would have thought!)

Here’s what we came up with (this is an abbreviated example):

Page Sitemap

  • Home
  • About
    • Locations – /locations/ – this page will show each of the organizations’ locations, along with a Google map.
    • History
    • Mission
    • Management/Personnel
    • Brands/Lines – /brands/ – list out each of the manufacturer brands provided by client, including a brief description and logo to establish a connection with our clients’ customers and to possibly rank for brand names.
    • Service/Support
      • Awards
      • Service History
      • Testimonials
      • Support Request
    • Hand Dryers
      • Hand Dryer Brand 1
        • Hand Dryer Model 1 /hand-dryers/hand-dryer-brand/model/ – Will display the individual product, pictures, and information.
    • Commercial Bathroom Partitions
    • Water Fountains
    • Professionals – /professionals/ – Will address the specific needs of the various customers’ of our clients’.
      • Architects
      • General Contractors
    • Contact
    • Terms
    • News (aka blog)
      • Categories

Sitemap Navigation:

Top Navigation – Primarily for contact information and to address exisiting customer questions, status of orders, etc.

  • Home
  • About
  • Support
  • Contact

Main Menu Navigation – Primarily for navigating potential customers to products (will feature drop down menu):

  • Hand Dryers
  • Commercial Bathroom Partitions
  • Water Fountains

Footer Menu – listing of all top level sections on the sitemap as well as “terms” and “sitemap” page

Here I broke out the initial sitemap, and as an example revealed the location of the page/section as well as the goal for that page. The complete version of this is many pages long, where each page is detailed in depth, and assigned goals. With these two elements (the main sitemap & the navigational sitemap) we’ve defined a bunch of things:

  1. What content do we need to produce?
  2. What is the goal of each section and page?
  3. How is the site structured, from a usability and marketing perspective – there are very distinct rules and best practices regarding the naming of your site, use common sense and you should be fine (although a more in depth discuss is warranted for another article).
  4. What menus will our design need to accomodate and what will be on those menus, and how will they operate/direct users to content?

All of these have been answered.

This concludes the second part of the iNoobs’ Process of Designing a Website series. In the next article we’ll be discussing one of the key elements that was just concluded with the sitemap – content!

If you have any questions or suggestions regarding the creation of a sitemap please leave a comment and I’ll be happy to help!

Zach Katkin - Entrepreneur, Web Developer, Designer and Writer - is the co-founder of Florida Web Design Company Atilus. In business for nearly a decade, Atilus has more than 600 clients worldwide.