Design

How to make your first wireframe

by

on

View all posts

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.

“Wireframes serve as a middle ground between sketches and your first prototype.”
Wireframing example

Swapnil Borkar shares a fun Freehand wireframe for the Lyearn landing page.


Getting started with wireframes

First things first. A wireframe is a low-fidelity design layout that serves 3 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 bookmarklet1. 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.

Related: 12 wireframe examples from some of our favorite UX designers

wireframes

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:

GIF courtesy of Jon Moore on Medium

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.

wireframes

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.

Related: Perfect is the enemy of good: fighting perfectionism in UX design

Wireframing examples

Alex Dovhyi skipped pen and paper and tried out Freehand to create these wireframes. “This particular page represents the grid of cards with preview and basic information,” says Alex.


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?
wireframes

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. ↩︎
Author

Will Fanguy
Digital content wrangler at InVision | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us