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:
![]()
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:
![]()
An alternative design called Pizza:
![]()
Option Bubble:
![]()
Option Ink:
![]()
Collaborated with Carnaven Chiu.