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.

Matt Machell

Matt Machell A man of many talents, Matt has been a web designer, technical editor, and jewellery picker. He is currently on contract for the Birmingham City University, producing pages for research centres.

He has tech-edited a dozen books on web design and development for glasshaus, Apress and Sitepoint.

He likes music with loud guitars and games with obscure rules.

His website can be found at: http://www.eclecticdreams.com

He lives in Birmingham with his girlfriend, Frances, and a horde of spider plants.

See All Postings From Matt Machell >>

Reviews

And here's one we prepared earlier ...

May 30, 2003 by Mark Grady

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:

http://guir.berkeley.edu/projects/denim/

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.

Wireframing Extensions for Dreamweaver

May 30, 2003 by George Petrov

Here is also a list of wireframing extensions that will allow you to make wireframes directly in Dreamweaver and other Macromedia products:

Wireframing 1.0 (Eric Ott) (Dreamweaver)
Nawt (Not Another Wireframe Tool), V2.0 (Cold Fusion)
WireFrame 1.0 (Fireworks)

You must me logged in to write a review.