Skip to content

What’s a Wiremap?

What's a wiremap?

Read time: 6 minutes

How many of you have heard the term “wiremap?”

If you have, it’s likely you haven’t heard it used when in reference to web development and design. 

(Shout out to our former team member, Lexi, for coining the term!)

In fact, when you do a Google search on “wiremap,” this is what shows up:

Wiremapping is a simple test that confirms that each wire is terminated correctly, with no opens or shorts.”

Yep, “wire mapping” is used commonly for electrical wiring and cabling! 

(We’ll leave that work to the expert electricians.)

Our “wire mapping” has become a critical part of our web building process and the strategy work that goes into it. No major website project of ours is complete without a wiremap, and we believe it is the foundation for any strong website build. 

But what exactly is a “wiremap?” And how exactly does it work within our projects and our client’s websites as a whole?

Understanding sitemaps and wireframes

Sitemaps and wireframes are a core part of building any website, and almost every business that creates websites leans on these resources

In fact, sitemaps and wireframes create the foundation for every website built, and it can be incredibly difficult to create a quality website without one in place.

Although you are still able to create one, especially with easy-to-use site builders like Wix and SquareSpace, it’s important for most people to at least think about these two assets.

So, where would you start?

The first thing you need to consider is a sitemap, and it sounds pretty close to what you might expect:

They map out what the site navigation would look like. 

Whether it's the always important home page or one particular service page that's hidden deep in your website, a sitemap helps outline where each page goes and how a user could get to that page.

Sitemaps help set the general structure of your site, and people who create these spend a significant amount of time thinking through the user experience and how people can land on certain pages in a convenient manner that’s specific to the website’s industry.

An example of a sitemap
An example of a sitemap

If a client feels satisfied with how the layout of their site is shown via the sitemap, many businesses then move on to the wireframe.

The wireframe provides people with a visual understanding of how content within a page would be organized, and a lot of that is based on the strategic goals clients have for their websites.

Some websites are more news-oriented and will want the latest story posted at the very top of the page so users can quickly see what’s new. Other sites may just be for a business and its service offerings, so the content shown is displayed in a traditional “story-driven” method that encourages people to scroll down the page.

An example of a wireframe
An example of a wireframe

Credit: Balsamiq

Regardless of what method is chosen, the wireframe allows clients to really understand the strategy and decision-making behind a webpage before it’s ever built.

When used together, sitemaps and wireframes can be powerful tools that lay the groundwork for what your website will inevitably become. Even if your website goes through changes in the future, the sitemap and wireframe are always considered or altered first before any big change is made.

Why we put them together


When we first started on project work for our clients, we followed a similar method to what many other agencies currently do:

  1. Create a sitemap that details how the site structure would work 
  2. Gather feedback from clients around the sitemap
  3. Build a wireframe of the homepage that would showcase the top layer of the sitemap (i.e. the main navigation)
  4. Gather feedback from clients on the wireframe design and how the sitemap was incorporated into it.

Pretty simple process, right?

We thought so too.

And if it works, why fix it?

For a while, this was our standard process. And with our business being so young at the time, this was one of the least important things we needed to focus on when it came to growing Unity. 

With all that said, the thought eventually crossed our minds of how we can make this part of our project even better. 

(We are tinkers at heart, after all.)

Is there anything we can do to make this even more effective for our clients? How can we increase the value? It’s here where we thought about the idea of merging the sitemap and wireframe, and it came from a simple question:

How can we tighten the strategy part of our web builds while still maintaining a quality experience? 

A “wiremap” was the answer (even if we didn’t know the name for it yet), and it gave us a little more flexibility to achieve three things:

  1. Showcase the proposed website navigation in a manner that's similar to how it would look on the website.
  2. Demonstrate how certain navigation items would work and how they would be displayed for each drop-down menu item.
  3. Help clients visualize what that navigation would look like on a homepage and explain the “why” behind the navigation, its strategy, and the design choices.

So, how exactly does a wiremap look? Based on those three points, it doesn’t sound too different from a wireframe and sitemap, right?

That would be correct! In the grand scheme of things, a wiremap isn’t too different from what you’d get with either asset. 

What makes them different is in the way it's presented, as we rely on a more “visual” solution when it comes to showcasing this resource with our clients.

With our wiremaps, we look to incorporate some of our client's branding into it and create it in a manner that would replicate how it would look on the homepage. This allows our clients to better visualize how this would look like, as it borrows familiar visual elements that they are used to seeing.

(Unless the web redesign also comes with branding work, which then means the wiremap provides clients with an opportunity to actually see how their new branding works in action.)

Although it isn’t dramatically different from what you see in the wireframes and sitemaps, we feel that this approach really allows our clients to see “a bit of themselves” in the wiremap and really feel more committed to the vision we have in mind for them. 

This approach gives clients an earlier glimpse into what their website could look like, which isn’t always possible if they are presented with a simple wireframe or sitemap. By having them included together, it allows clients to provide further feedback (if any) much earlier in the process and helps us better understand what they want from their website sooner. 

Interested in seeing how our wiremaps can help your website?

Whether you’re looking to redesign your current website or build a brand new website, our wiremaps have helped numerous clients better understand the “why” behind their site and shape the strategy for it. 

And the result of that work?

A solid foundation for us to build your website and for you to continue its growth for years to come.

Schedule a free 30-minute consultation call with our team and see how we can help you build a website that is not only authentic to you but also supports whatever online goals you may have!