DESIGN PROFESSIONALS: AN ONLINE WHITEBOARDING HANDBOOK INVISION

1
 INTRODUCTION

Wireframing is an
early, essential step
in translating a com-
plex idea into reality.
While previously synonymous with product design,
in recent years, the concepts and applications of
wireframing have transcended the design field.
With the help of wireframes, any team can visualize
their plans and desired outcomes, taking new
forms such as a concept map, flowchart, or mind
INVISION

map. The tenets of a successful wireframe — a

vehicle for better communication and collaboration
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

— can be universally applicable to any team’s

cross-functional processes.

2
 In this guide to wireframing, we’ll help you answer
the following questions:

• How can wireframes help convey complex ideas

to multiple stakeholders?

• Where does wireframing fit into my current

processes?

• What makes a successful wireframe?

INVISION

• What tool(s) are best for wireframing?

• How do I get started?

WIREFRAMING: AN ESSENTIAL FIELD GUIDE

Let’s get started below.

3
 1. What is a
wireframe?
First things first — what exactly is a wireframe? A wireframe is
a low-fidelity design layout that serves three simple, but
specific purposes:

• It presents information as it will be displayed on a certain

medium (e.g. web page, app)
• It provides a digestible outline of structure and layout
• It conveys the overall direction and description of the interface
(i.e., the details) for the end user

Wireframes serve as a middle ground between pen-and-paper

sketches and your first version of the end product (e.g. product
INVISION

prototype, new website homepage). They’re also built with the

end user in mind, helping you plan layout and interaction patterns
without distracting details like colors or copy.
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

Just like the blueprint of a building, a wireframe is designed to

clearly and specifically give the builders (you, other designers,
developers, etc.) a brief overview of the project to kick off the
collaboration process.

4
 Key considerations in
creating wireframes
Before you jump into your new wireframe, there’s a few things
you should know to ensure that your future collaborators have all
the information they need to get the process moving in the right
direction from the start.

What a wireframe should include

Wireframes are meant to be fast and impermanent. Perfection

isn’t the goal — wireframes by nature are meant to change as you
gather more information through research (user or otherwise) 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
INVISION

experience than the aesthetic characteristics of the on-screen

elements (that comes later).
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

Wireframes serve as a common language between collaborators,

including designers, users, stakeholders, and developers. They
require balance — complex enough to inform everyone, but
simple enough to not be bogged down by unnecessary detail or
design language.

5
 What a wireframe should not include

The key to a good wireframe is simplicity. All you need to do is

show how elements are laid out and how the individual elements
should conceptually work together. The goal is to minimize
distractions so that you can get a viable end product out to your
collaborators and key stakeholders.

Keep these guidelines in mind:

No need to use tons of colors. You can either keep your colors to
grayscale: white, black, and the grays in between, or stay within a
single color/shading spectrum.

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.).
INVISION

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.
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

Pro tip: Trouble knowing where to begin? Get started with

a template based on your needs.

6
 2. Create your
wireframe
The tools you use to wireframe are just as important as the end
product. For instance, an online whiteboard can offer more
flexibility than a traditional pen and paper when it comes to
iteration and sharing with collaborators. In this case, we’ll explain
how to create a quick and easy wireframe using InVision Freehand:

Step 1: Create your workspace

Start by copying or dragging one of the pre-built frames or

devices on to the canvas. Add multiple frames with arrows in
between to showcase an entire user journey.
INVISION
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

7
 Step 2: Bring it to life

Use the wireframe stickers to create a mockup of your interface.

Add text, buttons, icons, and more to the most important details
of your page.
INVISION
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

8
 Step 3: Invite collaboration

Include stakeholders early and often. Add stickies to ask for

feedback and use Reactions (the smile icon on your toolbar) to
vote for your favorite ideas.

When you’re finished, you should have a low-fidelity vision of the

experience ready to gather feedback and start developing a high-
fidelity prototype.
INVISION
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

For a more detailed walkthrough of the Wireframe Widget in

Freehand, see the support article.

9
 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 What are the intended user and business goals
