Design Tips /

When should I use wireframes

When to use wireframes, and when to go straight to high-fidelity design

Feb 15, 2022 • 🍿 3 min. read

A common question I hear from new designers is "what are wireframes?" and "When should I use wireframes?".

This is completely understandable - often clients ask to see designs, so a lot of designers are keen to jump straight to a higher fidelity, and some see wireframes as tools of UX folks.

What are wireframes?

Wireframing is designing at the structural level, laying out content in a low fidelity way based on layout and and user needs. It's not focused on design, or often even copy.

Wireframing can be done simply with paper and pen, or a whiteboard, or even using dedicated software like Axure or Balsamiq.

When should I use wireframes?

For me the answer given depend on several things:

Who is the intended audience for the wireframes?

Not everyone understands wireframes, so like all design you must present with context and reasoning. I often find wireframes work best early on in the lifecycle of a project, with project stakeholders, analysts and developers.

While you can test wireframes with end users, often they have a hard time understanding them over a high-fidelity UI, unless there's a decent amount of detail.

What level of design fidelity do you need to make sensible decisions?

Wireframes are cheap and fast, and often can be made much more speedily than high fidelity designs. Things like the crazy eights technique can be great in workshops for exploring multiple ideas.

Design at the cheapest level you need to make the right decision

Wireframes are best used for higher level decisions, like a general approach to a problem with multiple solutions, but not making decisions about visual elements, for which high fidelity designs in a tool like Sketch or Figma would be more useful.

I work agency side, where I know certain customers are receptive to wireframes, and others not. Know your audience and what works best for them.

Type Fidelity Speed Cost Detail Level
Pen & Paper/Whiteboard Low V Fast Cheapest Low - good for 10,000 ft view/ basic layout and flow, when you are unsure of what you are making
Wireframing Tool (like Balsamiq) Low-Medium Fast Cheap Medium - no visuals but basic content - good for layour choices
High Fidelity Design Detailed Slower More expensive (usually double that+ of a wireframe) Good for detailed visual design decisions
Clickable Prototype Detailed Slowest Most expensive (usually double that++ of a wireframe) Good for replicating exactly how something works, including interactions - best for when you know what you are making

Where are you in the process of design? How sure are you on what you are making?

The simpler the wireframe the faster it is to make and easier to discard, and the more options you can explore without wasting too much time, and not having to worry about trying out different ideas for a single design.

For existing projects, where you have a design system in place, and you already have consistent methods of layout and design decisions already in place, it might be just as fast to mock up new ideas in high fidelity.

Consider real content

A downside of wireframes is that you often don't design with real content.

Make sure you do some higher-fidelity designs that take into account what might appear in the final product visually, as you might change your choice depending on the actual size of content or how many of something there is in your UI.

So... when should I use wireframes?

If you have lots of ideas you need to evaluate fast, then wireframing might really help.

I often find early on in a project when you aren't quite sure what you are making, wireframes can help evaluate lots of ideas fast, without much cost.

Know your audience

Are they a tool to make decisions internally? Then they might help.

Is it something you are testing with real users? Then higher fidelity might work better.

← Back to Design Tips

Was this useful? →