How To Wireframe
Wireframes and sketches are a great way to get ideas out, start collaborating, help think through the solution space, but also think through the problem. Typically reserved for designers, but anyone can get in on the fun.
Whether you’re a Designer, Product Manager, Founder, Developer, Marketer - here’s everything you need to know on wireframing!
Table Of Contents
Wireframe Overview
- What Is A Wireframe
- The Goal Of A Wireframe
- Collaboration Is At The Core
- Finding The Right Solution
- Who Wireframes
How To Wireframe
Wireframe Guidance
Presenting Wireframes
Wireframe Overview
In this section I'll give a overview of a wireframe, why do one, and what are the goals of a wireframe.
What Is A Wireframe?
You probably already know but just in case, it’s a rough sketch of a product, app, or website. It can be literally that - a sketch - but often is a digital version.
It captures the rough layout, flow and structure, without getting all into the nitty gritty details.
A few benefits of wireframes:
Get The Idea Out
Wireframes are great for visualizing an idea. Often you need a few boxes, lines, arrows to convert a concept.
Quick
Wireframes are easy to knock out. Anyone can do one.
Align
Wireframes are great for getting teams aligned on ideas. They work much better than words alone.
Communicate
Getting an idea out in seconds is the first half. Most think that's what it's all about.
But...The second half is communicating and collaborating with others. Wireframes are great for communicating and makes working wither others easy.
The Goal Of A Wireframe
So why do a wireframe? Wireframes - or wires - are quick and cheap way to work through solutions, think through the problem, work with others, and get alignment.
Some objectives of wireframes:
Explore The Solution Space
The best way to explore the solution space early is sketching out ideas.
The nature of sketching means you can rapidly generate ideas and work through all the different angles of approaching a solution to a problem.
Explore The Problem Space
Wires will help you think through the problem space in a bit more detail. It’s another tool to think through the issues you are solving which in turn helps you gain a different perspective on the problem.
It’ll uncover requirements you didn’t think of, raise issues you might have missed, and in general help catch gotchas earlier rather than later.
Diversity Of Ideas
The low barrier to entry for creating wireframes makes it easy for anyone to do it. And that’s what you want.
Different groups will approach wires with their own take.
Everyone will approach wires from different vantage points. Collaborating and working with others will help diversify your viewpoints.
Collaborate And Align
Healthy collaboration is great. Sketches and wireframes foster a sense of collaboration.
It fosters feedback and conversation and helps the product team work together. All this promotes a sense of alignment.
Testing
Just because wireframes are lofi doesn’t mean you can’t get valuable info from them.
Lofi wireframes are a great to get in front of users to do early user testing on concepts and layout.
You can even do rough prototypes to test out flows.
Clarify Requirements
A picture is worth a thousand words. We heard this before.
Documenting requirements is great, but when you can add a picture to illustrate the problem/solution it adds another level of depth to clarify the requirements.
Collaboration Is At The Core
Software problems are nuanced and tricky. We learn more each day. Exploring the early helps us understand the problem better.
Getting everyone - designers, product managers, engineers, marketing - in a room gives us a wealth of ideas.
And the stakes are low early so it’s easy to talk through ideas with very little committal.
The best part is getting teams aligned and working together early, setting up the product development team for success later.
Finding The Right Solution
Finding The Right Solution Before Getting The Solution Right
This is the real essence of wireframes. When you have a problem you want to make sure you get to the right solution before getting the solution right (worrying about the minute details of the solution).
The exploration nature (as opposed to refining) allows you to go about finding the right solution. It promotes collaboration. Wireframing is easy and approachable so anyone can help push and pull on ideas and nudge the problem solving process in the right way.
Doing early sketching and wireframes is particulalry helpful when designing zero-to-one product work.
The rough nature of the wires invites feedback early that is easier to act on. It's more geared around the solution. Feedback on polished visuals tends to lean more on the visual side, and not so much the solution.
Also, people tend to be ok with providing feedback on rough wires as opposed to polished visuals.
Who Wireframes
Typically it’s up to designers to do the wireframes. As someone who spent their whole career in the product design / ux design space this has been my experience.
But I often noticed others wanting to get into the action. I would always run sketch sessions (which are just fun) and invite other departments.
Almost always they had fun and wanted to be in on future sketch sessions. And it wasn’t uncommon for PMs to ask for a Figma license to wireframe ideas, or to give them advice on wireframing.
PMs noticed all the benefits above. And really, I encourage anyone on the product team - PM’s, Engineering, Marketing, etc. to join in on wireframing if they desire too.
Here's a rundown on who can and should jump into wireframing:
Designers
This may be my bias kicking in but designers doing wireframes is a given. It's a typical role of what a UX designer does.
Product Managers
They can help communicate requirements into visuals. This can be done without stepping on designer’s toes. Also helps foster the product manager x designer relationship.
Developers
Look, whatever you come up with engineering has to build. Getting engineers in early gives them say into the solution. This helps buy in later on and makes for happier engineers. I often find developers like to know their ideas are being listened to.
Marketers
Flesh out marketing concepts a designer may not think about. Bring in marketing insights that are customer centric that others may not be aware of. This can be super valuable to a designer who may not have all the customer insights a marketer has.
Founders / Business Owners
Wireframing helps founders and business owners illustrate a problem they are solving. It's an easy way to show what a solution may look like. Great for informal pitch meetings. More polished wireframes are great for pitch decks.
Anyone Else
Really anyone can wireframe to get across ideas and concepts.
How To Wireframe
We covered the what, let's get into the how
Frame The Problem and Objective
Set It Up & Knock It Down
Jumping into sketching and wireframing is tempting, but you want to have some idea of the problem you are trying to solve. This is where having a solid UX strategy in place comes in handy.
Usually from user research, business requirements, analytics, customer support tickets you’ll have a rough idea of what you are trying to solve. Or it might be creating and designing a new zero to one app / product.
Framing
Frame up the problem you are trying to solve along with any supporting content.
This can include:
- User Research
- Business Requirements
- Analytics
- Customer Support
- Current Solutions
- Known Issues
- Unknowns
A Hypothetical
Let’s take a very hypothetical example: Apple wants to explore integrating podcasts into its Music app.
Instead of simply saying:
"let’s add a podcast player in the music app”
you want to get the lay of the land first.
Flesh out the problem with more context: what’s the business angle? what are user saying? What are some opportunities this presents?
Think through the elements - the known items in the Music app you can start to explore around.
This doesn’t have to be thorough, simple stickies will suffice. And it hast to be just enough to get started and add some structure. You’ll revisit it as you explore and learn more.
Here's a brief example of what exploring the problem might look like in a brainstorming session:
Sketching
Next, we sketch and get as many ideas out as possible. Set a timer for 5-10 minutes and sketch several out.
You can spend several minutes and knock out a couple sketches you feel good about.
Or you can do several rounds of this each focused on a different angle. An example 4 round sketching session would look like this:
A Typical Process
Instead of simply sketching out ideas and calling it day, follow a structured sketch session with rounds of sketching. Your sketches should align with your UX Strategy.
- Round 1: Pump out as many ideas as possible
- Round 2: Focus on specific areas of the app generating several ideas
- Round 3: Focus on a specific angle, like improving a business metric
- Round 4: Take an idea from a previous round and add more detail
Wireframe
From the sketches, you may have a couple ideas you want to wireframe. Fire up your tool of choice and knock it out. Keep it simple and focused on the main idea.
From the above, I liked the idea of embedding Podcasts in key places in the music app.
Here’s a couple wireframes alongside the sketches to show this.
These were done in Miro.
As you can see, the wires help clean up the design.
Typically you want to add a bit more context. I discuss this later in presenting wireframes.
Ideas Are Fragile
At this point these are concepts to communicate an idea or design. Careful not to shoot down early concepts and ideas.
It's easy - and tempting - to pick this concept apart. List all the ways it won't work.
But ideas are fragile. They need time to grow and properly vetted. When it's an early seed of an idea, it won't be fully formed.
The downsides will be obvious and it's easy to say why it won't work. Refrain from this thinking this early in the process.
Early on, you want to just get out ideas. Or simply:
Keep the feedback separate from the exploration.
Another concept I talk about further down.
Wireframe Guidance
The next section will get into design tups and advice that'll steer your wireframes in the right direction
Design Principles
Priority
Part of wireframing is letting the user know what’s important here and what’s not so important. It establishing hierarchy among the elements. A couple ways you can do this:
- Size: The larger the elements the higher priority it is
- Positioning: generally things higher up on the screen are more important.
Alignment
Keeping this nice and tidy helps make your wireframes cleaner and easier to take in. Use simple alignment to achieve this.
Most tools have alignment features that makes it easy to center, left/right align elements.
Focus
Wireframing is communicating. You want to stress certain elements and actions and de-emphasize others. A couple ways to do this:
- Use color to draw attention to one element.
- Block out text that is irrelevant. Use simple blocks of lines/rectangles to illustrate text instead.
Approach
Some pointers on going about wireframing
Focus On Ideas, Not Visuals
It’s tempting to worry about the visuals: colors, fonts, gradients, nifty animations.
Forget about it all and get messy. Wireframing is about the idea and the concept. Not the pretty visuals.
The overall layout, flow, and the concept as a solution.
It also can be a way to illustrate a problem. No need for clean visuals at this point.
Go Wide
You don’t want to just kick around the first idea you come up with. Push yourself to generate a lot of ideas.
Think about the problem from different user perspectives. Lean into core principles of your product and translate that into design ideas.
Sketching and wireframing is quick and cheap. This is the time to generate many good ideas.
Focus
Focus on the main point, idea, problem etc. What are you trying to get across in this wireframe and highlight that.
The level of detail you go into is determined by the why:
- Why are you mocking up this wireframe?
- What do you want to convey?
- What do you want the audience to take away.
Focus on those answers. Prioritize that info and reduce the priority of anything that is not relevant for this particular concept.
Below is a wireframe focused on User Flow. Images and text are blocked out and not specific so as to focus on the flow and not necessarily the content.
Fidelity
Sketch
Sketches are the fastest to create and the best for getting out ideas fast. It’s super clear they are just ideas and concepts.
Great for concepts and user flows or communicating ideas.
LoFi
A little more effort than a sketch, but still a great way to quickly get out ideas. Generally focus a bit more on layout and user flow / interaction. These are great for getting user testing results early.
They also make a touch better artifact for presenting. Since it’s not a messy sketch, they’re easier to take in/understand and a bit more stand alone.
High Fidelity
I generally avoid high fidelity wireframes. It’s important to understand why you are doing this in the first place. That’s typically explore quickly and cheaply or getting across high level ideas without spending a ton of time and effort. LoFI wires do a great job at this.
High fidelity starts to move away from the ‘why’ behind all of this. More often than not, the cost of doing a high fidelity wireframe outweighs the benefit.
There are times where it does make sense. For example if you’re working with an agency design team that needs a bit more specific guidance. Or the system you are working on is so complex, a lofi wireframe doesn’t cut it.
Or, you may want something a bit more polished and you have the time and resources.
In general, you’re better off with sketches and mores lofi wireframes
Tools
There’s plenty of tools out there for wireframing. Here’s good list to start with:
Analog
- Whiteboard and marker.
- Sharpie and copy paper.
Software with Wireframing Capabilities
There’s plenty of tools out there specifically for Wireframing. Here’s good list to start with:
Wireframe Specific Websites & Apps
Presenting Wireframes
what good is a wireframe if you don't shre it? Here's some tips whether you are the presenter or being presented to.
Providing Feedback On Wireframes
In general, when providing feedback on wireframes you’re looking to see if the design is helping support the user and business goals or not. It’s not personal feedback.
Here’s some tips on providing feedback:
Separate The Creation From The Feedback
Most importantly, the creation time is not the time to critique, analyze, or give feedback. Use the creation time for creating. Don’t limit yourself, go wide and explore. It’s too easy to self-critique or critique others in the moment. Don’t.
Ideas are fragile. They're easy to put down. Avoid doing this.
Let the creation time be for creating and have a separate time for feedback.
Clear, Specific, and Actionable
Feedback should clearly describe the problem in a specific manner. That feedback should be quite actionable.
Saying something like “I don’t like this button” is unclear. What do I do with that?
Objective
Feedback should be rooted in the goals, not personal opinions.
Not A Time To Solve
Giving feedback isn’t a time to solve. Feedback on wireframes should be describe the problem you see. It’s not a time to offer a solution.
The corollary to that: when a rough solution is given as a way to help flesh out the problem you are trying to describe.
Sometimes offering a solution but framed as a way to illustrate the problem helps explain the problem in a bit more detail.
Focused
Keep the feedback focused on the goals at hand.
Wireframe Summary
Wireframing is a great tool to get teams to work together and explore the solution space. Use it as a tool to help you and your team work together as a team and get to the right solution.
Make sure you have a comprehensive UX strategy aligned to your business. You want to make sure all your efforts - from research, to ideation, to designing and shipping all align around users and your business.