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

    System 1 for sure. It’s bold and signals much more of a ‘fresh start’ that looks to the future.

  2. Yosik wrote on

    I think System 2 is better.

  3. Gregory wrote on

    Overall I would select system 2, even if the icon for the new app and services are a bit too bright and the lines could be thinner.

  4. Massimo wrote on

    System 1

    Maybe it’s sad to lose the typical round shape, but the main symbol of Firefox it’s the Fox. This is a great occasion to renew the brand and make it also different from the common trend of other browsers.

    Great work!

  5. bunam wrote on

    hi,

    I like the system 1 because I’m sick with the firefox that eats its tail

    Does there is sources of current work somewhere?

  6. Filip wrote on

    Honestly I really like System 1 because the really pop for some reason. System 2 seems like Samsung mobile icons.

  7. James wrote on

    Overall I prefer the masterbrand and general purpose logos from system 2. System 1 does not feel like “Firefox”, and system 2 keeps the circular logo and the sense of motion that the current logo has. The System 1 masterbrand logo also resembles the GitLab logo, and is in similar colours.

    The apps and services icons for system 2 do not look cohesive with the rest of the system. System 1 is much more generally cohesive between all it’s icons.

    Overall, I prefer system 2.

  8. Ainthil wrote on

    Great initiative !
    From my point of view:
    + Masterbranch icon 1 is the best, clean, modern and expressive
    + Browser icon 2 are the best, system 1’s looks too childish, maybe an earth suggestion could be a good addition
    + For other icons, consistency of system 1 is better, but maybe too many different colors and I have the feeling that shapes can be improved
    + My feeling is that system 2 will not age well

  9. Ann wrote on

    System 2

  10. Serg P wrote on

    I’d prefer group 1. I think that the colors of this set of icons are better

  11. kot-6eremot wrote on

    System 2

  12. Michal wrote on

    System 2 Master brand logo with System 1 Icons.

  13. florent wrote on

    System 1 looks very great

  14. Marcus Tucker wrote on

    System 1 masterbrand is significantly different, both from the previous masterbrand and from both sets of browser icons, so it’s the clear winner for me.

    As for the browser icons themselves, I prefer System 1 there too, but both sets fail to significantly differentiate the developer and nightly icons from each other and from the normal icon, so that if you see 2 or 3 together you know instantly which is which. But those sets simply don’t, only the first is clear and that’s only because I know associate Firefox with the colour orange.

    For example, couldn’t the “nightly” one be at least darker (like night)? As for developer, I don’t know what to suggest, maybe a shape difference – such as a more angular, robotic fox?

  15. JES wrote on

    Set 2 :-)
    Light design, clear, modern and simply nice…

  16. Wes Turner wrote on

    Love the new designs and refreshing updates. My favorite is system 1, but the main icon (fire circle) and browser icons of system 2 are nice. System 1 seems to fully utilize the Mosaic and nicely nails the essence of the Firefox in diamonds. The other sample icons from system 1 remain consistent with the theme and feels more mature and complete. System 2 feels a little childish and needs work. Too playful in system 2.

  17. Lara wrote on

    System 1, but with masterbrand and general-purpose icons from System 2. Also, in the browser icons in System 2 I would keep the blue globe behind.

  18. Artem wrote on

    System 1

  19. Mauricio wrote on

    The System 2 New App icons are so ugly I can barely look at them

  20. Hugo wrote on

    System 2 master brand icon is superb. System 1 is too different and people will not recognize the brand.
    System 2 general-purpose browser icons look cooler than System 1
    For the rest System 1 icons are more “professional” System 2 icons look childish.

    Summary:

    Master Brand: System 2
    General Purpose Browser: System 2
    The Rest: System 1

  21. Eliastre100 wrote on

    Hum the first system 1 master brand made me think about Gitlab at first …

  22. Ivan wrote on

    I like system 1. Because it’s more understandable for me.

  23. Stephanie wrote on

    System 1

  24. Shalendra Chawla wrote on

    Honestly not liked both the styles. Can do better with the shapes. Colour choices of Yellow, Pink, Red are too fast colours, could be down in the shading.

    Width of the strokes are thin and could have visibility problem in smaller form factors. Opaque the white spaces, so somehow it will have some solid shapes.

    Thanks.

  25. Nicole wrote on

    Overall I like them both, but a very strong preference for the System 1 Firefox browser logo; it seems to me that keeping the blue planet is very important in keeping the browser logo’s equity.

  26. marcus wrote on

    As I have some colour vision defects. I have a problem with the firefox logos from system 1. System 2 is a little better because of the higher contrast.

  27. Kris wrote on

    System 2 is far superior

  28. Victor wrote on

    I don’t like either System 1 or System 2. However, if other options are not available I choose System 2.

  29. P-A Espana wrote on

    System 1 all the way !
    It’s a real evolution while staying true to the original design. It is simple, cohesive and legible but it still has character. The only downside I see is the general purpose browser icons are a bit too dark. It might be a problem when small and it gives a bit of a dark vibe.

    System 2 does not represent enough of an evolution and it lacks originality. The general browser icons kind of say “I’m afraid of big changes”. And the specific icons, though really well made, do feel to generic…

  30. IzakSen wrote on

    I think the System 1 is more adhere to the Firefox’s last logos and….
    but System 2 is too new . so if I see it for the first time I can’t understand these are for which app or company. maybe it has a little distraction.
    and also others said System 1 is like Gitlab. but if you buy Gitlab. this is brilliant because they are the same.

    So your Questions :
    => Q1 : Sys1 is more Firefox than Sys2
    => Q2 : both have good cohesive.
    => Q3 : Sys1 is better, for Example, your services and app in Sys 1 is more clear and obvious(compare the both :
    the logo that has lock in it in sys1 and the same in sys2 (the purple one). which one is obvious ?)
    => Q4 : Sys 2 is better in showing this.
    => Q5 : Sys 2 is better.

    at all I think to use combinational of these systems in one . and use colors of Sys2 in Sys 1.

    1. IzakSen wrote on

      oh I forgot to say that buying Gitlab was just a joke :))

  31. Matthieu Mitrani wrote on

    I prefer system 2 which looks more mature!

  32. Javier wrote on

    As I feel it, option number 1 is the overall best from the two. It feels cohesive and intuitive, where each icon represents and express the function of that they are trying to tell/show. My only caveat with Option 1 is the Masterbrand icon since it reminds me way too much of GitLab’s own icon.

  33. Bennett wrote on

    I’m very much partial to system one. Microsoft Office already did the “bendy tubes” concept a while back and I was not digging it. I think system one looks more substantial and satisfying. Also, I’d want to hold onto the globe that the fox is hugging for as long as possible. It really does shout “internet”.

  34. Marcus wrote on

    As I have some colour vision defects. I have problems with the firefox logos from system 1. System 2 is slighly better because the contrast is higher.

  35. SHuston wrote on

    System 1 for sure!

  36. Will wrote on

    As somebody who will probably only use Firefox Quantum (and maybe Focus), all these icons are a huge downgrade from the current Firefox Quantum icon which is wonderful. Also, this is the first time I’ve begrudgingly referred to it as “Quantum” because it makes so much more sense to just continue call it “Firefox”. To have Firefox refer to something else seems confusing and unnecessary.

  37. artischock.com wrote on

    The masterbrand 1 is pure genius!

    (Just do yourself and us a favour and ditch the gradients.)

    Play around with this
    https://artischock.at/temp/fox_solo.svg
    Just like in the attached System-X.png.

    Masterbrand 1 definitly has to become the most seen logo = the firefox browser icon.

    1. Johannes wrote on

      Did I attach the png? Here it is (again).

  38. stefan wrote on

    I’m more conservative, so I prefer System 2. Why? Make a test: In the attachment you can see, there is a Windows button on the taskbar and created a Menu button. To access the Windows menu that you think will push users? The Windows button we are used to or the new button created with suggestive name, Menu? I think they will just press the Windows button and not the Menu. What do you think? Users who are very accustomed to the old Mozilla icons do you think will easily accept other icons for Mozilla applications?

  39. Erik wrote on

    I would leave at least the application icon as it is. It’s not that old yet and IMO a new icon must be accompanied by another perceptible change, like the switch to Quantum, for the sake of consistency.

    But if you wanted to change anyway, I’d prefer system 2 because system 1 is not really distinctive. The masterbrand of system 1 looks too much like the GitLab icon (which others pointed out as well) and its VR icon reminds me of Google Picasa. I could also swear that I’ve seen a rocket like this somewhere else.

    Let’s check against your categories:

    * Do these two systems still feel like Firefox?
    * How visually cohesive is each of them? Does each hold together?

    No, just one and no. System 1 does, but system 2’s icons for new apps and systems have a different color scheme. Which might fit as I assume that these new apps and services will extend far beyond Firefox’s core business (web browsing).

    * Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?

    Not really. They’re colorful but that’s common nowadays. To reinforce wit and innovation you could change the color scheme to a more contrastful and accessible one (see Abraham Ladha’s comment for what I mean).

    * Do these systems suggest our position as a tech company that puts people over profit?

    How would they? Like I mentioned earlier, they’re not really distinctive. To make them distinctive, maybe you could go full-contrast like you did on the website.

  40. Werner Hammann wrote on

    I’d prefer System 1.

  41. bob wrote on

    I prefer System 1

  42. Graouu wrote on

    System 2

  43. marcus wrote on

    As I have some colour vision defects. I have problems with the firefox logos from system 1. System 2 is slighly better because the contrast is higher.

  44. Davide wrote on

    “System 2” forever: the masterbrand is more recignizable, and it’s different than the 1 that’s pretty equal than the gitlab’s one.
    When you will choose, please sell the t-shirts! :)

  45. Axel Rindle wrote on

    I’m definitely tending to System 1, because it preserves one main color throughout the icons. Also I think that the “Icons for new apps & services” in System 2 don’t really match with the rest of the icons & colors.

  46. Gab M. wrote on

    Both systems are interesting and colourful but System 2 is my favourite as it appears less “heavy”.

  47. Phi21 wrote on

    I definitely vote for system 2 icon set!

  48. Henry Loenwind wrote on

    The old browser icon has one huge benefit: It is 2-colored. This makes it easy to find in the taskbar.

    Too many applications nowadays use a single-colored vaguely round icon, this makes finding the correct application hard. I cannot count the times I switched to Lotus Notes/Eclipse/GitKraken/… when I wanted to go to one of the others. They all are “round and blue”.

  49. Silver wrote on

    Style one looks much more professional and visually appealing. Looks like tech. System 2 looks low effort and hard to distinguish at a glance.

  50. Gregory Warner wrote on

    Initial impressions: While in appearance I gravitate more toward the look of system 1, it also feel more generic and forgettable. Anything with repeated exposure will eventually say “Firefox” to those looking for the apps and services, but too much of a simplification of strong silhouette details will make it harder for the eye to pick up on the distinctives. I actually really like the current iteration of the Firefox browser icon, and the subtler shading in the latest version mixed with finer details is what makes it stand out next to my other apps. Soften the fox too much, and he grows too generic. I do think System 1 holds well together in terms of shape and color, but I’d caution against softening things up too much. For master services icon over each family, I get the concept that people associate the Firefox icon primarily with the desktop browser, but I don’t see why the “family” inherently needs an overarching mark. Why not simply try to more closely associate child services/other browser forms with the Firefox browser icon as the parent mark? I’d argue you should help people view the newer services with the main browser as a family, not introduce yet another mark that doesn’t stand for any singular product, which in my mind just introduces confusion. And to reiterate what some others have said, sys.1 parent icon definitely feels too far away from the Firefox brand and is more akin to Gitlab in in initial impression, and sys.2, while nice, feels extremely generic. If you use it on some supporting brand materials, fine, but my impression is ¯\_(ツ)_/¯

More comments: 1 … 7 8 9 10 11 … 41