InfiniteRed

art.through(code)

Artists keep scrapbooks of art and designs they like. You, developer, should do the same

It's common for artists, such as graphic designers, to keep scrapbooks of designs that catch their eye. This could be a logo, typeface, color scheme, page layout, or whatever else they deem of high quality. They use these scrapbooks (which traditionally were books with scraps of paper in them) to get inspiration, to help them develop their own style (by identifying likes and dislikes), or simply to browse.

Why does this matter to you, a developer?

That's a good question, and at first when I started to keep a scrapbook, I did it mainly for visual designs like web-pages. But once I started I realized it would work really well for diagrams, code, clever UI elements, or really any content that I think is exceptional.

If I'm working on a task, and feel bogged down and un-creative, I'll browse my scrapbook, getting inspiration. I look for little things that make the scraps great. I ask myself, why is this particularly good? This works just as well for a sort routine in code, as it does for logo design.

The main benefits of keeping a scrapbook are:

  • creating the habit of looking for, and identifying, content that you like, and
  • browsing the scrapbook at a later time to get your creative juices flowing

Development is a craft, half artistry, half engineering. Often in a community things become stagnant, old ideas are taken as dogma, and people stop innovating. Sometimes it's good to look at other crafts, study the techniques they use, and apply them to your work.

Creating your scrapbook

Obviously you can create a physical book to keep your 'scraps' in, but that seems a tad silly. What I did was create a folder (called scrapbook) in my dev folder (~/Dev).

In this folder, I place text files, screenshots of design or layout, or image files.

Browsing your 'book'

Coverflow screenshot

I browse my scrapbook using Finder's (OS X's file browser) Cover Flow view, and Quick Look; which works well as it displays text, images, PDFs, etc.

If you're using Linux or Windows, you can browse your images using a slide show app or just use Nautilus or Explorer.

Whatever you use, keep it simple, there is no need to over design your scrapbook.

How to organize, or better yet, not organize your scrapbook

I started with a folder structure that was complex, with a tree of categories and sub categories. After a while this became hard to use, and provided little value.

A scrapbook isn't a wiki, the important part is looking for what you like and storing it for later browsing. It isn't important to catalog all the information.

I ended up with the following folders in my scrapbook:

  • code
  • graphic_design
  • ui
  • web_design
  • words

Your needs will differ, that's a guarantee. The important part is to only organize what you need to, but go no further. I used those categories, so that I can browse my scrapbook depending on what task I'm working on. If I'm writing code, then the code folder makes sense. If I'm creating a logo, I look in the graphic_design folder. Inside each is just a bunch of files. I sort them by date when browsing.

Keep it simple

Complexity kills this technique. Make sure it's dead simple to add a new item to your scrapbook, taking no more than 5 seconds. If it takes more than that, you will stop doing it, and an empty scrapbook is a sad scrapbook indeed.

When I started keeping a scrapbook, I made things too complicated. When I found a webpage I liked, I would save the entire page (HTML, images, etc). This was hard to deal with, hard to browse, and not very valuable. It's much simpler and more valuable to simply take a screen shot of the page or part of the page (command-shift-4 in OS X).

I've been keeping a scrapbook for the last few months, and I find it useful. Give it a try, perhaps you will too.

Share:
dzone del.icio.us digg it reddit spurl simpy blinklist furl blogmarks magnolia

  1. Patrick  April 21, 2008 11:37

    This is a really nice idea! I should incorporate this into my daily browsing workflow.

    Thanks

  2. Taryn East  April 21, 2008 20:41

    This is a neat idea.

    I generally post neat snippets of my code to my blog. But to keep them alongside "found" snippets sounds like a good idea - if only to have them readily accessible for non-logged-in times (does that ever happen these days?). It would alo help to have them all at hand at the one time without browsing about or losing them to the vagaries of website permanency.

    I guess I'd be a bit worried about officially having a set of other-people's IP to browse through. Of course I know I've snipped interesting bits of code over time anyway - I work on the web - it's been part of web-culture for years now.

    But people often get nervous if you keep their code around.

    What's your view on this aspect?

  3. Todd Werth  April 21, 2008 21:40

    Taryn - "I guess I'd be a bit worried about officially having a set of other-people's IP to browse through."

    I had that reaction too, perhaps it's our culture in development. But this is truly a common thing in many forms of art, and they are basically in the same situation with IP.

    I think it's the difference between cutting out a good ad from a magazine and placing it in a book for your personal viewing, compared to using part of that ad in your TV commercial.

  4. Taryn East  April 21, 2008 22:48

    Yup - I can agree with that, but in my mind the line isn't quite so clear. It's more like having copies of the design schematics - rather than the finished products themselves.

    An artist would be able to have finished copies of artworks and not necessarily be able to construct exactly the same thing... Forgery of expensive artworks can still be a problem, but It'd be made a lot easier if you have an exact copy already.

    I can see that the owner of an expensive piece of code could get a bit worried by similar implications.

    In any case - I still agree. I think it's a good idea to keep snippets that you come across - and will definitely endeavour to pull all my bits and pieces into a coherant folder from now on ;)

    But I'm still wary of the legal implications...

  5. Nathaniel Reinhart  April 22, 2008 12:55

    I've been keeping screen shots of websites, useful stock photos, and interesting code snippets for years now. While I've never been good at keeping it organized, one thing I've often tried to make a point to do is make the scraps "findable". That is to say, keep a url with the code snippets and name the screen shots to include urls or something similar. The goal being that I knew where it came from (and thus knew where to find more good stuff) and I knew where to find the license or ask for permission if at some point in the future I wanted to use it for more then just inspiration.

    Learning to imitate the masters is a critical skill to have for any artist; being able to create a unique work in spite of that skill is what makes an artist an artist. If we are to treat code as an artistic endeavor, we should learn to imitate in style and function. If we are to treat code as a field of engineering, we should learn how to apply the patterns and practices of the industry. If we treat code as an art and a science, we should build art on top of the industrial patterns. Writing code is not unlike an artist taking found objects and making them art or an architect taking an ugly bridge and making it appealing.

    flickr.com/photos/asbestos/521378172/
    flickr.com/photos/matt-baker/67057170/
    flickr.com/photos/zebandrews/551074411/

  6. Peter Cooper  April 22, 2008 16:51

    I've been doing this for a whole too, but I use iPhoto. It's actually really good for this sort of thing as you can see a giant "grid" of your screenshots rather than have to flick through them.

    That said, I've rather fancied having a proper app for this (ideally a Web app) for a long, long time now. I keep hoping someone will make it so I don't have to. Things like Yojimbo and DevonThink come close, but no cigar as yet..

Leave a new comment:    * = Required

*
 (will not be shown)

*
*