You heard it right…I use Keynote to develop iterations on user interface design for our products and front end retail site. This method saves us a ton of time and cost in design and development. I used to use PowerPoint, but then converted to a MacBook Pro a few months ago, and now I’m hooked on Keynote.
Before I get into how this works, I need to mention how cool is it that you can control your Keynote slide presentation with your iPhone by downloading the Keynote Remote app for like two bucks. Just had to get that off my chest…
Ok, here we go:
1. Start with a basic wireframe – you’ll need to spec something out for your designer to get started. Give them the basic elements of where you want navigation, sub-navigation, and general text and image requirements. You basically have your header, body section and footer area. You also might want to have an interior page concept as well. Below I am showing you how I went from a PowerPoint slide (at the time) to the almost final design:
Here is another example of how I started designing and concepting our SiteJuice™ tool in Keynote and how it transformed into Photoshop:
2. Research web icon sets and photos you want to use – I like to use actual icons and images in my concepts to portray the website as real as possible. This way you can see how it would actually look, and then play with size and location. Go to istockphoto or similar and look for “web icons” and you’ll find thousands. I ended up with the Universal icon set, and purchased about nine different sets. You can do a screen capture to use in your screenshots while concepting – just make sure you go and buy them later 
