Wireframes & Sitemaps

Home / Wireframes & Sitemaps


A sitemap provides a diagram of the site’s hierarchy and shows where each page fits into this hierarchy.

As you’re building out your hierarchy, it’s vital that you continually reference your project’s goals. That’s because the site’s hierarchy needs to reflect and contribute to the fulfillment of that goal.

For example, if you’re building an ecommerce site, one of your goals will undoubtedly be to sell products. Thus, your sitemap should place product indices and pages at or near the top of the hierarchy, so visitors can immediately see where they need to go to fulfill your goal and theirs: buying stuff.

Creating your sitemap

You can approach the design of your sitemap in several different ways. You’ll want to choose your method based on two qualities:

  1. Ability to capture the information you need to capture
  2. Ability to convey the information you need to convey

In other words, it needs to be capable of conveying the info you want to convey in a manner that’s clear to your audience.

Why you need to wireframe

If a sitemap provides the blueprint for your whole website, a wireframe represents the blueprint for a single page (or group of pages). It’s what you’d see if you could take your sitemap, then zoom in on and enhance a single page in that high-level map.

Like the sitemap, a wireframe captures hierarchy. But this time, that hierarchy is limited to a single page, and thus defines the relative importance of content as it flows down the page.

Similar to prototypes, wireframes can come in a variety of levels of fidelity. Some wireframes basically are the final design, complete with the final fonts and sizing, sample photos, and even production-ready copy. Others are much more schematic, sticking with a collection of monochrome boxes and blobs where content will one day appear.

Because of that wide range of fidelities, it’s important to clearly explain to your stakeholders just how final-final your wireframe is.

‍This wireframe, which shows only the basic elements of a page layout, but still communicates so much of how the final design will look and function.

Take a moment to review this wireframe from a content perspective. It actually has a lot of implications that will either need to be turned into content standards, or revised with content standards in mind!