DENIMA Sketching Tool for Prototyping
Web and Desktop UIs
Mark Newman and Jimmy LinGroup for User Interface Research
UC Berkeley
July 8, 1999
DENIM goalsReal, deployable systemSupport for web site designExpanded capabilitiesEven more informal than SILK
SILK
Web Design Study
Visited design firms 4 Design houses, 1 large internet company
“Ethnographically-inspired” interviews with designers
4 “UI” Designers, 3 “Graphic” Designers, 4 Hybrids
Interviews focused on specific projects, artifacts
“Take me through a recent project” Artifacts were collected where possible
Design Specialties Information design
structure, categories of information
Navigation design interaction with
information structure
Graphic design visual presentation of
information and navigation (color, typography, etc.)
NavigationDesign
InformationDesign
GraphicDesign
Design PhasesDiscovery
Design Exploration
Design Refinement
Production
Assemble information relevant to project
Explore alternative design approaches (information, navigation, and graphic)
Select one approach and iteratively refine it
Create prototypes and specifications
(Hand off to implementers)...
Design Phases and DENIM
Discovery
Design Exploration
Design Refinement
Production
info
rmatio
nd
esig
n navig
atio
nd
esig
n
gra
ph
icd
esig
n
DENIM
oth
er
tools
Focus of DENIM: Early phase information and navigation design
Design Implications
Designers collect and structure large amounts of information
Need support for information designDesigners produce intermediate artifacts
Focus on creation of artifacts appropriate to design phase
Designers sketch to rapidly explore design alternatives
A sketch-based tool will be helpful in early design
Expression more important than precision
DENIM : Semantic Zooming
Storyboard view: several pages visible, navigation apparent, some page detail
ToolsPan and zoomPencils
Generic pencil for sketching “Event pencils” for sketching arrows
associated with particular eventsRubber stamps
For inserting components Built-in components (e.g. buttons) can be
sketched
Storyboarding
Transition arrows also represent different event types
Supported: Right click Double click Timer Mouse over/off Animation
3 sec
1
Edit…Delete
Components
Used for custom widgets and reusable sequences of panels
Internally structured as storyboards
Can have named eventsStoryboard1 - DENIM
cancel cancel cancel
done
Using componentsPick up component’s rubber stampStamp component into panel or
background
Built-in components (buttons, etc.) can also be sketched
Design Specialties
Information Architecture
encompasses info & navigation design, also focuses on content
User Interface Design
also includes testing and evaluation
InformationArchitecture
User InterfaceDesign