How to Create a Visual Sitemap

When designing a website, you may feel tempted to dive right in to the HTML and JavaScript. But how do your individual pages work together? How do you incorporate new pages? A visual sitemap answers these situations in a way you cannot see while coding. It uses a tree diagram blueprint that visually shows how each page interacts. No formal visual sitemap structure exists, so you have some flexibility in your design, but some common elements do exist. You can begin the web design process with a sitemap by making one on your computer or as a hard copy.

Instructions

1. Create a list of all of the pages your website will incorporate. Examples include the main "index" or "home" page, an "about" page, content pages and a contact page.

2. Organize your list into related groups of pages. Not every page will link to your main index. Your home page is your top level page, while pages that link to your top level are "Level 1" pages; pages that link to this level are "Level 2" pages, and so on.

3. Create your visual sitemap. Start with your "home" page by putting it down on your sitemap and surround it with a large rectangle. Select a color to represent that this is your top level page and fill in the rectangle with it.

4. Add "Level 1" pages to your sitemap and surround them with rectangles. Color them a different color from your top level page. Draw lines connecting each Level 1 page to your top level. If any Level 1 pages link to each other, draw lines to link these pages together.

5. Add every other level of pages to your sitemap, using a different color to fill in the rectangles for each level and connecting pages to each other using connecting lines.

6. Start building your website. Reference your visual sitemap as you link pages together. Revise your sitemap during the coding stage as you add pages you had not previously thought of to your site or remove pages you discover you do not need.

Tips & Warnings

• Use different colors for connecting lines if you have a cluttered sitemap. Different colored lines will help you differentiate between them when they intersect with each other.

• Your visual sitemap is never a "finished" tool. Make sure you update your visual sitemap when you make changes to your website to keep everything up to date and organized. Otherwise, anybody who takes over your web design project and references your visual sitemap may not understand the connections.

References

• Boxes and Arrows: The Lazy IA's Guide to Making Sitemaps
• Scarlet Bits: 3 Reasons To Start With A Visual Site Map