Use Keynote to create wireframes and clickable prototypes for the web and mobile devices.

Recently, an increasing number of designers (myself included) are turning to Apple's presentation making software, Keynote, to design and prototype software applications. Here's a few reasons why and some tips learned along the way.

I should start by saying I am by no means a Keynote ‘pro’ compared with many of our web team who could use it in their sleep. In fact, when I first started working at ESPI last July, I was very surprised to find out that designers were using Keynote for laying out presentations. My surprise turned to alarm when I found out that they were also using it as a design tool to build UI designs for websites and apps. It turns out that I was absolutely wrong. Keynote is an incredibly powerful design tool. Less then one year later, I now rarely (if ever) use InDesign to layout presentations, and I have started using Keynote almost exclusively for any web layouts I do. And not just UX wireframes, but full UI designs. On a recent project, I also used it for poster mock ups, banner designs and a bunch of other formats.

Lots of yummy CSS examples in this slide deck by @andyhume: #oocss

RT @azaaza: Deck.js. Modern HTML presentations.

Brilliant slide deck by @stephanierieger: "Beyond the mobile web" ()

(via <a href="http://simonwillison.net/2009/Sep/13/effective/">Simon Willison</a>)

"Oftentimes presentation is every bit as important as the actual product itself."

(via <a href="http://infovore.org/">Tom Armitage</a>

"Because details are so hard to get right, they are hard to replicate" (quote from Dan Saffer on slide number 52)