Web Design: Creating a Sitemap First Saves Time, Money, Headache.

A planning sitemap is pretty much what it sounds like – a map of a website in its beginning stages. It basically gives the web pages an order of importance along with an idea of what will be on each page.

Creating a sitemap as the first stage of web design (or redesign) allows you to avoid visual distractions and focus solely on the most important part of the website – the content. Spending time on this stage can reduce the agony of restructuring later, which takes a lot more effort once the website is built.

Think Of Your Sitemap As A Blueprint For Your Future Website

It may be helpful to think of a website like a house. You would certainly not put a bed in the kitchen. You want all the relative information on one page. The sitemap is the equivalent of rooms and furniture in your house. Since all beautiful buildings began with a blueprint, it stands to reason that all well-organized, eye-catching websites should begin with a sitemap.

When considering the website, keep in mind the pages are created for the content, not the other way around. So when thinking of the blueprint of the house, you begin with the furniture and build the rooms necessary to hold it.

Think About the End-User First

The whole point of design is for the user. Create a few user personas and envision them visiting the site for the first time. Go through the motions of what content you should see first. How you would go from one page to another and what the logical steps would be to take you there. If you have ever been a visitor to a poorly-designed website, you may have experienced frustration when you were unable to find what you thought should have been obvious, and left before you accomplished your goal, even if you meant to buy something.

The user is the whole reason the website exists, so that you can draw people in. Making the website easy to navigate is as important as making it eye-catching.

Ideas for Creating a Planning Sitemap

Since everybody thinks in a different way and every website is different in some way, there is no right or wrong method to use when making a sitemap to plan your website. You can use this stage to gain valuable feedback from others and allow them to provide ideas that you might not have otherwise thought of – again, minus visual distraction.

If you are starting with a blank slate, just start with key areas first to get ideas flowing. Research your industry and get a look at what content others are using and then think “How can I improve upon this”? If you are working through a redesign, start with your website’s current content and improve upon it by discarding pages that may not be needed or can be consolidated and adding new pages strategically.

  • The Old-Fashioned Way: Pen and Paper – Pen and paper can be very useful. They are quick to catch ideas before they disappear and can have designs doodled all over them. Each paper can represent a page on the website and be hung on the wall, to visually give you an idea of how it will be seen and navigated. Since pen and paper have a tendency to rip, disappear, get discarded by a family member or cleaning crew, it is a good idea to move the layout to a digital format, once the main ideas are agreed upon.
  • Card Sorting – Using index cards is basically the same idea as pen and paper, but it allows you to shuffle them in your hands. Because of this, you can mix it up several different ways and allow others to choose from the cards to get a feel for what makes the most sense. This method gets others involved in the process and will give you a broad sense of how others group subjects / pages together. (we are a big fan of this method)
  • Spreadsheet Software –In this method, each cell of the spreadsheet represents a page. Columns represent the hierarchy. Notes can be added to cells to store ideas for page content, links, references, etc. An example of this would be:
 Home Page
Store Location
New York
San Francisco
 Departments
 Tools
 Appliances
 Garden Supplies
Contact Us
  • Mind-mapping or specialized software – There are some really nice tools out there (some are free even) that allow you to chart your ideas and collaborate online with mind maps. We really like tools like Mind Meister that allow everyone to come together in one place to give feedback simultaneously if needed. Mind mapping software is nice to use sometimes as a second step in planning projects – whereas you might use card sorting or pen and paper to get a rough idea first and then transfer it to Mind Meister for collaboration.

Let the content guide you, not the idea of all the pretty pages you can create

Often during the planning stage, ideas change and some are tossed altogether. It is better to not become attached to any page or path of navigation, as sometimes it would be awkward to actually use them. Think of the planning sitemap as an flexible document that can be edited and changed as ideas come together. It’s far easier and cheaper to make changes to this sitemap in the planning stage than it will be to edit the structure once the site is built.

Need help planning your new website? Contact us – We would be happy to help!

Tagged under:
  • James Taylor, CPE, CPMM

     Excel has a very good and easy flow charting app built in that includes smart connectors. I use it to combine card sorting, spread sheet and mind mapping for a lot of different projects.

    • James, thanks for the feedback. I would actually love to see that in action. We’ve been using Google docs for sometime and do miss alot of those functions that are in the “real” Microsoft Excel. 

  • top seo companies

    sitemaps are the ways to communicate through Google and to enhance user experience on site.

  • Pingback: [BLOCKED BY STBV] Week 3: Web Design Process()

TwitterFacebookLinkedinGoogle+