is a very useful, low cost design technique, allowing the
envisaged use of a new design to be quickly communicated
and evaluated. There are different ways of capturing storyboards,
but in the initial design stage, it is important that the
designs can be captured quickly and easily. In the book,
we focus on paper-based storyboarding, but in this interactivity,
we introduce you to an alternative approach.
DENIM is an interactive sketching tool that
helps web site designers in the early stages of design.
The system allows you to sketch the overall structure of
a website, to design the contents and layout of each web
page, to link the pages together, and then to 'run' the
design, i.e. to interact with your design like you would
in a web browser.
DENIM was developed at the Group for
User Interface Research at the University of California
Before you can use DENIM, you need
to download the software from http://guir.berkeley.edu/projects/denim.
Go to the site and follow the instructions. If you are working
on a network, or if you don't have full access privileges
for your machine, you may need to find someone with appropriate
permissions in order to install the appropriate version
of Java should you need it.
also contains links to numerous publications and further
information about the work being conducted at Berkeley.
When you first run DENIM the following screen
will appear. The main part of this screen is called the
canvas, and this is where you will develop your design.
DENIM includes a comprehensive Help system, accessible from
the pie menu in the top left hand corner of the screen.
NOTE: DENIM was originally designed for
a pen interface, although it can be used with a mouse and
keyboard. Writing with a mouse is a little challenging,
but it is also possible to type in headings, phrases, link
To get you started in DENIM,
we suggest that you run through the introductory tutorial
which is downloaded with the software. Click on the pie
menu at the top left of the screen, and then choose 'Help'.
This brings up a second pie menu, and from here choose 'Contents'.
The frame shown below will appear. Choose the tutorial and
user guide link on the right hand side.
Following the tutorial exercise will get
you accustomed to the interface, and the different modes
of input. DENIM has two different input modes: one to input
lines and one to input gestures. In the former case, the
lines you draw are drawn in the canvas. In the latter case,
the lines form a symbol, e.g. a line down the canvas, which
is interpreted by the system as a command, e.g. scroll the
Remember that you can type in strings if
your handwriting with the mouse (or pen) is too messy. To
do this, gesture a caret (^) and the system will prompt
you with a text input box.
NOTE: The tutorial assumes that you have
a pen interface. To check the equivalent operations on the
mouse/keyboard, refer to the reference section of the Help,
specifically the section 'Pen and Mouse', where there is
a table of operations.
Using the tool for your own designs
Once you've understood how to use DENIM
and what it can do, try putting it to work on one of your
own designs. We suggest that you produce the initial design
in DENIM and evaluate it with some users. One of the advantages
of DENIM is that no special experience is required to run
the storyboard. It acts just as a website would do. Alternatively,
try Activity 8.6 using DENIM instead of a paper-based storyboard
(See page 264 in Interaction Design). The activity at the
end of Chapter 8 would also be a good example to try.
Comparing a paper-based
and electronic approach to storyboarding
Having used a paper-based approach and the
DENIM approach to developing and evaluating an initial design
of a website, compare how they vary, assess their advantages
and disadvantages and choose the one you prefer. You might
also like to discuss this with your colleagues.
You can vote for your preferred approach
below. The results will be displayed dynamically after you've
voted. Any further comments you have on this issue, you
can send in to us and we'll post a representative sample
of your responses to the students corner.