Keeping a Design Scrapbook

I came across a great advice by Andy Clarke in his book Transcending CSS:

“Like many designers, I now keep paper scrapbooks that are filled with cuttings from magazines or newspapers, photographs, postcards, and even old chocolate wrappers—anything that catches my eye because of interesting typographic treatments, unusual shapes, or color combinations.

Keeping a paper scrapbook, rather than an electronic one, can be useful not only for collecting scraps of design inspiration that can suggest new ideas for Web page designs but can also result in the often accidental and random combination of elements that can sometimes occur. […] This is an effect that rarely happens when you scan design elements and store them on your computer.”

Scraps for developers

Andy also encourages developers to keep scrapbooks to

“better understand the job of designers by making both think about aesthetics. Both know that their work will have a critical influence over the quality of the design final and that their combined efforts are the key to that quality.

Scrapbooks are tactile, solid explorations that can help us all better appreciate how important typography, white space, and even the simple alignment of elements inside a grid can be to the overall polish of a design. When everyone involved in the creative and technical process thinks more about aesthetics, we will all take greater care to achieve that polish.”

What Andy advocates here is both sound and feasible. Even though he somewhat downplays electronic scrapbooks, I think they are immensely helpful. My tool of choice is Microsoft OneNote 2007. I gave the previous version a try, but wasn’t impressed. OneNote 2007 seems much more efficient in how it lets you organize stolen borrowed artifacts. It also comes with some advanced features such as grabbing a screenshot, OCR’ing it and copying the text.

In fact, I now have two kinds of scrapbooks: one for plain-paper cut-outs and one for screen clips. The print media is still much more powerful than the web in terms of design, and I often come across interesting design elements I can think of emulating on the web.

My buddy Brent has recently pointed me to a large collection of UI rips for geek inspiration. How about starting a digital scrapbook with this collection?

About the book

While we’re discussing Transcending CSS (official site), I’d like to say it’s the most visually stunning book on web design in my collection. Typography, photography and layout are fascinating! I’ve owned several Web Design 101 books. Transcending CSS is a 300 or even 400 level.

What I love about this book is that it goes way beyond CSS trickery. Granted, there are plenty of advanced CSS approaches explained. But Andy covers a wide range of other topics, my favorite being grid-based design (Khoi Vinh has introduced some very interesting techniques for designing with grids on the web. You absolutely have to go through Khoi’s Grids are Good presentation).

Reading this book is like sitting in an art class. Perhaps some people will dislike these departures from the subject, but, in my opinion, they are appropriate.

Sept 17, 2007, update: forgot to link to the mentioned UI collection.