Wireframing takes its name from the skeletal wire structures that underlie any type of sculpture. Without this foundation, there is no support for the fleshing-out that creates the finished piece. Many site owners and developers are unaware of this powerful, cost-effective preliminary planning strategy for building websites, and those who are often make the expensive mistake of thinking it is the same as storyboarding. Wireframing, however, is storyboarding's parent technique (see Behind the Scenes on storyboarding), and a website overlooks the potential of wireframing to its detriment.

These concerns are ultimately distractions to the process of wireframing that can lead to expensive and time-consuming revisions later in the project. During wireframing, your development and design team's job is to listen. Your job is to talk, conveying what you and your visitors want. Although its role is essential, creating a "pure" wireframe does not take a long time - and it is important that nothing "pollute" the process. The cleaner the wireframe, the more time and money you save.

How much time and money? Hal Helms, who speaks extensively on wireframing and prototyping, cites statistics indicating 70% of software projects fail outright, and the 30% that do succeed accrue 80% of their total costs after the initial release¹. Using wireframing and the subsequent techniques of storyboarding and prototyping, you can cut final development cost and time by at least one-third. Should you be interested in wireframing? Darn right!

The wireframe provides the outline for your storyboard, which easily can be fleshed-out after all iterations of the wireframe are complete. The resulting storyboard represents all the subsequent decisions pertaining to development and design, grounded in the structure of the wireframe. Your developers and designers need never work in a vacuum - the wireframe guides every design, information architecture, navigation, usability and content consideration.

The distinction between wireframe and storyboard is critical, and the two cannot be merged: wireframing defines the "what" of the creative process while storyboarding tackles the "how." The importance of maintaining distinct roles for phases of an undertaking is not a new idea², and Richard Wurman reiterates,

Ever get to the end of a project and find yourself musing: “That's nice, but what if we did …?” “What we really wanted to do was …” or “That's not quite what we had in mind!” By this near-disaster stage, you're not asking 'How does this work?'. You're worrying instead: “Why does it do that?” “Why are we over-budget?” “Why is the website late?”

If you want to avoid this, wireframe. Wireframing is straight-forward, direct and entirely non-techie. It requires only that you identify what you want every part of the site to do and what your site needs to do to respond effectively to the motivations and needs of your visitors. If you take care of the whats (wireframing), the hows (storyboarding and prototyping) will virtually take care of themselves, and you won't be troubled with those nasty whys.

How do you create a wireframe? The process begins with a dialogue. Together, you and your developers determine what needs to be done to translate your business successfully into a website. Nobody knows your business better than you, so you will be doing most of the talking - your developers will be listening to ensure the resulting wireframe accurately represents all the "whats" pertaining to your business. You answer the "what" questions, "action" questions: What does a visitor do at this point? Where can a visitor go from here? You ignore questions about what your visitor sees at this point.

The wireframe can be created on paper: simple pages reflect what every single part of your site does, focusing on ways a visitor would enter and exit from each step in the process. Alternatively, and more conveniently, a wireframe can be created "live," in very simple HTML, so the iterative process of refining the wireframe is quick and easy⁴.

The best wireframing happens on the spot; it's created as the dialogue is taking place. This ensures you can comment, question and make corrections immediately, and helps guarantee the developers will truly "hear" you and leave with a base structure for creating a storyboard that accurately addresses your and your visitors' needs. In addition to transcribing as you speak, your developers can guide you with questions that help clarify the "what" of your website. You can make sure the conversation avoids discussions of graphics, layouts, databases or content. The inherent constraints of the process will keep everyone on track. If all cooperate, the project simply cannot go too far astray.

In the end, the wireframe will act as a complete text-only version of your site. You will have crystallized the business logic and user functionality, and kept it efficiently separate from all other issues. Now, and only now, do you have a solid foundation for creating your storyboard, a task that can proceed in parallel with development of the prototype.

The cost benefits to wireframing are not insignificant. No developer is able to evaluate an accurate price for a site or to storyboard it effectively in the absence of understanding the "what" questions wireframing clarifies - unless they plan to use templated code. You can be certain developers using templates will have a vested interest in creating a site that requires the fewest changes to the pre-existing template, which means your needs are likely to take a back seat. Insist on proper wireframing and you actually minimize your overall cost while ensuring the ultimate code reflects only what you want.

If your development team cannot or will not provide wireframing before pricing your site, it would be worthwhile to hire someone to help you expertly wireframe it. Call in the developers afterwards - and since so much of the initial hard thinking they foreswore will be accomplished, you rightly will be entitled to negotiate a much lower price for “just” the development. Oddly, most developers will love you for this - you are the "perfect client" who comes to the table well prepared for using the development team’s skills. They get to jump right into the “how” because you’ve done all the “what.” You get a faster turn-around time, and everyone wins, including your wallet.

Neat stuff, huh? If you are interested in more information about wireframing, you can email Future Now at wireframing@grokdotcom.com. And watch this space, 'cause just for you I'm going to ask John to work his explanatory magic on the process of prototyping.

Think I'm too picky? Then look at what happened to Janet Roberts, who publishes Ezine-Tips. A newsletter subscriber decided to unsubscribe because she found it "difficult to put faith in advice about how to publish an email newsletter from folks who frequently make grammatical and spelling errors in their newsletters." The unsubscriber added, "This leads me to think that if you can't even proof your content that you're writing, how can I be sure that you're checking your sources or promoting valid suggestions/advice." Fortunately, Ms. Roberts (who is certainly not grossly negligent when it comes to writing) took the plucky approach and suggested, "Let our embarrassment be your gain." And then she offered this advice:

• Always review your copy thoroughly.
• Then have someone else review it again.
• Keep a handy stable of writing references and use them whenever you aren't 100% certain. Minimum requirements are a dictionary and style manual (Ms. Roberts likes On Writing Well by William Zinsser. I vote for The Transitive Vampire by Karen Elizabeth Gordon. Strunk and White's Elements of Style is the classic bible.)

To these suggestions I would add:

• Spell-check. But don't stop there.
• Grammar-check (intelligently). If your word processor has the option, use it - but be aware it needs a human monitor. If it doesn’t, use a human.
• And if you can't be bothered, pay someone to be bothered in your place.

There’s more. Keep an eye out for those there/their, your/you're, to/too/two, hear/here, its/it's problems. Remember that a customer doesn’t give their address, but rather customers give their addresses, or a customer gives his or her address.

Be painfully vigilant. On the other side of every one of your grammatical or spelling errors is an unnecessarily irritated customer who may very well become an ex-customer, or a potential customer whom your misteaks will push aweigh. To err certainly is human (though never Martian <grin>). But basic, careless and avoidable errors will cost you business.

P.S. Do yourself a big favor and subscribe (I do!) to The Ezine-Tips List.