Five Steps to Creating Great Wireframes
A great wireframe is one that solves a real problem. Follow these steps to create designs that lead to successful products.
Steps in the wireframing process:
Before you open your wireframing tool or start sketching, take a few moments to write out the scenario you're addressing.
You must first understand who you are designing for and what problem you are trying to solve. If you can't answer these basic questions, you aren't ready to wireframe. Stop and go back to your requirements and/or user research.
Don't start designing before you fully understand the problem.
A good template to start with is to write out these three questions:
- Who will be using it?
- What is their goal? What problem does this product or feature solve for them?
- What are some of the actions or operations they are likely to perform?
Answering these questions will start you out on the right foot and prevent you from solve the wrong problem, which is much harder to fix later on.
When you are satisfied with your responses to these questions, you are ready for the next step.
For real examples of this, see our article on How to Start a Wireframe Project.
Now comes the fun part.
This is your chance to be creative, to come up with as many ideas as you can without judgement or critique.
If you are using a wireframing tool, like Balsamiq, start by quickly adding UI controls to the canvas and moving them around to match the ideas in your head. You may want to draw controls such as rectangles and text to sketch out high level concepts.
When you run into a roadblock or don't like what you've created, simply jump to a new wireframe and try another idea. If you have an idea that you know is bad, follow it anyway.
In this step, you want speed and quantity. If you are thinking too much, your analytical brain may be interfering with your best ideas. It's OK to be messy, you'll clean it up in the next step.
Now it's time to look at your creative output.
If you've done the previous step successfully you should find ideas and directions that you didn't anticipate.
The goal in this step is to piece together the best parts of the ideas you visualized in the previous step. Collect and combine the concepts that address your users' needs in the most elegant way. Then add the missing details or steps that you overlooked in the initial generation phase.
Feel free to involve other colleagues who know the problem and use cases as design collaborators.
In this step you should start to see some solid user interface concepts come together that you're excited about. But don't strive for the final design here, try to have a few different variations for each screen, even if you're not 100% about the feasibility or layout.
It's also good to leave out finer details like fonts, colors, and interaction details that will be distracting in the next step.
Don't make the mistake of thinking that because you've arrived at a solution that you're done.
Coming up with a good design (steps 1-3) is typically only about 50% of the work in the design process. Communicating your idea effectively and following it through to implementation can take as much effort, if not more.
A good wireframe should have two forms of communication to go along with it: The story behind it and instructions for developers.
At this point you've put a lot of thought into the design and made deliberate design decisions that aren't visible in the wireframe.
It may seem unnecessary, but bringing the design full circle by restating the original problem and explaining your design choices to the stakeholders is a crucial step is moving your design toward implementation.
This is an opportunity to get everyone on board and ease any concerns others might have about your design.
A good design should also be a good storyteller. Make time to create a presentation (or written report at the very least) about the process you went through and map your solution back to the problem it solves. This will go a long way to getting buy-in from everyone else on the team.
Finally, it can be very helpful to add annotations to the wireframe itself.
These can be notes or arrows pointing to specific areas of the interface that explain use cases, such as interactive behaviors, empty states and other edge cases, or performance or responsive considerations, to name a few.
Ideally, you understand the technology well enough to know the main things that developers will want to know. If not, spend some time with them and find out what else besides the visualization they'll need to know in order to build it.
For more on this topic, see Tips for Presenting Your Wireframes and What Are Wireframe Annotations and Why You Should Use Them
Lastly, make sure that you provide an opportunity to gather feedback on your design after communicating it.
Talk to the person with the best understanding of the users' problem and ask them if your design proposal will solve it.
If you've done a good job with step #1, it should, but it is easy to get caught up in the creative design work and lose sight of the original problem.
So it's important as a final step to make sure that your design is actually worth building. At this point no code has been written, so it's much better to catch a mistake here than after the product has been released.
The second area to validate is whether your design can actually be built in the time allotted.
Designers, entrepreneurs, and product managers often have no idea what's involved in actually building the thing, so it can be easy to fall into the trap of "pie in the sky" designs that are great in theory, but nearly impossible to build given the inevitable time constraints.
You don't want to end up with a product that offers a compromised design because your idea wasn't realistic.
When possible, run your design by a few of the people who will be building it (hopefully you've already consulted with them a bit along the way) and make sure that you're not in for a surprise when they come back with their time estimates.
People are often surprised to learn that wireframing is an elaborate enough step to warrant any kind of formal process, but hopefully this article has shown the value in taking the time to wireframe the right way.
Creating a wireframe is easy. But creating a great wireframe, one that contributes to creating a great product, goes far beyond having an idea and drawing a picture of it.
For a deeper dive into the wireframing process, check out these courses:
Learn how to create wireframes for early stage product design with Balsamiq design director Mike Angeles.