Why Wireframe?

Wireframing – or the ‘blueprinting’ phase of a web build – often divides designers and clients, and many think it’s a waste of time. But the cost of skipping this crucial step may surprise you.

Wireframing involves a couple of stages of plotting the basic structure of a website before design begins. It can start as simply as a pencil on paper sketch.

Although they may seem simple, even a basic wireframe helps save time and money in the long run.

At this stage, the idea is really just to plot out the most basic elements of the site in order of importance. We’re not looking for perfection here, just enough to understand what actually belongs on the page, and perhaps more importantly, what doesn’t.

Some sites don’t need any more than this. Larger, custom sites, however, probably need a second or third go with progressively higher fidelity. Fleshing out detail in this way ensures that the design phase is just focused on look and feel, since the user experience, copy, and other details are more or less taken care of.

As the fidelity, or resolution, of the wireframe progresses to the final design (far right above), we gradually add more detail.

Why is it important?

Skipping this crucial process and diving head first into the design is a bit like building a house by first taking out a paintbrush. It makes no sense – you need a plan with exact dimensions.

Wireframing also touches on user flows – crucial to influencing user behaviour.

The cost of skipping this step isn’t immaterial either; it’s real capital being poorly allocated.

Revisions at the design phase take a lot longer to implement than at the sketching phase, since sketching is an order of magnitude quicker than design. Moreover, most website packages out there, including ours, only include a set amount of revisions in the price.

We find that revisions are most common among clients who opt not to take this part seriously or skip it altogether, so it adds up to costly budget blowouts.

It’s also harder to focus when you’re looking at the design for the first time without having gone through the wireframing process. You’re busy worrying about copy changes or the menu to see the bigger picture. Whereas with wireframing, it’s impossible not to focus on the content, since there is, quite literally, no design at all.

Not only is wireframing more efficient at pinpointing structure, content, and language, but it’s also historically cheaper, and that’s got to be worth something.

Leave a Comment