1. DENIM A Brief Tutorial By Philip Luedke

2. Introduction An Informal Tool For Early Stage Web Site and UI Design 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! Let’s Download it Now!

5. 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 Windows 95, 98, Me, NT 4.0, 2000, or XP, including the Tablet PC released March 31, 2003 Windows 95, 98, Me, NT 4.0, 2000, or XP, including the Tablet PC Windows 95, 98, Me, NT 4.0, 2000, or XP, including the Tablet PC Mac OS X 10.2 released June 5, 2003 Mac OS X 10.2 released June 5, 2003 Mac OS X 10.2 Mac OS X 10.2 Solaris, Linux, and other Unix-like operating systems Solaris, Linux, and other Unix-like operating systems Solaris, Linux, and other Unix-like operating systems 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 DENIM does not integrate with other tools

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

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

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

9. The Tool Box The Tool Box has four tools: The Tool Box has four tools: Hand - for dragging the canvas around Hand - for dragging the canvas around Pencil – for drawing and creating links Pencil – for drawing and creating links Text Field Stamp – for adding Text Fields Text Field Stamp – for adding Text Fields Eraser – for removing unwanted elements Eraser – for removing unwanted elements The Broom in the bottom right corner re-arranges the tools neatly 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 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. 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. There are two basic ways to issue commands to DENIM. 1. Access a command through pie menus To open a pie menu: 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 Right clicking on the canvas will open the Pie Menu All Commands are available thru this menu. All Commands are available thru this menu.

12. Gesture Commands – Gesture Commands – Drawing these Gestures with the arrow will cause the corresponding actions. Drawing these Gestures with the arrow will cause the corresponding actions. Insert a Page on your canvas 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. 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. Add another page by writing a word with the Pencil Tool.

14. Creating Links Between Pages Two types of Relationships 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. 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” 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. 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”. DENIM also allows designers to interact with their site designs through a “run mode”. Right click on a selected page and choose Run. Right click on a selected page and choose Run. This will open a DENIM Browser Window 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. 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. Test the link you created by opening that page in run mode.

16. Advantages/Disadvantages Compared to Other Diagramming Tools AdvantagesDisadvantages 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. 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. 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/projects/denim/docs/quick_ref/ quick_ref.html DENIM Reference Page – http://guir.berkeley.edu/projects/denim/docs/quick_ref/ quick_ref.html http://guir.berkeley.edu/projects/denim/docs/quick_ref/ quick_ref.html http://guir.berkeley.edu/projects/denim/docs/quick_ref/ quick_ref.html DENIM - Documentation - http://guir.berkeley.edu/projects/denim/docs/ DENIM - Documentation - http://guir.berkeley.edu/projects/denim/docs/ 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 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 PDF (144 K)Video PDF (144 K)Video