Before You Build: Every Website Needs a Sitemap & Wireframe

When building a website it is tempting to jump right into picking colors, fonts, and pretty images. But like building a house, your website needs a solid plan before construction begins. This is where the sitemap and wireframe come in.

Think of these two items as the floor plan and blueprint for your “digital” store or home.

A sitemap is a visual outline of all the pages that will exist on your website and they connect to each other.

It is like a family tree or organizational chart for the pages of your website.

For example, under “Home” you might have links to “About”, “Services”, “Porfolio”, “Blog” and “Contact.” Under “Services” you may have subpages like “Web Design”, “Coaching”, “Group Training”, etc.

Creating a sitemap helps you:

• Clarify the purpose and goals of your website
• Stay organized while you build the site
• Understand the visitors experience (UX = User Experience /UI – User Interface)
• Avoid missing important pages or duplicating content

A sitemap is simpler than it sounds. You do not need fancy tools or design skills. It is just an list of flowchart that outlines how your website is organized.

1. List your main pages. Begin with listing the pages that you know you need. Most websites have a Home, About, Services, Shop, Blog and Contact.
2. Add supporting pages. Under each main page, list any subpages that fall below it.
3. Think about the visitor’s journey. How do you want them to move through the site. What do you want them to see or do next?
4. Use simple tools. Use paper, Post-it notes, or simple digital tools like Google Docs with a bullet list.
5. Keep it clear and concise . Avoid overcomplicating it. Your sitemap should be easy to visualize at a glance.

A wireframe is a simple sketch or outline showing what will go on each page of your site. It is not about the colors or design of the page, but about the structure and flow of the page.

Imagine sketching a living room before purchasing the furniture and decorating the room…you will make sure the furniture will fit (content on the page) and that you select the right paint color (images for the page).

A wireframe shows:

• Where the header, navigation, logo, and footer will be
• The placement of sections within the page along with text, images, buttons and forms
• How the visitor to the site will move through that page
• Helps you visualize the layout that later will make design decisions easier

A wireframe should be simple. You does not need to be fancy or made using special software. In fact, the best place to begin with with a blank piece of paper or a Google Doc.

1. Start with your goal. Ask yourself, “What do I want a visitor to do on this page?” Perhaps click a button, read a story, sign up, or make a purchase. The page goal should guide the layout.
2. Sketch the basic sections. Begin with the essentials:
   • Header (logo + menu/navigation)
   • Hero area (headline + image or call to action)
   • Main content (text, images, testimonials, products, etc)
   • Footer (contact info or links)
3. Use boxes and labels…no colors or images. Keep it minimal by drawing boxes where images will and lines for text. You are planning the structure, no the style.
4. Think about flow. A good wireframe feels like a conversation in that each section should naturally lead the visitor to the next action.
5. Test it like a visitor. Imagine scrolling through the page for the first time. Does it make sense? Do you know what to do next?

Building a website without a sitemap or wireframe is like trying to build a house without a blueprint. You don’t decorate a house before it is built.  Your website might look good, but it may not function well in the long-term.

By planning first, you:

• Save time and frustration during the actual design and buildout of your website
• Gain clarity on what content you actually need on your website and where it should go
• Create a more seamless experience or user flow for your visitors
• This phase will build your confidence before you begin the actual building of the site

The sitemap and wireframe provide you with a solid foundation to begin gathering the content and media for your website before you ever start to build your site online.

When these two items are missing or incomplete it makes it difficult to collect the right information for each page and than to know exactly where that information needs to be placed within the website.

It is just a simple way to stay organized, avoid overwhelm, and ensure that every piece of your website consistent with your goals and purpose.