What Are Wireframes?

Did you hire a designer or programmer or an information architect / user experience professional? Did they deliver you a set of preliminary designs built using Balsamiq? If so, this document is for you.

We know your time is valuable so we’ll keep it short.

What Are These Documents All About? Why Do I Need Them?

The designs you received are called wireframes (sometimes called mockups).

A wireframe is a schematic, a blueprint, useful to help you and your programmers and designers think and communicate about the structure of the software or website you’re building.

The same screen can be built in a lot of different ways, but only a few of them will get your message across correctly and result in an easy-to-use software or website. Nailing down a good interface structure is possibly the most important part of designing software.

Doing this work now, before any code is written and before the visual design is finalized, will save you lots of time and painful adjustment work later. For more information, check out this article on Wireframing for Beginners.

You should congratulate yourself on choosing to work with someone who understands these cost-saving benefits. :)

Why Do These Wireframes Look the Way They Do?

Wireframes built with Balsamiq have an intentional low-fidelity look and feel to them, for the following reasons:

  1. it makes it clear that this is not the final design: no-one could mistake a wireframe made with Balsamiq with the final look and feel of your application. Low-fidelity and few colors force you to focus on structure over details. There will be lots of time for visual design once the structure is finalized.
  2. it conveys that “this is all up for discussion”: the rough feel encourages discussion, we call it a look no-one is afraid to criticize. Wireframes made with Balsamiq are really quick to make, so don’t be shy with giving feedback! Each screen probably only took a few minutes to make, their author won’t mind doing them over from scratch, don’t worry. What matters the most at this point is the final ease of use, so going through a few iterations is normal and expected.
  3. it makes it clear that no code has been written yet: if instead of a wireframe you received some screens that looked like screenshots of the final app, you’d be excused for assuming that all the code behind those screenshots had been written already (which most of the time is not the case). Wireframes built with Balsamiq don’t have this danger.

Want to Make Some Changes Yourself?

Certainly! You’re lucky that the person you’re working with choose Balsamiq to share wireframes with you. No other wireframing software is easy enough to use for non-technical people. If you can use Powerpoint, you can use Balsamiq.

Balsamiq comes in several different versions, each with a fully functional free fully functioning 30-day trial period.

We have an extensive set of tutorials: this “Intro to Balsamiq” is a good first step. Or, start with our quick guide to learning wireframing.

A Word of Caution

With great power comes great responsibility. Just because Balsamiq makes it easy to come up with user interfaces, it doesn’t mean that creating good user interfaces is easy.

Human Computer Interaction / User Experience Design is an art and science, and lots of people study a lifetime to become experts at it.

Wireframes are only part of the process. You might also want to use personas, site maps, prototypes, usability tests, and many more design techniques. We created UX Apprentice as a resource for learning how to make tools and techniques like these part of your process. Be sure to check it out if UX Design is new to you.

A good dose of common sense will go a long way, but is no substitute for working with an experienced UX professional.

For more information on our products and our company, you can start by reading our company page.

Edit this page