GobySavvy UX Reviews Logo

7 Strategies To Make Wireframes More Useful

As we discussed in our post about wireframing tools, wireframes are the bread-and-butter of effective UX work.  You’ve got to nail your tools, design, and thought process well in advance of development, and wireframes are how you get there.  

We also discussed what kinds of tools work well at what stage.  You don’t always need to capture every element of your product in every wireframe–in fact it’s probably more useful if the early stage wireframes are simple so you can discard and shed ideas that aren’t useful to you quickly!  But what about later in the process? 

multiple wireframe prototypes

How do you make late- or mid-stage wireframes useful as prototyping and testing tools?  How do you create visual effects (without developing out the actual product) that still stimulate the kinds of interactions and design focus you’re shooting for?   We’ve compiled a few tips and tricks you can use to ramp up your wireframes quickly, when you are aiming to look and feel more and more like the real thing.

iphone wireframe built on moqups

As we discussed in our post about wireframing tools, wireframes are the bread-and-butter of effective UX work.  You’ve got to nail your tools, design, and thought process well in advance of development, and wireframes are how you get there.  We also discussed what kinds of tools work well at what stage.  You don’t always need to capture every element of your product in every wireframe–in fact it’s probably more useful if the early stage wireframes are simple so you can discard and shed ideas that aren’t useful to you quickly!  But what about later in the process?  

How do you make late- or mid-stage wireframes useful as prototyping and testing tools?  How do you create visual effects (without developing out the actual product) that still stimulate the kinds of interactions and design focus you’re shooting for?   We’ve compiled a few tips and tricks you can use to ramp up your wireframes quickly, when you are aiming to look and feel more and more like the real thing.

balsamiq wireframe mockup

1.  Actual Words & Numbers

If you were born in the last couple decades, you’ve probably seen that “Lorem Ipsum blah blah” sample text on everything from Microsoft Word to InDesign templates. While Lorem Ipsum is in fact great for simulating textual distribution, it’s not great when you’re trying to model UX at a late stage.  Why?  Because, in a why, text and numbers are also part of the overall user experience.  As in, the user is experiencing them!  That doesn’t mean you have to wordsmith your copy to within an inch of its life, but try to get used to the words you’ll actually use.  Here’s a great resources with tips on writing copy for mobile apps.  Similarly, make sure the numbers you use are actually relevant, to-scale, and mostly accurate based on your interface.  For example, try not to say the distance between San Francisco and New York is 2 miles or that 2 + 4 = 75!  It’ll confuse your tester more than it’ll help you get at the “prototype” factor of a prototype.

wireframe drawn with pencil for iphone
Here’s a simple example, where the counting is accurate!

2.  Actual Pictures or Descriptions

They say a picture is worth a thousand words.  When you build out wireframes and don’t have images on hand to use in every segment, make sure to describe the images.  It may not require a 1000 words but try to make those descriptions more complex than “girl holding cup.”  Try “young brunette holding a glass of lemonade on a swing while the sun beats down on her”.  If you’re not inserting an actual image or stock photo (ideal for simulation), a good description can go a long way.

cafe wireframe with a stock image of woman drinking coffee
Stock photos will do in a pinch.

3.  Make the Clicks Clear

You don’t want the user guessing where they can and can’t click on your wireframe.  Make sure it’s incredibly clear what buttons actually do things and how interactions happen.  If you’re using a tool like Flinto or Invision to simulate a mobile app, they’ll make that clarity a little easier to achieve–but it’s still on you to make the interactions extra clear using shapes, colors, and text.

all the clickable locations for an iphone app wireframe

4.  Use Colors, Shading, and Divisions Thoughtfully

Some product testing should be in black and white (especially if you’re trying to avoid skewing results), but for pitching or later-stage testing color can be important. What colors, shading, and divisions (as in lines or heavy dividers) have in common is that they all need to be used thoughtfully–especially in a testing stage.  It’s not entirely a “when in doubt, leave it out” situation, but perhaps a “look before you leap” or “think before you shade”.  Edit, edit, edit and as much as possible ask whether an element enhances a testing process or prototype or only bungles it.

iphone with red and white shades to highlight actions
Notice thoughtful use of colors and shading.

5.  Size appropriately

Don’t make wireframes in random sizes if you’re actually making them in a design program.  If you’re going to spend all that time on it, it may as well be to scale!  That way you can move and place elements and really get a sense of how they’ll operate on the page.  The point after all is to help everyone involved (developers, investors, users, and other stakeholders) see the work before it goes deeper into production.

apple watch wireframe for uber driving
Keep your apps and Apple watches to scale!

6.  Keep Notes

As your design changes and evolves through testing and feedback, make sure to keep records of what you’re changing around. They might seem like minor notes or records, but they might come in handy later when you’re thinking “darn, wish I had made better note of what that old element was–I liked it better”.  Good record-keeping also helps showcase your product and can be used for eventual marketing and business plan creation.

7.  See Them Through

The UX designer’s job doesn’t end at the completion of a final set of wireframes! Designers and design consultants can work with your development team to make sure interactions and flow are up to par with the design concept.  Make sure to program that time into your overall process, or else you may lose some of the value from work you’ve already put in!

Want more tips about UX’ing or wireframing delivered straight to your inbox?  Sign up for our newsletter below, and we’ll curate some of the best for you.

About the author:

Janani B.

Janani has a Master's in Design Thinking and writes frequently about UX, design, psychology, and other topics.