Wireframing Do's and Don'ts: A General Guide

Posted on June 02, 2016 by Bella Wenum

Wireframes are the blueprints of websites or web apps, meant to focus on necessities such as information architecture, usability, interactions, and user behavior. Wireframes are a critical step in the process of designing a product that is both usable and user friendly. There are different levels of fidelity in wireframes - low fidelity and high fidelity. Low fidelity can be as simple as a sketch on paper. High fidelity can be as detailed as an interactive prototype. Here are some general do’s and don’ts to guide you through the wireframing process.

Do's

Determine the goal(s) and audience

Do your user research. You need to understand your users and their goals first and you also need to know the goals of your product. A wireframe will help you prioritize goals appropriately once you know what they are.

Think mobile first

When beginning your journey into wireframing, think mobile first. It’s important to consider what devices your user base will be using. It’s much easier to scale up a mobile design than it is to scale down a desktop design. Varying screen sizes will affect the layout so make sure you have a game plan for these different devices.

Everything means something

Everything in your wireframe means something and has a reason for being there. This includes borders, background colors, lines, etc. Things like this can be taken literally and transfer over to the visual design phase, so be purposeful with what you include. 

Focus on functionality and interaction

Many of the interactions of a site are generally figured out during this stage. Don’t worry about how the site is going to look other than the layout and hierarchy - leave the colors and other visual elements for the visual design phase. Instead focus on how the user is going to interact with your site. What happens after they click a certain button? What will they expect to happen when they click a certain link? Is there context to prevent confusion?

Use realistic font sizes

Use appropriate headline and body text font sizes. This will give you a better idea of the space that will be needed. This doesn’t mean figuring out the typography now. The real typography work comes later, but it helps to create some visual hierarchy when organizing content.

Use design principles

Brush up on some Gestalt theory and make your wireframes stronger. In particular, the design principles of proximity, symmetry and order, uniform connectedness, common regions, and similarity should be used to properly convey structure and content relationships.

Collaborate and seek feedback

Make the process collaborative and seek feedback from your team. Their input will ultimately help improve wireframes and make your product better. It is important to be collaborative in every stage of building something, but it is particularly important here.

Use real content and data

Ask for real content and data up front. Using real content will help prevent a situation where the interface can break from adding more content than was planned for. It isn’t always possible to get real content and data, so do the best with what you have in that scenario.

Include notes and annotations

Notes and annotations are very important to include, particularly if the wireframe is complicated and details a lot of interaction and functionality. Give short and concise explanations for certain functionality and interactions that need clarification to make sure there are no gray areas.

Explore solutions

The wireframe stage is your chance to be adventurous and explore different layouts and solutions quickly and efficiently. There are different ways to structure things and solve a problem. Your challenge is to find the one that makes sense to your users and meets the goals of the project.

Explain upfront what the wireframe’s purpose is

Often people won’t know what a wireframe is, let alone what it’s meant to do. Explain up front that it is not what the final design will look like. It is meant to convey the structure, organization, and intended interactions. This will help focus feedback on what matters at this stage of the project.

Ask for targeted feedback

Try to ask for targeted feedback from stakeholders. If you leave your request open to general feedback, you can create a situation where people speak from bias and personal preferences.

Test early and test often!

I cannot stress this enough - conduct usability tests on iterations of wireframes with real people. If it isn’t possible to get real users, get it in front of people that aren’t biased by the project. The point is to make sure it makes sense to others. Don’t wait until the final wireframe to test – test as you go.

Don'ts

Avoid using color

Color will distract from the purpose of the wireframe. Use black, white, and varying shades of gray to emphasize elements with show shading and light contrast. Often the contrasts used in the wireframe will get communicated in the visual design phase when designers choose colors, so be purposeful. Consistency is key and it matters in every step of the process. 

Avoid using images

Like colors, real images will be a distraction. Instead use an image placeholder to signify where an image is supposed to go. Simply use placeholders and wait for the visual design phase to flesh out visuals.

 

Resources

https://blog.intercom.io/wireframing-for-web-apps/