Thinking about Refreshing the Firefox Icon
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
Thinking about Refreshing the Firefox Icon
As we get closer to releasing Shiretoko (Firefox 3.5) we are considering that this might be a good time to update and evolve the Firefox application icon. We will likely be leveraging some conceptual work created by Jon Hicks during the development of Firefox 3, but otherwise we are just now getting started.
As the project progresses I'll be posting the creative briefs as we send them out, draft artwork as it comes in, and I'll be highlighting some of the feedback we are receiving from the community. I'll also be posting regular updates to mozilla.dev.apps.firefox, and my blog at http://blog.mozilla.com/faaborg
But before diving too deep into the specifics of how the Firefox icon might be evolving, I would like have at least one post focusing on the higher level question of why refreshing the icon is probably a good idea.
A Visual Indication of Progress
When thinking about how people perceive a software application, I often picture the tip of an iceberg. So much of the innovation, hard work and brainpower from our development community goes into significant and important improvements that usually aren't readily apparent to the user. This is particularly true when you are building a Web browser, since the application is fundamentally creating a platform for other applications.
Firefox 3.5 is in many ways more of a platform release than a user interface release. That's not to say we haven't added a lot of valuable user facing features, but the underlying changes that are shipping with Firefox 3.5 are really remarkable. This release adds support for HTML5 audio and video, downloadable fonts, geolocation, and a wealth of other great features for Web developers. But perhaps most notably Firefox 3.5's JavaScript performance is 3 to 4 times faster than Firefox 3 thanks to a brand new engine, and 10 times faster than Firefox 2.
But all of these improvements, despite being really powerful for the development of the Web, are not exactly apparent before you even launch the application. And because of this it is perhaps too easy to unfairly assume when you download the new version that the product is stagnating, and that unlike a (admittedly very shiny) competitor, we are no longer on the bleeding edge of pushing the Web forward.
The Icon as a Chassis
Something else that I've been thinking a lot about recently is how effectively visual information in an exterior chassis can communicate the power of the complex system that it contains. Two examples would be the design of sports cars and the industrial design of high end gaming computers. In the case of sports cars, you can look at a still image of a car you have never seen before, and immediately assume from the air vents and arcs in the exterior body that it is in fact a really high performance vehicle. In reality it might be a concept car that doesn't even contain an engine, and people have to push it around. Somehow the same psychological biases come into play with gaming pcs, and the ironic thing is that they aren't even meant to move to begin with, so the extent to which they are aerodynamic is perhaps even more curious.
Another similarity between sports cars and the industrial design of high end gaming pcs is that their appearance evolves rapidly enough over time that it is obvious that the older models are starting to get really out of date.
So what do these physical chassis that contain engines and processors have to do with the Firefox icon? In many ways all three have to complete the same objective: they all have to instantly communicate to the driver/gamer/user how powerful, well built, and brand new they are. Now of course aerodynamic properties are even less relevant in the world of software, but nevertheless the OS X 10.5 dock is considerably more aerodynamic than the OS X 10.4 dock.
So to answer the question of why I think refreshing the Firefox application icon for 3.5 is worthwhile, it's because I think we should be viewing the icon as an exterior chassis for an underlying engine that has recently undergone some really significant changes.
As the project progresses I'll be posting the creative briefs as we send them out, draft artwork as it comes in, and I'll be highlighting some of the feedback we are receiving from the community. I'll also be posting regular updates to mozilla.dev.apps.firefox, and my blog at http://blog.mozilla.com/faaborg
But before diving too deep into the specifics of how the Firefox icon might be evolving, I would like have at least one post focusing on the higher level question of why refreshing the icon is probably a good idea.
A Visual Indication of Progress
When thinking about how people perceive a software application, I often picture the tip of an iceberg. So much of the innovation, hard work and brainpower from our development community goes into significant and important improvements that usually aren't readily apparent to the user. This is particularly true when you are building a Web browser, since the application is fundamentally creating a platform for other applications.
Firefox 3.5 is in many ways more of a platform release than a user interface release. That's not to say we haven't added a lot of valuable user facing features, but the underlying changes that are shipping with Firefox 3.5 are really remarkable. This release adds support for HTML5 audio and video, downloadable fonts, geolocation, and a wealth of other great features for Web developers. But perhaps most notably Firefox 3.5's JavaScript performance is 3 to 4 times faster than Firefox 3 thanks to a brand new engine, and 10 times faster than Firefox 2.
But all of these improvements, despite being really powerful for the development of the Web, are not exactly apparent before you even launch the application. And because of this it is perhaps too easy to unfairly assume when you download the new version that the product is stagnating, and that unlike a (admittedly very shiny) competitor, we are no longer on the bleeding edge of pushing the Web forward.
The Icon as a Chassis
Something else that I've been thinking a lot about recently is how effectively visual information in an exterior chassis can communicate the power of the complex system that it contains. Two examples would be the design of sports cars and the industrial design of high end gaming computers. In the case of sports cars, you can look at a still image of a car you have never seen before, and immediately assume from the air vents and arcs in the exterior body that it is in fact a really high performance vehicle. In reality it might be a concept car that doesn't even contain an engine, and people have to push it around. Somehow the same psychological biases come into play with gaming pcs, and the ironic thing is that they aren't even meant to move to begin with, so the extent to which they are aerodynamic is perhaps even more curious.
Another similarity between sports cars and the industrial design of high end gaming pcs is that their appearance evolves rapidly enough over time that it is obvious that the older models are starting to get really out of date.
So what do these physical chassis that contain engines and processors have to do with the Firefox icon? In many ways all three have to complete the same objective: they all have to instantly communicate to the driver/gamer/user how powerful, well built, and brand new they are. Now of course aerodynamic properties are even less relevant in the world of software, but nevertheless the OS X 10.5 dock is considerably more aerodynamic than the OS X 10.4 dock.
So to answer the question of why I think refreshing the Firefox application icon for 3.5 is worthwhile, it's because I think we should be viewing the icon as an exterior chassis for an underlying engine that has recently undergone some really significant changes.
-
- Posts: 4832
- Joined: June 24th, 2004, 8:03 pm
- Location: Maryland, USA
Re: Thinking about Refreshing the Firefox Icon
Alex, I'd also agree with one of the comments on your blog that if it isn't broke...don't fix it. I bet barely anyone even noticed the last icon change so to me it is just a waste of time when time could be spent making new icons for buttons that are needed in Firefox but currently lack the icons. It also risks making the icon not as easily recognizeable. The currently icon looks perfectly fine and does what it supposed to.
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
Re: Thinking about Refreshing the Firefox Icon
Just a quick update: we've decided to move forward. I'll be using this thread to post additional details once we have them, and to collect feedback.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: Thinking about Refreshing the Firefox Icon
I think it's a good idea... but I think it's also a good idea to update some of the button icons as well. While the main program icon tells us what's loading, it's the interface and it's icons that tells us that something is *new*. I think it's also important to keep in mind that a whole-sale new Firefox icon will be confusing and in general the blue and orange blob is what people look for when scanning the desktop for "internet". Giving it some spit and polish would never hurt though! I think in addition to your other logic, it's interesting to note that stylistically, when the Firefox icon came out, it looked "new" due to relatively new shading styles implemented, but now it looks dated. I think especially against the glossy and richly transparent environments of Vista, Leopard and KDE, it's showing it's age!
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
Re: Thinking about Refreshing the Firefox Icon
We are now in the process of refreshing the Firefox application icon, so I wanted to address some of the initial questions we are getting, and look at some specific examples in the technology industry of product brand evolution.
Questions
There aren't a whole lot of other products out there that issue .5 releases (more on this below), so as a result there isn't really a lot of precedent for what is normal, and what is surprising. The reason for this is that we've been able to work on Firefox in shorter (albeit not as short as everyone would like) iterative development cycles. But I guess the larger issue here is "is Firefox 3.5 a significant enough release to warrant a revised icon?" Looking at the long list of all of amazing things our community has been able to pull off for this release, at least my opinion is: yes, it definitely is.
Not really. Our plan is to get the icon updated in the product itself, and on mozilla.com in places where we are specifically talking about Firefox 3.5 in time for the launch. We'll of course make images available at a range of resolutions as soon as we finalize them so people can update download buttons and other instances of the Firefox 3.5 icon during the Release Candidate phase, while we are thoroughly testing the application. There admittedly isn't as much time as everyone would like, but that's the nature of a very competitive (and exciting) marketplace.
One doesn't need to walk more than two feet in the Mountain View office to run into the current Firefox logo, so I have a pretty visceral sense of how disruptive shipping a new icon would be. In fact, we were so worried about the logistics of doing an update around the time of launching Firefox 3 that we ultimately decided to canceled the project entirely. In retrospect, my opinion is that a gradual transition (and the logistical challenges that come with it) is worth not being frozen in time. Also, the most valuable and cherished t-shirts in our community are often the old ones, so if you have a current Firefox t-shirt, a new icon will make it retro, and give it an ever increasing nostalgia value.
In a marketplace that is focused on products that are newer, faster, lighter and shinier, design work is inherently perishable. Part of this is larger trends and fashion (for a period of time cars had fins), and part of this is simply ongoing visual change as an indication of overall progress.
The Evolution of Product Brands
Here are some examples of the visual evolution of some other major technology product brands.
Internet Explorer
The shape remains very consistent, with the evolution occurring with the texture, color and lighting.
Windows
OS X
Here we see an example of new branding for every dot release (10.1 to 10.5). Consistency is achieved primarily with the X. But even the style of the X evolves with each iteration, eventually losing serifs, and transitioning from aqua blue through jaguar spots, to two phases of brushed metal, and most recently obsidian (in space!)
SONY PlayStation
Nintendo
The brand starts with divergent Japanese and North American versions, then merges together. Nintendo as a product brand is then largely abandoned in favor of a new simpler brand.
Xbox
Brand consistency is achieved primarily with the color green, and an X that breaks through some form of surface. The notion of an inner glowing core is also consistent between versions.
In comparison to these, our strategy is going to be more in line with the more conservative approaches to product brand evolution (IE, OS X, Xbox). In the following post I'll detail the history and planned evolution of the Firefox icon.
Questions
Isn't a .5 release the wrong time to revise the application icon, shouldn't we wait for Firefox 4?
There aren't a whole lot of other products out there that issue .5 releases (more on this below), so as a result there isn't really a lot of precedent for what is normal, and what is surprising. The reason for this is that we've been able to work on Firefox in shorter (albeit not as short as everyone would like) iterative development cycles. But I guess the larger issue here is "is Firefox 3.5 a significant enough release to warrant a revised icon?" Looking at the long list of all of amazing things our community has been able to pull off for this release, at least my opinion is: yes, it definitely is.
Is there enough time for an organized deployment of the new icon across all of the places where it needs to be updated?
Not really. Our plan is to get the icon updated in the product itself, and on mozilla.com in places where we are specifically talking about Firefox 3.5 in time for the launch. We'll of course make images available at a range of resolutions as soon as we finalize them so people can update download buttons and other instances of the Firefox 3.5 icon during the Release Candidate phase, while we are thoroughly testing the application. There admittedly isn't as much time as everyone would like, but that's the nature of a very competitive (and exciting) marketplace.
Imagine how many wallpapers and t-shirts will be thrown out!
One doesn't need to walk more than two feet in the Mountain View office to run into the current Firefox logo, so I have a pretty visceral sense of how disruptive shipping a new icon would be. In fact, we were so worried about the logistics of doing an update around the time of launching Firefox 3 that we ultimately decided to canceled the project entirely. In retrospect, my opinion is that a gradual transition (and the logistical challenges that come with it) is worth not being frozen in time. Also, the most valuable and cherished t-shirts in our community are often the old ones, so if you have a current Firefox t-shirt, a new icon will make it retro, and give it an ever increasing nostalgia value.
Why bother fixing something that isn't broken?
In a marketplace that is focused on products that are newer, faster, lighter and shinier, design work is inherently perishable. Part of this is larger trends and fashion (for a period of time cars had fins), and part of this is simply ongoing visual change as an indication of overall progress.
The Evolution of Product Brands
Here are some examples of the visual evolution of some other major technology product brands.
Internet Explorer
The shape remains very consistent, with the evolution occurring with the texture, color and lighting.
Windows
OS X
Here we see an example of new branding for every dot release (10.1 to 10.5). Consistency is achieved primarily with the X. But even the style of the X evolves with each iteration, eventually losing serifs, and transitioning from aqua blue through jaguar spots, to two phases of brushed metal, and most recently obsidian (in space!)
SONY PlayStation
Nintendo
The brand starts with divergent Japanese and North American versions, then merges together. Nintendo as a product brand is then largely abandoned in favor of a new simpler brand.
Xbox
Brand consistency is achieved primarily with the color green, and an X that breaks through some form of surface. The notion of an inner glowing core is also consistent between versions.
In comparison to these, our strategy is going to be more in line with the more conservative approaches to product brand evolution (IE, OS X, Xbox). In the following post I'll detail the history and planned evolution of the Firefox icon.
- malliz
- Folder@Home
- Posts: 43796
- Joined: December 7th, 2002, 4:34 am
- Location: Australia
Re: Thinking about Refreshing the Firefox Icon
So in a nutshell, you are talking evolution not revolution
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"
"Terry Pratchett"
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
- malliz
- Folder@Home
- Posts: 43796
- Joined: December 7th, 2002, 4:34 am
- Location: Australia
Re: Thinking about Refreshing the Firefox Icon
OK good idea, any brand Logo needs a refresh to grab the eye especially when it's been in use for a while.
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"
"Terry Pratchett"
- Stifu
- Posts: 984
- Joined: July 13th, 2007, 8:02 am
Re: Thinking about Refreshing the Firefox Icon
I think an updated logo would have had more impact with a x.0 release, so I'd have waited for Firefox 4.0... but I still look forward to the refreshed icon.
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
Re: Thinking about Refreshing the Firefox Icon
The overall direction for the next phase of the Firefox icon's design is going to be primarily based on some conceptual sketches and renders created in 2007 by Jon Hicks, the designer who rendered the original Firefox icon.
We are now working with the very talented Iconfactory to create the final render of the icon that will be used for Firefox 3.5 (Jon is currently a senior designer at Opera, and they are incredibly lucky to have him!) The Firefox 3.5 icon is being created by the artist Anthony Piraino, and we are really fortunate to have such a talented group of people working to evolve Firefox's visual identity.
The Short Version
Here is the short version of the planned changes to the Firefox icon:
Things we are planning to maintain
1) Color
2) Overall shape and layout (specifically the head and arm)
3) Generic continents (so as not to show any form of geographic preference)
Things we are planning to modernize
1) Shape of the tail (no longer 2D)
2) Textures (soft fox, glossy earth)
3) Simplify the overall level of detail
The Long Version
Note: some of the renders have a "concept" watermark over them to help reduce confusion as they start to spread across the Web, my apologies for having to partially obfuscate the work.
View the full sized version
Feedback
In addition to the feedback we will be getting through my blog (syndicated to planet.mozilla.org), I've also started discussions at mozilla.dev.apps.firefox, mozillazine (this thread), and bugzilla for full coverage of our community.
I would also like to specifically thank the following people who provided initial feedback on the creative brief, and are also ready to provide feedback on iterations as they arrive:
Original Mozilla Visual Identity Team
Daniel Burka
Stephen DesRoches
Steven Garrity
Kevin Gerich
Jon Hicks (cc'd)
Stephen Horlander
Mike Beltzner
Paul Kim
John Slater
Tara Shahian
Madhava Enros
Aza Raskin
Jennifer Boriss
Sean Martell
Alexander Limi
We are now working with the very talented Iconfactory to create the final render of the icon that will be used for Firefox 3.5 (Jon is currently a senior designer at Opera, and they are incredibly lucky to have him!) The Firefox 3.5 icon is being created by the artist Anthony Piraino, and we are really fortunate to have such a talented group of people working to evolve Firefox's visual identity.
The Short Version
Here is the short version of the planned changes to the Firefox icon:
Things we are planning to maintain
1) Color
2) Overall shape and layout (specifically the head and arm)
3) Generic continents (so as not to show any form of geographic preference)
Things we are planning to modernize
1) Shape of the tail (no longer 2D)
2) Textures (soft fox, glossy earth)
3) Simplify the overall level of detail
The Long Version
Note: some of the renders have a "concept" watermark over them to help reduce confusion as they start to spread across the Web, my apologies for having to partially obfuscate the work.
View the full sized version
Feedback
In addition to the feedback we will be getting through my blog (syndicated to planet.mozilla.org), I've also started discussions at mozilla.dev.apps.firefox, mozillazine (this thread), and bugzilla for full coverage of our community.
I would also like to specifically thank the following people who provided initial feedback on the creative brief, and are also ready to provide feedback on iterations as they arrive:
Original Mozilla Visual Identity Team
Daniel Burka
Stephen DesRoches
Steven Garrity
Kevin Gerich
Jon Hicks (cc'd)
Stephen Horlander
Mike Beltzner
Paul Kim
John Slater
Tara Shahian
Madhava Enros
Aza Raskin
Jennifer Boriss
Sean Martell
Alexander Limi
-
- Posts: 97
- Joined: December 17th, 2007, 7:09 pm
- Location: Mountain View, CA
- Contact:
Re: Thinking about Refreshing the Firefox Icon
Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.
As explained above, the icon is being rendered by Anthony Piraino at the Iconfactory. The design is based a conceptual sketch by Jon Hicks.
As explained above, the icon is being rendered by Anthony Piraino at the Iconfactory. The design is based a conceptual sketch by Jon Hicks.
-
- Posts: 1030
- Joined: June 28th, 2008, 4:57 am
Re: Thinking about Refreshing the Firefox Icon
Out of curiosity, is the texture on the globe meant to represent anything? I'm guessing you don't want to use the actual continents so as to avoid giving any particular area of the world a perceived preference, but in comparison to the fox the 'world map' is beginning to look increasingly unrealistic. (mainly the blotch in the middle looks too rounded)
- _Dexter_
- Posts: 1436
- Joined: August 30th, 2008, 6:54 pm
- Location: Miami
Re: Thinking about Refreshing the Firefox Icon
Subtle changes but I like it.
Intel i7 Core Quad @ 4.25Ghz | Cooler Master Hyper 212 Plus | 12GB PC3-16000 RAM | ASUS HD6970 2GB - 12.3 CATS | ASUS PA246Q IPS 24" LCD 16:10 | OCZ AGILITY-EX SSD SLC | Windows 7 SP1 x64 Ultimate
-
- Posts: 670
- Joined: January 31st, 2005, 5:37 am
- Location: Berlin
- Contact:
Re: Thinking about Refreshing the Firefox Icon
I like the direction this is going. Looks already more iconic than the 2008 concept rendering.
-
- Posts: 403
- Joined: October 30th, 2005, 9:15 am
Re: Thinking about Refreshing the Firefox Icon
I'd like to point out one pretty big flaw with the direction this is going.
In order to integrate the fox and the planet more, you make the tail wrap around the planet, resulting in a more three dimensional look. If you look at it as if it is a three dimensional image however it is very problematic. The fox' body rests on the planet, meaning there is no space between the fox and the planet. At the very same time the head is pointing towards the planet. In a three dimensional world, that simply is not possible (in my view at least). The nose appears in a non-existent spot (because there is no space there).
I hope you understand what I mean from the first part I wrote. If not, first look at the right part of the draft and imagine it being a sphere with the tail curled around it. Now move your heads to the left side of the image. All of a sudden it is two dimensional again, because one's mind can't construct the way this works. Basically the image now is half 2d, half 3d, which doesn't represent the more streamlined look you want to create.
In order to integrate the fox and the planet more, you make the tail wrap around the planet, resulting in a more three dimensional look. If you look at it as if it is a three dimensional image however it is very problematic. The fox' body rests on the planet, meaning there is no space between the fox and the planet. At the very same time the head is pointing towards the planet. In a three dimensional world, that simply is not possible (in my view at least). The nose appears in a non-existent spot (because there is no space there).
I hope you understand what I mean from the first part I wrote. If not, first look at the right part of the draft and imagine it being a sphere with the tail curled around it. Now move your heads to the left side of the image. All of a sudden it is two dimensional again, because one's mind can't construct the way this works. Basically the image now is half 2d, half 3d, which doesn't represent the more streamlined look you want to create.