Movie productions always begin with the storyboards, because they ensure that everybody on the crew is visualizing the production in the same way — because a picture is worth a thousand words. DENIM is an unusual piece of software that does for website design what storyboards do for movie productions. DENIM comes out of the University of Washington, and it keeps getting better. (Version 2.1 was just released.) DENIM serves one purpose: the rapid prototyping of all proposed pages of a website. DENIM works best on a tablet with a stylus, but it is usable with an ordinary mouse as well. With DENIM, you create pages that look like this:

The thing is, the words that are drawn in blue are live links. Clicking on them takes you to other pages. (Not here, actually, but there’s a link below to the live demo from which these images were taken.)

How cool is that? Well, let us count the ways:

1. It’s better than using physical slips of paper or Post-it notes, because Post-it notes cannot be hyperlinked. With Post-it notes, everyone is left to assume for themselves how the hyperlinks are supposed to work, and that is often an area of miscommunication.
2. It’s also better than using physical slips of paper because virtual teams can access the prototype instantaneously across the ‘net.
3. It’s better than using an actual HTML markup tool (like Dreamweaver or FrontPage) for prototyping because it requires no particular skill level. Anybody with a steady hand can do the DENIM prototyping.
4. It’s much faster than using an HTML markup tool, too. So, you’ll get instant gratification, or instant grumbling, as the case may be. The main cause of website project failure is scope creep. The devil is in the details, and a website project can quickly get out of hand. A tool like this is exactly what’s needed to make sure that everybody on the project is in alignment in terms of the number of pages involved, and the complexity of those pages, as quickly as possible.
   
5. This one is going to sound perverse, but the rough, hand-drawn nature of DENIM makes for much better prototypes than anything that would be produced by an actual HTML markup tool. The reason for this is something called SMOP. SMOP stands for “a small matter of programming.” There is a phenomenon that happens time and again when non programmers see a nonworking prototype of a user interface that approximates what the actual user interface will look like. They tend to assume that putting together the prototype was 80% to 90% of the work, and that all that remains is a “small matter of programming.” Ha! Well, with DENIM, it is painfully obvious that the prototypes are just that, prototypes.
6. A DENIM project is managed as a single, large canvas that contains all of the pages. The pages are all connected by lines. In essence, it’s a giant site map that can be zoomed in on and scrolled around. It’s so simple, even a caveman can do it.
   
7. At any time, a DENIM prototype can be exported as a set of individual HTML pages. This gives any interested parties a way to experience the prototype for themselves, in the way that they would experience the actual website to be. See the example at dub.washington.edu/projects/denim/denim_daily_files/page149.html

Who Benefits? Every single stakeholder benefits from seeing a clear and complete visualization of the entire site map so early in the project cycle. With this information…

• The System Analyst can quickly count up the similarities and differences between the various pages in order to determine which pages will be produced by an engine of some sort, and which pages will be done as custom one-offs. This is a major factor in determining the resources required and the estimated development times.
• The Quality Assurance manager gains an immediate understanding of the scope and complexity of the project, which again drives the planning and estimating of time and resources.
• The Copy Writers can see exactly how much work they are in for.
• The Lawyers get an early opportunity to advise on the issues that will need to be covered in the terms of service and privacy policies, etc.
• This is a huge boon to the Marketeers and Business Analysts, who can now get an early say in how the site is designed. For example, they can ensure that the site map includes appropriate (trackable) landing pages for the various ad campaigns they have in mind, that those landing pages have a simple and direct call to action (a single outbound link), etc.
• And best of all, the Customer (whoever holds the purse strings) gets to enjoy the harmony of a clear and complete vision that is shared by all of the team members, together with the valuable early feedback and honest estimates that it generates.

DENIM - “An Informal Tool For Early Stage Web Site and UI Design”

Latest Version: 2.1 (4/28/2007)
Platform: Windows 95, 98, Me, NT 4.0, 2000, or XP, including the Tablet PC – or – Solaris, Linux, and other Unix-like operating systems (uses Java 1.4).
Author: The “dub” (design, use, build) team at the University of Washington.
Price: Free
Download Link: dub.washington.edu/projects/denim

Read more: Design, Productivity