Return to: GROK Dot Com 7/01/2001

(Wire)Frame Yourself

Everyone here is really excited about the concept of "wireframing" … yes, I know, a jargony word, but an apt and poetic one for a totally cool planning strategy to help you construct a site that does exactly what you and your customers want it to do. And if I said you could save at least one-third of your design and development costs simply by wireframing, you'd get excited, wouldn't you?

Wireframing is wonderfully straight-forward, amazingly sensible and devoid of wonky-geek requirements. I've asked my really good friend, John Quarto-vonTivadar - he's my wireframing hero - to give you the inside scoop. I know you ladies and gentlemen will give him a nice round of applause and your full attention. So now, please welcome John Quarto-vonTivadar on wireframing!

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.

In web-speak, a wireframe is a skeletal rendering of every click-through possibility on your site - a text-only "action," "decision" or "experience" model. Its purpose is to maintain the flow of your specific logical and business functions by identifying all the entry and exit points your users will experience on every page of your site. The goal is to ensure your needs and the needs of your visitors will be met effectively in the resulting website. You wireframe first, before a single line of code is written, a single graphic or color is chosen, or a single word of copy is composed. Wireframing is not concerned with design, navigational layout, content or even the developers' and designers' concepts of how to produce your website. (See a sample HTML wireframe.)

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 release1. 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 idea2, and Richard Wurman reiterates,

There are two parts to solving any problem: What you want to accomplish, and how you want to do it. Even the most creative people attack issues by leaping over what they want to do and going on to how they will do it. There are many ‘how’s but only one ‘what’...You must always ask the question ‘What is?’ before you ask the question ‘How to?’3

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 should consist of words - no images - transcribed by your attentive developers based on what you say. In wireframing, you use aural senses (talk/listen) to determine what the site should do. You defer the visual senses (look/feel) to storyboarding, where you attend to how the site will appear. You cannot "see" how a site will work until you first "listen" to what the site should do!

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 easy4.

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.

1 “ColdFusion To Go” by Hal Helms

2 Two millennia ago, the Roman Emperor Marcus Aurelius wrote in his “Meditations”, ‘…of each particular thing ask: what is it, in and of itself? What is its causal nature?’

3 Information Anxiety 2, by Richard Wurman

4 Helms wrote a great little utility for wireframing using ColdFusion, that you can get free at www.halhelms.com ; your developers might have their own already rolled up in some other convenient platform. How they do it is trivial, as long as they do do it.

How do you prefer to be addressed:

Your email address



We Value Your Privacy!
Forward This Grok To A Friend!

Return to: GROK Dot Com 7/01/2001

© 2001 Future Now