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.
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:
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:
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.
(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:
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.
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:
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
