How to make your first wireframe (+ video!)

Updated 11/19/2019: We’ve added a walkthrough video tohelp smooth out your wireframing work. Watch and learn!

Updated 11/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.

Getting started with wireframes

First things first. A wireframe is a low-fidelity design layout that serves three simple but exact purposes:

1. It presents the information that will be displayed on the page
2. It gives an outline of structure and layout of the page
3. It conveys the overall direction and description of the user interface

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 Wirify bookmarklet¹. 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.

What NOT to include in a wireframe

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:

• Keep your colors to grayscale: white, black, and the grays in between.
• Use a maximum of two generic fonts, maybe one serif and one sans-serif. Showing the hierarchy of information through font can be still shown through changing the size of the font and whether it is styled (bold, italics, etc.).
• Avoid flashy graphics and images. Instead, try using simple rectangles and squares as placeholders with an “x” through the middle of the box to show where the image will be placed. Pro tip: You can also do the same thing for videos by using a triangle as a play button at the center of the box.

Moving from wireframes towards a finished product

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:

• We’ve already talked about wireframes. They serve as the skeleton of a digital product. They give you a general idea of the layout and construction. Beyond the skeleton of the design, the content and copy is the muscle of the product. Aim to have the content early in the process. Lorem ipsum never does your design justice. It’s helpful to have the actual content in place to make sure everything flows the way you want.
• The next step in the process is a high-fidelity mockup. Mockups are a more visual representation of your product. Think of a mockup like skin or facial features. This is the part where you firm up your visual decisions by testing variations and begin to give your product some character.
• The final step before handing your design off to the developers is the prototype. Making a prototype is like dressing your mockup and making it suitable for the public. It’s not the final version, but it’s acceptable to show to other people. This is the point where all you should need to do is make tiny tweaks before you send your model over to production.

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.

Using wireframes in your design process

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:

• What are the intended user and business goals when interacting with this page?
• Exactly how can the content be organized to support these goals?
• Where should your main message and logo go?
• What should the user see first when arriving at the page?
• Where is the call to action?
• What will the user expect to see on certain areas of the page?

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!

1. A bookmarklet is a small software application stored as a bookmark in a web browser, which typically allows a user to interact with the currently loaded web page in some way. ↩︎