Idea to Implementation: Wireframing and Prototyping
In this article following a professional web designer through from idea to implementation, Matt Machell shows how to produce a Wireframe and a prototype of the Site before firing up Dreamweaver. Extra time spent now, doodling the site on the back of an envelope, transferring into Fireworks, then greeking the prototype ensures the design is consistent, gets customer approval before the Site-build and saves considerable time later on.
Iterative design in web development in a concept that has been around for some time. Anyone involved in user interface design for software will already be well aware of the concept.
For anyone building web sites of almost any complexity there is a tool which can give you a head start in designing from the wireframe up - site map to low fidelity prototyping. It's called DENIM and is available from the Group for User Interface Research at Berkeley Univesity, California via this link:
It's Java based and requires the JRE 1.4 runtime. It's also a little unstable at times (after all this is a university funded project) but it has the most useful feature of allowing your to run a version of the mock-up site within the program, testing layout and usability with volunteers.
I'd recommend purchasing a digitising tablet with a stylus too, if you haven't already got one, as the program can be controlled by cursor gestures of a right-click. It allows you to handwrite and sketch into the designs initially. You can tidy up and replace what you've hand-written with text later. If you use Stroke-it, disable it for this application as the gesture conflicts can cause you some real headaches.
Once you've reach the point of wishing to create high fidelity mock-ups (the greeked sites in the article) you can export your work as HTML pages and then re-engineer them in Dreamweaver to show graphics, colours and styles you or your designers have created.
I've been using this tool professionally for around six months at the time of writing and despite it's foibles I'd definitely recommend that any web project manager or developer worth their salt get hold of a copy. It's not open source, but it is free and the time saved being able to prototye ealrier and with less effort gets you through the iterations faster.