Illustration by Lidia Lukianova
Imagine browsing an entertainment website and seeing a ton of scattered content. A primary navigation doesn’t exist. The images don’t appear in any clear order and the copy doesn’t sit next to any relevant images. Links and buttons blend together. There isn’t a clear beginning or end to the page.
Or, imagine shopping for a product on an eCommerce website and not knowing your total cost for the items. The image, name, and price are in various locations, so you end up selecting the wrong product.
Sound confusing? It should. Without any structure, websites like these are difficult to navigate and engage with. Fortunately, there’s a step in the design process to help you avoid this: wireframing.
What are wireframes?
A wireframe is the blueprint of your digital interface. In other words, it’s a drawing that shows the relationship of the content placed on the interface, whether that’s a page on your website or a screen on an app. It’s the foundation of a digital product, and it informs where and how to use the final images, copy, and interactions. It’s typically rough-sketched using pen and paper or created with design software like Adobe XD.
Why wireframes?
Wireframes are an important step in the UX design process because they provide a clear direction of where to go with a design. Think of them as a communication tool: they’re an opportunity to articulate ideas visually and get the whole team on board before you build out your actual product. They also encourage innovation and mistakes along the way; since the wireframes aren’t final, they provide useful information for future improvements.
A wireframe also helps you think about your ideal user flow. It allows you time to think about the visual hierarchy of each page, one of the most influential design principles. Visual hierarchy establishes order and visual priority among the different design elements on the page or screen, using design principles like contrast, balance, and scale to make certain elements stand out. This will simplify the layout of a page, so the user doesn’t get overwhelmed with visual information.
This is especially important for responsive design, allowing for a seamless transition between the desktop experience and the mobile experience. For example, someone may be at a festival with friends and learn about a product they want to purchase. They look up the product on their mobile phone first and save it to look at it later. At home, they visit the website on their desktop and compare the product with other models. Doing this will require more screen real estate in order to see the different options. The design elements must then accommodate this behavior and platform, and planning this out is a big part of the wireframing process.
Finally, wireframes are a type of risk reduction, providing a preview to the final solution and saving valuable time. Rather than waiting until the final solution is in the hands of the users to discover errors, you can catch them sooner. Wireframes give you assurance throughout the ideation and usability testing phase. They provide key insights that will either keep the team moving forward or suggest the need for more data.
Wireframing tools
Hand sketches are one way to create lo-fidelity wireframes. You can use a dark pen on paper, a dry erase marker on a whiteboard, or a sharpie marker on oversized butcher paper. The goal is to make sure that all team members can read and understand the sketches.
Digital software, such as Adobe XD, is a useful tool for wireframing. This will take more time, but it can enhance your team’s collaboration and will provide clear details to help with the accuracy of the prototype. For example, when creating a faceted navigation, labels are important. If the written text isn’t clear, then it can then cause failures or confusion during the usability test. Typing the labels ensures readability but also establishes consistency with all written text. These details are important because they help orient the user with the content.
Another benefit of using digital software is that it helps to set up the next level of fidelity. A mid-fidelity wireframe uses some images and sample text but does not include color. Everything is in grayscale or black and white. Using wireframe software also allows multiple people to work on a single wireframe at the same time.
Example of website layout wireframe, including design elements like the footer, header, and navigation. Image credit Adobe Stock Photos.How to create a wireframe
Creating a wireframe can be deceptively simple. Before creating one you must first be clear on why it’s important. What are you trying to learn? How will this benefit the user? Having a clear goal in mind will help you to focus on one user flow over another.
Keep in mind you don’t need a wireframe for every single page on your site, one of the common wireframing mistakes; just focus on the key pages in your user flow.
Ready to get started? Below, we’ll dive into the six easy steps for wireframe design.
Step 1: Gather your data
First, gather all relevant data. Understanding the persona and their pain points is vital. Without this information the team may end up creating wireframes that don’t address any specific problem. This data also reminds the team of what is important to the business. It provides parameters that affect the final solution.
Step 2: Identify your user flow
Next, identify the user flows that lead to your goals. This will help you organize the features on the page, while limiting the number of options and the possibilities for errors. Identifying the flow is also beneficial for aligning team members. It gives them a specific direction to focus their efforts, ensuring that all ideas are relevant to the problem at hand.
Step 3: Determine the features
At this point you’ll determine the structure and features of the page. There are many ways to organize the features on a page; the goal is to find a solution that will work best for the target user based on the research you’ve gathered. What makes this difficult is the reality that whatever you add may change several times. Referencing adjacent interfaces helps to minimize uncertainty. Also, proven design principles are important during this phase. They remove the guesswork out of how to display content to capture user’s attention, for example.
Step 4: Create the wireframe(s)
Next up is creating the actual layout. There are two ways to do this. The first is sketching by hand with a pen and paper. The benefit of this is that it’s quick. It allows you to be flexible when making changes, which is important because the goal of the wireframes is to learn – they aren’t meant to be the final designs. Sketching them out by pen and paper also communicates to the user that this is still a work in progress. This allows them to be honest and candid when giving feedback about their experience.
The other option is using software like Adobe XD. The goal here is similar to sketching. Your designs should be simple, with very few details. Keep the elements to boxes, lines, circles, unfinished sample text, and black & white or grayscale images.
Step 5: Test
This brings us to user testing. You can either use the hand-sketched wireframes or the digital wireframes to create a single prototype. This step is all about gathering data to help you refine your next set of wireframes. Consider these questions about the user’s experience with your interface: Do they understand how to navigate through the page? Do they recognize the features? Do they get stuck? Are they confused by the sequence of pages because of the content on previous pages?
Answering these questions is valuable because it informs what iterations to make. As you make these iterations to the layout, the fidelity of your designs should increase, ultimately becoming the final version that you’ll hand off to the developers.
Step 6: Transition to a mock-up
The final stage of wireframing is transitioning it into a mock-up. A mock-up is a visual simulation of the final website. This final version is no longer considered a wireframe, because it uses the actual images, content, and color of the final product. Usability testing stops at this point and the team preps the files to hand over to developers. This process is called redlining, which is where you’ll include all of the measurements for the features and their placement.
Female web developer with blue marker planning website on whiteboard. Image credit Adobe Stock Photos.Conclusion
Wireframes are an important part of an effective, iterative design. They’re a tool for practicing ideas, validating decisions, and ultimately helping to support the user and their goals. It’s one of the best ways to make sure the final website design triggers delight and supports the completion of a task.