May, 2009


30
May 09

New Firefox Icon: Iteration 10 in Context

Here is how iteration 10 of the new Firefox icon appears in context on the XP, OS X and Vista desktops and file systems.

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

XP

Desktopxp

OS X

Desktoposx

Vista

Desktopvista

XP File System

Explorer – Thumbnails
Explorer – Tiles
Explorer – Icons
Explorer – Details

OS X File System

Finder, and Cover Flow

Vista File System

Explorer – Extra Large Icons
Explorer – Large Icons
Explorer – Medium Icons


29
May 09

What’s so Great About Open Video?

…this:

Savevideoas

…and lots of other things, especially if you are a Web developer interested in really cool integration and access (demo requires 3.5). But if you are a user, you might be thinking “spare my the ideology, what’s so great about open video aside from its level of openy openness.” Well, now video is kind of like text, or images. You can post it to your Web site, you can save it, and you can link directly to it. Forget about <embed> tags and complex bookmarklet saving scripts, thanks to HTML5 (and boriss, dolske and so many others) your dominion over information will soon be complete.


28
May 09

New Firefox Icon: Iteration 10

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

This tail is essentially a blending of iterations 8 and 9. The top of the tail features the dimensionality and highlight lines of i9′s design, and the bottom the tail softly transitions into the fox’s fur, leveraging the continuity and balance of texture found in i8′s design.

Additionally there are some small modifications to the shape of the tail, and this iteration also introduces an OS X style shadow. The OS X shadow is just for some additional context, for the release candidate icon we’ll be customizing the shadow by platform, using an upper left light source on Vista and Windows 7.

Shiretokofirefoxicon-I10

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

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


26
May 09

New Firefox Icon: Iterations 8 and 9

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

Today we have a double header, with iterations 8 and 9 exploring various ways to paint and light the Firefox’s tail.

Shiretokofirefoxicon-I8

Shiretokofirefoxicon-I9

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

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


25
May 09

Visual Polish in the Firefox 3.5 Themes

We are now in the process of landing a few refreshed icons for the Firefox 3.5 themes. Across all 4 platforms roughly 25 of the icons are either being tweaked or are entirely new (there were some last minute feature additions, like geolocation). Here are a few highlights of things that either just landed, or are coming soon to your very own nightly build:

Windows: All Secondary Glyphs in the Main Window

Vistaglyphs

Xpglyphs

On Windows (both Vista and XP) we are replacing all of the secondary glyphs in the main window (various small arrows, new tab +, etc) with a consistent etched-in appearance. These etched in glyphs also feature a glowing hit state, which varies color by platform. These glyphs, as well as all of our Windows icons, were created by the Iconfactory.

OS X: Removing Background Etch From the Keyhole

Osxkeyhole

We are also considering doing this on Windows, since it lightens and simplifies the appearance of our UI. Either way, we wanted to get the change landed on OS X, since a lot of people were eager to see the etch go (including myself, as it was my misguided idea in the first place). Visual design of the OS X theme is contributed by Stephen Horlander. Our file system icons on OS X were made by Sofa.

Linux: Last Minute Plugin Icons (used in the event of plugin block-listing)

Linuxplugins

These particular icons were designed by Jakub Steiner (as a very last minute refresh, sorry about that Jakub!). The visual design of the Linux theme is contributed by the Tango team (always friendly, and occasionally featuring overnight delivery :)

As a side note for Linux, can anyone point me in the right direction for contacting the team that works on the default Gnome OS themes? Basically all of our remaining polish points on Linux (related to icons) are things that we would need to improve at the level of the OS themes, like icons not being provided at the right size, and a lack of uniformity with the visual size of some glyph icons. These are things we are eager to get figured out, but right now our teams (and our instances of bugzilla) aren’t really in contact.


22
May 09

New Firefox Icon: Iteration 7

Note: this is a draft icon rendering for Firefox 3.5, the next iteration will be posted on Tuesday (Monday is a holiday in the states).

This iteration features a colored and textured version of the tail, with a few modifications to the shape relative to iteration 6.

Shiretokofirefoxicon-I7

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

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


22
May 09

New Firefox Icon: Iteration 6

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It’s better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.

Also please note that the tail (with a current flat color) literally hasn’t been painted yet, this is a work in process as we try to define the correct shape for the tail. Once we get that figured out the tail will get detailing with texture, color and lighting.

