Chapter 5 - Design

How to Build a Wireframe

It’s nearly time to get your design on. But before you jump right into the details, remember to start broadly — begin with a wireframe.

Why Wireframe?

Starting with a wireframe (an initial design blueprint or framework) is the best way to begin a design. You wouldn’t paint a house before building the frame, so don’t start designing details before laying out the outline.

Plus, time invested in putting together a thoroughly planned wireframe will pay off handsomely by reducing the amount of revisions down the road. It allows you to get your vision down on paper and get feedback before you spend hours on the actual design only to find that you have to start over from scratch.

Plus it gives you something that you can send to a client/manager for approval, allowing for early (easy-to-fix) changes.

Wireframing Methods

You might want to step away from the computer at this point. Many designers find it beneficial to hand draw their initial wireframe.

In some cases, digital wireframing may hinder creativity and lead to a more templated final product. This varies by person and skillset, but consider the possibility in your own situation.

At some point transfer your basic wireframe to Adobe Illustrator, Photoshop or software of your choice and begin to more accurately define the size of elements and overall spatial organization.

In many cases the digital wireframe is what you would deliver for client approval as it is more likely to accurately reflect what the final layout will be like.

Wireframe Tip: Don’t Make Your Readers Think

Most people have the online attention of a 2 year old. As you begin your wireframing, it is critical that you have this in mind.

An effective infographic is thoughtfully organized so that a reader is led from introduction to conclusion with as little effort as possible. We want our readers to analyze and internalize our message and then act upon it.

We can’t have them wasting any time wondering “what is this for?”, “what does that represent?”, “where do I look next?”, etc.

Recommended Reading:

“Don’t Make Me Think,” by web usability guru Steve Krug, is written specifically about web design, but the concepts are directly applicable to effective infographic design. It’s a short and easy read giving practical examples and real world help. It’s worth your time if you are a serious designer.

Next Page