DENIM

1
DENIM

• A Brief Tutorial
• By Philip Luedke

2
Introduction

• An Informal Tool For
• Early Stage Web Site and UI Design
• DENIM is an informal pen-based system that helps
  web site designers in the early stages of design.
  Using DENIM, designers can quickly sketch web
  pages, create links among them, and interact with
  them in a run mode.

3
History
Denim was developed by a group of people that
conducted a study of web site designers and the
practices they use. They found that designers
conceptualize and plan sites at different levels
of construction. They found that designers sketch
at all levels during the early stages of design.
They developed DENIM to aide in this
process. Release History Version 1.1 - March 31,
2003 Version 1.0 - November 21, 2001 Release
Candidate 1 - March 29, 2001 Developed
by Group for User Interface Research, Computer
Science Division University of California,
Berkeley Mark W. Newman, James Lin, Jason I.
Hong, and James A. Landay,
4
Availability and Cost

• Download it FREE at
• http//guir.berkeley.edu/projects/denim/download/
• FREE!
• Lets Download it Now!

5
CompatibilityVersion 1.1

• Denim Will Run On These Operating Systems
• Windows 95, 98, Me, NT 4.0, 2000, or XP,
  including the Tablet PCreleased March 31, 2003
• Mac OS X 10.2released June 5, 2003
• Solaris, Linux, and other Unix-like operating
  systems
• DENIM runs on any platform supported by Java 2
  version 1.4. If your system can untar files,
  download the Solaris or Linux version.
• However
• DENIM does not integrate with other tools

6
System Requirements

• Java 2 version 1.4 (can be downloaded with DENIM
  for Windows)
• Any operating system that supports Java 2 version
  1.4, such as Windows, Mac OS X, Solaris, or Linux
  
• At least 256 MB RAM
• A mouse
• Recommended System Specifications
• Java 2 version 1.4.1_02 or later (can be
  downloaded with DENIM for Windows)
• Any operating system that supports Java 2 version
  1.4, such as Windows, Mac OS X, Solaris, or Linux
  
• At least 384 MB RAM (on the Mac, 512 MB is
  recommended)
• A pen tablet that can emulate a mouse

7
DENIM Window

• The DENIM Window has three areas
• Zoom Slider that allows the designer to zoom in
  and out in detail on the site.
• The Toolbox that contains the editing tools
• The Canvas which is where the site is sketched out

8
Zoom Slider

• The Zoom Slider allows the designer to switch
  views easily
• DENIM has five main zoom levels
• Overview
• Site Map
• Storyboard
• Page
• Detail
• The default view is the Site Map view
• Switch between zoom levels in two ways
• Press Page Up or Page Down on your keyboard to
  zoom out or in
• Click on the zoom level you want

9
The Tool Box

• The Tool Box has four tools
• Hand - for dragging the canvas around
• Pencil for drawing and creating links
• Text Field Stamp for adding Text Fields
• Eraser for removing unwanted elements
• The Broom in the bottom right corner re-arranges
  the tools neatly
• Click on a tool to pick it up and click on the
  toolbox to drop the tool there

10
Using DENIM

• Denim was created with a pen interface in mind.
  It is possible to use a mouse interface but not
  as friendly. For the purposes of this tutorial, I
  will only present commands available thru mouse
  interaction.
• There are two basic ways to issue commands to
  DENIM.
• 1. Access a command through pie menus
• To open a pie menu
• right click on the canvas, or click on the menu
  button in the upper left-hand corner of the
  DENIM window.
• 2. Gesturing, Gesturing means clicking and
  drawing a symbol that stands for a command.

11
Pie Menu

• Right clicking on the canvas will open the Pie
  Menu
• All Commands are available thru this menu.

12

• Gesture Commands
• Drawing these Gestures with the arrow will cause
  the corresponding actions.
• Insert a Page on your canvas

13
Adding a Page

• Gesture a Carat on the Canvas, Type in the Page
  Label in the opened text box.
• Add another page by writing a word with the
  Pencil Tool.

14
Creating Links Between Pages

• Two types of Relationships between Pages
• Organizational Arrows (Grey Arrows) created by
  drawing lines from a label of a page to another
  page.
• This just denotes a relationship and is not a
  navigational link.
• Navigational Arrow (Green Arrows) created by
  drawing an arrow from a phrase, word or scribble
  to another page. This creates an active link
  which will navigate to that page when in Run
  Mode
• Changing Link behaviors Right clickin on the
  dot at the base of a navigational arrow will
  bring up a Pie Menu that will have an option for
  arrows. This will let you change the action to
  activate the link to mouse over or other choices.
• Create a Link between the two pages you created.
• Add some Text to one of the pages and create a
  link from that text to the other page by drawing
  a line from the word to the other page.

15
Run Mode

• DENIM also allows designers to interact with
  their site designs through a run mode .
• Right click on a selected page and choose Run.
• This will open a DENIM Browser Window
• This Browser functions as a normal Browser would
  by navigating between links and it allows the
  designer to test the pages.
• Test the link you created by opening that page in
  run mode.

16
Advantages/Disadvantages Compared to Other
Diagramming Tools
Advantages Disadvantages
Free Pen based, Hard to Use without a Tablet
Simple Interface Limited in Abilities
Quick, Flexible, Freestyle Designing Not Compatible with other Programs
Run Time Mode Very Rough Looking, Not Presentable
17
Personal Experiences

• I found DENIM to be a novel idea and think it
  could be very beneficial in the beginning stages
  of development if one had a Tablet PC to run it
  on. I found the mouse interaction to be
  cumbersome. I also found that some of the tools
  were ineffective at times. Sometimes the eraser
  would work and sometimes it would not. Usually
  the same process could be achieved using the menu
  pie, but this was cumbersome as well.
• The system locked up several times causing me to
  lose work I had done and forcing a reboot to get
  back in to it.

18
Resources

• DENIM Reference Page http//guir.berkeley.edu/p
  rojects/denim/docs/quick_ref/quick_ref.html
• DENIM - Documentation - http//guir.berkeley.edu/
  projects/denim/docs/
• James Lin, Mark W. Newman, Jason I. Hong, James
  A. Landay, "DENIM An Informal Tool for Early
  Stage Web Site Design." Video poster in Extended
  Abstracts of Human Factors in Computing Systems
  CHI 2001, Seattle, WA, March 31-April 5, 2001,
  pp. 205-206.PDF (144 K) Video