Shiretokofirefoxicon-I6

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

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


21
May 09

New Firefox Icon: Q&A, Mostly about Orange Juice

Here are some answers to a particular question that came in about how refreshing a brand can be fraught with peril.

So what are people supposed to say if they actually prefer the previous one for aesthetic reasons? Newer is not automatically better. If you are going to dismiss all “I still prefer the original” as being afraid of change, you’ve tilted the playing field rather a lot.

Remember what happened to Orangina [edit: Tropicana]. Are we really going to get more people downloading or using Firefox, or will they really have better feelings towards it, because we’ve refreshed the icon? What are we actually trying to achieve here? The current version is a really nice icon. Changing it just means that some people will go “huh, it’s changed”, and other people will not like the new version. Whether that’s because they are “afraid of change” or not is irrelevant, and doesn’t stop them not liking it. You are going to find it really hard to have an unambiguous win here IMO.

To clarify, while I was saying that similarities to the previous icon were driving positive comments, the implication wasn’t that we were planning on ignoring those comments, but that we were in fact shifting the creative direction for the tail. It was a little ambiguous (since the two variables being discussed were similarity to the old design and if the tail appeared threatening) and I should have written a clearer statement.

To answer some of the other questions specifically:

what are people supposed to say if they actually prefer the previous one for aesthetic reasons?

If people have that opinion then they are absolutely encouraged to comment. We are trying to get a good read on people’s general opinions by engaging on pretty much every communications channel that the Mozilla community uses. We are also looking into running some studies on mechanical turk so that we can get feedback from a mainstream non-self selected audience.

Remember what happened to [Tropicana].

For those not familiar, PepsiCo deployed new packaging for Tropicana orange juice, and then had to reverse the change due to strong public outcry from their most loyal customers. From the public comments, it’s clear that there are some really passionate orange juice drinkers out there.

Tropicana

The new design was done by Arnell, the same firm that created the refreshed Pepsi logo, which for people in the Mozilla community will likely look kind of familiar. Those interested in what a million dollars in brand design literally buys you, should check out the (potentially fictitious) document Breathtaking Design Strategy.

Pepsiangles

But to answer your question: yes, I think a disaster similar to what happened to Tropicana is something we need to be really concerned about. In particular we are finding ourselves in a similar environment, where we both have extremely passionate and loyal members of our community (and users of Firefox), and people clearly have a very strong emotional connection to Firefox. I totally understand that one must wear white gloves before touching the Firefox icon. The icon has become more than just a global brand, but something that our passionate community considers sacred.

So, assuming that we don’t want to just adopt a strategy of being frozen in fear, how do we avoid a Tropicana scenario? I think the only way to make sure we are avoiding that type of situation is to make sure that we have buy in from our community and passionate Firefox fans for the changes we are considering. To that end we’ve been extremely public with posting the creative brief, design iterations, and feedback. Mozilla is in a somewhat unique position to run a completely transparent design project (as opposed to relying on things like focus groups and NDAs, even though those things are really considerably more comfortable for designers).

So far I honestly haven’t seen a massive amount of public outcry (much to my genuine surprise given the subject matter), and my impression is that people generally understand both the direction we want to take the icon, and the reasons we feel refreshing a product brand is important.

You are going to find it really hard to have an unambiguous win here IMO.

Given that I still have people really mad at me for the awesome bar, I’m getting increasingly used to what it feels like to work on deploying an ambiguous win. Personally I’m hoping we have more ambiguous wins in the future, because they are still wins, and being frozen in time really isn’t an option in an extremely competitive marketplace.


20
May 09

New Firefox Icon: Iteration 5

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It’s better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.

Also please note that the tail (with a current flat color) literally hasn’t been painted yet, this is a work in process as we try to define the correct shape for the tail. Once we get that figured out the tail will get detailing with texture, color and lighting.

Shiretokofirefoxicon-I5

The icon is being rendered by Anthony Piraino at the Iconfactory. The design has been influenced by a conceptual sketch by Jon Hicks, and a conceptual render by Stephen Horlander.

Background Information on the Project

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


20
May 09

New Firefox Icon: Iteration 4 + Modified Creative Direction

