Preparing the Prototype - Paper Prototyping: The Fast and Easy Way to Define and Refine User Interfaces - page 120

Separating Elements
Most interfaces, whether they're Web pages or software, have some parts that remain visible most of
the time. For example, software applications typically have a row of menus and icons across the top,
and perhaps some at the bottom. Some applications use a left-hand tree structure that expands and
collapses. Web sites often have a persistent row of links at the top, a left navigation panel (that
sometimes changes at lower levels of the site), and a content area.
Your first impulse might be to make screen shots of each whole screen, one for each permutation you
expect the user to see. But if you decide to make a change to a persistent area of the screen, such as
the left navigation panel, you need to make that same change on every page. Thus, it's often easier to
cut up screens into their main components to facilitate revising only part of the screen, as shown in
Figure 7.6 . (Sometimes it can add a bit of confusion to have several pieces representing one screen,
but simply telling the user, "This is all one screen" usually does the trick.)
Figure 7.6: This Web page started out as a screen shot but was cut into pieces to facilitate site-
wide changes. The revised tabs and ordering information (which were redrawn by hand in this
example) can easily be used on every product page.