May, 2009


20
May 09

New Firefox Icon: Q&A

Is there any more progress to brief us on yet?.

Yep, coming shortly. I’ve been pushing the boundaries of the “or so” part of 24 hours due to some work on the reviewer’s guide (people are getting on airplanes to talk to journalists so that became a hard deadline and took priority).

Is it possible to present these variants in this thread as a short series of images in various pixel sizes, for example down to 16×16, 32×32 and 48×48?

We haven’t been publishing smaller sizes yet because just doing an automatic image resize wouldn’t really be representative of what the icon will ultimately end up looking like at smaller resolutions. Usually a lot of manual work goes into creating the smaller versions, as specific details are removed prior to the resize, and the designer focuses on pixel hinting by hand so the small icon appears really sharp. As a side note, this is also why the idea of “hey let’s do all our in-product icons in SVG!” ends up being a little more complicated than it initially sounds. The issue isn’t just correctly scaling and rendering (with equally good pixel hinting) but also being able to scale the level of detail in the artwork itself. Building an icon format that did all of those things simultaneously would however be unbelievably cool.

The current and old design should be displayed next to each other for comparison purposes. (requested a lot)

I don’t want to influence people through direct comparison. If people compare each concept to the way the Firefox appears in their mind (which varies), I think the feedback becomes more valuable.

May I know why the “earth” is not continentally correct?

In the comments of my blog Jakub (who does awesome work on our Linux theme’s icons) asks a related question:

The fact that FF is localized to 70+ languages doesn’t really justify depicting an alien planet instead of being distinctively Earth. I really dislike this fake political correctness.

Can I automatically forward you the hate mail I would receive if were forced to pick a particular planetary rotation? :) Other companies are usually centric to where their headquarters happens to be located (for example, Cupertino, or Redmond), but even that doesn’t work well for Mozilla :) I guess my overall point is that even my immediate colleagues would hate me! We sometimes refer to the “alien planet” as “planet mozilla” if that makes the concept more appealing (not to be confused with the otherwise identically named planet mozilla). In terms of other fun facts, Daniel Burka also mentioned awhile ago that the original continent configuration was loosely based on pangea.

Has it evolved that greatly since 2004 that there is now an ice cap? Is an ice age approaching?

In theory don’t most life supporting planets have arctic poles? Anyway, it’s probably best not to read too much into fluctuations with this aspect of the design. In terms of the impending ice age, the planet does appear kind of blueish (green doesn’t go that well with orange).

I think at this point, maybe what needs to be done is a model… I don’t mean a complicated 3D computer model, but a simple model of clay. Look at the clay model and think about what happens in real space.

I would actually really love to have a full 3D model of the icon, since that would enable us to also do really cool stuff like creating wallpaper images of the tail cradling planet mozilla from the perspective of a satellite:

Satview

It looks like someone punched the fox in the snout because now it’s shorter and fatter (Why was that changed at all?).

Longer snouts end up looking kind of weasely, we also gave the cheek under the snout a bit of a trim to clean him up a little.

Maybe now is the time to correct a misconception about what Firefox is. It is *not* fire and fox, as drawed in the icon. Firefox is an animal on its own.

The Red Panda is an unbelievably cute animal (especially the Toby at the Houston Zoo) but in terms of the icon we are basically presenting a separate mythical creature called the Firefox. I’ll write a lot more about this in my next post. Either way, Red Panda or mythical creature, the presentation still isn’t meant to be just fire + fox (or a fox on fire).

There should be various types of the icon, like there are various themes under each OS.

This is kind of a tricky problem, because we want to have a consistent and recognizable brand, we want to send the clear message that Firefox is nearly an identical product on every platform (we ship nearly the same code base on all platforms simultaneously), and also because launching 3 or 4 new icons at the same time is logistically difficult (which platform goes on the t-shirts? we can’t play favorites.) However, I’ve previously been a very strong advocate of visual integration with the operating system, so this is something that I want us to think about in the future. But I think the differences between platforms would have to be really subtle, basically lighting and texture, with extremely consistent shape.

Same as we always say “security/privacy first”, I think “easy/safe to use” or “feel comfortable” are more important than “fast/cool browser” or “new/powerful platform”. (cool? robots on the shiretoko firstrun pages are negative example) I have heard no favorable comment for new logo so far in japan, since current (fx3) logo looks much cuter. Please keep the logo looks *cute*, not only cool. Especially children and women tend to try/keep using cute things. As far as I talked/worked with non-geek students, not a few people (at least in Japan) start using Firefox when they find cute logo on their desktop.

I know Mozilla China is has created the localized (and very cute) artwork for G-Fox, and Mozilla Japan of course has the extremely popular Foxkeh.

Gfoxandfoxkeh

