Evolving the Firefox Brand

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

    Je préfère le groupe 1 avec les icone du groupe 2 pour le navigateur. Je pense que le groupe 2 ne représente plus suffisamment le renard de firefox !

  2. vulcanmeister wrote on

    System 2 please. I’m still a fan of the current version, and this one keeps closer to the icon that I’ve known and loved.

  3. Gabe wrote on

    I vote for System 1 w/ System 2 browser icons too.

  4. J-Redhead wrote on

    The “masterbrand” logo 1 makes me think of Gitlab; while logo 2 is kinda generic looking, reminds me of something as well. Whatever happened ol’ moz? You should bring ’em back! :D
    Both browser icon sets are interesting, but I think the earth should stay, and be re-emphasized; it’s important, a reminder of the amazingly global thing the web is, a little humbling even maybe. The web — or rather it’s citizens — needs more humility and such, I think.
    For the other miscellaneous icons, set 2’s icons are more… clear feeling I think, but set 1 (somewhat) better conveys the relation to Firefox.

  5. Carlos Ll. wrote on

    System 1. It shows a revamped logo in accordance to the evolving theme.

  6. OJ wrote on

    System 1 is alright. I dislike System 2 because alters the traditional Firefox web browser logo to the point where it’s not even recognizable as the same product.

  7. Sam Graham wrote on

    Group 1’s main logo looks too much like GitLab’s. You’ve got to have your own identity. I like the browser icons from group 2 more as well since they are still familiar enough to be recognizable. Group 2’s icon’s also appear to be more easily distinguishable from each other, as group 1’s icons tend to flow into each other visually.

  8. Alper Ahmetoğlu wrote on

    1. I didn’t like neither of them. They are actually nice. However I strongly associated Firefox with the fox. It is the fox. Therefore in my opinion these icons should be more connected to this fox.

    2. Colors don’t always have to match. Some apps may have a color that is totally different from others.

    3. Thunderbird’s icon was very cool. Although the bird and the fox are not directly related, one can easily associate the two apps. So maybe you can think of a theme (for example animals or nature can be nice). This theme should also remind someone of openness, efficiency and privacy.

  9. Natasha Alimova wrote on

    System 2 Masterbrand and general browser, System 1 everything else.

  10. Patrich wrote on

    I think that the System 1 is perfect!

  11. Aslanex wrote on

    I am surprised you want to change the logo so soon after introducing the new Quantum logo. I like the Quantum design, primarily the fox’ tail sticking out on top and the clear blue-orange colors. Therefore, I don’t really see a need to create a new logo at this time. Should a new logo be introduced, I like the second variant a little more. But I would still try to include the sticking tail and blue color as in the Quantum logo.

  12. Dmytro wrote on

    I agree with the others about the similarity with GitLab’s icon.
    But in General I am glad to see active work on design.

  13. christophe dreano wrote on

    Decidedly System 1

  14. John Westra wrote on

    System 1 w/ System 2 Browser Icons is an obvious sentiment I completely agree with!

    @Lucas Petes comment:

    “I think the current palette is too electric-rainbow-neon-saturated-OMG-MY-EYES.”

    was also my immediate reaction. Frankly, the suggested color palette SUCKS!

  15. same thing wrote on

    I gess system 2 is better

  16. Anthony Flores wrote on

    I love both sets, which ever set Firefox chooses I will be more than happy!!

  17. Marooxx wrote on

    I thing the system 1 main icon is good. For the others, I prefer system 2 icons

  18. zG SliZe wrote on

    system 2 have my vote, the “outline” logo design is so much 2018

  19. Elias Souza wrote on

    I liked the idea of evolving, system 1, very good.

  20. jack wrote on

    System 1, no doubt!

  21. Manon wrote on

    Hi
    So I prefer the fox’s head on system 1. But I love the icons of system 2. Systwm 1 looks cheap.
    Please system 2 and keep fox’s head on system 1

  22. Lindsay wrote on

    I definitely prefer group one. The geometric fox had me at hello.

  23. Andreea wrote on

    I like System 2 logo because, kind of, it is the actual Firefox logo and will not confuse the users, especially ones that are used with the Firefox elements because they are using it for ages. Instead, I do not like the icons.

  24. Karl Heiman wrote on

    Color scheme reminds me of BGD Paragliders.
    http://www.flybgd.com/en/paragliders/paraglider-epic-en-ltf-b-210-0-0.html

  25. kirsten wrote on

    System 1 looks has straight up Google’s design sensibility. I like it for sure – but is that right for Firefox??

  26. andy wrote on

    system 1 is the best option for sure

  27. Karen Willenbrand wrote on

    The system 2 masterbrand icon is much better, and much more familiar as “firefox,” energetic and in motion, echoing the round, dynamic shapes that has been common in browser icons for decades. If I saw it and had never seen the Firefox logo before, and you asked me what sort of app the icon represented, I’d immediately guess that it was a web browser.

    The System 1 masterbrand is abstract enough that it can be interpreted in different ways–as a dramatic burst of swirling flame, as a rising or setting sun, or even as a stylized fiery eye. At the same time, the image has a clear continuity with past branding. The System 1 masterbrand icon is beautiful and striking, and I love it.

    By contrast, the System 2 masterbrand icon looks blockier, though recognizable as a fox and certainly orange. Unfortunately, rather than looking like a web browser, it looks like a startup for a furry hookup app. Foxr?

    As for the general purpose browser icons, neither option is great. System 1 looks oddly messy, and also a little bit like a tadpole. In the current logo, the jagged edges and coloring make the fox look dimensional, and that combined with the orange/blue makes it pop off the screen. But System 2 has much smoother gradients and a more flattened look, and that combined with the rough edges results in a logo that appears to have been roughly cut out of bright plastic. I’m not against flat logos and gradients, because it’s 2018 after all, but this is not a good use of those elements. The purple underlight on the orange icon also undermines the otherwise striking blue/orange contrast, which is one of the current logo’s best assets.

    That said, I’m not a huge fan of the second browser icon either. The fox’s tail is thin and is underwhelming both as fire and as a fox’s tail. The eye doesn’t move naturally around the circular shape of the icon, either. I also think it’s less than ideal for it to be only orange instead of orange/blue. Additionally, the position of the paw is difficult to interpret with respect to the fox’s body–another pitfall of the flattened design that hasn’t been compensated for. Is the fox craning its head over its shoulder? Is it looking inward? Who can say.

    I prefer System 1, with a few tweaks to make the warm/cool contrast more striking. The deeper colors of the purple and blue logos are very good, though.

    For the singularly-focused icons, I prefer System 1. The rocketship icon is especially good, with subtle depth and transparency, fun and colorful but with a cohesive palette that doesn’t make it look childish. System 2 singularly-focused icons are fun and echo the bright, swirling motion of the other logos, but lack a certain weight, and the first two aren’t very visually distinct from each other.

    For the new apps and services icons, now System 1 has a problem of visual distinctiveness. This is especially problematic when two of the icons appear completely abstract. That said, System 1 is more attractive, even if it would benefit from some more varied color palettes. The cube with the lock especially is damn cool. By contrast, the broken shapes of System 2 look a bit off-kilter–they’re sort of fun and whimsical, honestly, but they’re not very cool.

    Overall I like System 1, (though with less of the weird purple, and more color palettes to distinguish the icons) and especially love the masterbrand logo.

  28. Van. wrote on

    System 2

  29. Baptiste wrote on

    Group 2

  30. Gianfranco Pellegrino wrote on

    Group 1 with Group 2 master/browser icons.

  31. Keyikedalube Ndang wrote on

    I like both… except the System 2 MasterBrand icon. Keep the head will ya ;) Can’t make it if it’s a fox or some company’s logo.

  32. Vasiliy wrote on

    System 1 is really great! It’s a real FOX! Moreover it has much more style!
    Definitely better than System 2…

  33. Amir M wrote on

    System 1 for fox icon.
    System 2 for outline icons.

  34. Connor wrote on

    Firstly, this comment section is a joke where there is like 10K comments to scroll past in order to leave a comment.

    Secondly, SYSTEM 2 ALL THE WAY! Very fresh designs. System 1 gives no unique identity to non-browser icons.

  35. Ken Saunders wrote on

    It would sadden me greatly if there were to be a dramatic departure from the traditional Firefox logo, especially if it were to be a vast and radical one such as what is being proposed.

    Since the logo was first created, people have always commented on how much they love (and recognize it) over other browsers/brands.

    Please take some lessons from the World’s most recognizable brand.
    You do not have to completely change something that works, especially when it’s your own identity that’s on the line.

    http://www.Coca-Cola.com

  36. Simone wrote on

    Hi

    System 1

  37. Kourosh wrote on

    Definitely System 1, it’s bold and modern.

  38. arashOio wrote on

    i prefer system 1
    but in general-purpose browser level use system 2

  39. DieNand wrote on

    I like System 1, like, a lot.

  40. Marcos Viana wrote on

    System 2!

  41. Pedro Sá wrote on

    I prefer the Firefox masterbrand icon and general-purpose browser level of system 2 with the rest of the icons from system 1.

  42. Mirko Negri wrote on

    I prefer System 1

  43. James wrote on

    I think they need to focus on a more angular look, as the newer products coming out in different brands are becoming a bit more sharp and angular, no longer focusing on either of the styles of both Systems. I would suggest taking logos from System 1 and remixing it, focusing on simplicity but with an edge.

  44. Eros wrote on

    My preferences:

    Firefox Masterbrand: System 1.
    – I think this will reflect more the new branding and will give more of a sense of freshness and new.

    General purpose browser icons: System 1.
    – I think this will reflect more the new branding and will give more of a sense of freshness and new.

    Singularly focused browser icons: System 1.
    – System 2 look more generic while System 1 give more sense of the brand.

    Icons for new apps and services: System 1.
    – System 2 look more generic while System 1 give more sense of the brand.

  45. Daniel wrote on

    Personally I’d go for group 2, mainly because I prefer the icons for it, but I do like the masterbrand of group 1 more than i like the masterbrand of group 2.

  46. Amy wrote on

    The 2nd option for me is the much stronger.

    It stands out from more from a distance and has the simpler forms in the icons which are really recognisable.

    The logo itself has the trademark firefox swoosh but feels simpler and more mature than the fox option of number 1 which feels a little childish.

  47. mjadi ahmed wrote on

    i like the second 2nd system, because it’s clear and meaningful

  48. Stefan wrote on

    System 1

  49. Bobby wrote on

    RE: Proposed Logo Change

    If it ain’t broke, don’t fix it. That applies to this Brouhaha at Firefox over its Logo. The current logo is instantly recognized world wide. Accordingly, don’t mess with it.

  50. Amir wrote on

    The Design 2 masterbrand icon looks evolved – like an elegant simplification of the very recognizable Firefox logo. I love it.
    The Design 1 masterbrand icon looks like something one could find when googling “fox head vector” and does not make me think of Firefox at all.
    The rest of the icons look underdeveloped. In System 2, for example, why revert to a more detailed version of the fox for the General Purpose Browser Icons, instead of coloring the new beautiful abstract masterbrand icon?
    The other icons in System 2 mostly work when the echo the fire circle, but I think there’s quite a lot of work to be done on all of them, whereas the masterbrand icon is, in my opinion, ready to go.

More comments: 1 37 38 39 40 41