Using Wireframes for Web Strategy

Recently, Andy Rutledge of Unit Interactive and Design View wrote a compelling article questioning the value of wireframes. While I have great respect for Andy, I can’t help but think that he might be looking at wireframes from the wrong perspective.

His argument is that wireframes confuse clients who are expecting to evaluate design concepts based on visual appeal.  Andy states:

Wireframes, however, cannot easily accommodate and convey vitally important components of the design. Gray boxes and non-contextual dummy content cannot describe…

  • how contrast impacts content hierarchy
  • the impact of brand-specific design features
  • the impact of graphic and textural elements
  • the eye/energy paths created or interrupted by color and contrast of graphic elements

It’s true, wireframes do a poor job conveying visual hierarchy, tone and impact. But is that what wireframes are used for?

Wireframes Are Not Mock Ups

We don’t expect clients to evaluate a creative brief and understand what a finished logo concept would look like. Nor would someone look at a blueprint and expect to know what color the house would be painted. Wireframes are not supposed to dictate the visual layer. In fact if you don’t think about changing layout, placement or emphasis when moving from wireframes to mock ups you should reconsider your process.

It’s extremely likely that elements will change, size, shape and placement and that is OK.

Wireframes Are Strategy

Wireframes should convey what and why but not how. More specifically, what should be on the page, why it should be there and it’s relative importance. How it looks can be determined later once everyone agrees on approach.

Not only do wireframes ensure mutual understanding, it establishes reasoning for the decisions made during the mock up phase of the process. It’s a simple way to combat “move this up a bit” and “make my logo bigger” type issues.

Splitting the design into two phases— strategy and visuals— is beneficial for the designer as well. It allows you to focus on objectives and user experience without having to worry about how to execute it. The practice puts strategy above aesthetics, ultimately resulting in a more effective website.


Critical Wireframe Components

The most common error is to use wireframes as a “pre-design” stage. Meaning you’re already thinking about the visual layer, essentially producing a simplified mock-up.

Instead, focus on communicating what elements should be on the page, why they are important and how they related back to stakeholder and user objectives. This supplementary information is just as important as the visual components.

Approaching wireframes from this perspective turns them into a powerful tool for establishing the website strategy.

When Approached Correctly, Wireframes Have Valuable

Like any tool, wireframes are only valuable when used correctly. Focusing on objectives is a critical step to any design practice. Wireframes not only communicate strategy to the client, the practice of creating them can shift a designers thinking towards problem solving over visual composition.