Imagine this situation: You are working on a new website and in the process of creating the wireframes. In your review meetings, you receive feedback from your client and team, prefacing the inevitable generation of change requests, suggested improvements, and updates. After several review meetings, you feel as if you are caught in an endless loop—changes are being made and reversed, your client’s demand for more features seems to go on forever, and coming to an agreement seems impossible.

Or, perhaps, the opposite occurs—you present your wireframes, everyone is nodding their heads in agreement, and the wireframes are good to go to the next stage. But, as the work progresses, you realize that it doesn’t reflect your intention—more features are being crammed in and the flow feels off.

What happened? The answer is simple: miscommunication.

Communicate More Effectively with Your Wireframes

One of our main communication tools as UX designers is wireframes—the black and white “blueprints” that make us the architects of web design. Although wireframes lack the colorful details of visual design, they are the basis for product design, just as architectural plans are the basis for a building’s final construction.

Wireframes are more than a static map. Using the analogy of a house, they don’t just show one room, but rather the whole house and all the different ways a user can move around it. They also include the interior, defining the main purpose for each room.

Further, wireframes show more than just rooms. They help plan journeys and define the experience a visitor will have on a stroll through the house. You can use wireframes for many things, and it’s many things your team and client will need to understand as a project evolves. Part of a UX designer’s job is to be a translator, ensuring that everyone involved understands the intended vision.

Taking Your Wireframes to the Next Level with a Wireframe Map

So how do you communicate the user journey? How can you map out the user experience in a way that is easy to read so your team and your client can visualize it? How can you make sure the journey remains a simple one and offers all the necessary elements for each room without creating frustrating barriers?

Here is a helpful tool for communicating and organizing your wireframes more effectively: a wireframe map.

A wireframe map is a way to match your wireframes to the sitemap of your website (or your product’s user flows). For this mapping process, you need wireframe templates that represent a specific page type (e.g., form page vs. landing page vs. product listing page vs. product detail page). It’s like deciding the purpose of each room in a house first, which then determines the elements within each room. A template would be a bathroom with a toilet and a sink as common content elements.

Creating a wireframe map will benefit you in several ways:

  • Help estimate the scope of the project (How many wireframe templates do I need?)

  • Provide an overview of all the different templates that need to be created (which can also be valuable as an index for a styleguide—or a simple checklist to identify templates that can be reused for other pages)

  • Improve communication regarding the objective of your wireframes and help your clients better understand the intended user journey

How Do You Create a Wireframe Map?

There are three steps involved in creating a wireframe map.

Step 1: Identify Content Elements

Before you start diving into wireframes, it is helpful to think about all the different pieces that need to live on a wireframe—like the items you want to have in each room in order to decide how big your room should be. For an e-commerce site the examples could be: search bar, product filtering, product description, product image, price, quantity selector, ‘add to cart’ button, recommended products, shopping cart icon… User stories can be helpful as you are considering the necessary UI components.

  • Start to list all the content elements (components) you can think of—think about the functionality you want to offer in order to help the user journey along and fulfill business requirements.

  • Add another column for page type (e.g., product detail page, shopping cart, landing page, etc.) to cluster your content elements.

  • In a third column, rank your content items by importance (i.e., low, medium, high).

  • If you do have user stories, you can add another column to refer to the related story numbers

Content element list for a wireframe map

An example of a content element list

Why is ranking the content elements helpful? It has two main purposes:

  1. Creating a hierarchy: The ranking defines the content hierarchy for each page and gives you a guideline for your wireframes (what content should be at the top)

  2. Avoid clutter: Prioritizing content elements will help keep the approach minimalistic as well as help you make decisions with your team about what content you really need

Your content items define the scope of the work. Having a list of content elements will help you move into the planning phase more easily and you can use it to define the process and estimate the work of the wireframes. (e.g., how do we structure our sprints? what content are we tackling first?)

The content list also comes in handy during any discussion regarding requirements. You can easily identify which content elements you agreed upon and what additional elements are being requested and considered as a change request.

Step 2: Define the Site Map and User flows

You have the content elements you need to provide and grouped them into pages. Let’s look at an overview by laying them out. How are they interconnected? How does a user navigate through them to accomplish his goals?

You reach this level by creating a sitemap (for websites) or a user flow (for applications):

  • Sitemap: Shows an overview of all the pages and their hierarchy.

  • User flows: Visualizes how pages are interconnected for key use case scenarios.

Sitemap and user flow

Simplistic version of a sitemap and user flow

Step 3: Map Your Wireframes

Now that you know what content you need to provide, on which pages to provide them, and how they are connected, you can start to work on your wireframes.

  • Define the page templates that need wireframes based on the sitemap and user flows. (Each page requiring unique functionality is going to be a different template.)

Wireframe templates

Wireframe templates representing unique pages
  • If you encounter minor variations for certain templates (e.g. a content page with a slider in the header vs. without) then work on master pages and leave out such minor variations. Your wireframes should include all the main components that would live on this master page template.

  • Now map your wireframes to the sitemap and user flows—you can update your sitemap with wireframe thumbnails for each page type. Color-coding or numbering will keep things in sync, help give a better overview and help clients understand what wireframes they need.

