When should I use wireframes
When to use wireframes, and when to go straight to high-fidelity design
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?
- What level of design fidelity do you need to make sensible decisions?
- Where are you in the process of design? How sure are you on what you are making?
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.