The SpoolCast with Jared Spool

The SpoolCast has been bringing UX learning to designers’ ears around the world since 2005. Dozens and dozens of hours of Jared Spool interviewing some of the greatest minds in design are available for you to explore.

Episode #81 Prototyping Experiences

September 23, 2009  ·  39 minutes

Listen Now

Download the MP3

Todd Zaki Warfel has just finished two years of research into the tools and processes used in prototyping web sites. His findings will be published in a book due out this fall and we've asked him to give a full-day workshop on the topic at UI14. Todd sat down with us to talk all about prototyping tools and processes, and previews his upcoming workshop at UI14.

Show Notes

Todd Zaki Warfel has just finished two years of research into the tools and processes used in prototyping web sites. His findings will be published in a book due out this fall and we've asked him to give a full-day workshop on the topic at UI14. Did you know some people are actually building prototypes in Microsoft Excel? It's true. "People are using what they have at their disposal and what they are comfortable with," Todd tells me.

In the podcast, we discussed a number of the more popular tools that are being used today, from Adobe Fireworks, to Axure RP, to good old PowerPoint. Todd doesn't think your choice of tool is important if you are able to communicate your ideas effectively to your audience. He thinks it is worth knowing the capabilities of a few other tools in the event you need to do something in the future that your current tool can't handle.

I got Todd to reveal the process his own shop, Messagefirst, is using to prototype. It may surprise you that they start with rough, black and white sketches which they share with their clients both early and often. Whereas some design shops may work hard on a prototype for three months before first showing it to their client, Todd thinks that's a bad idea. There's nothing worse than diving deep into a design direction only to have it unilaterally shot down in the first review.

Instead, you need to get your client to give you lots of feedback very early in the process, starting with basic and rough sketches. It will save both sides a lot of time, effort and frustration. Once the design direction is solidified, Todd and his team move their prototypes into color and interactivity. The Messagefirst crew is now often jumping straight to HTML, CSS and JavaScript for the higher fidelity mockups.

Todd tells us that someone with basic HTML skills can (and have) learned to create high fidelity prototypes in just a couple weeks of effort. The secret is the availability modular tools, for example, CSS frameworks like the 960 Grid System and JavaScript libraries like jQuery. This move to code earlier in the process is becoming more and more popular around the web.