A color-coded sitemap

An example of a color coded sitemap

Color-coded wireframe templates

An example of wireframe templates color-coded according to the sitemap

Color-coded sitemap and wireframe templates

An example of a wireframe template map. The sitemap is on the left and the wireframes are on the right with corresponding color codes.

Numbered sitemap and wireframe

For very complex sites, a numbering system may make sense vs. color coding

Why is this mapping process helpful? It is a great tool to use when creating a project’s high-level overview. Instead of just looking at stand-alone wireframes page by page, the wireframe map will allow you and your team to look at the wireframes in context. Where do the users come from? Where do they go next?

To go back to the house analogy—it’s the floor plan you create in order to visualize the structure of the house, consequently moving on to look at the first renderings of each room (which are the wireframes for each page template), and then on to sharing the final outcome and overall vision.

Taking your wireframe workflow to the next level

In summary, here is why wireframe maps are a helpful communication and an organizational tool:

  • They will help with planning. (What content do we have and what wireframes do we need?)

  • They will be useful as a checklist during the project’s creation process. (What components can I reuse to stay consistent?)

  • They will help with project cost and time estimation as well as reduce inefficiencies.

  • They will help track your tasks (work completed vs. work still on the backlog).

  • They will help you better communicate the purpose and objective of your wireframes during reviews (how wireframes are being used for the project overall).

A wireframe map is a helpful tool for estimating the scope of work at the outset of a project, and as a checklist throughout your working process. It will help improve your team’s decision-making process, keep everyone on the same page, and periodically refocus them on the project’s high-level overview. Happy mapping!

About the author

Frauke Seewald, Canada
member since September 29, 2015
Frauke is a UX Designer with a background in psychology and a focus on user research (understanding the target group, their needs, and current behavior), information architecture (structuring content and processes), and interaction design (visualizing interactions in the form of sketches, wireframes, and prototypes). [click to continue...]
Hiring? Meet the Top 10 Freelance Wireframing Experts for Hire in April 2019


Great post - thanks for sharing your process. Can you share which tools you are using these days to create your artifacts?
Ron Bird
Hi, I started using Visio, probably 16 years ago to build wireframe maps, then switching to Omnigraffle when on a Mac. I have since found Excel to be even better than both(and cross platform too). I have YouTube videos to show you how to use Excel just do a search for 'Cross platform wireframes, screen flows' to see pt1. If it's what you are looking for you can watch the others.
Rahul Tomar
Amazing Ron, Something new on an easily available MSEXCEL.
Leslie Johnson
Well done - well written. In my 25 year career in UX, I've run across VERY few people who use this type of tool. Your article lays this out well and thoroughly. I'm definitely recommending this to the UX team I'm coaching. I, too, have used tools like this (although I've always called them Application Maps) for many years, and have gone the Visio, Omnigraffle, Excel route. Funny how multiple people end up going the same direction independently because it just makes sense. :)
I skip creating wire frames for any pages/posts or the whole website. Just create them on the fly in WPBeaverBuilder (design plugin). You start at top of the page, drag/drop the ROW and Number of Cells you want. Drag/drop the width of the cells as you wish and change it if you need to as well. Add, delete Cells as you go. Make a mistake? Then drag/drop new row and cells above-below as you choose. And you can always drag and drop anything already done to any other location on the page you wish. This whole fuss with wire framing pages/posts beforehand goes out the window. AND you can save a cell or a row to use elsewhere on the site as well. You can have that saved row/cell/module saved as a one-off or as a global situation in which if you change any instance of the global row/cell/module and it changes throughout every situation in which it was placed as a global instance. There is no need to create a page/post/site wire frame plan at all. And therefore, you don't get stuck with some plan that then has to be changed. I believe you are dragging PRINT constraints to your website/webpage/post design and getting stuck with old approach. If you create a page/post design/wire frame you want to use repeatedly, then save it as template and use instantaneously on a new page - and then modify it on new page/post if you wish as well. WPBeaver Builder is game changer and well worth your investigating.. It is - 500,000 installs and growing all the time.
Oh, also, I design directly in WordPress itself. I do not use Photoshop. Illustrator or InDesign except for art-elements on the page. Otherwise, the page/post is created right in WordPress. No need to show client a wire frame plan. I show them the page/posts themselves right then and there. And if necessary, then groups of nearly-done pages/posts for groups of situations. You **can** have every page/post be unique if you wish too. I do that all the time and it helps a lot with bounce rates and time on page as all pages are unique and tailored to that page's needs... not a pushing of a preset wire frame condition that becomes awkward to change. And changes and revisions are easy to do, often immediately. ...
comments powered by Disqus
Free email updates
Get the latest content first.
No spam. Just great articles & insights.
Free email updates
Get the latest content first.
Thank you for subscribing!
Check your inbox to confirm subscription. You'll start receiving posts after you confirm.
Trending articles
Relevant Technologies
About the author
Frauke Seewald
User Research Designer
Frauke is a UX Designer with a background in psychology and a focus on user research (understanding the target group, their needs, and current behavior), information architecture (structuring content and processes), and interaction design (visualizing interactions in the form of sketches, wireframes, and prototypes).