Preventing Web Design Breakdowns, Part 1: Why Wire Frame

Why Wire Frame

Preventing Web Design Breakdowns, Part 1: Why Wire Frame

You're about to embark on the marketing trip of a lifetime -- building your company's new website. It's a big deal -- and not just because you finally get to show off your marketing and tech smarts. You'll also demonstrate your leadership, communication and project management skills -- and zip off into the sunset as the new company hero.
But before you hit the road with your revved up marketing strategy and pretty new design, you'll need a road map that can help prevent breakdowns in your design process. This road map is typically called a wire frame.
In general, a wire frame is a sketch of your website design. It provides the visual foundation for the rest of your project.
Let's take a car, for example. Your wire frame is the gray-scale diagram of your car before we put leather on the seats, chrome on the wheels and paint on the body.
Wire frames can come in lots of different formats -- a pencil sketch, sticky notes on a board, a Photoshop file, or even a working prototype.
The key word above is "sketch." Wire frames should remain in gray, black and white as much as possible. This allows your team to focus on the structure rather than on the graphics of the final product.
The other key word is "breakdown." If you skip the wire frame stage and go straight into designing in Photoshop or a content management system such as WordPress, your process is bound to break down with both revisions and frustrations.
Going straight to the "pretty picture" stage can lead to multiple costly revisions to finished Photoshop files--or worse--a programmed website. Without wire frames, you run a very high risk of spending weeks revising when you could have collaborated and built consensus on the website's foundation first.
So now that you know why to do wire frames, here's a handy checklist of what you'll need to get started:

Strategic Brief:

Before you can get into wire frames, you need to do your research. You need to understand your company's goals, your users' needs and wants, the depth and breadth of your existing content, your competitive landscape, and how search fits into all of the above. Read this post for more on pre-wire frame research.

Content Inventory:

You need to know what copy, photos, PDF documents and other assets you have to work with.

Content Outline:

Compose an outline of the primary, secondary and tertiary sections of the site. Then describe what content and features will be included in each section.
Stay tuned for our next article on preventing website breakdowns with Part 2: Top 6 Wire Frame Tips.