How to Create a Wireframe Map

Hannah Hicklen
8/10/2021

To map wireframes, follow these simple steps in the design process. In doing so, you’ll convey design ideas more effectively, improve navigation, and enhance the user flow. 

 

 Updated July 28, 2022

Functionality and usability are the two most important elements of a web design. Without them, potential customers can become frustrated or lose interest in your content before you’re able to convert them. Consequently, companies must invest in developing an intuitive website that guides customers through the platform. 

To ensure that a new site is easy to use, website design companies use wireframe maps to lay out the scope of a project, communicate design ideas, and demonstrate user flow. A wireframe map is the coalescence of two essential design tools — sitemaps and wireframes – and is easy to create yourself. 

By outlining how different pages are connected and what functions enable navigation, you can lower bounce rates and increase your click-through rate. Follow these steps to create a wireframe map of your website: 

  1. Identify user personas
  2. Determine what pages to include
  3. Create a sitemap 
  4. Design wireframes 
  5. Bring your wireframe map together 

1. Identify User Personas 

User personas are archetypal representations of your end-users; they represent your target audience by considering their interests and behaviors. By providing detailed information about your key audiences, your web designers can create a custom interface that directly addresses your customers’ concerns and motivations. 

Rather than guessing about what your customers want, make sure that your user personas are tied to real data. Observing and collecting data about the user experience can help you define your user goals or the end state that users want to reach. For example, if a person is visiting an online retailer, their end goal would be to buy a product.  

Additional Reading: ‘UX Design vs Web Design: Key Differences

There are several ways to gather information about your users: you can examine existing customer data, interview prospective buyers, or even use heatmaps on your existing site to monitor how users interact with your platform. 

With a better understanding of what your customers are looking for, your designers will create a platform that will satisfy your users’ needs and better your wireframe design. 

2. Determine What Pages to Include

Use the information about your user persona to determine what content and functionality your site or mobile app needs to provide. This will help you create a user-centric experience that includes all of the elements your users need to navigate your site. 

Take note of what pages and screens need to appear on the site map for your users to reach their goals. 

Consider this: you work at an event venue and are designing a new website. What pages do you need to include? What should the visual design look like?

You can safely assume that your users want to learn about upcoming events and book tickets, so focus on what can help them get there. 

In addition to event landing pages, you may want to include a calendar so people can see what’s coming up. The site will also require a shopping cart and checkout function so users can buy tickets.  You’ll also need a homepage, navigation menus, a press page, and an FAQ page. 

You’ll set your site up for success by including all of these features. 

Additional Reading: ‘Low-Fidelity Wireframes vs. High-Fidelity Wireframes

3. Create a Sitemap 

A site map is a diagram that communicates how individual web pages relate to one another. It aids your visitors during their user journey through your website or mobile app. This process allows design teams to outline how people will navigate your website by visually organizing your site pages. 

Site maps look like a flow chart and demonstrate user flow. This example shows how users will be able to navigate an e-commerce site from the home page. Following the chart’s line, we see that users can then visit a shop page, an about us page, cart, forum, or the site’s blog. 
 

Sitemap Example

Source: Balsalmiq

If a user decides to shop, they can then sort various categories to limit their search. Once they find a product they’re interested in, they can visit a product detail page before adding the product to their cart. 

You can use many tools to design your site map, such as GlooMaps and FlowMapp, but pen and paper are also very effective as wireframe tools. You can also use index cards to create a rough draft of your site map. By using cards to represent each page, you can easily move around pages and visualize how that impacts the user flow and user interface before finalizing the design.  

4. Design Wireframes 

A wireframe is the page layout that shows what elements exist on each page of your website. At this point, there isn’t a need for high-fidelity or clickable prototypes. Rather, sketches of each page will satisfy your needs for your wireframe map. 

These wireframes should focus on the functionality of each page so everyone on your web design and development teams knows what to prioritize. 

For example, these wireframes show roughly where images will be placed, what content will be included on each page, and what functions need to be included to navigate the platform.

Wireframe Example

Source: Miro

The image on the left shows what a login page will look like on a mobile device. Once a user inputs their information and hits “Sign in,” they will head to a search page that allows them to access other pages on the platform. Optimized for mobile design, there’s a menu icon in the top right corner, a profile icon in the top left corner, and a navbar on the bottom.  

Make sure you create a wireframe for every page you outlined on your site map. 

Read this while drafting up your wireframe examples: ‘4 Benefits of Annotated Wireframes for Mobile Apps

5. Bring Your Wireframe Map Together 

Once you’ve sketched your wireframes, you can arrange them according to the site map you developed. To demonstrate user flow, highlight the navigation functions that allow users to go from one web page to the next. In the end, your wireframe map should look like this: 

Wireframe Map Example

Source: dribbble

From this map and mockup, your design team members can clearly see how everything is connected and understand the project’s scope. 

Create a Wireframe Map to Establish User Flow

You can improve usability before developing your website by creating a wireframe map that identifies how users interact with elements on your pages and navigate your site. By researching potential users and identifying user personas at the beginning of your project, you can ensure that your users are at the center of your design. 

Using the information you collect about your users, you’ll be able to determine exactly what pages and features you need to include to create a functional design. 

From there, you’ll need to create a sitemap that outlines how all of the pages on your site are connected. Once you create wireframes for each page, you can organize them based on where the page is located on the sitemap. To establish your site’s user flow, be sure to highlight which features will direct users to each page. 

Once your wireframe map is complete, you’ll have a clear scope of what you expect your site to look like and how users will be able to navigate it. 

Browse our directory of product design agencies that can benefit your business with design work and more.

Additional Reading: 

author

Hannah Hicklen

Hannah Hicklen is a Senior SEO Specialist that supports content and research efforts for Clutch.
Need Help Finding a Company?