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. Mona V wrote on

    System 1 with the Firefox masterbrand from System 2 would get my vote. System 1’s icons are more eye-catching, and right away give me more of an idea of an app’s purpose than System 2’s icons.

  2. nietseb wrote on

    System 2 is the best. System 1 leaks some fluidity on my sens.

  3. eMorph wrote on

    My opinion is somewhat complicated. Put the 3d effects from system 2 onto the system 1 master, and the others should be the system 2 icons with the system 1 color scheme.

  4. Mat wrote on

    System 1!

  5. Camille wrote on

    Group 1 is greatfull !

  6. Oliver wrote on

    System one much preferred, the varying fiery colours look nice.

  7. Spyware Dr wrote on

    System 2

  8. hamsta wrote on

    Second one is much better. Love it!

  9. John wrote on

    System 2 has my vote.

  10. Aires wrote on

    Clearly System 2 icons but including the globe in Firefox icons. Old designs that are recognized by public as good enough and classical must be maintained as they are more valuable than an in principle perfect design.

    What I hate of system 1 is that it continues the progressive simplification of designs, make it resembling to a child drawing.

  11. Robyn wrote on

    Love System 2!

  12. anonizmus wrote on

    First

  13. Jefferson Leutério wrote on

    Simply:

    Main Icon: System 2
    Others Icons: System 1

  14. Fernando Henrique wrote on

    The visual system 1 has more cohesion. Very quickly it is realized that they belong to the same company (perhaps it is simply the color system, more homogeneous). And the MasterBrand is certainly much cooler than System 2.

    But despite all the arguments is the system 2 that would be my choice, in the current work, because the browser icon feels incredible, simple and enjoyable. I already feel like clicking on it, which definitely does not occur me up with the system 1.

  15. Benjamin Buch wrote on

    I would prefer system 2 icons over system 1. They look much more ‘open’. What I don’t like are the different colors for apps and services in system 2.

  16. Godlike wrote on

    Hi,

    System 1 is better but i don’t care it! I NEED an editable, scalable, fast speeddial with multiple label and customizable thumbs option from custom made photos !!!! Like super start plugin.

  17. LG wrote on

    I prefer System 1, it’s more stylistic (a bit too much Google-like though) and I don’t like the twisted 3D of the system 2 icons (too much Office for Mac)

  18. Omar El Khatib wrote on

    System 1 is much better.. both are really minimalist and material design

  19. Benjamin wrote on

    First, the master icons:
    I really don’t like the System 1 Master Icon. It’s too similar to the Gitlab logo (although non-developers wouldn’t notice) and it feels very static.
    In contrast, I like the one from System 2. It’s good, but as another comment pointed out, the first Firefox Logo of System 2 would be abetter fit to represent the firefox product family.
    It looks a bit too generic, for me. But in the end, it reminds me of firefox very well by the flame tail design.

    Next the browser icons:
    I also prefer System 2 there. It looks more fluent and not that chaotic.

    Third, the Singularly-focused browsers:
    System 2 seems more balanced than system 1.
    In general, System 1 seems more unresting as System two. I think because the first system has too many different colors.
    However, I think that the System 1 icons are clearly better in conveying meaning.
    System 2 icons look more generic to me, which could be a good or a bad thing.
    I think, I would like System 2 the most, if there where some more hints in the icons on what that actually is.

    And last, the new apps & services icons:

    These are the ones for the most debate.
    Again, System 1 does convey meaning better for the most part. Only the last icon on the bottom right in System 1 is unclear to me, as well as the first icon in the top left, eventually (depending on the product it’s used for)
    BUT System 1 also still has too much chaos. It uses geometric shapes and colors all over the place.
    The icons would be better when they would vary less in some degrees.

    Look at the gallery icon in system 1 for example (the second one from the top left, isn’t that a gallery icon?)
    It uses the following 5 (!) shapes: circle, pie slice with rounded corner, parallelogram, triangles, rectangle with rounded corners.
    And it uses 13 visually distinguishable colors! Event if some of them are the same color code, they look very different because of the positioning alongside each other in combination with these hard shape edges.
    This creates a chaotic feeling for me which makes the icon very not appealing.
    I think, it would improve drastically when you leave the circles out in combination with the colored pie slices.
    Yes, it would look a bit boring then, but certainly not that chaotic.
    And you could spice it up as well as improving brand recognition by bringing the flame from the second system back as a design element.

    In general, using the flame as a simple, brand recognizable object would be a great strategy.
    Then the logo would be able to come in a variety of different colors as well, without breaking recognisability.
    This is the problem with the System 2 logos for new apps & services.

    First, i can’t imagine any content with these icons, besides the gallery icon. (In fact, i used this gallery icon to figure out, that the second icon in system one should be a gallery, so this is the only exception which conveys much meaning!)
    Second, the colors are off firefox, so brand recognition is hurt.
    With the cuves and the colors they look more like Samsung icons to me.
    Nothing bad about curves, I really like curves and you should keep them to make the icons feel smoother.
    But you need something for brand recognition, for example the flame, which I already mentioned.
    This recognizable element would help these logos a lot.

    Thanks for your time reading through these loooong community feedbacks and use them well!

  20. Vince wrote on

    System 1 👍🏻

  21. Jayant Moosad wrote on

    System 2 all the way!

    System 1 feels derivative and confusing.

    System 2 can be improved if animated… Imagine lines of flames forming the FF logo and then twisting & turning to form all the other icons in the system. Even the Main logo, although a distilled flame, would look cool if animated within the circle ( like old Sony_Ericcson logo)

    Do these two systems still feel like Firefox?
    >> System 2 is more relatable.

    How visually cohesive is each of them? Does each hold together?
    >> System 2 is not flat and would look cohesive even in mono color styles. System 1 fails if rendered in any mono color.

    Can the design logic of these systems stretch to embrace new products in the future?
    >> System 2 design is more open and malleable

    Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
    >> System 2 designs , if animated, would reflect all the above.

    Do these systems suggest our position as a tech company that puts people over profit?
    >> System 2 design is more open and relatable.

  22. Eric wrote on

    system 1 all the way

  23. RubbelDeCatc wrote on

    I like System 1. It’s clear more “harmonic”.

    But there is one aspect I like in system 2.
    The blue earth in the back of the browser Icons only make sense if it can be identified as a globe!

  24. Jbvdc wrote on

    A fox is a fox. Un renard est un renard.

  25. Kat wrote on

    So, I like system 1 better in all respects. The reason is this. I believe that those icons are more cohesive, visually. Except for the general purpose browser icons, which are rounded and flow-y, the rest of the icons are bold, basic shapes, and they seem to retain the bold, creative individuality of the Mozilla brand.

    System 2, on the other hand, is far less visually cohesive. The style jumps around from the sweeping shapes of the main icon and the general purpose browser, to the skinny, curvy lines of the “singularly focused browser icons” and the “icons for new apps & services”. They don’t scream “Firefox” to me, they’re more generic.

    So, in short, System 1 feels like it has a new, but still distinctly cohesive, bold, “Firefox-y” feel. Which I believe is good. System 2 is indecisive and can’t figure out of it’s Firefox or something else.

  26. Mark wrote on

    The masterbrand from System 2 is evocative of the current Firefox branding enough to maintain some sort of continuity. I also prefer the browser icons from System 2, but not the focused and app icons; they look a bit too much like they came from FontAwesome or the Noun Project with some color added in Illustrator. The System 1 icons look original and distinctive.

  27. David wrote on

    System 1 across the board. Far more modern-looking, and more cohesive in terms of color scheme (though a bit more of the purple in them wouldn’t hurt).

  28. Ninja wrote on

    I’d say leave the fox around the world icon. That system 1 masterbrand fox head is HIDEOUS. If you must then use the second. But really, leave the world and the fox there.

    Also, primary icons from system 1, all the rest from 2 if you must. But generally speaking… I don’t like neither.

  29. Dario wrote on

    System 1 is awesome! Go system 1!

  30. Varun wrote on

    Long-time continuous user of Firefox (nee Firebird, nee Phoenix) here voting (mostly) for System 1… just can you please bring the master logo from System 2? They really seem like they were swapped at birth.

  31. Bird wrote on

    In my opinion, I think that Mozilla may be better off building on the existing Firefox brand (System 2), because it is the icon that many of us know and recognise. But I feel the globe is important too.

    We could have a modern brand based on the existing icon, but also have a “heritage” brand for hardcore enthusiasts and historical activities.

  32. Banefy wrote on

    System 2

  33. Alex P wrote on

    Retaining the two-tone blue and orange in the logo is important for recognising the program icon. The form of the icon isn’t as important, but the blue and orange is iconic and helps differentiate it from a number of other tools.

  34. ziel00ny90 wrote on

    System 1

  35. George M wrote on

    2️⃣

  36. Callen wrote on

    I like System 2 for the brand icon and browser icons 10/10. For the other icons I like 1 slightly more, but both sets are OK to me 6/10.

  37. Travis M wrote on

    I prefer System 1, but think System 2’s colors are better

  38. Josh wrote on

    I like the master icon from System 2 a bit better, but like System 1 more as a cohesive whole. I think the System 2 icons don’t do a good enough job conveying the ideas behind them.

  39. Mark Bennett wrote on

    I’m a developer, not a designer, but I really like the clean bold lines of System 1. The colours in System 2 are nicer but the secondary icons aren’t sharp enough in my mind.

    Perhaps you could do something like System 1 with a bit more colour like in System 2?

  40. john wrote on

    System 1 BUT do not use the master icon, only the rest of the icons. do not depart too much from the fox encompassing the globe, it has a deeper and grander meaning while whqt does that fox head say at all? Ill have to explain to a child, thats the new frefox icon and he or she will say so what. While the fox encompassing the globe says so much without me explaining anything at all.

  41. Venca wrote on

    System 1 FTW!

  42. petro wrote on

    System 2 only

  43. Ralph Bolton wrote on

    I vote for leaving the branding as it is. Move all the non-browsing functionality out of Firefox and into extensions, make Firefox the super-lean, fast browser it once was. Give us the browsing features we want, like tab isolation, multi-process, ‘incognito’ tabs (to use Chrome parlance) and so on. Everything else should be an extension. Bundle a load of ‘popular’ extensions on new downloads if you feel that would be useful, but let us uninstall the ones we don’t want (which will help you understand what features the populous actually wants).

    As far as the other apps go – maybe rebrand them if you feel you must. If you need some sort of name for your ‘eco system’, then give it one if you feel you must. But please, just give us a strong competitor to Chrome that does one thing and does it really well. Everything else is secondary.

  44. Ryan wrote on

    System 2 gets my vote. Thought I love elements of System 1 – primarily the Firefox Masterbrand icon – System 2’s icons are more dynamic. At a glance, it’s simply easier to tell them apart – the primary factor I care about for usability day to day. The colouration in system 1 is too similar across all icons.

  45. ItzStg wrote on

    Hey there Firefox.

    First of all I wanted to say that Firefox is my got-to browser for my phone, for my laptop and my for desktop since 5 years back. So, I want to give you my honest opinion. What I would prefer as the new Firefox logos would be the specific ones right here: The System 1 Firefox Masterbrand Icon with all the other System 2 Icons.

    Best Regards,
    ItzStg.

  46. Magess wrote on

    System 1 looks like Gitlab almost exactly. That can’t be a good move for a master brand logo.
    It’s hard to say if the icons in System 2 “mean” more since we don’t know what exact things they are meant to represent, but keeping the curled fox for the master logo would definitely make me identify something as a Mozilla application. The only thing from System 2 I can identify is an icon that looks like image editing, and if I compare that to the System 1 icon in the same placement, I can kind of see how System 1’s icon might be image editing, but it’s nowhere near as clear.

    This makes me think that System 2 is the better choice.

  47. Nat wrote on

    I’m a graphic designer and I love group 1 so much !!! Go for it please :)

  48. Dick wrote on

    System 2 but only because the color palette of system 1 offers little contrast. A quick glance at the icon yields a nearly homogenous blob of color. System 2 icons are clearly, or more clearly, defined

  49. Anastasiia wrote on

    Definitely Group 1!

  50. Donna wrote on

    My preference is for System 2. I consider it a more modern representation of the current one. System 1 is way tooooo different and does not look at all like the firefox I know and love.

More comments: 1 … 9 10 11 12 13 … 41