Mozilla recently collaborated with the Netherlands-based design firm Sofa to refresh some of our OS X application and file system level icons for both Firefox and the wider Mozilla platform. The result of their work is really fantastic:
Disk Image (Firefox), large version
Crash Reporter (Mozilla Platform), large version
Software Update (Mozilla Platform), large version
I think the software update icon in particular is really striking. From the overall Escher-esque Mobius Strip form, right down to the slight reflection from the light in the dock (the software update icon is only shown running), this icon is gorgeous. I love that the icon relies on shape alone to convey meaning, and it is as much sculpture as it is icon design.
The friendly folks over at Sofa agreed to let me post some of their very early work, to expose the overall process that goes into crafting an icon. They start with very conceptual brainstorming about what shapes and metaphors to use, clipping out images that seem relevant, or other icons that try to convey the same ideas.
This research is then combined with some initial sketches to begin to form around a particular idea for the icon:
Here is the initial sketch of the software update icon:
and of the crash reporter icon:
Something that is critical to the success of any form of design work is quickly iterating through a wide range of options. While the first round of proposals to Mozilla only included 4 choices for each icon, many more were initially produced. Here are all of the initial sketches for the software update icon (14 different concepts)
and for crash reporter (12 different concepts):
After selecting the overall concept that we want to go with from the proposals, the icon is produced at a higher fidelity. The icon then goes through several high fidelity iterations, modifying aspects like colors, textures, and levels of reflection. Eventually the final iteration is produced, and we try to quickly ship the freshly made eye candy to our happy users for their visual consumption.
Other Platforms Coming Soon
We decided to start this refresh with OS X first, partly because the Mozilla platform icons (crash reporter, software update) appear at a higher resolution when they are shown in the Dock, and partly because OS X users currently tend to be a bit more discerning when it comes to high quality visual design. We are now in the process of adapting these icons to the specific visual styles of Linux and Windows, and will be landing those new icons for Firefox 3.1 as well.