I used to teach a college course on Web design to incoming freshman. Part of their class project was to create a paper prototype of their web site. The prototype included everything from page names to what pages linked to others. I still start any web design project in this manner. In fact, when I write food & wine articles for magazines, my first draft is usually on a legal pad and not in a word processing program. I don’t know why I always begin with paper, but it’s a habit I haven’t been able to break. Of course, some of the best ideas have been scrawled on cocktail napkins in bars. I remember a scene in AMC’s Mad Men where our male lead is scribbling ideas on a napkin next to a martini.
It turns out some of your favorite web sites also got their start on paper. Sean Flannagan at Deeplinking has compiled a small gallery of Web 2.0 paper prototypes, including Twitter and Flickr. It’s fascinating to look at the evolution from the initial idea to what we know today. Twitter was originally thought of as Stat.us for example.
I followed an intriguing trail of links today to explore paper prototyping. I started with a post at WebWare that led me to Sean’s post at Deeplinking. Sean’s post, after fascinating me with his paper prototype gallery, led me to a 2007 article by Shawn Medero at A List Apart. Shawn’s article on Paper Prototyping focuses on why it’s a good idea to use paper to initially design your UI. Not only does paper allow easy iterations, but by being non-technical, it invites the average user into the design process.
When I teach a class now on Web 2.0, I often refer to the Common Craft videos. They’re the ones that describe new technology in simple terms – using paper. Some things never go out of style.