Knowledge Base Articles > What Are Wireframes?

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 or some other wireframing tool? 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 wires, mockups, or mocks).

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.

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

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 about why people choose to wireframe, read about The Two Phases of Wireframing or watch our video called Wireframing for Newbies.


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 for 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 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 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. (We're not biased, of course 😉)

Balsamiq offers sharing and reviewing capabilities if you want to give feedback on what someone else has created, and collaborative editing if you want to edit the wireframes yourself!

To get started learning about Balsamiq, check out our tutorials. You might want to start with "Creating Your First Wireframe".


A Word of Caution

With great power comes great responsibility. Just because wireframing tools make it easy to come up with user interfaces, it doesn't mean that creating good user interfaces is easy.

Human Computer Interaction and 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.

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.


Peldi GuilizzoniBy Peldi Guilizzoni
Got questions or feedback? Email peldi@balsamiq.com.