December, 2007


13
Dec 07

A First Look at Firefox 3’s Icons

Refreshing the icons in Firefox usually occurs in the later beta releases during the development cycle. This is partly because we have to stabilize the UI design before we know what icons we are going to need, partly because dropping in new images is pretty low risk in terms of performance and stability regressions, and partly because producing a large number of icons takes awhile. However the downside of landing the new icons later in the development process is that we don’t have a lot of time to generate feedback before we release. To keep everyone up to date on what our new icons are going to look like, I’ll be posting the images to my blog, sometimes ahead of the icons appearing in nightly builds.

190 * 4

Firefox 3 will contain roughly 120 icons (190 if you count different sizes) on each of the four platforms. You can view an interactive inventory here (click on the items on the right to filter the list). I should note that the icons shown below are just the first iteration we’ve received from our designers. Many of these icons are still drafts, many are still missing, and there are some inconsistencies across platforms. Also, a lot of the icons already have some modifications planned.

Click through for the full sheet of icons:

Iconsm2I2

While the icons are styled for each platform, we plan on using consistent metaphors and symbols to ensure that interacting with Firefox feels familiar as users move between platforms.

Visual Integration

As I’ve mentioned in previous posts about our goals for the Firefox 3 visual refresh, we are paying a great deal of attention to visual integration with the platform in this release. While Firefox is developed as a cross platform application, we are putting a lot of effort into making sure that Firefox feels native on every platform. In addition to feeling familiar and comfortable, I want users to think of Firefox as the browser their computer should have shipped with. On OS X I want you to feel like you’ve upgraded to latest large predatory cat, on Ubuntu the latest Adjective Animal alliteration, and on Windows you’ve just installed Service Pack Awesome.

A major component of our visual integration strategy is matching each platform’s conventions for icon design (Luna, Aero, Aqua, and Tango):

Iconstylegraph

(my apologies to Johnathan for the use of lock icons, I had a complete set)

Windows XP Luna

The XP Luna style contains icons are colorful and fun. The icons appear as simplified illustrations.

We have decided to deviate from the XP Luna style in one specific way: our navigation toolbar icons are going to have a glossier finish than the default texture of XP Luna (we are planning to go with a finish closer to the Royale theme), while maintaining a similar color palette. Note that we just made this decision so the the change isn’t currently reflected in the sheet above.

Xptexture

Windows Vista Aero

The Aero style contains icons that are considerably sharper and more detailed than XP icons. The style is not quit photorealistic, however unlike XP’s Luna style, Aero icons are not created using a specific color palette, and the icons are generally more intricate, particularly for objects that exist in the real world.

The Firefox windows icons are being developed by the renowned icon design studio Iconfactory. The Iconfactory has previously worked on icons for mac applications like Coda and Transmit, Ubuntu 6.06, the Xbox 360, Mozilla Lab’s Prism, as well as the icons for Windows XP and Vista.

OS X Aqua

Application icons in the Aqua style are the most photorealistic, and often contain glassy elements. However icons inside of applications on OS X are often considerably simpler, and leverage softer gradients. The main Firefox window on OS X will have a unified metal appearance (if you are running Firefox 3 Beta 2, be sure to check out the proto theme for a preview).

Our OS X icons are being designed by Stephen Horlander and Kevin Gerich.

Linux Tango

On Linux Firefox will use native GTK icons where available, and the rest are being created in the Tango style. Other applications that have adopted the Tango style include the Gimp, Pidgin, and (most notably) the Gnome desktop. Tango icons are light, crisp, and simple.

Our Linux icons are being created by Andreas Nilsson, Kalle Persson, Ulisse Perusin, Jakub Steiner, and Lapo Calamandrei. Michael Ventnor and Michael Monreal are helping to make sure Firefox uses the native GTK icons from the current OS theme wherever possible.

New Firefox Application Icon

In addition to refreshing all of the icons inside of Firefox, this release will also see a refresh to the Firefox application icon itself. We have contracted Jon Hicks to update our application icon for Firefox 3. Jon worked with Steven Garrity, Daniel Burka and Stephen Desroches to create the original Firefox application icon, so Jon is now getting a chance to re-imagine the original vision they had for the Firefox icon, while updating it to have a sleeker, more modern, and higher fidelity appearance. We unfortunately don’t have anything to show just yet, but Jon has posted a small teaser to his blog.

Discussion

We are releasing these icons publicly as soon as we receive them so that we can get feedback on them. Please feel free to post comments below, or over in a thread I’ve set up in dev.apps.firefox.