Why Wireframe?

by Caryn Humphreys on January 7, 2015

Frank Lloyd Wright quote

Wireframing is a highly valuable step in planning your development project. Wireframes can save you time, money and effort down the line by planning out architecture, functionality and content before ever beginning design or development.

Prototyping with wireframing allows designers to test various options for an application to ensure essential usability heuristics are met to create an effective user experience. The strongest business case is how fast and inexpensive it is to test ideas in wireframes with users so that once development starts, there is no question of the value of what is being designed.

What is Wireframing?

Wireframes are the architectural blueprint for your application. They are an illustration of the layout of an application.

batmobile blueprint

A wireframe narrows the focus down to what is most important: how will it be put together, what goes on each page, where that content goes, why it goes there, how the application will display its status, and how it will respond to users.

In the example below from Dale Cody, you can see that the focus is less on the details of the content and more on how the content is arranged.

Hi fidelity wireframe

source credit: Dale Cody

What about the client?

Clients who aren’t familiar with wireframing, or working with User Experience designers (or whatever other multi-flavored title they may boast), may insist on seeing visuals early on in the project. They may ask your visual designers for mockups to show them ideas for colors, typefaces, and general ‘look and feel’. If you absolutely cannot convince your client of the value of plan before design, be sure to emphasize clearly (and often) that the mockups will, in no way, reflect final designs once the wireframing has gone through all its iterations and has landed on its final version.

Where does Visual Design fit in?

Client preferences for visuals and branding are important and valuable. Visual designers should be responsible for understanding the client’s needs to ensure that they are met once the wireframes are set and the project moves into visual design.

Cool Wireframe Resources

TutsPlus: A Beginner’s Guide to Wireframing

Wireframes Magazine

Web Without Words

I ♥ wireframes


The following two tabs change content below.

Caryn Humphreys

UX Designer
Caryn is a Product Designer. She likes writing about CSS tricks she's discovered, Best UX Practices, living and working in a startup community, and fostering a badass team culture.

Latest posts by Caryn Humphreys (see all)