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 Mockups? 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 you need them?#

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

A wireframe is a schematic, a blue print, 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.

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 Mockups 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 Mockups 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 Mockups 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 Mockups don't have this danger.

Want to make some changes yourself?#

Certainly! You're lucky that the person you're working with choose Balsamiq Mockups 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 Mockups.

Balsamiq Mockups comes in several different versions, each with a fully functional free trial period. Head over to our download page and download Mockups for Desktop to try it out.

We have an extensive set of tutorials: this "Intro to Balsamiq Mockups" is a good place to start.

A word of caution#

With great power comes great responsibility. Just because Balsamiq Mockups 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.

Last Updated: Nov 02, 2013 01:22AM PDTShare: