Wireframing is very important, but it seems to be a process many designers and developers skip in favor of diving right into coding or Photoshop. The purpose of Wireframing, like any good planning exercise, is to eliminate problems early on with as little effort and cost as possible. Paper Prototypes cost you nothing but can save you and your customers or company time and money. If it doesn't work on paper, it likely won't work when coded.

Why People Avoid Wireframes

Part of the problem is that designershear too often "I need to see what it will look like when its finished."It's the responsibility of designers to make customers and supervisors understand the process they have to go through and the value of it. By saying things like, "Before I spendXhours putting in the graphics, I wanted you to tell me if this positioning is even going to work..." or "Here are two directions we can go in. This one will give us more room for images, but we'll lose headlines.This other option gives us a balance of both. I need you to make a decision so I don't waste time making graphics for the wrong size and have to double back," you help eliminate the resistance to wireframing.

By going through this exercise,you are showing your client or supervisor two things: 1) thatyou value their input and are making them a part of the process, and (2) that you don't want to waste their time by not getting a firm commitmenton the layout. Visual elements like logos, fonts and colors distract from the issues of position, priority, structure, and flow.

How Wireframing Saves Time and Money

Wireframing makes it easy to understand exactly what you are coding and designing, and how it all will need to be structured. Coding with a wireframe to look at usually takes less than half the time and effort. From a design standpoint, knowing the placement of elements can easily influence factors like color, lighting, and drop shadow based on what other elements they will be competing with for attention. Here are some key benefits of wireframing:

    • 1. The ability to test and improve navigation;
    • 2. The ability to analyze how content lays out on the page;
    • 3. Makes it easier to determine how pages and elements interact with each other, and
    • 4. Makes it easier to determine overall structure for code and conditional elements.