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 detailed Wireframing for Newbies video or the quick summary below.
- Wireframes help get your message across
- Wireframes help you nail down the interface
- Wireframes result in easy to use software and websites
- 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.
Start your journey into UI design with this easy-to-follow guide.