Mozilla Open Design

branding without walls

Evolving the Firefox Brand

2,212 responses

Say “Firefox” and most people think of a web browser on their laptop or phone, period. TL;DR, there’s more to the story now, and our branding needs to evolve.

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Firefox Quantum Browser Icon

As an icon, that fast fox with a flaming tail doesn’t offer enough design tools to represent this entire product family. Recoloring that logo or dissecting the fox could only take us so far. We needed to start from a new place.

A team made up of product and brand designers at Mozilla has begun imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of our Emerging Technologies group. Working across traditional silos, we’re designing a system that can guide people smoothly from our marketing to our in-product experiences.

Today, we’re sharing our two design system approaches to ask for your feedback.

 

How this works.

For those who recall the Open Design process we used to craft our Mozilla brand identity, our approach here will feel familiar:

  • We are not crowdsourcing the answer.
  • There’ll be no voting.
  • No one is being asked to design anything for free.

Living by our open-source values of transparency and participation, we’re reaching out to our community to learn what people think. You can make your views known by commenting on this blog post below.

Extreme caveat: Although the products and projects are real, these design systems are still a work of fiction. Icons are not final. Each individual icon will undergo several rounds of refinement, or may change entirely, between now and their respective product launches. Our focus at this point is on the system.

We’ll be using these criteria to evaluate the work:

  • Do these two systems still feel like Firefox?
  • How visually cohesive is each of them? Does each hold together?
  • Can the design logic of these systems stretch to embrace new products in the future?
  • Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
  • Do these systems suggest our position as a tech company that puts people over profit?

All the details.

The brand architecture for both systems is made up of four levels.

Each system leads with a new Firefox masterbrand icon — an umbrella under which our product lines will live.

The masterbrand icon will show up in our marketing, at events, in co-branding with partners, and in places like the Google Play store where our products can be found. Who knows? Someday this icon may be what people think of when they hear the word “Firefox.”

At the general-purpose browser level, we’re proposing to update our Firefox Quantum desktop icon. We continue to simplify and modernize this icon, and people who use Firefox tell us they love it. Firefox Developer Edition and Firefox Nightly are rendered as color variants of the Quantum icon.


Browsers with a singular focus, such as our Firefox Reality browser for VR applications and our privacy-driven Firefox Focus mobile browser, share a common design approach for their icons. These are meant to relate most directly to the master brand as peers to the Firefox Quantum browser icon.

Finally, the icons for new applications and services signal the unique function of each product. Color and graphic treatment unite them and connect them to the master brand. Each icon shape is one of a kind, allowing people to distinguish among choices seen side by side on a screen.

Still in the works are explorations of typography, graphic patterns, motion, naming, events, partnerships, and other elements of the system that, used together with consistency in the product, will form the total brand experience.

Read along as we refine our final system over the next few months. What we roll out will be based on the feedback we receive here, insights we’re gathering from formal user testing, and our product knowledge and design sensibilities.

With your input, we’ll have a final system that will make a Firefox product recognizable out in the world even if a fox is nowhere in sight. And we’ll deliver a consistent experience from an advertisement to a button on a web page. Thanks for joining us on this new journey.

Madhava Enros, Sr. Director, Firefox User Experience

Tim Murray, Creative Director, Mozilla

