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.

23 comments

  1. Alex, I too love the new software update icon.

    However, regarding the Disk Image icon, it seems to bump up against the “don’t change the color of the logo” guideline.

    http://www.mozilla.com/en-US/about/logo/stop.html

  2. Neat, the process that goes into this is really interesting. If you’re going to do more posts like this, I’d also love to hear about why some designs were *not* chosen.

  3. While I love Sofa’s work, and I enjoyed working with them, I must say these designs raise some questions for me. First off, the disk image looks extremely blurry (the Firefox logo outline, at least). It appears to have an inner shadow that is too soft, and lacks an actual inset; it appears completely ‘fake’. The front bevel also seems rather blurry, and not as well defined and sharp as I’m used to icons of Sofa.

    The other two icons look very neat, but the most important part is how they scale down. How does the update icon work at small sizes? Dock size? I too love it at this huge size, but does it maintain its quality? I’d like to see some more images of this.

  4. Just to clarify, I’ve magnified a portion of the disk image here:

    http://twitpic.com/tkq7

    As you can see, it’s just basically a layer with an inner shadow effect. I suppose the intention was that it should appear like an inset. It appears more like a Photoshop work in progress.

  5. I totally agree with Sebastiaan! What’s up with the first icon? It’s nearly as bad as the Parallels .dmg drive icon. The crash reporter icon is my favorite out of the three but the beetle seriously lacks some detail!

  6. Will the icons targeted at the Mozilla platform be released under a copy-left/open source license for re-use by XULRunner apps?

  7. I’m a little concerned about violating the established policies for the logo.

    That said, I think a silhouette Firefox isn’t a bad idea to add to the collection. Though like others pointed out, it’s a little blurry and should be fixed before it’s established as the standard silhouette design.

  8. “…right down to the slight reflection from the light in the dock (the software update icon is only shown running).”

    What if your dock isn’t at the bottom of your screen? Does the logo rotate so the reflection moves with the location of the running light?

  9. Aaron Strontsman

    You’re right, the updater icon and the idea behind is fantastic. Really, really great work. Congratulations to Sofa.

  10. The crash reporter icon is nice, and I really appreciate that we probably have found a metaphor to go with there, and even more that can be used all across the platform apps.

    For the DMG icon, I wonder if there’s a chance we get a version that could be used for putting other apps’s logos on top and use it for Thunderbird, SeaMonkey, Sunbird et al.?

  11. Why not obey the guidelines and use an Internet-enabled disk image?

    http://developer.apple.com/documentation/developertools/conceptual/SoftwareDistribution/Containers/chapter_3_section_1.html#//apple_ref/doc/uid/10000145i-CH4-SW4

    It’s a lot more user-friendly. There are less question marks in Docks and faster load times for the majority who don’t bother dragging the app to /Applications.

    As for the icon, most icon and logo style guides provide black and white versions of their logos. Mozilla’s is just in beta. It might be bad if the silhouette was blue, but it’s white, which is usually standard and fine. But an icon shouldn’t be necessary if an Internet-enabled disk image is used.

  12. Cool! I love these designs.

  13. Alle of them look amazing. Good work!

  14. Dominic Spitaler

    looks great, wonderful work!
    What about a 512×512 Firefox Application Icon for 3.1, is that in work?

  15. yazılanlar zor ama teşekkürler……

  16. Thanks a lot.Great site.

  17. Nice design, and really cool that they share the work drawings….give personally me some inspiration.

  18. All great icons!
    But I guess the disk icon/DMG icon needs to be updated once the new Firefox icon is finished…

  19. When will the icons go public?

  20. This is very interesting to see how the concept is done all the way up… It really makes you appreciate all these icon sets that are available and the hard work that went into them.

  21. Dear Sir/Madam
    i am Zahirrabbani location kabul-afghanistan i need Icon button
    i am programmer i have software house in kabul capital of afghanistan
    written by zahirrabbani.

  22. No Nightly Build icon? Looks amazing!