Pitching ideas
I’ve been thinking quite a lot about the best way to bring an idea to life, in such a way that it can be pitched or easily communicated to a cold audience. Previously I think I’ve worked with the assumption that you either provide a static visual design, or an interactive demo.
A static visual mockup can communicate a lot about the brand, tone, exactly what is important about the service, and generally provide an intuitive reaction about whether you are hitting the right spot.
An interactive demo can generally go much further in demonstrating how a user might go about a typical scenario that your product would be used for. This can really help to communicate the concept behind the product, and how easy or difficult the important processes are.
A data driven interactive demo can be put together quite fast, but you’re still really talking about 2 – 3 days work. In addition, making rapid last minute changes and redeploying to a demo laptop can be a little more involved than is ideal, and it’s quite easy to end up unduly stressed and flapping around.
I’ve had a little revelation about how to make this whole process much more efficient. It’s really much faster to work on a design in photoshop. If you have a scripted demo, then there is a linear path about what you click on, and where you end up. In terms of what you see during a demo, there is very little difference between a real interactive demo, and presenting a linear sequence of images in a browser, set up with anchor elements to allow click through to the next snapshot. This approach is much less work, and allows quicker turnaround and less stress.
The end result looks very similar to a typical person. They see a user clicking elements of a page, and progressing through a scenario. Generally it means that clicking anywhere on the interface will progress to the next page. If you require a little more control, you can add anchor elements, style them to have dimensions and absolute positioning to overlay the main image and provide hotspots. This can provide conditional branching in your demo – for example, clicking the logo to return to the start of the demo from any page.
It feels a little like cheating, but is actually much easier and allows you to focus more on the design, and the aspects of the service that you want to capture and present.

I tend to agree with you. Producing a full data-driven demo can take too long – unless you’ve already built a framework for such demos.
Why would you not use an Image Map to mark our your hotspots? My understanding is that PhotoShop supports image maps natively (though I’ve never tried this myself). This would mean using HTML generated by a tool, and I suspect that would stick in your throat
Comment by Martin, April 17, 2007 @ 8:54 pm
That actually makes perfect logical sense, and is probably a great idea. I just… can’t quite bring myself to. Please don’t make me… please!
Comment by Oli, April 18, 2007 @ 8:39 am
Hey, havn’t see your blog in a while, lots of nice stuff to read about!
You know I am a bit of a flash freak, and so I generally knock up any kind of prototype in flash. One danger of doing this is that often your boss or the client doesn’t quite understand what a prototype is. They see how quickly you made it work, pat you on the back and say, “Cool! Now just add in a couple more things and its done!” Because of this, sometimes my nice prototypes become the basis of the real thing, which makes updating and extending a real pain…
Comment by Matt, May 21, 2007 @ 2:24 am