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

28 comments

  1. Ya!! Very, very cool!
    If it were decided today that this is the new Firefox icon then I would surely support it. But since it isn’t (yet?), the only thing that I’d like to see is the head a bit lighter to even out and balance things between it and the bright colors of the tail. And now that the inner light stroke at the top of the globe is gone, you could probably still work in the snow cap (but it is not needed) as long as the combination of it and the light reflection didn’t wash out the top entirely.

    But all in all, this icon is hot!!!

  2. “Globe (with the exception that the lower light source might need to be removed)”

    If you mean the lighter green color, I agree. It doesn’t make much sense.

  3. Well, think you’ve done a good job of identifying what people thought was menacing. “custom muscle car paint job” is certainly not good, and (although I hadn’t really thought much about it until reading this post) I was definitely thinking of the Firefox as a mythical version of the red panda with a firey tail as part of the body, rather than an actual animal which was on fire (which is a bit horrible really – you’d have PETA after you…).

    I’m still not sure about the fur on the arm (or is it a leg?). I don’t think it’s too bad, but I think it could still be further towards the Stephen Horlander and/or the Jon Hicks version – so not actually like real fur, but just a bit more textured.

  4. This is the first one that I’ve really liked. This could definitely work as an “update” to the current icon.

  5. To be completely honest, Stephen Horlander’s tail looks so much better than this! Iteration 4 looks like a wing. A wing as a tail? Come on!

  6. It looks good, but the ‘draft rendering’ watermark makes it impossible to evaluate the globe (I can’t even see the border of the shadow properly), which is what I want to see improved most.

  7. Sounds like the new creative direction is to go towards render 3 rather than 1, 2 or this one, 4 (which isn’t a lot different to 1 or 2 IMHO).

    Woohooo! Three is definitely my favourite.

    Your email gives a great explanation of the concept that I’d prefer too.

  8. I’m not so much in love with this 4th Iteration Draft Rendering (http://tinyurl.com/DR20090518). I think it repeats some of the same flaws of the original draft rendering (http://tinyurl.com/DR20090514), namely the over saturation, inappropriate contrast, and lack of fur detail. The globe on this version, with it’s odd lighting/coloring, and artic “stain”, is the least appealing to me of all versions of the globe presented thus far. Overall I am not pleased that the iteration prior to this, which I felt was nearly perfect, did not seal the deal for the Firefox team. That version, my favorite of all by far at this point, was Horlander’s Concept Rendering (http://tinyurl.com/CR20090515). It feels very modern, smooth, bright, and alive, while still maintaining the classic Firefox “feel”. One improvement might be to add a bit of the fur detail shown in here (http://tinyurl.com/hicksR42008). Add that and our beloved Firefox won’t be far from perfection.

  9. Thin like paper? Yikes, papercuts!

    Can’t it be a little thicker?

  10. This is my favorite so far in terms of color and contrast. The fur especially is beautiful. Regarding the tail, I’m not a big fan that we’re heading towards a pointy one. Why not try once more to get a flamy one? I’m sure you can make one that doesn’t feel “threatening”.

  11. Wow, I like both of these. Even Hick’s original icon is pretty damn cool. If I had seen this with any of the previous versions, I’d consider you crazy for not considering it over them. Hicks version still might be my favorite, but I also think the newest iconfactory version is probably acceptable, too.

  12. I like the 2 little tufts on the bottom of the icon, and also the yellows are a bit brighter here, more like the current icon.

  13. Best iteration so far! :-) I read on the iteration notes and thought they were accurate and thoughtful on what the logo should symbolise.

  14. “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.”

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

  15. I’m not sure if it’s just me, but I never perceived the Firefox as hugging the globe; I always saw him as sort of laying on top of it. I think if the tiniest bit of his other arm were made to pop out of the other side–part of his shoulder–it would give us the impression that he’s hugging the globe with both arms, because it would hint that the second arm is there. When he hugs with one arm, it doesn’t look much like a hug.

    It could be argued that he’s hugging with the top and bottom of his body, rather than his left and right arms, but that doesn’t give me the same impression of a hug as do the two wings of the Thunderbird.

  16. Concept Rendering by Stephen Horlander is still the best :-)

  17. I see that my 2 previous comments were in line with what was done, and at this point I think that this looks very good, you can experiment with some tweaks to improve it further, but this is really good.

  18. I’m going to say what a lot of others have said, the rendering by Stephen Horlander is still the best.
    This iteration is good but I find the tufts near the head quite odd. The use of gradients would be much more appealing especially since these icons would be scaled down considerably. I know the whole idea behind the redesign is to give it a more 3D feel, but I thinks gradients can get you there too.
    The one that is excellent about this rendering is that there is a slight distinction between the head and the right ear. Wonderful use of light over there and I think this aspect should be definitely carried over to the next iterations.
    Now to the tail. I think the main reason why Stephen’s work on the tail comes out as much better is because he uses oranges rather than yellow. This produces the Firefox effect without making it too fiery. However the bottom part of the tail is much better detailed in the current iteration and looks better. A softer shading would be more appropriate though.
    Aite, I think I’ve said quite a bit so that’s it till the next iteration!

  19. The .png of the icon looks very different in this blog post downscaled by FF 3.6apre1 than it does at its native size. In particular, the red area at the bottom left of the firefox looks more like a red piece stuck on the animal than part of its fur. Only at full resolution can you see how it shades into lighter tufts going counterclockwise.

    The tail now looks kind of like a wreath around the right side of the world, an interesting connotation. But unlike the firefox’s furry upper (left-side) half, it’s got a weird moulded plastic feel. The current icon’s tail looks like carved wood on fire.

    At high-res the firefox’s furry upper half is excellent. The only questionable area is the fur tufts on the paw reads as four fingers drawn on the side of an undefined stub (more so at high res). And the underside of the arm has smooth streaks that don’t fit with the other tufts.

    The simpler bubble glow on the world is better than Horlander 20090515 but now it looks like the dark blue edge is an upward-tilting rim containing the bubble. I still think the effect is too bright and distracts from the firefox.

    This design is very good on its own merits. But it hasn’t quite reached the awesomeness of the current FF icon.

  20. This one looks a bit inconsistent because the left part is soft and peaceful while the right part is still aggressive (think claws, not fur) and too overloaded with small details like two fragments of the ocean visible through the fur (or is it a claw?). The dark brown coloring of the tail at the top-right is, too, inconsistent with the rest of the colors.

    Anyway, from your postings I see that you are very careful with all aspects of the logo, and I wish you good luck in working with so many different user opinions!

  21. Geez, I guess that I really should have woken up and finished my coffee before commenting this morning.

    In addition to my previous comment(s), I’d really like to see the tail from the last concept by Stephen Horlander replace this one. This one is too jagged and scary looking like some sort of medieval weapon. It also screams unapproachability and is the main draw of the icon.

    So again, in my opinion, replace the tail with Stephen’s, change the fox’s head and body gradients to look more like Stephen’s (lighter and more balanced with the tail), and change the globe’s lower color(s) and brightness.

    Can’t Stephen and Anthony collaborate and work together? We all are and do on the same project(s).

    In any event, I think that the icon is getting closer to finished than not.
    Again, thanks for the opportunity to participate. I’m fully aware of how cool it is, how honored we all are, and how unusual it is to be able to even be a part of something like this.

  22. Here’s an idea of what I mean up in comment 15:

    http://img29.imageshack.us/img29/6339/firefoxlogo.png

  23. A tail is dirty.
    The icon which Mr. Stephen Horlander designed is best.

  24. This one is my favorite by far and I agree that the tail is still the part that needs the most work. The main thing that has bugged me about every draft rendering so far is the fact that when sections of the globe are exposed on the right side of the tail, that makes the tail get smaller and then larger again as it moves toward the tip, losing the clean graduated effect that the original tail had. I realize that this probably sounds like nitpicking but to me it brings to mind the cheesy hot rod flames you mentioned.

    On a side note, I definitely agree with Kelsey that a hug is not necessarily implied by any of the icons. For a long time I wondered whether the fox was grabbing the globe, lying on it, or looking down on it from space as its tail jet-propelled it away. I think that a small bump on the left side representing a second arm would both imply a literal hug and provide good balance to the tail holding it on the right side, giving it an all-around feeling of security.

  25. Hello!, I’m very excited for the change of the Firefox’s Logo.
    Particulary i like the las photo, horlelander tail?, so, it gives a new profundity, a new volume, wich change the logo more than the others.
    Maybe interesting, a more detail in the volume, more depth. Or leave it just like that.
    I’d like to see all the last logo, please.
    Also, i like the flames that are back on the earth

    Good Work!, bye

  26. Iteration 4:-
    What I liked: The globe and the fact that it has retained the north-pole, without being over-bright on top.
    What I disliked: The spiky, predictable, menacing and aggressive nature of the tail.

    Stephen Horlander’s concept sketch:-
    What I liked: The tail was beautiful. The tail and fox parts were much better than any other iterations I’ve seen.
    What I disliked: The globe was too blurred, and the top portion was too bright.

  27. Vulpes vulpes
    The collective mode of this fox species assumes presence of black tips of ears. It would be desirable to see black tips of ears on this icon

  28. Take this tail shape, color & shade with Stephen Horlander’s color scheme, then add it to everything else in Horlander’s concept (the body, head, and globe, were near perfect (save a bit of tweaking) in Horlander’s rendering).