I have a confession to make. I don’t always prototype the Web sites that I build. There, I said it. I’m often so eager to start coding that I fail to plan out the site structure or think about the interaction design in advance.

Although prototyping can save time and headaches in the long run, it’s often seen as an obstacle. If only there were an easy-to-use tool that allowed me to prototype my designs quickly…. Well, as it turns out, there is.

Download it

Version 1.1 of DENIM was released on March 31, 2003. Version 1 is available for the Mac. Version 1.1 is available for Windows and UNIX. Download it for free here.

DENIM is a pen-based prototyping tool developed by the Group for User Interface Research at the University of California at Berkeley. It allows users to quickly sketch out their ideas onscreen. However, unlike traditional pen and paper, DENIM allows the sketched pages to be linked and viewed as a working prototype. Here is a quick rundown of some of the features.

The first thing you will notice about DENIM is that the interface has been designed for input via a stylus. Although this makes the sketching process more natural for the user, it challenges the majority of us who don’t have a drawing pad and stylus attached to our computer. Fortunately, DENIM is still usable—and useful—for those using only a keyboard and mouse.

DENIM provides a small group of tools to create prototypes, including a pencil for sketching, an eraser for removing unwanted strokes, a rubber stamp for adding text, and a hand to manipulate objects.

One of the unique aspects of DENIM is its zoom option. A slider along the left side of the interface allows you to easily move from the broadest view (Overview) to the narrowest view (Detail) of your site. This means that you can quickly see the overall site structure and then zoom in to edit a particular page within that structure.

Output options
After you have built your prototype, you can output it as a set of HTML pages that can be viewed by anyone with a Web browser. This takes a lot of the headache out of sharing your ideas, since you don’t have to worry about whether the person you are sharing it with has the specific application needed to view it.

Creating a prototype in DENIM
Now that I’ve outlined the basic features of DENIM, it is time to build a simple prototype.

Create a page
After opening the DENIM application, select the Menu wheel at the top left (you can also right-click from within the canvas) and choose Insert | Page. You will then be presented with a window that allows you to enter a title, heading, or body text for the page. For this example, I will type Home, select the Title option, and click OK. This creates a new page on the canvas with the title of Home, as shown in Figure A.

Figure A

Add elements to the page
Next, I move the slider on the left side of the interface to the Page position. This will place my blank Home page in the center of the canvas and make it large enough to edit easily. Now, I select the pencil from the Tool area at the bottom of the interface and begin sketching a layout. For this example, I’m making a page that has a two-column layout, so I sketch those areas onto my page with the pencil.

The left column of my page will be for navigation, so I select the Rubber Stamp tool and begin adding the names of my links. For this example, I will use About Us and Contact Us.

The right column will be for content, so using the pencil tool, I sketch the layout for the content. The resulting page looks like Figure B.

Figure B

Add other pages
I add the About Us and Contact Us pages by following the same steps I used to create the Home page.

Create links
At this point, I need to create links between the navigation in the left column of the Home page and the About Us and Contact Us pages. First, I switch to the Storyboard view by moving the slider on the left side of the interface. This allows me to see all three pages on the canvas at once. Then, using the pencil tool, I draw a line from the link text in the left column of the Home page to the page to which the link points. You’ll notice that the lines turn green to indicate links. I also draw lines from the Back text on the About Us and Contact Us pages to the Home page to create links back, as shown in Figure C.

Figure C

Running it
DENIM allows me to interact with my prototype by using the Run command. I just click the Menu wheel at the top left and select File | Run. This launches a small browser that lets me click around my DENIM site, as shown in Figure D.

Figure D

Exporting as HTML
Once I’m satisfied with my new DENIM site, I can export it as HTML and share it with others. To do this, I click the Menu wheel, select File | Save As, enter a filename, select Export To Web from the Files Of Type menu, and then click Save. This creates a small set of files that can be zipped and distributed to anyone with a browser.

There is a lot to like about DENIM:

  • It’s easy: Just about anyone can use it regardless of technical or artistic abilities.
  • It’s fast: Your ideas can be communicated very quickly.
  • It’s accessible: Your prototype sites can be viewed by anyone with a Web browser.
  • It’s free: DENIM is free for noncommercial use.

The only drawback I’ve been able to identify is that DENIM has been designed to be used with a drawing tablet and stylus. Although this isn’t a drawback for someone who already has those tools, it does create a small learning curve for the rest of us.