Wireframes are like architectural blueprints for your digital product. They visually represent the overall structure, hierarchy, navigation patterns, and rules for displaying information on your interface.
They are a useful tool for drafting an interface before creating a polished prototype, and for documenting functionality details for teammates and clients. Below are our 10 best practices for creating wireframes.
Explain to your client or team members the purpose of the wireframes, what level of fidelity they will be, and the type of feedback you’re looking for. This will ensure expectations are met and productive feedback will be given.
When creating wireframes it’s important to know what device types and sizes need to be supported and how their functionality will be prioritized. For some products it makes sense to use a mobile first design strategy to optimize mobile usability while still having good functionality on desktop.
Start by working with the smallest screen sizes for each devise type.
Keep wireframes simple and bare bones to start. This keeps the focus on high level concepts and allows you to make fast iterations.
Low fidelity:
For example, this is how the Facebook home page would look in low fidelity.
Start wireframing by determining how a user will navigate through the product. Navigation can have a large impact on the UX of your product and is important to get right before moving on to higher fidelity wireframes.
Some questions to consider:
For example, when opening a specific folder in Dropbox there are many things to consider in terms of navigation.
Show how information and interactive elements such as action buttons, input fields and hyperlinks will be prioritized on each screen. Consider how this layout serves the purpose of the page and the overall goals of the user flow.
For example, key actions in Google Forms “float” on the top of the screen so they are always accessible.
Identify and explain key functionality. This is important because the wireframes are static and can not demonstrate the intended behavior themselves.
For example, the Youtube search bar can be interacted with in several ways.
Show different paths a user can take in a single flow by mapping out the wireframes and documenting the rules for displaying certain types of information.
For example, when creating a new account on Pinterest a user can enter their details on the “create account” page or sign up through Facebook, which takes them on an alternate path before being brought to the home page.
Annotations are used to explain your wireframes so clients and team members can understand how the design works and why it’s effective. These can be descriptions, an explanation or rules of a feature, or any other relevant information.
Annotation guide
Explicitly state the purpose of your wireframes and the goals they are meant to accomplish before presenting your work. With this information your client or team members will be able to evaluate the overall effectiveness of the wireframes and provide feedback that is relevant and valuable.
Once revisions have been made and there is consensus, bring your designs from low, to medium, to high fidelity. Start with only a few key screens to get buy-in then bring everything up to that level of fidelity.
Medium fidelity
High fidelity
For example, here is a module at low, medium, and high fidelity.
Wireframes are a great tool for experimenting with and communicating design solutions with your teammates or clients. They allow you to focus on what’s most important, high level concepts and functionality, before getting too focused on the branding aesthetics.
We hope this guide has been helpful for you!