Updated Friday, November 2, 2018: We’ve added a few more bits of advice for those just getting started with wireframing. Let us know what you think!
Updated 6/7/2018: We’ve added a section on what not to include in your wireframes to this post. Enjoy!
Whether you’re new to user experience design or you’ve been active in the field for years, you’ve no doubt heard of wireframes. Wireframing is an essential step in translating an idea for a digital product into a reality.
But where does wireframing fit into the product design process? If you’ve never done it before, how do you know what to do, where to do it, and what steps to take? And what’s the difference between a sketch and a wireframe? What about mockups or prototypes?
Lucky for you, our team at InVision has this process down pat, and we want to share our expert-level experience with you. So grab a pen and paper (it’s not just for taking notes!) and put on your brainstorming hat (you have one of those, right?). Let’s get wireframing.
First things first. A wireframe is a low-fidelity design layout that serves 3 simple but exact purposes:
Just like the blueprint of a building, a wireframe describes details clearly and specifically while giving the builders (you, other designers, developers, etc.) an overview of the project.
Wireframes serve as a middle ground between pen-and-paper sketches and your first prototype. They help you plan the layout and interaction patterns of your users without distracting details like colors or copy. The proposed user journey should be clear without needing color or shading or fancy menus.
One of my favorite ways to see wireframes in action is to use the Wirifybookmarklet1. Wirify lets you turn any web page into a wireframe in one click, and it’s great for getting inspiration or guidance, especially when you’re just starting out.
In addition to pen and paper, we like to use InVision Freehand for sketching out prototypes. Freehand is like a lightweight, digital whiteboard where you and your team can collaborate and communicate. The wireframes you create in Freehand are only as permanent as you want them to be, and using Freehand saves you the tedious steps of scanning and uploading your hand-drawn wireframes.
Pro tip: Your drawing experience is completely transformed when you hold down the alt/option key. Go from weird toddler-esque shapes to near perfection with the touch of a button:
Wireframes are fast, cheap, and perhaps most importantly, impermanent.Wireframes (and the sketches you draft before wireframing) are meant to change as you gather more information through user research or stakeholder input.
Compared with a high-fidelity mockup or prototype, gathering feedback with a wireframe is much more important than researching usage patterns or user journeys. With a wireframe, people pay more attention to functionality and the user experience than the aesthetic characteristics of the on-screen elements.
Wireframes serve as a common language between designers, users, stakeholders, and devs. They’re complex enough to inform everyone but simple enough to not be bogged down by too much detail or design language.
The key to a good wireframe is simplicity. All you need to do is show how elements are laid out on the page and how the site navigation should work. You can add fancy images and flashy typefaces later. Minimize distractions.
Keep these guidelines in mind:
Starting with sketches and moving forward, there are often many steps between the beginning and end of the product design process. Let’s take a look at a few more terms you might come across:
Remember that wireframes are only the first or second step towards a prototype. Because prototypes are meant to be the most functional draft of your product, wireframes serve to help you focus the placement of content and set a course towards a functioning prototype.
Different UX designers approach wireframing in different ways. Some like to start by sketching by hand, while others like to use apps or tools that are a bit more technically inclined. More often than not, the decision to wireframe by hand or on a computer, and the process used to get to from sketches and wireframe to code, is more related to what approach the particular situation requires rather than the preference of the designer.
Rosie Allabarton suggests in a post over at Career Foundry that you should ask yourself these questions to get started:
Your wireframe should be a visual guide to the framework of your site and how it will be navigated. Looks and visual appeal are not factors at this stage. Your main concern with a wireframe should be presenting your content in an intuitive and natural way that is familiar to users of this kind of service.
Your mission is to make it easier for your users to accomplish their goals (or for them to hit your conversion point or follow through on your call to action). By presenting your information in this way, you are aligning the business goals of your product with the needs of your users. All by laying out some lines and squiggles. Pretty cool, huh?
We’re big fans of using Freehand to sketch out wireframes. Freehand is a tool that helps you do it all from wireframing to creative exploration, presenting to collaboration. Give it a try and let us know what you think!
| Digital content wrangler | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee |