DENIM: The zoom level named  "storyboard" allows you to see and edit a set of pages along with its links. It's appropriate for creating links between pages. Screenshot of the author's computer showing the example available at DENIM's page. Click on the image to enlarge it.

Those of us maintaining a web site have to cope with the need of redesigning the pages from time to time (yes, I know, mine is already in need of a redesign), adding new resources or designing new sections.

But, don’t be fooled, be it FrontPage, Dreamweaver or whatever system we use to build our site, in the end, or it’s best to say, in the beginning, there you have the good old sketches made with the friendly and well known pen and paper.

James Landay, associated professor at the University of California in Berkeley considers that the work in the early stages of creation or modification of a web site takes place usually through sketches and drawings made on paper.

“Pen and paper is sketchy, ambiguous and fast” comments Landay in the Wired News article “Etch a Site as Easy as Pie” by Leander Kahney. “Drawings are inherently ambiguous. The ambiguity enhances creativity. It encourages people to look at different options”.

For this reason, Landay and his colleagues at the GUIR (Group for User Interface Research) have put in place a project called DENIM that allows you to sketch a web site or an user interface by hand, using a graphics tablet , the tablet PC or just using the mouse.

Up to now the thing doesn’t appear to be astounding, but DENIM generates, from the drawing, a fully functional, albeit sketchy, web site you can query and modify on the fly. The goal is to quickly create a prototype allowing you to discuss with your customer the ideas and possible solutions to what the web site is intended to do. This way you can get immediate feedback and play with the ideas in order to modify the skeleton and functionality of the site before you begin spending more energy on its construction.

The DENIM built browser allows you follow the links between pages and move through the web. The sketch can also be exported to HTML to be published in Internet (see for example the web_site created withe DENIM and published in the WWW) 

You can download DENIM for free (between 5 and 12 Mb depending if you also download the Java2 SDK). The source code is also available for free. There are Windows and Linux versions.

DENIM: Overview of the generated web site. You see only the pages and the links. Screenshot of the author's computer. Click on the image to enlarge it.	DENIM: Page level view. Notice the slider position to the left. The zoom allows us  to edit the features of ful pages. Screenshot of the author's computer. Click on the image to enlarge it.	DENIM: Deatil level view. You can edit the contents of the page. It's the maximum detail the zoom has. Screenshot of the author's computer. Click on the image to enlarge it.

DENIM has a fairly simple structure. On the left side there’s a zoom slider which allows you to select the zoom level you want to use (see the images in the graphical version of this issue). Changing its position (up less detail, down more details) you change not only the zoom of your sketch visualisation but the level of conceptual work.

The rest of the screen is made up of the canvas on which you draw, a curious pie-chart like menu, where each portion is a menu option and a toolbox where the four tools available reside: pen, eraser, labeller and a hand that allows you to move the draw under the screen à la Acrobat. (Between you and me, I don’t understand why they use this pie menu, there’s no improvement with respect to the traditional one and it’s actually more boring.)

So, this way you, can begin by drawing the general scheme of the web site with a few lines for the main page and the basic sections of it, to then increase the zoom and edit page per page the links between their respective contents that can just be some doodles symbolising the images or written texts.

The interesting thing is that you can erase, change and interact continuously, trying new ideas as they appear in your mind, without writing a single HTML line, just by drawing as you would do on paper.

According to its creators, DENIM is ideal for the Tablet PC, since in it, the natural way of input is the pen, mimicking the usual way of sketching on paper. A normal PC with a graphics tablet also gives good results, although you can use it also with the mouse, with poorer results.

The latest version which I’ve been playing with for a few days is quite attractive to use, although, in my computer, it’s quite slow and slightly unstable.

The idea has a great potential, even though it will probably need further refinement. Specially attractive for web designers is the possibility to sit down with the customer drawing some sketches and the links between them to discuss the relevant ideas, changing it while you’re working until you get the appropriate functionality.

For those of you interested there’s only one possible recommendation, download DENIM and play with it. Only this way you’ll get the criterion to know if this idea has its own future or it’s just another nice idea.

Links of this issue: