Your Website Blueprint : The Sitemap
If you were building a house you would start with a blueprint. This document doesn’t show you what the house will actually look like, instead it outlines where electrical connections and water lines would be placed for each room. This is the foundation upon which the house is built.
A sitemap is a blueprint for your website. It outlines how pages and sub pages are connected. Its primary purpose is to serve as a guide for search engines, helping them index your website. If you are building an HTML based website you will need to manually code each page’s URL into your site map. For WordPress sites a simple plugin will automatically generate updates to your sitemap every time you add a new page.
In addition to the benefits for search engines, you sitemap is also an extremely useful tool as you are building the site.
A Sitemap is a Working Plan
A sitemap is a visual outline that shows how your website’s pages are interconnected, starting at the top with your root domain (often referred to as your homepage). For large, complex sites, this visualization can become pretty unwieldy, so when we build this type of site we often use an outline instead.
Whether you use an organization chart or an outline, it is really helpful to work on your sitemap before construction. Here’s why:
- Building the map forces you to think through your priorities. You will have to decide what the most important action a visitor will take when they arrive on your website.
- A sitemap can help you step through the entire customer journey, making sure there are clear and simple paths from first visit, to conversion forms, and finally to the decision to buy now.
- A map will help you plan for expansion. Perhaps you only have one product or two employees. Looking at the big picture can help you anticipate where additional pictures and product information will be added as your business grows.
- This outline is a helpful tool for the content team. They use it to quickly identify where additional content will be needed, which pages will need to be expanded, and which ones can be combined with others. A side benefit is a that a good map will prevent you from creating duplicate content on multiple pages because you can see the entire site at a glance.
- Once completed it becomes a construction plan for the web team. As work is completed on a particular page it is easy to check off the box on the site map and create an at a glance view of the project.
The rest of the plan.
While a sitemap is important, it is not the only tool in the web design tool kit. Your plan should also include a wire frame and a mockup.
Wire frame: While the sitemap looks at the entire website, a wire frame is constructed one page at a time. It is essentially a series of boxes and rows which show where information will be placed on a given page. The wire frame is a “big picture” tool that helps hammer out crucial layout, structure, and organization questions before you start worrying about images, colors, and fonts. There are plenty of great software products which can help you build, but my preference is still to create a rough sketch by hand and then create the mock up.
The Mockup: This is a flat image that looks like a screenshot of a website page. None of the buttons or special effects will work. The purpose is to help clients begin to visualize what the page will look like before we start coding. It is much easier to go back to the drawing board if the mockup isn’t quite right than to wait until we have coded multiple pages.
Ready for a new website?
Do your homework first. Start looking at other websites so you can build your wish list. Collect your assets, logos, images, videos, and other content your web team will need. Then audit your website to define what you like and what you don’t. Then you will be ready to start working with a web team to create a sitemap, wireframe, and mockup.
Looking for more planning tips? Check out our web design webinar. Watch it now