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.
A great wireframe is one that solves a real problem. Follow these steps to create designs that lead to successful products.
1. Articulate
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 3 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 solving 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.
2. Generate
Now comes the fun part.
This is your chance to be creative, to come up with as many ideas as you can without judgment 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.
If you’re having trouble with this step, read about Wireframing Key Screens to Kickstart the Design Process and Wireframing Tips for Getting “Unstuck”.
3. Iterate
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.