Transcript denim - Personal.kent.edu

DENIM
A Brief Tutorial
By Philip Luedke
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.
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,
Availability and Cost
Download it FREE at
http://guir.berkeley.edu/projects/denim/download/
FREE!
Let’s Download it Now!
Compatibility
Version 1.1
Denim Will Run On These Operating Systems




Windows 95, 98, Me, NT 4.0, 2000, or XP, including the
Tablet PC
released March 31, 2003
Mac OS X 10.2
released 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
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
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
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
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
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.
Pie Menu


Right clicking on the
canvas will open the
Pie Menu
All Commands are
available thru this
menu.



Gesture
Commands –
Drawing
these
Gestures with
the arrow will
cause the
corresponding
actions.
Insert a Page
on your
canvas
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.
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.
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.
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
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.
Resources



DENIM Reference Page –
http://guir.berkeley.edu/projects/denim/docs/quick_ref/q
uick_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