2,212 comments on “Evolving the Firefox Brand”

  1. Anoctoil wrote on

    Much to gaudy. Like a toy.

  2. Jeff wrote on

    System 1

  3. Nikato Muirhead wrote on

    System 2 is best. Very modern.

  4. leave me alone wrote on

    Main logo of system 1 is too close to gitlab logo.

    also the colors are too ubuntu unity desktop aka slushie vomit colors. this style is already out of fashion (not counting the mid-west).

    listen graphic designers, not everyone works at a start-up in a gentrified loft and goes rock climbing after work.

  5. Shingo, HORIKAWA wrote on

    Please re-consider both, from the point of universal design, especially color vision deficiency.

    I tried to simulate how they are seen by deficient persons, using “Chromatic Vison Simulator Web Edition 1.11” : http://asada.tukusi.ne.jp/webCVS/

    Attached image shows the simulation of Protanopia.

    Singularly-fucused broser of System 2 looks the same color, and on the other hand, new apps & services of System 1 looks the same.

    They are not favorable.

  6. Saad wrote on

    System 2

  7. Samuel wrote on

    System 1 reminds me of Instagram too much. System 2 is also reminiscent of their colors, but less so. I also prefer the shapes in System 2; the circular shape of the primary design is similar to the current Firefox logo, and I like the atom, the spaceship and the key better in System 2 as well.

  8. Saad wrote on

    The reason I believe system 2 is better is because it takes the colours of all the general purpose icons and brightly displays them on the rest of the icons making them more enticing than the colour-schemed system 1

  9. John G. wrote on

    If I had to chose, I’ll go with System 2.

  10. Japanese User wrote on

    I think that the system2 is good to leave the image of the present icon.

  11. Bernadette Charlie wrote on

    System 2 Firefox icons. Because a firefox is not really a fox but a red panda. It would be incorrect to let people assume that a firefox is a fox.

  12. Will wrote on

    Group 1 masterbrand icon looks like a fox, group 2 looks fire. I’ll go with the fox. Its so clever to put those geometric shapes into something that looks like a fox.

  13. Lee Sampson wrote on

    System 1 with System 2 browser icons seem to work best. lets not forget that the icons need to work on their own as well as work together. System 1 does this the best.

  14. jinkazama82it wrote on

    For me the Main brand and browser icon IMHO a direct recall to theactual logo for maintain the identity is the best way, completely change it seems a way to hide the origin of the brand.
    So for Main and browser the system 2 is the best, for other thing is indifferent but some icon from system 2 seems to much stylized to recognize what are.

  15. Leandra wrote on

    I like the sense of speed and strong silhouettes you get from System 2. But the System 2 masterbrand icon maybe too abstract while the icon for System one reminds me of the gitlab icon so it might not be distinct enough. Great mockups so far and looking forward to the updates!

  16. licca wrote on

    Style 2

  17. Anne Alias wrote on

    I am notso hotso on the Masterbrand choices — I’d prefer a somewhat foxier version of System 2. I’d rate the existing System 1, System 2, and a foxier version of System 2 as 10, 30, and 60 points.

    For the general-purpose browser icons, I strongly prefer the System 2 version because I’m old and can barely see and there is less ambiguity to them. Besides that, they look pleasant and familiar.

    For the singularly-focused icons, I strongly prefer the System 1 versions enough that I wonder whether someone misfiled this page and got it in the wrong “System” folder. They actually illustrate what you’re intending to do without being some op-art knot puzzle.

    I’m confused and uneasy about both versions of “New Apps and Services” because they seem to both be wandering away from “informative” and getting lost in the swamps of “stylish”. I have no idea of what I’d get from any of the 10 icons presented.

  18. Romy Taroreh wrote on

    I’d prefer group 1, with the browser icons from group 2

    https://www.linkedin.com/in/romytaroreh/

  19. Ryan wrote on

    I prefer the icons on system 1 but I do not like the master icon of one. I like the simplicity of the system 2 master icon, but grouped with all the fun icons in 1

  20. Edward Kenway wrote on

    System 2 is way more cohesive and is easily identifiable as being Mozilla branding which is essential for any evolutionary rebranding that does not seek to forget its past.

  21. Ann wrote on

    Gorgeous work across the board!

    My vote is for System 1 all the way—although I wish you’d reconsider the background in the general use browser icons. It’s not needed to distinguish this set from the other, and I suspect that this is the thing that has many others commenting System 1 with System 2 general purpose icons. No need to Frankenstein your systems to make this set just as popular.

  22. spiffytech wrote on

    I think the first two rows from system 2 plus the bottom rows from system 1 represent Firefox.

  23. Kelly wrote on

    It would be a horrible branding mistake to go with master brand 1 because of its similarity to Git Lab. I like the logo, but it’s too similar.

    I think the other system 2 logos, however, are terrible and don’t say “firefox”. They aren’t lush enough (like the fox tail).

  24. Andre wrote on

    Group 2 seems a little bit generic to me. I think group 1 icons have more personality and represents the brand better.

  25. Pedro Joffily wrote on

    I really like the group 2 in general. The icons drawn with lines might be a little too simple and unrelated to the masterbrand and browser icon, but those are really fine, recognizable but really fresh and bold. The group 1 is generic, it feels weak. Good job!

  26. muhammad kamal wrote on

    I like System 2 in general, both the colour range, and the fox likeness, however I like the System 1 Maser Icon over the System 2.

  27. Jani Sulaiman wrote on

    IMO, legacy still needed to be preserved (Fire+Fox)

    System no.2 is my choice. Looks good and fresh.

  28. Patrice wrote on

    I prefer the system one with his system one palet’s colors.
    But I love one icon of the sytem two that I can’t describe here because it’s too complicate.
    In any one, I use chrome.

  29. Ti268 wrote on

    System 2 is the way to go, pays homage to the past while looking modern.

  30. nemo wrote on

    Honestly, I don’t like either option. The groups of icons feel disjointed and incohesive. The coloring, line weights & shapes don’t meld together as a coherent whole in either variant. The shapes also often don’t seem to communicate their purpose well leaving a feeling of “mystery meat navigation”.

    As with other Mozilla initiatives & actions over the last few years (e.g. Cliqz, Pocket, flyweb, unwillingness to ditch dodgy root CAs), I’m left with a sense of uneasiness over the direction & focus of the organization.

  31. Meraz wrote on

    System 1 Team!!! <3
    Those new icons are beautiful!

  32. Joan Larcs wrote on

    System 2 here!

  33. m0r016 wrote on

    group 2.

  34. Mojca wrote on

    My first association after seeing System 1 masterbrand is to GitLab.

    Last three rows of System 2 are strange. For the browser (second line), I like the System 2 more.

  35. Arnaud wrote on

    The icons in system 1 are more clear and stylish in my opinion.
    All the best,

    Arnaud

  36. Ale wrote on

    I prefer system 1 overall, but not the browser icon(s). I think that these icons are better in system , but have to be changed a bit to match the system 1 style.
    Thank you for asking.

  37. Ben85 wrote on

    Well, if I hear the word Firefox I think of a Fox with a flaming tail. Just the flame or just the fox won’t do it, not even in the future, because it is Fire-fox.

    Firefox already has a unique and original Icon for its brand established and that is the main purpose and goal to achieve. It only should be adapted and it must contain fire and fox.

    A strong hint for the proof of this thesis is already given by comments like “Does that look just like [insert generic other brand name] icon?”.

    One must also consider that consistency is remarkably important for maintaining a brand’s identity.

    I understand this is the first public presentation with request for comment and it is in an ongoing process. As you promised, please listen to your audience since this is also the brands target group. Thank you.

    If that is fixed I would tend to System 1, because I like the Firefox ruling the globe.

  38. Victor Frunza wrote on

    Master brand icon:

    I prefer system 1 over system 2 for the master brand icon. System 2 is very similar to the current browser icon and doesn’t do enough to show a difference between the browser and all of the products associated with that browser. It also loses the fox part of Firefox, since it becomes just a swirl rather than including the fox head that currently exists in the logo. (I also personally really love this logo)

    System 1 is a new take on Firefox while leaving the traditional swirl for the browser and the identity the browser has with users. It also leaves a lot for other products because it doesn’t establish a similar shape for other icons, but is a distinguished shape that no other product will take on.

    Browser Icon:

    I think there a little bit too much overlap in the system 1 icons. Dev and nightly icons are very similar in color and the tail of the icon is nearly the same color. I don’t think they have enough color to distinguish between the two. They also look very busy, and on a taskbar or dock that is small, the detail in the icon, especially the head of the fox, might get lost.

    System 2 is much and the colors are much more distinguished than system 1. The tail in the dev logo goes to turquoise rather than Blue like the nightly one does. The detail is also simplified and minimalist.

    Remaining icons:

    The line based icons in system 2 don’t really have visual cohesion with the browser icons. The line breaks found in the icons also doesn’t work well the any browser icon in either system and feels very out of place. While these icons do allow for plenty of new products, they don’t really feel like an evolution of Mozilla or Firefox icons but rather something new that doesn’t feel like Firefox.

    System 1 icons don’t really do enough to allow for other products. If I picture having a lot of these Firefox products on my home screen, I would have an overwhelming amount of orange and blue icons. Adding more color could help distinguish between these icons. System 2 has excellent greens and blues and pinks, and I think system 1 would benefit from more colors and become more versatile.

  39. Milan Tubic wrote on

    Tried to comment on the site, but failed:

    Not sure why there is a need for another icon update.

    The Firefox logo is legendary and the current evolution with the Quantum logo is really nice.

    First thing I notice about the icons (System 1 and 2, not including the General purpose browser icons) is that it’s not immediately clear what they are supposed to do.

    I believe they should be simplified a bit, or done completely from scratch.

    Regarding the general purpose browser icons, if I had to choose System 2 is a bit better. But again, the current Quantum icon is extremely nice and modern, and feels like natural evolution of the previous icons. Also the Quantum icon conveys the message of the Firefox quite well (you can “see” it’s faster), I might be lacking the proper terminology, but I believe you understand what I mean.

    Regarding the Masterbrand logo. System 1 looks (a lot) like the Gitlab logo, no further comments are necessary I think. System 2 is better, but again, not sure why this logo is necessary at all, or why it has to look like Firefox so much, Mozilla is not just Firefox!

    And my last suggestion: Consider evolving (deriving) the other icons from the current Quantum icons. That would be much better in my opinion. Also, the Masterbrand logo should be something completely different, something Mozilla.

  40. Jose J. Fernández wrote on

    Hi! My choice would be: “General purpose Browser Icons” from System 2, everything else from System 1, but the bluish colors in some System 1 icons don’t look good, such as in “Singularly Focused Browser Icons”. I found these just too blue.

    To me, more colors (being red and orange still the strongest) would be fine, or just red and orange, but not red-blue. The current Firefox logo is fine since the fox and the globe it embraces are two separate entities and thus red-blue does no harm to the logo IMHO.

    It would be nice to see some kind of preview of a new Thunderbird icon, which could get all that blue from the other icons :)

  41. ron wrote on

    Hey Mozilla people! Why always new icons? What will happen after another 3-4 years? The very first one was the best one, where the fox was still fox.

  42. Jariel Jimenez wrote on

    I think the users on the service Tildes brought up a good argument as to why Firefox should keep its now iconic logo which is recognizable by almost all generations. A logo is just a pretty picture until users become familiar with it, and the Firefox logo has done more than that. It has certainly evolved over the years, but it still retains the Firefox brand, and while I understand venturing out for new ideas, it seems pointless to throw out the old, especially when the old looks as good as it does now. Everyone knows what to click on when you say “Firefox,” so why lose that with a new logo.

    Sincerely,
    Jariel @ 3AM

  43. Axel wrote on

    Take care: First one looks like the Gitlab icon.

    Which one is better: If I have to decide: 2. Arey they good? No.

    Both are not outstanding enough. They look like a everyday software, like Postman, or Atom. Reducing a logo to the inner core leads to some arcs and shades, mostly round. The colors today are all in the same area. Orange is one of the most common colors in brands and logos and it isn’t distinguishable enough.

    I guess you made your choice with your reasons. But I also had to decide for a logo for our product and we have decided to use a strong one.

  44. Bastian wrote on

    I like the second one (the rounded logo)

  45. Damocles wrote on

    System 2 without any hesitation!…

  46. Chris Nash wrote on

    To my eye System 2 is clearer and less static than System 1.

  47. Emiliano wrote on

    System 1 at 100%. I love the combination of the colors.

  48. Maerco wrote on

    Absolutelly System 2

  49. Toni wrote on

    I don’t like any but, forced to choose, I’d prefer System 1 with browser icons from System 2

  50. Chleese wrote on

    I ‘d prefer System 1 ‘s masterbrand icon , because it retain the original feature .
    About general-purpose browser icons and the others， I choose System 2.
    Wait for new face .

More comments: 1 … 30 31 32 33 34 … 41