Home  About Future Now  Testimonials  Archives
Plain-spoken Online Sales Newsletter - covering online conversion techniques, web design, usability, and consumer psychology.

(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?

Subscribe to

GROK Dot Com

How do you prefer to be addressed:

Your email address

We Value Your Privacy!

Action Center

Online CCR Calculator

Download Calculators

Customer Focus Calculator

Our ClickZ Column

Subscribe to our Avantgo Channel

Syndicate content

Get GROK Stuff


Best of 2000: WINNER -
Grok Dot Com



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.



click here for a printable version of this entire article

P.S. If you enjoyed this issue, why not share it with your colleagues and friends? They'll appreciate it.


Another Out-Of-This-World (And Free) Source of Valuable Knowledge

In my never-ending search to bring you the very latest and best e-business info in the galaxy, I've come across a truly exceptional resource. MarketingProfs.com is a terrific site written by some really smart (and really great) people, and it has a ton of practical stuff you can use to increase your business right away. They also put out an excellent newsletter that I look forward to and read diligently (don't even THINK of interrupting me). To learn more and to subscribe, check out MarketingProfs.com.

The Grok

Don’t Make Know Mistayque

Grammatical glitches and spelling screw-ups abound in web content, and they push my buttons - the wrong ones. They'll push your customers' wrong buttons too. In your quest to create Killer Copy, you simply MUST pay attention to these details (for more copy advice, see Think ACTIVE!). Look at it from your customers' point of view: if they see you can't be bothered with the most basic grammatical and spelling details, how are they going to trust that you are up to handling all the other details of doing business and not just satisfying but delighting them? If your business is providing content, all the more reason your readers expect you to be letter-perfect.

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.


click here for a printable version of this entire article

P.S. If you enjoyed this issue, why not share it with your colleagues and friends? They'll appreciate it.

GROK is taken from the landmark novel "Stranger in a Strange Land", by Robert A. Heinlein. It is a Martian word that implies the presence of intimate and exhaustive knowledge and understanding. Our "GROK" is a keen observer of the world around him and he takes a particular interest in the World Wide Web. The folks at Future Now like him a lot because he's taught them that "sometimes the price of clarity is the risk of insult."

  ©  2001 Future Now       Feedback?

Our Privacy Policy

We will never give, lease or sell your personal information. Period!

If you have any questions at all about our privacy policy, please email us.