How To Plan A Website: The Sitemap
Before your fingers hit the keyboard, think about what goals you would like to accomplish with your site and what you need to accomplish those goals. It’s easy to skip the simple planning steps when you’re ready to jump into designing, developing, or marketing your site.
A sitemap, in the context of website planning, is a list of pages or content you would like to include in your website. Planning your sitemap is important because it lays out your basic expectations for the site and approximates the features needed to accomplish your site’s goals. This can be as simple as jotting down pages on a piece of computer paper, but should be as descriptive as possible. See the example sitemap below:
The above sitemap is akin to a sitemap we would create for a client to make sure we both understand what they need in their website. In this case, Andrew’s Sandwich Shoppe wanted a basic website that communicates information and reinforces its brand. CO+LAB’s understanding after meeting with the sandwich shop:
- Home: an introduction to the website welcoming and directing visitors to the section of the site they’re looking for
- Our History: shows the history of the company from it’s humble beginnings to it’s current glory
- Our Sandwiches: a virtual menu of the sandwiches available at Andrew’s Sandwich Shoppe and the prices
- The various sandwiches (Big Tuna, Delectable Turkey, and Bologna Supreme may have their own pages)
- Our Locations: where can you find one of their sandwich shops?
- Contact Us: a way for users to submit comments regarding their experiences with Andrew’s Sandwich Shoppe
For this small business, there is no “Order a Sandwich” page and no “Read the Blog” page, so there are no surprises later on in the development process. This simple plan of the structure of the website allows us to determine technical requirements, resulting in an accurate quote for Andrew’s Sandwich Shoppe. Once the sandwich shop has reviewed the sitemap and approved our quote, we can move on to planning wireframes.