Balsamiq

Toggle navigation

What Are Wireframes?

A wireframe is a schematic or blueprint that is useful for helping you, your programmers and designers think and communicate about the structure of the software or website you're building.


What are wireframes all about?

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.


Why use wireframes?

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

Summary:

  1. Wireframes help get your message across
  2. Wireframes help you nail down the interface
  3. Wireframes result in easy to use software and websites
  4. Wireframes save you time and adjustment work later

Why do wireframes look the way they do?

Wireframes typically have an intentional low-fidelity look and feel to them, for the following reasons.

1. Wireframes make 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. Wireframes convey 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; don't worry, their author won't mind doing them over from scratch. What matters the most at this point is the final ease of use, so going through a few iterations is normal and expected.

3. Wireframes make it clear that no code has been written yet

If your customer or stakeholder received some screens that looked like screenshots of the final app, instead of a wireframe, they might assume that all the code behind those screenshots had already been written. This is most often not the case. Wireframes don't have this danger.


Getting started with wireframes

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.

That's why we've created everything you need to make great wireframes and learn just enough user interface design along the way.

If you haven't already, start or download a free trial of Balsamiq Wireframes for Desktop or Balsamiq Cloud, then visit one of the links below.

Link to Intro to UI Design

Introduction to User Interface Design Through Wireframes

Start your journey into UI design with this easy-to-follow guide.

Link to How to Start a Wireframe Project

How to Start a Wireframe Project

Learn the techniques we use to go from nothing to something. Part of our series on Wireframing for Beginners.

Link to Balsamiq Tutorials

Balsamiq Tutorials

Lessons on using our tool, plus tips and tricks. You might want to start with Creating Your First Wireframe.

You can also start by browsing our articles or courses. Happy Wireframing!