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

    System 2

  2. maurizio wrote on

    System 1 :D

  3. Ylan wrote on

    I prefer icons of System 2, better design than system 1.

  4. Fabiani wrote on

    It’s a great thing that you ask the community. I prefer system 1 ;)

  5. Nix Nutz wrote on

    Was für ein Unfug. Wer keine Probleme hat, der macht sich welche. Was 2002 gut genug war, ist es auch heute noch.

  6. Martin Ligabue wrote on

    I love both styles, they’re fresh and clean. Maybe Design 2 is better, but idk, they have both good ideas

  7. Wuschel wrote on

    The design 2 is favorable in my opinion. It retains the old look more than system 1 and doesn’t turn things upside down completely.

  8. Xaver wrote on

    I Like – System 1: modernity, consistency, colors :)

  9. Santi wrote on

    Oh boy, is that system 1 master brand icon sexy!

    In the other hand, I feel like system 2 in overall meets all the expectations:
    Feels like Firefox, all of the icons have that twirling and gradient that reminds me of the brand.

  10. Maffi wrote on

    I do like the System 1 design,
    the contrasts are nice and help identifying the icon, no matter the background the icon is put on.
    It feels to me that the system 2 gets lost on brighter or more colorful backgrounds.
    The design of the foxes head/face also works perfectly – as its in the gradients of a flame/fire — yellow on the bottom and darker to the top. Fire Fox
    System2 looks too much like its tail – its about the whole, not just the behind (uh oh furries inbound)

    so yes, my pick, System 1

  11. Nix Nutz wrote on

    Was für ein Unfug. Wer keine Probleme hat, der macht sich welche. Was 2002 gut genug war, das ist es auch heute.

    1. Stevo wrote on

      Danke! Sehe ich 100% genauso!

  12. Gerbrich wrote on

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

  13. Shreevari SP wrote on

    I feel that neither of these designs reflects Firefox’s purpose and look too mainstream and common.
    Please come up with more designs.

  14. Lee wrote on

    System 1

  15. Martin wrote on

    I strongly oppose both Masterbrand icons – the first one looks like a fox and the second one looks like a fireball, but neither says “Firefox”.

    The icons in System 2 are overall more easily recognisable to me that those in System 1. That said, I have no idea what half the “icons for new apps & services” mean, which is the whole point of having icons in the first place. I would suggest going for something perhaps less stylish, but more useful.

  16. Kevin wrote on

    There is a very big problem with both masterbrand icons. Each of them only represent half of “Firefox”. No. 1 only represents the Fox, while no. 2 only the Fire. So, basically it’s split up. And I don’t understand it.

  17. Yves wrote on

    Change the icon considerably and people will not recognise it anymore. Remove the orange colour and people are lost, switching to Chrome because that’s something they recognise. Firefox with an all-new icon will be like any new startup browser, with no reputation at all.

    Don’t change anything, it’s good like it is. The slight quantum icon redesign was okay, simplifying things but keeping it well recognisable.

  18. Andrew wrote on

    System 2

  19. Nils wrote on

    I like system 1 better. It´s more modern.

  20. Edwin Koster wrote on

    I prefer System 2, especially the Masterbrand and General purpose browser icons. The rest of the icons look a bit out-of-sync with the Masterbrand icon. They don’t look like they’re part of the Firefox brand. But still better than System 1 though…

  21. Jesse K wrote on

    I like system 2 very very much, especially the Firefox icon! This icon is an evolution of the old logo.

    Maybe you can add more difference in line-width to the other application and service icons to make this collection more consistent with the Firefox icon.

    I think the Firefox icon must be leading in the choice.

  22. Sorin wrote on

    So the tail of the fox in System 1 is a bit too much. I’d love to see System 1 icons for Firefox with the tail from System 2 icons.

  23. KOFFI Bertin wrote on

    Pour le renouveau j’opte pour le System 2 Singularly-focuded browser icons.

  24. Peter O’Shaughnessy wrote on

    I think System 1 is stronger and looks more cohesive. It’s just unfortunate that – as others have pointed out – the System 1 Masterbrand logo looks very similar to Gitlab’s logo. I think if you can find a way to differentiate it from that, then you get a thumbs up from me!

  25. Maurício Fedatto wrote on

    I loved them both, awesome design! Although, I found the System 2 icons more pleasant, but the the master icon I prefer is the System 1 Master Icon.

  26. faxus wrote on

    Without any doubt the System 2.
    It is more recognizable, more elegant and modern

  27. Marian wrote on

    SYSTEM 1 !!!

  28. Florian wrote on

    I first thought the first proposal was the right one, because of its better cohesion (the icons for new apps & services seem more to belong to the family) while the option 2 has no “together spirit” to my mind…
    But at the second sight, the second proposal fits more with the innovative, technological face you want to show. And I prefer much more prefer the principle of the « rolling strips », more original and I think easier to recognize in the future 👌
    Nice work anyway 😊

  29. ojt wrote on

    As noted by some above, the System 1 carries too much resemblance to other brands out there. I even got the idea that they kind of look a bit Google-ish, which I think is not a good thing at all for Firefox.

    With that said, I do prefer the System 2 as a starting point, but I would evolve the “other icons” (single purpose browser icons, and new apps & services icons) more towards the System 1. So wider strokes, fully filled forms etc, but with the style and color scheme of the System 2.

    All in all System 2 looks more Firefox, of course also because it is less of a drastic take-off. Both ways are fine of course but I personally would take an evolutionary path instead of a revolutionary one. Firefox is a very well known and (imho) respected brand. Yes, it needs modernization but small evolutionary steps are just fine for doing that.

    Hope this helps or resonates with someone.

    BR,
    Osku

  30. Lewis Westwood-Flood wrote on

    I much prefer System 1’s browser logos – new while also being clearly “Firefox”. However, the master system logo is much too close to GitLab, which is an issue in terms of recognition.

    On that note, System 2 has much better looking general designs for new products, so I am pretty torn. I think a redesign incorporating both would serve best.

  31. Jack King wrote on

    System 2 of course!

  32. Linkl wrote on

    System 1 forever

  33. Joannie wrote on

    System 2

  34. Mateusz Kaźmierczak wrote on

    I prefer system 1. Those icons are solid – that makes me feel they stand for some secure and reliable software. However, there are two things I don’t like in it:

    1. The masterbrand icon in system 1 does not resemble any brand to me. I can see it’s a fox but I wouldn’t know that it’s Firefox if I weren’t told.

    2. The middle top icon for new apps: at first glance on system 1, I didn’t realized it is a picture. This icon is much comprehensible for me in system 2.

  35. Samuel wrote on

    I do not like the System 1 Masterclass icons as it looks pretty similiar to the Gitlab logo. System 2 Masterclass looks fine!

    Browser icons -> System 1, it just feels right having a blue globe in the background.

    All other icons -> System 2, better look & feel

    TL:DR Everything System 2, except the Browser Icons!

  36. Ro wrote on

    They’re both rubbish.

    The whole style (palate and shape style) is just meh. It’s completely devoid of character.

    In both systems the fox in the firefox logo fox is looking away from the earth. It looks possessive or daft.
    The current firefox logo fox looks more like it’s exploring.
    Broadly I think they fail your criteria.

    The best part of the firefox logo (although less so in the the current version) is the bushy flame tail. (https://design.firefox.com/photon/images/product-identity-assets/firefox-dont-1.png)
    Why not frame a concept around that?

    I would like to see a logo and brand that conveys nimbleness, playfulness, beauty, and a bit of magic/wonder. You’re not google.

  37. Linux User wrote on

    The first system is better. But I like the Firefox Quantum icon.

  38. Francesco wrote on

    System 1 is great!

  39. HimbeersaftLP wrote on

    I’d say system 1, but with a masterbrand icon more similar to system 2.
    System 1 has a better style and colour consistency and looks more modern (imo).
    System 2’s app & service icons look very generic while those from system 1 fit in with the rest of that system.
    The system 1 general-purpose browser icon is really awesome, combining the look of the previous FF icon with the theme of system 1.

    I’d go for system 1.

  40. Vlad wrote on

    I like system 1. Because I love flat design.

  41. Z wrote on

    I prefer System 2.

  42. Doshia wrote on

    From a design aspect, I prefer System 1. It holds together and immediately saw the fox (I’m assuming you’ll use the word mark “Firefox” for awhile
    for those who don’t), but…c’mon guys, almost a direct lift of Gitlab? That’s a non-starter, so it’s off the table.

    The second one is okay, but the icons a bit generic.

    At a more fundamental level, I wonder if you’re over complicating things by creating so many icons and levels. It seems simplicity and an uncomplicated approach is what Firefox is about.

  43. Firefox84 wrote on

    System 1

  44. Chris wrote on

    1st system looks more minimalistic and complex. Second one has too much free space.
    The problem is, that none of those systems could be adapted to Windows 10 square tiles, or Android adaptive icons. White icon background on a screenshot looked unfinished

  45. Steed wrote on

    I prefer system 2 please.

  46. Djuzpix wrote on

    System 1 is perfect ! Congrats to the designer(s) for this great job.
    I love the main logo. The fox has a stronger identity than “just another round logo of a web bro”.
    System 2 is very nice too but colors are colder and complex curves don’t tell me “you can trust me, I am stable, easy and efficient” and that’s what I want to ear when I choose my browser. System 1 is better on this point that’s all.

  47. mozilla_user_for_years wrote on

    The masterbrands need to be redesigned. I personally love the firefox nightly logo. More modern in regards to colors, still unique and recognizable.

    As a personal taste, I really prefer icons which avoid being to white’ish.

    Please try to design different masterbrands somehow. I vote for the firefox webbrowser logo in SYSTEM 1 (middle one) ;-).

  48. Thommie Rother wrote on

    I think I would prefer something like System 2, for two reasons: it reminds to the older symbols, but only for a little bit. Second, it is pretty “iconic” and feels more “organic” (maybe because of its “roundness”). I believe it would also be easier to make it 3-dimensional if this is requested sometimes. I personally would continue with the development of system 2

  49. Johannes wrote on

    Another icon change will lead to countless people asking “where has my internet gone”. Stop messing around with cosmetic crap like that! How often did the most successful brands of the world change their logos? I hope the answer will make Mozilla rethink this.

  50. Stefan wrote on

    I am not yet sure if I like the new artwork or not. But the most confusing fact: I am missing the new example icons for one of your most important products, Thunderbird.

    1. Olivier wrote on

      https://youtu.be/fKopy74weus

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