Although in both cases these characters are used in promotional materials as opposed to the branding of the browser itself. Trademark implications aside, I wonder if that is the correct balance, or if having localized brands in certain regions wouldn’t be a more effective strategy to increase market share. On the downside localized brands in certain regions would somewhat undermine global brand recognition (the Golden Arches argument, although I’m hesitant to use that particular example). Even if we want to stay with a globally consistent application icon, I think it is important that we ensure that the new revision at least maintains the same level of cuteness as previous versions of the Firefox icon. More on this in the next post.


17
May 09

New Firefox Icon: Concept Rendering by Stephen Horlander

Note: this is a concept icon rendering for Firefox 3.5. New and updated designs in the ongoing sequence of iterations will be posted every 24 hours or so.

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.

Shiretokofirefoxicon-Horlander-I1

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.

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon


15
May 09

New Firefox Icon: Iteration 2

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.

Shiretokofirefoxicon-I2

The icon is being rendered by Anthony Piraino at the Iconfactory. The design is based on a conceptual sketch by Jon Hicks, as well as a few rendered aspects (nose, parts of the planet).

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon


15
May 09

New Firefox Icon: Iteration 1

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so.

Shiretokofirefoxicon-I1

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

Background Information on the Project

-Creative Brief
-Evolving a Product Brand
-Thinking about Refreshing the Firefox Icon


15
May 09

Creative Brief for the New Firefox Icon

Below is a creative brief that details the early history and planned evolution for the Firefox icon. Background information on the project can be found in previous posts about why we think it’s a good time to update the application icon, and the broader topic of evolving a technology product brand.

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. Click through for the full size.

Creativebrief-I1-Wm

Feedback

In addition to the feedback we will be getting through this blog (syndicated to planet.mozilla.org), I’ve also started discussions at mozilla.dev.apps.firefox, mozillazine, 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


14
May 09

Evolving a Product Brand

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

Ieevolution

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

Windows

Windowsevolution

OS X

Osxevolution

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

Playstationevolution

Nintendo

Nintendoevolution

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

Xboxevolution

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.


11
May 09

Critical Warning

Recently there has been some controversy related to IE8, Critical Windows Updates, and multi-step wizard style interfaces vs. leveraging default settings. But most of these debates have centered on things like text size and interactive flows. I personally believe there is also a visual design component to this issue as well.

Standard Dialog Box Icons

Standarddialogicons

The Windows User Experience Guidelines for Standard Dialog Icon Use

This quote is from Windows Vista User Experience Guidelines > Guidelines > Aesthetics > Standard Icons

Message type vs. severity

Choose standard icons based the message type, not the severity of the underlying issue. The message types are:

* Error. An error or problem that has occurred.
* Warning. A condition that might cause a problem in the future.
* Information. Useful information.

Different operating systems have slightly different guidelines for using the standard dialog box icons, for instance sometimes the error icon is used to indicate an error that is the system’s fault, while the warning icon is used to indicate a significant problem that is (or will be) the user’s fault. Also Vista tends to only use the blue question icon as an entry point to help, with guidelines stating: “Don’t use the question mark icon to ask questions. Again, use the question mark icon only for Help entry points. There is no need to ask questions using the question mark icon anyway—it’s sufficient to present a main instruction as a question.” Contrary to the Windows-specific guidelines, Firefox in some situations uses a question mark for direct questions that have a significant consequence, but do not involve any form of error.

These standard dialog icons also metaphorically associate with physical objects in the real world. For instance an equilateral triangle form is commonly used to represent traffic warnings.

Quaysideorriverbank

Examples

Here is the first specific example that the Windows Vista User Experience Guidelines provides, documenting the proper use of the warning icon. They write “The following is a good example of a critical warning because it meets the previously defined characteristics.” Those characteristics being: data or financial loss, loss of system access or integrity, loss of privacy, wasted time, unexpected consequences, and an action that does not support undo.

Formatcriticalwarning

Standard Dialog Icons as an Indication of Product Choice

Here is a screen shot of how Internet Explorer 8 (as well as previous versions) prompts the user if it detects that it is no longer the default browser:

Internetexplorerdefaultdialogbox

By comparison, here is a screen shot of how Firefox 3 prompts the user if it detects it is no longer the default browser:

Firefoxdefaultdialogbox

Internet Explorer is framing the message of not using IE8 as analogous to an action like formatting your hard drive, or (by metaphorical extension) driving your car off of a cliff. If the user doesn’t take the time to read or think about the specific question being presented, the visual language effectively conveys the message: “you broke your computer, click Yes to fix.” As opposed to visually conveying the message “you have a choice to make.” This might seem like a minor point, but I think there’s a pretty big difference between what a dialog box literally says and what users take the time to actually read.

Now to be fair, as quoted above their guidelines are based on message type and not severity. However, considering the literal definition of the icon, deciding to no longer use IE8 as the default browser is classified as “a condition that might cause a problem in the future.” Their guidelines also state: “While severity isn’t a consideration when choosing among the error, warning, and information icons, severity is a factor in determining if a standard icon should be used at all.” So the user deciding to no longer have IE8 as the default browser (based on their guidelines and the inclusion of the icon) apparently warrants displaying a critical warning.


6
May 09

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

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.