{ChrisRenner.com}

As someone who considers himself a developer first and a designer second, I've not previously put a lot of thought into using graphical tools (outside of HTML and my existing dev environment) to prototype front-end layouts for customers.

However, there are some major advantages to mocking up with a stand-alone tool. Once I have a business problem to solve, I will generally build the front end forms as I think they should exist, and demo them to the customer. There are two upsides, the customer sees exactly what he/she is getting, and once I start actual development, I've already coded the form template(s).

Another upside is that by hand-coding your prototypes, you are really forced to learn HTML, CSS, etc. on a nuts-and-bolts level.

The downside, however, is that this is quite time consuming, and if major changes are required from my original guess, then that's even more time lost.

Over at Sitepoint.com, Gary Barber discusses 16 tools for prototyping and "wireframing", which is just another, new, Web 2.0 word for building front-end mock ups. The prices on these various tools range from free to multiple thousands of dollars, and the platforms range from desktop to completely web based.

Pencil

The most intriguing of these to me is Pencil, a free Firefox plugin (all platforms supported). My extremely raw first impression is that the tool is fairly rough around the edges, but for mockups you're not looking for a ton of spit and polish (else customers start obsessing about the details.. "can this color be that color?").

Finally, at the annual IBM Lotusphere conference this past January, I had the opportunity to sit in on a presentation by Chris Blatnik and Thomas Duff entitled "Getting to WOW... Interface First Design". These guys had some impressive "out of the box" ideas about interface design, including color pallette selection and involving your your customer in the prototype process using simple construction paper, rulers, etc. Chris's blog, Interface Matters, includes a wealth of related information for those wanting to become better interface designers.

| | | | | |