December, 2008


16
Dec 08

New OS X Icons, Made by Sofa

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

Diskimage-256

Crash Reporter (Mozilla Platform), large version

Crashreporter-256

Software Update (Mozilla Platform), large version

Softwareupdate-256

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.

Design Process

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:

Research for Software Update
Research for Crash Reporter

Here is the initial sketch of the software update icon:

Initialsoftwareupdate

and of the crash reporter icon:

Initialcrashreporter

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)

Software update sketches, page 1
Software update sketches, page 2

and for crash reporter (12 different concepts):

Crash reporter sketches, page 1
Crash reporter sketches, page 2
Crash reporter sketches, page 3

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.