suggests in a post
when interacting with this page?
over at Career
Foundry that you
should ask yourself Exactly how can the content be organized to
these questions to support these goals?
INVISION

get started:
Where should your main message and logo go?
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

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?

10
 3. From wire–
frames to finished
product
Now that your wireframe is out in the wild, what happens between
the beginning and end of the process? Let’s take a look at a few
more steps and related terms you may come across:

• Wireframes serve as the skeleton of a digital product, giving

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.

• The next step in the process is a high-fidelity mockup.

INVISION

Mockups are a more visual representation of your product.

This is the part where you firm up your visual decisions by
testing variations and begin to give your end product some
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

character.

• The final step is the prototype. A prototype will be the highest

fidelity version of what you plan to be the final product. But to
be clear, it’s not the final version. Polish it up for production.

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

“Why bother making a

wireframe collaboratively?
Well, for starters,
collaborating lets you get
feedback from your peers
and stakeholders early
on in the design process,
keeping you from endless
feedback cycles and
INVISION

helping you launch better

designs faster.”
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

— A look into the collaborative wireframing process,

Inside Design

12
 How to wireframe:
What we’ve learned
A wireframe is a pivotal starting point to turn your idea into a
final product. A few reminders as you take on your first or next
wireframe:

• Yes looks and visual appeal are great, but they’re not factors
at this stage
• Your main concern with a wireframe should be presenting your
content in an intuitive and natural way

When you’ve wrapped up your wireframe, revisit some of the

questions we sought to help you answer at the beginning of this
post. Some additional considerations for you include:

• Did you accomplish the goal you set out at the beginning to
convey your idea in the simplest way possible?
• Did you make it easier for your end user(s) to accomplish
INVISION

their goals?
• Is this aligned with the goals you’ve set for yourself or
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

your team?

With all of these considerations in mind, it’s time to use your

wireframe to transform your idea into reality. For further guidance
on wireframing, we offer some resources in the Appendices below.

13
WIREFRAMING: AN ESSENTIAL FIELD GUIDE INVISION

Try
now
Freehand

14
 Appendix: How to
wireframe in Freehand
See the support article here or
follow these directions: To create a wireframe:

1. Open your freehand document.

2. On the bottom toolbar, click the More tools menu icon ( • • • )

and select Wireframe.

3. Scroll through the component catalog or use the dropdown to

select a category.
Tip: To search for a component, click the dropdown and select
All Categories, then type the keyword in the search box.

4. Click and drag a component into your freehand. To resize a

component, click and drag the handles to the desired size.
Tip: You can edit a component as needed. To edit text, double-
INVISION

click the component and enter your text.

WIREFRAMING: AN ESSENTIAL FIELD GUIDE

15
 Wireframe options

With one or more components selected, you can select the more
icon ( • • • ) above the selected object(s) to open a contextual menu
with various options.

To explore wireframe options:

1. Select the pointer tool

2. Select the component(s) or wireframe. Tip: You can click and

drag to select multiple components.

3. Click the more icon (•••) and select one of the following options:

• Copy link: copy a link to the selected object

• Bring to front ] : bring the selected object(s) to the front
• Send to back [ : send the selected object(s) to the back
• Export to image: export the selected object(s) as an image in
PNG format
• Copy Cmd + C : copy the selected object(s)
• Delete Delete : delete the selected object(s)
Note: If you’ve deleted an object by accident, you can undo it
by typing Cmd + Z . You can also revert to a previous version
of the document using version history.
• Duplicate Cmd + D : duplicate the selected object(s) in the
INVISION

same freehand document.

WIREFRAMING: AN ESSENTIAL FIELD GUIDE

16
 Freehand Templates
Browse all templates

Ice breakers Brainstorming

Template Template
Preview template Preview template

Marketing
Crazy 8’s Strategy
Template Template
Preview template Preview template

Product
INVISION

Planning Design Sprint

Template Template
Preview Template Preview template
WIREFRAMING: AN ESSENTIAL FIELD GUIDE

Customer
Journey Map Flowchart
Template Template
Preview template Preview template

17