In This Chapter
Wireframe Basics
Wireframe fidelity
Types of wireframes
Wireframing tools
eb development can be a complicated business; as soon
as you add more people into the mix, the complications
increase exponentially. Every person involved in the pro-
cess brings their own expectations and ideas to the table. Once you
spend any time building websites, you discover that there are as
many ways to build one as there are developers.
There’s an adage in the industry: The later in the job you get, the
more expensive it becomes to make changes. Consider a situation
where you’re building a site for a client. You may start by designing
the site in Photoshop (see Chapter 12). If the client wants some-
thing to look different at that point, it’s relatively painless. But once
you’ve exported those Photoshop documents to a group of
images, a single change may mean that you have to re-export
images, which could become more time-consuming as the project
Also consider the case of creating any kind of dynamic capability in
JavaScript. If you’ve just spent several hours creating an animated
navigation menu, that’s not the time for the client to provide initial
feedback! Unfortunately, this advice comes from hard-learned per-
sonal experience.
The purpose of the wireframe — also known as the prototype — is
to visually communicate your intentions to the client as early as
possible in the process. Ideally, you want this communication to
occur as quickly and efficiently as possible. That’s why there are a
variety of wireframing techniques available; this chapter will
explain which to choose depending on your situation.
Wireframe Fidelity
The first decision you need to make when considering a wireframe
is its fidelity. Fidelity refers to how close to the final product it will
be. There’s a range of options, from the lowest fidelity (a scrawl on
a napkin) to the highest (a semi-functional website).
Low fidelity is faster, cheaper, and easier than high fidelity. However,
it requires some imagination on the part of the client to bridge the
gap between what you’re showing and how it translates to the final
product. That’s why, with a low-fidelity wireframe, I’m very careful to
convey the purpose of the document:
16_533994-ch10.indd 24116_533994-ch10.indd 241 2/12/10 7:18 PM2/12/10 7:18 PM
Web Design
The wireframe doesn’t convey any sense of the final site’s look and feel.
The wireframe may show the navigational structure of the site; for example, showing
the pages in a hierarchy.
The wireframe may show a process, such as the basic steps to complete an action.
The wireframe may show the kinds of content that will be required; for example, an
image, a headline, and a teaser text block.
Determining the amount of fidelity for your wireframe is a matter of understanding your client.
To that end, I’ve put together a list of questions you might ask. And in the finest tradition of
teen-girl magazines everywhere, I’ve set it up in the form of a quiz. For each of the following
questions, the answers range from 1 (strongly agree) to 5 (strongly disagree). When you’re
done, add up the numbers. Let’s get started!
The client:
___. Has a strong grasp of technology
___. Has demonstrated experience navigating a variety of websites
___. Is the only decision-maker
___. Has explained what he or she wants in clear language
The website:
___. Is relatively straightforward in terms of requirements
___. Is relatively small in size
___. Makes light use of advanced features, such as JavaScript or server-side scripting
Compare your number to the following ranges:
7–12. You and your client are dealing with a small site, and you’re probably on the same
page. Talk it out, maybe sketch an idea or two on some notepaper, and you’re set.
13–18. There might be some sweat on your brow as you think about this one. Pull
together a list of the requirements as you understand them, draw some wireframes,
and make sure you’re seeing eye to eye before proceeding.
19–25. The site is probably more than you can keep in your head at one time. Break it
down into pieces to deal with them individually. Wireframe the most important parts.
Get the client to sign off on the wireframe and then keep it in a safe place.
26–30. This is becoming a challenge. Perhaps you don’t have a good understanding of
what your client wants or maybe what he or she wants isn’t very straightforward. This
could be a terrific opportunity, but the need to understand the requirements is much
16_533994-ch10.indd 24216_533994-ch10.indd 242 2/12/10 7:18 PM2/12/10 7:18 PM

Get Web Development with the Mac® now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.