Monsters, Ink.

October 7 2011

In this project we looked at how thumbnails can be used to visually identify a code file from a collection. Today generic icons are used for each file type as thumbnails. File name is the only way to tell them apart. My theory is that, with a thumbnail that visualizes a file’s semantic structure, even if it’s abstract, it adds another recognizable dimension to a developer who knows what to look for.

What are the aspects that a programmer cares about the most? We conducted a short survey among the developers in our office:

Code Thumbnail - Survey

An early experiment was titled Lollipop. It matches the size of a file and a number of characteristics to various visual features. Click here to test the prototype:

Code Thumbnail - Lollipop

An alternative design called Pizza:

Code Thumbnail - Pizza

Option Bubble:

Code Thumbnail - Bubble

Option Ink:

Code Thumbnail - Bubble Code Thumbnail - Bubble

Collaborated with Carnaven Chiu.

data visualization developer tool graphic design prototype JavaScript