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. Sebastian wrote on

    System 1 Master brand definitely looks like GitLab. But it is overall fitting better together than system 2. What about combining the master brand (or all general purpose logos) from system 2 with the other logos of system 1?

  2. Audrine wrote on

    System 1

  3. Vincent W. wrote on

    System 2 – Firefox Masterbrand | because 1. looks like github and 2. I dont want to totaly miss my foxtail

    System 2 – General-purpose browser icons because they dont look to overloaded and have a “freshness” that I like maybe try to hold the color sheme and give it a background like in sys1

    System 2 – Singulary-focused browser icons looks futuristic and nice but I miss the colour sheme of system1… I dont like it in this orange-yellow only sheme…

    system2 – icons for new apps & services perfect.. just perfect

    Very well done but dont cut away your roots, I miss my earth-fox-chan.

  4. Noragiz wrote on

    I realy love system 1 logo this is a new gen of Firefox

  5. ak wrote on

    Both looks nice. Make all system icon available so, People like they can choose their favorites. Thank you

  6. Alan wrote on

    Love both, but 2nd is better!

  7. Adetunji Paul wrote on

    I would say System 2 seems overall more cohesive, however I do think the style is a bit dated.

    I prefer the icons of System 1, however the master fox mark does not look very Mozilla.

    Great work all around, I’m looking forward to how things turn out.

  8. Alexandros Manolis wrote on

    I really do believe that new icons for all your products would be a nice change, although I’m not sure why would this be something else rather than a simple redesign. Despite that, I prefer the Icons of System 1 better because they represent the Firefox logo a little bit better. The fox and the blue sphere, whereas the system 2 icon feels somewhat empty, and has not a significant change from the current one. Now for the “New apps and services icons” I am not strongly fond of either of them. The System 1 icons have a nice design, but I don’t like the fact that the icons are pure orange. And the System 2 icons seem “big” and abstractly designed. I suggest that there should be a redesign for the System Icons, because the icons seem random and abstract, where a simple user couldn’t possibly understand which service is which. Or it wouldn’t be memorable. The icons need to represent what the app is about, now matter the difficulty, and no matter the design. At least that is my opinion as a simple user.

  9. Yevhen wrote on

    System 1 is much better

  10. _xlf wrote on

    Animals.

    Mozilla claims to be the tech company that cares, and you wrote the logos should represent that. So who/what **can** care? Can some abstract geometric shapes? I don’t think so. Can a fox? Probably. Can a fox hugging a globe? Definitely.

    Looking at E-Mail: There’s that self-folding envelope with red outlines, appearing out of nowhere (GMail). Then there’s that door opening in the void, just enough to let an envelope slide through. Who brought it there? No one knows (Outlook).
    Or I could have my envelope brought to me by a bird (Thunderbird). That’s someone I can be friends with, someone I can trust.

    Yes, abstract geometric shapes are “modern”. But they aren’t friends, can’t be. They don’t have feelings. Animals do. And they can be friends, can care. They can express that by hugging.

    That’s what I like about the current Firefox and Thunderbird logos. Thus, for me, the animals hugging things are more important as common element than anything else. Actually, look at these two: They don’t share a color scheme, and their graphic style is quite different, as the details in Thunderbird (and old Firefox) are now replaced by gradients in Firefox. But they still look like they belong to each other, as they are the only animals curled up to a circle, hugging things (and in my case, even the only animals).

    However, I don’t like the fox head only masterbrand icon, as the frontal perspective looks somewhat aggressive. The fox head is probably a good choice, as for a product family, it would be a hard choice what to hug, but I’d prefer the head from one of the General-Purpose browser icons.

    For the special-purpose browsers, I’d expect some variant of fox to be present, like wearing a VR-headset, or hugging something related to their special purpose.

    Also, for the “new apps”: If you want them to be part of “Firefox”, then there should be a (Fire-)fox. However, I don’t see (yet) why they should be closer to Firefox than to Thunderbird, if you want them (as would seem more logical to me) to be part of the Firefox-Thunderbird product family, then I’d like to see more animals, with the common theme of being curled up, hugging something, like the Fox is hugging the globe, and like the bird is hugging the envelope.

    If the whole animals take to much space, keep at least that fluffy tail or something.

    ——
    some remarks to individual logos and my own taste:

    General-purpose browser (Standard edition):
    I’d be happy with both, but prefer the first:
    – both heads are great, I prefer the first nose, but the second looks more awake and curious
    – the first tail is wayy more fluffy, the second looks kind of artificial
    – in the second version, the globe is missing, being used to the firefox-with-globe, this is quite distracting, but would be great for a 404-not found page.
    – however, I prefer the 2nd color scheme, as neither foxes nor fire are pink in real life.

    Developer Edition:
    Somebody said it was hard to distinguish from the others for colorblind people. I’d suggest the blueprint/outline theme the browser UI had for a while, thus adding to geometry.

    Nightly:
    The proposed color scheme looks like ice to me, I’d prefer it wayy darker. Maybe add some stars for geometric distinction?

    Masterbrand thingy (System 2)
    The swirl looks abstract and artificial, like the tail in that system. If it was as fluffy as the tail in system 1, I’d take it.

    The first special-purpose logo in System 1 reminds me more of an existing soil brand in Germany. I think I saw it at Dehner Gartencenter.
    Also, the first “new-app” logo gives me a Deja-vu.
    Apart from the Image and the Lock, they don’t convey any meaning either.

    ——TL;DR—–
    I want animals hugging things. Animals who care about me. (Or at least some part of them, like that fluffy tail)

  11. Alain-Michel wrote on

    System I for sure. Fancy and chic!

  12. Oliver Beyer wrote on

    The (System #1) Masterbrand Icon really looks great and would be a bold step forward for the brand. Stands out among the other browser icons and is really easy recognizable. It’s definitely more “foxxy”.

  13. Josh wrote on

    System 1 all the way for me!

  14. MyName wrote on

    System 1 = GitLab
    System 2 is the way to go… :o)

  15. Joshua wrote on

    System 1 for me! System 1 looks like the most design-forward.

    Love it simplicity, but not digging the sticker-look of system 2. Reminds me of 2014.

  16. Urceus wrote on

    The master logo from 1 says “Firefox” so much clearer than 2, but it would be even better if it was blended or natural, and not just blocks of shapes

  17. gipixez wrote on

    All images in that post present clicheed, boring, tasteless, archaic, unpleasant design, looking like it was ripped from some developing country’ startup with 3 employees.

  18. vosspl wrote on

    To me the Set 1 Browser icons look really unbalanced, I miss the elegance of the quantum browser icon. All the other Icons are fine for me.

  19. Michael wrote on

    By far, System 2.

  20. Florian wrote on

    System 1 is perfect. Each design is linked to the masterbrand.

    Too much color variation for the other system.

  21. Mehdi wrote on

    System 1

  22. SLAMNDAN wrote on

    I much prefer the system 1 options, and I disagree with others who think it looks too much like gitlab’s logo. I think the two are distinct enough.
    Although the chrome-like icon from the second row does need to change.

  23. Adnan Issadeen wrote on

    Either System 1 or 2 will work fine for the icons. For the master brand however, System 2 entirely. You can still see the elements of the past in it enough for it to be recognisable. That is evolution.

    To change to System 1 will not be an “evolution” of the brand. It will be to ask people to embrace an entirely different one. I’m all for change, and I could shrug and continue to use Firefox if you changed to System 1. I’m not going to take to the internet to say something terrible has happened. But in purely objective terms it’s impossible to define System 1’s Masterbrand as any form of evolution. It is not recognisable. It has nothing to do with the current logo to anyone who might be shown it without the context of this post. And adopting it would do nothing to show the change in Firefox’s mission. All that the System 1 Masterbrand does is to shock and say “hey we’ve changed for the sake of change”.

    PS – If you had said that system 1’s Masterbrand was a rebranding of Gitlab, I’d believe you.

  24. Jason wrote on

    System 2 seems a bit more polished.

  25. Francesco wrote on

    Both systems looks like Firefox.

    System 1 is more cohesive, however I feel hard to distinguish differences between icons.\

    System 2 looks more innovative, clear and adequate for Firefox position.

  26. Gnoti wrote on

    Good job! System 1. More flat design. But I also like the Masterbrand icon of System 2 which is easier to remind people of the present Firefox visual identity. But the fox head is good too and I don’t mind changing. So generally, I vote for system 1.

  27. Joseph wrote on

    System 1 is easier to read. Seriously though, all those icons are too noisy, in an time were icons get simpler. Scale them down a notch. Browser icons from system 2 are better imho.

  28. Semion wrote on

    Leave current icon – and do work on api for removed addons instead.

  29. Lisa wrote on

    System 1

  30. Klaus-J. Wolf wrote on

    I guess the use of less complex (read: simplified) ideograms is not helpful. The required association with the original brand is no longer possible.

  31. Daniel Aprea wrote on

    I like System 1. It’s fancy, modern and the icons concept is uniform.

  32. Basset wrote on

    System 1, whitout hesitation !

  33. NAnonim wrote on

    I Prefer System 2 because it is modern

  34. binaryanomaly wrote on

    System 2 – General purpose browser icons are ok, though a bit too playful for my taste.

    System 1 Masterbrand looks like a not as good copy of github – don’t go this way.
    System 1 and 2 – Singularly-focused icons: No like, both of them
    System 1 and 2 – Icons for apps and services: No like, both of them

    Please don’t make the icons something embarrassingly playful. It’s a browser and not a toy, it should look somewhat professional.

    I almost prefer the current Firefox Quantum icon.

  35. Alberto wrote on

    Oh! I like the first one!

  36. Les wrote on

    System 2 is more preferable, as it looks nicer, understandable than system 1. And it is simpler in connection with all the previous iterations. Also, I wouldn’t mind Mozilla to redesign Thunderbird icon and look in same tyle.

  37. jonatjano wrote on

    I personally prefer system 2.
    But I think the colors of the “for new app” icons are too far away from the others icons colors. If I saw these elsewhere I would not link them to Firefox.

  38. Makif wrote on

    Definitely System 1.

  39. Alexandre Grais wrote on

    I prefer system 2 as system 1 does remind me too much of Gitlab.

    I really like the 3 different foxes which comfort me with the existing brand but gives a new fresh look and dynamic.

  40. Giorgi T. wrote on

    I support System 2 because I want my support for Mozilla Firefox to be distinguishable from GitLab! Also, it’s about the “Fire” not about the “Fox” in Firefox! This is from a life-long Firefox user! Love…

  41. Robert wrote on

    system 2 is easier to recognize and seems clearer to me in its structure

  42. ScoRp wrote on

    I vote for System 2

  43. Jonny Scholes wrote on

    Great to see Firefox looking for a cohesive design system for all their exciting projects! System 1 has some promise I think. My 2c :)

    System 1 – browser icons are my favourite ones of all icons. I saw someone comment somewhere “only foxes chasing their tales are Firefox” and I agree. With that in mind I question the need for a master icon that is not either the same as the Firefox browser icon (or is a close variation of it). It seems a pity to divorce the master brand mark from the mark that has defined the brand for decades.

    The other system 1 icons are much better than system 2 but none of them feel particularly strong when standing on their own (although I recognize this may be because they are earlier drafts). I think they are on the right track but I’d like to see something more than just colour and curved corners in common. Perhaps play on the circular motion of the main fiefox logos or the sharp ends of the tail contrasting with the softer edges if the face? I’m not sure but I also feel like those gradients might lose contrast when viewed by someone who suffers from colour blindness and make the logos just… Shapes.

    System 2 – all the icons other than the master + broawr icons are busy and feel cheap. At smaller sizes they become hard to recognise what’s going on in them.

    Looking forward to seeing more :D

  44. Alexandre CUGNOT wrote on

    System 2 for sure

  45. Twixes wrote on

    I love those System 2 masterbrand and general purpose browser icons, others look out of place though. They would look much better without all those odd folds and twists (less 3D).

  46. Manon LE CLOAREC wrote on

    I love more the System 2, but both are superb. Great job !

  47. Carlo Gamna wrote on

    I’ll pick system 2 (eventuali if I prefer the old logo)

  48. Pedro Guerrato wrote on

    System 1! I think the fox must always be the icon of Mozilla and the system 1 shows it better!

  49. Giak wrote on

    System 2 is awesome!

  50. Emma wrote on

    the system 1 is the BEST

More comments: 1 … 5 6 7 8 9 … 41