How to get value from wireframes
Eleven years ago, I joined a small design agency. I was 21, and it was my first full-time design job. I spent the first…medium.com
At their best, wireframes create a mechanism to break out of obvious design paradigms. They enable you to better defend the direction(s) you chose to pursue, and help you slow down to point in the right direction before you speed down the wrong road. Wireframes shouldn’t be used as a checkbox to move a project from ‘exploratory’ into ‘ready for design’.
It’s common for junior designers to focus on visual design over functional design. However, what’s way more important is how something works or why something is the way it is, rather than how it looks. Senior designers spend much less time on cosmentics, and much more time validating they’re going in the right directino.
Wireframes that are useful
The setup
Grab a notebook and draw a grid of at least 20 rectangles. Make the rectangle roughly the aspect ratio of the device you’re working on.
The process
Fill each box with a different approach to the design problem you’re trying to solve. Sketch the most obvious ideas first. Get them out of your head, don’t stop until you’ve filled every box with an idea.
There’s little chance you’re going to be able to fill every box with a great solution, and that’s the point. You want to cover as much breadth as possible to move your mind from the comfortable into the unknown. If you’re struggling to come up with a new idea, push yourself to do something constrained.
If you’re trying to find the best way to layout a screnn, it’s handy to create a key such as: T (title), V (video) and so on, allowing you to focus on layout instead of UI elements.
If you’re focusing on UI layout and elements, you can sketch in higher fidelity.
Force yourself to continue until all boxes are filled.
After all boxes are filled, pick a few ideas that look promising. Talk them through with someone and get their thoughts. Forcing yourself to verbalize concepts often reveals new and interesting ideas.
Repeat the process
Rarely, if ever, is visual design the best next step.
Take the promising ideas and draw them in higher fidelity. Draw larger boxes on a new page. At this point, we’re trying to see if the ideas hold up with more detail.
Show the higher fidelity ideas and get feedback.
Next steps
The feedback you’ve received so far is high-level and conceptual rather than aesthetic and over-specific, and easily applied to more sketches.
At this point, it’s helpful to lean on the Google Ventures concept of ‘Searching for Conflicts’ to help find the differences between the ideas and decide the best way to proceed. More often than not, the author will repeat the skething process and think about how the promising screens fit into a flow. After he has sketched different approaches to the flow, he’ll create digital prototypes to see how the flows feel on a real device.
Hopefully by following this technique you’ll be able to quickly generate multiple ideas, support the ones you chose by comparing them to other options, and avoid committing to your first idea early in the project.
