I love drawing on whiteboards. I’m very visual, and most times, can’t think through a problem, nor plan a problem without drawing it out. I’m terrible at drawing, so its not about drawing something that looks visually interesting, simply about using visuals to organize concepts, data, and flow.

I use the same technique when planning out a new web site. I like to draw a box for each page, and use lines to link them together. I also design the basic idea of each page, either on a white board, or on paper. In the past, I’ve mocked up my pages using HTML/CSS, and at other times done it in Photoshop or Gimp. The problem is, I waste so much time fooling around with the tools, or trying to get that CSS to look just right, that it takes longer than it should to come up with my basic design.
Thankfully, I’ve found a solution to all that, which I’ve already used to design my next project. With the new tool I’ll introduce you to in this article, you can sketch out which pages you need, and the linkings between them, as well as sketch out the look of each page, all with the ease of using a pencil and paper, yet, save it for later use and editing, and turn it into a functional mockup, perfect for handing to a HTML/CSS developer and a graphic designer.

Last weekend I began looking for tools to help with wire framing a web site. While doing so, I came across Denim. The DENIM project is led by Prof. James Landay at the University of Washington. It comes from a project called Silk, which was a pen-based sketching tool. DENIM runs on Windows, Mac, Linux and Unix and runs under Java.
DENIM works with a pen/tablet if you have one (I don’t, but am now looking into purchasing one), or you can use a standard mouse. The concept behind it is to provide a tool for those who like to quickly sketch out a web site, but to add functionality to a “sketch”.

Upon loading the tool, the user will be presented with a blank canvas as the majority of the screen, a tool bar along the bottom, and six stacked icons down the left, called the Zoom Slider. The slider zooms the canvas in and out, changing the view between Overview, Site Map, Storyboard, Page, and Detail. These “views” are nothing more than different zoom levels on the canvas. All sketching is done on the same canvas, but is not always visible, depending on the zoom setting.

The first step is to start at the Site Map zoom level (I rarely use the Overview level, unless I end up with a lot of pages), and draw the names of each web page on the canvas. Drawing is done by clicking on the pencil in the toolbar, and then holding down the mouse button while drawing the letters. DENIM assists by smoothing out your lines (very helpful for someone with my poor drawing skills), and it ties the lines you use for the letters together. Should it make an incorrect assumption that you wanted letters to be grouped together, you can ungroup, and should you need to group letters or words together you can do so, all with the pen tool (see the documentation).

After you have written the names of your pages on the canvas, you can draw lines between them to show the linking. At this point, you have a very basic site map of the pages you will need. If you now change the zoom level to Storyboard, you will see blank sub-canvases appear for each page. You can enlarge theses sub-canvases using the zoom level, and show more detal of what you sketch on them.

At this point, you sketch out where the logo will go, and what each page will look like (at a high level). You can use tools to place form fields and form controls. You can also draw hyperlinks in text and then, using the pencil, draw a line from the hyperlink text to the page it links to. If you already had a high level link (from the Site Map view) from one page to another, but you now draw a specific link from the text on the page to the target page, DENIM will replace the high level link with the new link you’ve created.

Eventually, you can very quickly sketch out a complete site map, with sketched story boards, navigation and all links. Now comes the best feature. Bring up the menu (holding CTRL and clicking on the left mouse) and choose File – Run. This will load a “browser” and point it at your home page, showing what you have sketched. In this artificial browser, all hyperlinks you’ve created work. you can click on them to go to each page, and use forward and back buttons. This provides an excellent method to ensure you’ve linked the site together properly. The sketch can also be saved to HTML, and run from within the browser. This makes for a great way to pass your ideas on to a graphic designer and/or an HTML/CSS developer. The designer and developer can see exactly how the site works and what you have in mind, and begin work creating a basic web site, or a wire frame site.

DENIM has other features that I haven’t gone into, including creating components that can be reused (for headers, navigation, etc). You can also replace hand drawn text with typed text. There are shortcuts for many functions, indicated with mouse gestures.

I highly recommend you download this tool and try it out. There is a tutorial and samples on the web site. It takes a little time to get used to the gestures and tools, but I believe it to be a very useful tool in concepting a web site, with the least amount of wasted time, and then being able to use that concept to communicate with developers and designers.

For more information and to download DENIM, see the DENIM homepage.