Note: this is a draft icon rendering for Firefox 3.5, subsequent iterations will be posted every 24 hours or so. Also note that while these drafts appear with numbers and in a chronological order, each draft experiments with a variety of different ideas as we try things out to see what they look like. It’s better not to think of these as a formal sequence, but rather a series of experimentations to explore the overall design space.

Shiretokofirefoxicon-I4

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

Modified Creative Direction

Since this post is a little late, I can also provide the creative direction that we just sent out. I have to admit that doing a design project at both this level of magnitude and also at this level of transparency is kind of uncommon. So everyone please remember that these types of discussions that involve going back and forth with various options is in fact totally normal and expected part of the design process. Posting all of the information in close to real time and exposing a set of drafts that each have pros and cons publicly however isn’t often a normal part of the design process.

The email below provides a good window into creative process for working on an icon like this, and also provides an update on where we want to take the design.

Anthony,
Sorry for the delay in getting our feedback to you, a few totally unrelated things cropped up that took away some of my time. Here it is:

Parts of the design that are pretty much ready to lock down

-Head and arm
-Fur texture
-Shadow between fox and globe
-Globe (with the exception that the lower light source might need to be removed)

Parts of the design that are still in flux

-Tail: overall shape, color, and texture

I should note that the fact that we haven’t yet nailed the tail design is entirely our fault for not setting the correct direction. You’ve been doing an awesome job of implementing our feedback. Unfortunately we’ve only been able to figure out what works well retroactively, looking at the various iterations as they come in. So far we’ve been able to explore a few different approaches to what the tail could be physically made of (not just this with set, but also earlier with Jon Hicks concepts), and only after viewing the renders have we realized what the actual implications are.

For instance, some of the early tail wrapping work (particularly Hicks concept render 2008 r4) attempted to craft the tail literally out of flames. Being a “Firefox” I thought it might be a good idea, but it ended up not really working:

Hicksr42008

The overall problem with this iteration was that the transparency and flames weaving in and out of each other ended up giving the Firefox a sort of “hot rod” feel, transforming an otherwise cute creature towards the direction of a custom muscle car paint job. Also we quickly realized that things that are literally on fire don’t usually come across as being cuddly, safe, or protective.

Looking back at the initial Firefox icon, the simplified flames had the advantage of presenting Firefox not necessarily as a “fox on fire” but really more fundamentally as a mythical creature that hugs the earth. For instance, if you take nearly the same treatment of the Firefox’s tail, paint it blue and flip it upside down, the same general shape is recast as feathers:

Firefoxthunderbird

So I think the way people mentally interpreted the tail, even perhaps subconsciously, was not that it was “on fire” as much as it was a part of the creature. And this mythical creature was generally thought of as being soft and cuddly and protective (partly due to the nature of the product itself, but to a very large extent due to the icon’s direct portrayal of these character traits).

So jumping to Iteration 4, a lot of the feedback we’ve been getting was initially perplexing me. Some of the terms I was hearing on the direction we set was that it felt “menacing,” “evil,” or “not cute enough.” One person phrased it as “a little aggro.” I also noticed having a similar reaction myself, despite having specified the direction. The icon in iteration 4 is visually really powerful, but I feel the slightest emotion of fear when looking at it. Initially I couldn’t put my finger on why, but I think the reason ends up coming back to referencing parts of various animals and things that seem instinctually threatening. Looking through flickr I pulled a few pictures of things that were softly triggering in my brain.

Nature
(sorry, my brain too often falls back to John Howe illustrations)

Here is how those subtle connotations potentially overlay onto the tail in iteration 4:

I4Tail

So I think the solution to the tail, and our new design direction, is to try to create a form that is light, wispy, thin, furry, and cradling. Imagine the tail as a living part of the mythical creature Firefox, and that the Firefox is soft and friendly, but also stoic and regal.

Regalmythical

Stephen Horlander’s concept has been getting some positive comments from our community, and we believe a significant component of that is because people are afraid of change, and the icon is a little less of a departure from the previous shipping version. But also the tail in his concept exhibits a few properties that I think directly tie into expressing the personality of the creature:

Horlandertail

Again my apologies for initially messing up the direction. Failing to think about the fundamental personality and character traits of the Firefox was a huge gaffe on my part, and was really something I should have figured out in the creative brief. Let me know if I can provide any additional detail. Overall I think we are making really great progress considering how many other things we’ve been able to basically lock down.

I’m really looking forward to seeing the next iteration,
-Alex