Closed Bug 492431 Opened 11 years ago Closed 11 years ago

Refresh the Application Icon and Product Branding for Firefox 3.5

Categories

(Firefox :: General, defect)

defect
Not set

Tracking

()

VERIFIED FIXED
Firefox 3.5

People

(Reporter: faaborg, Assigned: mconnor)

References

Details

(Keywords: polish, verified1.9.1, Whiteboard: [polish-hard] [polish-visual][polish-p1])

Attachments

(1 file)

This is a tracking bug for the work related to updating the application icon and product branding (various images that are stored in mozilla/other-licenses/branding/firefox/)

Prior to the literal work of getting all of the files checked in, we'll be using this bug to communicate progress about the icon refresh.  While this is a little unusual for bugzilla, I'll be regularly posting updates about the design work to this bug for all the people who are cc'd.  All the information that I post here will be also be simultaneously cross posted to:

-mozilla.dev.apps.firefox
-thread on mozillazine
-my blog: http://blog.mozilla.com/faaborg/

I'm trying to make sure this change gets as much coverage in our community as possible, and I realize some people only closely track bugzilla.  So if you don't regularly read those other channels, just follow the comments in this bug and you'll be entirely up to date on what is going on.  As always constructive and specific feedback is both welcome and encouraged :)
Flags: wanted-firefox3.5?
Whiteboard: [polish-hard] [polish-visual]
==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 to this bug 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.

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.
[note: this is being cross posted to planet.mozilla.org, mozilla.dev.apps.firefox, and mozillazine]

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==

>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 throughly 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

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/ieEvolution768.png

The shape remains very consistent, with the evolution occurring with the texture, color and lighting.

>Windows

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/windowsEvolution768.png

>OS X

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/osXEvolution768.png

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

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/playstationEvolution768.png

>Nintendo

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/nintendoEvolution768.png

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

http://people.mozilla.com/~faaborg/files/20090515-evolvingProductBrand/xboxEvolution768.png

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.
Post the full text doesn't really work that well given the inability to have inline images, or any type of formatting.

Post about the Creative Brief:
http://blog.mozilla.com/faaborg/2009/05/15/creative-brief-for-the-new-firefox-icon/

Creative Brief:
http://people.mozilla.com/~faaborg/files/20090515-creativeBrief/creativeBrief-i1.png
Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.

http://people.mozilla.com/~faaborg/files/20090515-firefoxIconIteration1/shiretokoFirefoxIcon-i1.png

The icon is being rendered by Anthony Piraino at the Iconfactory.  The design is based a conceptual sketch by Jon Hicks.

==Background Information on the Project==

Creative Brief
http://blog.mozilla.com/faaborg/2009/05/15/creative-brief-for-the-new-firefox-icon/

Evolving a Product Brand
http://blog.mozilla.com/faaborg/2009/05/14/evolving-a-product-brand/

Thinking about Refreshing the Firefox Icon
http://blog.mozilla.com/faaborg/2009/05/06/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.

http://people.mozilla.com/~faaborg/files/20090515-firefoxIconIteration2/shiretokoFirefoxIcon-i2.png_large.png
The designer Stephen Horlander recently created a concept rendering of an updated Firefox icon.  Stephen has been a long time member of the Mozilla community and has contributed his design talent to the Firefox 1 theme, the ubiquitous Web Feed icon, and the Firefox 3 OS X theme.

Similar to the ongoing iterations, the design is partially based on a conceptual sketch by Jon Hicks.  Here is his description of the conceptual rendering:

>I think fur texture is an important thing to have since the two best ways I see
>to freshen the icon (without losing the essence of it) are dimension and texture.
>I guess what I had in mind was less overall pseudo realistic fur texture and more
>selective enhancement. It's hard to verbalize so I worked up what I had in mind.
>Basically select patches of sharp, long, subtle (maybe too subtle?) fur. Some on
>the tufts on his face, some around the arm area, some on the upper and lower half
>of where his body curves. Much like in Jon's original concepts."

http://people.mozilla.com/~faaborg/files/20090517-firefoxIconHorlander1/shiretokoFirefoxIcon-horlander-i1.png_large.png

There are definitely some aspects of this conceptual design that I think we will want to leverage in the updated icon for Firefox 3.5.  As always comments and feedback are welcome and stay tuned for regular updates throughout the week.
Blocks: 348047
Depends on: 495250
Note related bug 495594 for the public distribution of the new files.
Dao: we will be using this bug for landing the changes to /other-licenses/branding/firefox/

David: This bug depends on bug 495250, just a heads up that we are going to have a limited amount of time to do the update once we have final artwork.
Follow up bug to clean up unused files in /other-licenses/branding/firefox/: bug 496472
Note bug 495250 which will cover the linux app icon update.
Depends on: 381922
Depends on: 496696
No longer depends on: 381922
The files in this attachment update all instances (currently in use) of the Firefox icon in /branding/firefox to iteration 14
Assignee: nobody → dao
Depends on: 473343
Depends on: 496734
Attachment #381971 - Flags: approval1.9.1?
Assignee: dao → mconnor
Depends on: 497333
Flags: wanted-firefox3.5? → wanted-firefox3.5+
marking FIXED and fixed1.9.1 as per comment 23
Status: NEW → RESOLVED
Closed: 11 years ago
Keywords: fixed1.9.1
Resolution: --- → FIXED
(In reply to comment #24)
> marking FIXED and fixed1.9.1 as per comment 23

What about the file document.icns? I can't see it readjusted in the repositories meant in comment 23. Maybe forgotten?
>What about the file document.icns? I can't see it readjusted in the
>repositories meant in comment 23. Maybe forgotten?

The two dependent bugs 496734 and 473343 took care of document.icns and .ico
Verified fixed on 1.9.1 with builds on all platforms like Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1) Gecko/20090612 Firefox/3.5 ID:20090612060328
Assignee: mconnor → nobody
Status: RESOLVED → VERIFIED
Component: General → Theme
QA Contact: general → theme
Assignee: nobody → mconnor
Component: Theme → General
QA Contact: theme → general
Verified fixed status of this bug means iteration 14 logo is the final?
In case not, when will we have final?
>Verified fixed status of this bug means iteration 14 logo is the final?
>In case not, when will we have final?

It looks like RC1 is going to be officially released tomorrow (I was holding on making a final announcement until the RC went out).  I'll be posting files that people can use later today, and making the announcement that we've finalized the icon.
Finalized files are posted here: https://wiki.mozilla.org/Firefox3.5/Logos

Final blog post: http://digg.com/d1uAbl
Blocks: 499146
No longer blocks: 499146
Depends on: 499146
This bug's priority relative to the set of other polish bugs is:
P1 - Polish issue that appears in the main window, or is something that the user may encounter several times a day.

This bug effected a lot of interfaces in the product, and the app icon is clearly something that the user is going to encounter several times a day.
Whiteboard: [polish-hard] [polish-visual] → [polish-hard] [polish-visual][polish-p1]
Follow up bug 500033 for new 16x16 artwork, and two minor issues on OS X
Blocks: 413607
You need to log in before you can comment on or make changes to this bug.