In this guest post, Leon Barnard, a designer at Balsamiq Studios, shares advice for creating effective wireframes.
Even with modern software development methodologies (such as agile software development) the road to building software is riddled with risk and uncertainty.
These challenges can be mitigated by creating rough visual sketches of the product, called wireframes, before coding begins.
Why wireframe rather than just writing functional specs or jumping right into code?
Wireframes encourage debate/discussion (on the right topics)
They invite multiple perspectives on the problem and the proposed solution and allow everyone to get a preview before it’s too costly to make changes.
Wireframes encourage exploration/ideation
Wireframes are not just about visualizing a solution, they actually help you brainstorm more ways to solve the problem.
Even though they look simple, and tools like Balsamiq Mockups (full disclosure: I work at Balsamiq) make them very easy to create, wireframing effectively requires a frame of mind that takes time to develop.
Here are some wireframe tips and tricks for the uninitiated:
1. Think Flow, Not Style
This isn’t the time to be thinking about pixel dimensions, colors and fonts. Instead, try to think about the problems you’re trying to solve and the flow between the screens in your app or website.
You may have a very clear idea in your head but may not realize how everything is connected or understood by the end user until you see the pages on a screen. The styling, look and feel can come later. This is the time to explore, play around, and get all your bad ideas out of the way!
2. Use Content Placeholders to Keep it High Level
Even as you’re focusing on flow it can be tempting to get into the weeds fine-tuning wording and appearance. You’ll be eager to see your idea come to life, and a black-and-white sketch often won’t feel “alive” enough for the instant gratification you crave.
One trick to prevent you from diving in too deep at this stage is to rely on built-in placeholders for content. Instead of adding logos and photos use an image placeholder (a rectangle with an ‘x’ inside) with a label and resize it to the approximate proportions (horizontal, vertical, square, etc.). For blocks of text add a headline or subtitle and a paragraph. Balsamiq Mockups even comes with a “lorem ipsum” text block shortcut for filler text.
3. Don’t Converge Too Soon
Wireframes are as much a tool for you to play around with concepts and ideas as to communicate the final design. It’s gratifying to see your idea start to take shape and you may feel ready to move on after all the pieces are in place. But just because it “works” doesn’t mean it can’t be better.
Don’t be afraid to linger in this phase. Changes now are fast and cheap. This is the time to make sure you’ve got the right design before you start writing code.
Challenge yourself to come up with at least three different concepts for each major part of your app before moving on (here are some tips and tricks for pushing yourself creatively). For example, here are three different navigation concepts for the same part of a site (click to see larger).
4. Create Simple Click-Throughs for a Reality Check
You don’t need something that looks final to get a feel for what the actual product experience will be like. Once you’ve iterated and feel reasonably good about your design, try linking the screens together and generating a simple click-through PDF prototype. Go through a few scenarios and see if you hit any snags or find any places where the user could get confused. Send it around to your team and have them do the same. Take another pass at the design to fix the problem areas you identify.
Allowing others to “experience” the app early on in this way is also a great way to get developer and stakeholder buy-in. People often get excited to build and use the app after getting a taste of it through on a simple prototype.
To learn about linking screens together here’s a video showing how to create links between wireframes in Balsamiq Mockups.
5. Annotate to Enhance Clarity
Once you’re satisfied with your wireframes you can start using them as a guide for building your product. You may want to use an application like Adobe Photoshop to create a high-fidelity mockup as the next phase or you may feel comfortable going straight to code.
Either way you’ll be using your wireframes as a blueprint for the next person or team who will be using them and you can enhance their value by adding annotations. These can be anything that might not be clear from the image itself, such as instructions for the developer or pointers to supporting resources. In Balsamiq Mockups you can turn off the annotation layer in a single click, so it’s easy to toggle between the annotations view and the mockup itself.
Happy wireframing!
