Using Sitemaps and Wireframes For Better Websites

If you’ve ever built a website before, you’ve probably heard about sitemaps and wireframes. But perhaps you’re not familiar with either, or why they’re important for custom website development. Let’s unpack the role sitemaps and wireframes play in creating websites and why to consider using both.

What is a sitemap?

A sitemap is a flowchart depicting the pages that need to be created for your site. Essentially like mapping out the chapters of your book before you start outlining the content.

Can you start building pages with a sitemap?

Like a book or school research paper, you need to create a content outline for each page. What topics need to be highlighted on each page? What is the main action a user should take on each page? A content outline gives you a good framework to start writing.

Which comes first: writing or wireframes?

Great question—many UX designers debate this very thing. Having a first draft of content is always ideal when starting your wireframes, but referencing the content outline is adequate.

What is a wireframe?

Think of a wireframe as a page blueprint before you add design elements. The black and white drawing (sometimes a hand sketch) of the page layout before you start thinking about the visual brand elements. More complex websites (and apps) require more complex wireframes.

How does this make a website stronger?

You remove the guessing game from your website strategy. You have a strong outline on to base the content on. This forces you to think about the purpose behind each page and slows you down enough to consider all of the details.