What is a Wireframe?

A wireframe is an outline used to visualize what a product will look like. It visualizes different components, as well as overall functionality and special features. Designers will typically make wireframes for new UX and UI designs to help showcase what exactly a product will do and how it will benefit users.

Wireframe vs. Mock-up

It’s common to hear both “wireframe” and “mock-up” used by designers and project managers. What’s the difference?

A wireframe comes first and acts as a blueprint for a new product. Wireframes are often called “skeletons” because they only show the barebones. They contain placeholders, boxes, and simple outlines of what different components will look like and where specific information will be placed.

Mock-ups are the next stage and are built out after a wireframe is approved. They contain more design elements, including branding and images. Mock-ups are then passed on to development teams to use as a reference when building out products.

Why are Wireframes Important?

Using wireframes is important as they ensure products cater specifically to the user’s needs and function in simple, straightforward ways.

By creating wireframes, you can illustrate the customer journey from start to finish. This helps visualize how someone would use your product, work through different steps, and ensure overall satisfaction.

While designing wireframes, you can also make different examples to work through scenarios and predict roadblocks before they occur. If you find an error while reviewing wireframes or a component that seems too confusing or overly complicated, you can fix it.

Reviewing wireframes also ensures important elements are on pages where they’re needed and information is presented in a way that meets the user’s needs and makes sense. It’s easy to make changes before the product is fully built, alleviating future issues.

Who Should Use Wireframes?

Project managers should always work with designers to create wireframes for new products. It’s important to outline everything and collect feedback from stakeholders before final approvals are made.

Various stakeholders will often review wireframes to provide feedback. Sales teams and customer support staff should give input on customers’ unique needs and what kinds of features and information should be front and center.

If the wireframe is for a product upgrade, collect information from customers on new features or changes they’d like to see. Any information that will help improve the overall customer experience should be considered.

When providing input for wireframes or reviewing drafts, remember that the customer’s experience and overall product functionality are the main priority. Visual effects will come later and is a secondary concern.

How to Create a Wireframe

Anyone can create a wireframe for a new product ideal. You don’t need to be a professionally trained designer, but you do need to understand the end goal and how your customers will use the product.

1. Set a Goal. What are you trying to achieve with this new product? Before you even begin, establish a clear, achievable goal.
2. Understand user flow. Who are your users, and where are they coming from? You’ll need to understand customer acquisition, where they may drop off in the process, and how to keep people engaged. Your wireframes should outline where people will enter and exit your product and how they can navigate various pages to find whatever they want. Ensure all actions are accounted for.
3. Establish sizing. Is your product meant to be accessed via desktop, or is it compatible with mobile devices too? You’ll need to know how customers will use your product because components will look and function differently depending on screen sizes.
4. Create the first draft. It’s time to make your first draft! Outline all your pages and include notes for clarification where needed.
5. Leverage a video walkthrough. You can use a free screen recorder like Vidyard to show and tell. Simply record yourself and your screen walking your viewer through the wireframe to bring the whole picture together.
6. Review and revise. Collect feedback from stakeholders and make revisions as needed. Repeat this process until the wireframes are approved and can move to the next stage.