Making a Paper Prototype - Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces - page 53

Chapter 4: Making a Paper Prototype

I'm going to plunge into the topic of creating paper prototype widgets because most people like to see
lots of examples while they're learning about paper prototyping. But in real life, before creating the
paper prototype you should first define the users and tasks and then build your prototype around them.
The next chapter returns to the beginning of the process and discusses all the steps in their proper
order. This chapter is meant to familiarize you with how many common interface widgets (and their
behaviors) can be prototyped in paper.

Paper Prototyping Materials

Although it's possible to create a paper prototype with nothing but a pen and paper, several other
materials come in handy. Most of the supplies used in paper prototyping ( Figure 4.1 ) are available from
your favorite office supply store. A few items (such as the removable tape) may not be stocked in
stores and are easiest to find online. See www.paperprototyping.com for links to the supplies
mentioned in Table 4.1 .

Table 4.1: Office Supplies Used in Paper Prototyping

What Used for Notes

White poster
board, about 11 ×
14 inches

A fixed background upon which other
paper prototype elements are placed.

Paper prototypes are
usually somewhat larger
than life size. I buy 11 × 14
when I can find it or cut a
14 × 22 piece in half.

Blank paper For drawing larger prototype pieces,

jotting down notes, etc.

It's okay to use a lot of
paper while creating a
prototype, and keeping a
stack of paper on hand
reminds people of that.
(Bring a recycle bin too.)

Unlined index
cards, 5 × 8 and 4
× 6

Useful for smaller prototype pieces:
dialog boxes, pop-up messages, drop-
down menus, etc.

Card stock is sturdier than
regular paper and holds up
better under repeated use.

Markers, pens
(black and/or
colored)

Hand-drawing the prototype. Choose a
thick enough point so that you'll draw a
bit larger than life size—regular pens
may be too fine, flip chart markers are
too thick, Sharpie pens are about right.

My local discount store
sells sets of art markers for
much less than I've found
online.

Highlighter Used with transparency and removable

tape to make a highlight element.

Light-colored translucent
plastic would also work.

Scissors Used to cut screen shots into pieces, as

explained in the text.

Don't run with them!

Transparent tape
(Scotch tape,
invisible [ * ] tape)

For attaching prototype pieces
permanently, such as creating a dialog
box out of two index cards. For a less
permanent attachment, use removable
glue.

A matte finish reduces
glare, although this usually
isn't a problem unless
you're videotaping.