Tuesday, April 29, 2008
When I designed the first product (a web-based document management system) for Bee Documents back in 2002, I started with pen and paper and then used Adobe InDesign to complete the prototype.
Since that time I have used Apple's Keynote software to do design and prototyping for dozens of websites and desktop applications. For me it has several advantages over Photoshop, which is the classic tool of choice for this kind of work:
- I find it much faster to draw and make adjustments with Keynote.
- The effects (rounded corners, tinted fills, gradients, drop shadows) are all very Mac like.
- I can link up the Keynote presentation and add animated actions to simulate the interactive behavior of the application.
- People who are not designers can participate in the design with me since it is intuitive to drag things around and make changes using Keynote
As an example, see the following two screenshots. The image on the left is the Keynote file I used to design the "T2" website. This was one of several possible designs that I can created. When I played the Keynote file, I could interact with the links and videos as if it was a real website. The image on the right a screen capture of the real website.
However, as well as the current process is working for me, I keep thinking about cinematic software, touch interfaces, animation, motion, and "No Limits Design". The technical barriers are falling for this kind of software. I'm concerned that prototyping tools that encourage page-by-page designs may limit creativity.
To that end, I have been experimenting with video as a prototyping tool as well as some motion graphics tools such as Apple's Motion.
Several months ago, I transformed the 3D Timeline idea that I had sketched into the following video using Apple's Motion:
I wanted to be able to test readability of the timeline at distances and get a sense for whether this would be a useful feature that helps solve the challenges of presenting timelines or if it was only eye candy.
...to be continued...