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

    I prefer the Group 2 Logo with Group 1 icons.

  2. Eric Jacobsen wrote on

    I was considering why I disliked the “System 1” approach so much when I coincidentally came across this on Gitlab…

    System 1 is just sort of simple and generic. System 2 is an evolution of a trademark that is by now almost legendary in web history, you’d be nuts to give that up.

  3. Nicola wrote on

    Strongly prefer system 1, it may convince me to switch over from chrome – it feels new and fresh. System 2? not so much, same old same old.

  4. Om wrote on

    I prefer the system 1 general purpose browser icons

  5. Randy Winston wrote on

    System 1 looks great!

  6. Michael wrote on

    I like system 1 most out of the 2 options but i prefer the current look compared to system 1 and 2

  7. Cameron Spear wrote on

    System 1. I *really* like the Fox “masterbrand” logo, and I think the icons overall look better and more cohesive.

    I like that the browser logos dropped the arm… I feel like it really modernizes it.

  8. Ondrej Nekola wrote on

    System 2 is much cleaner and I like it more.

  9. Giacomo wrote on

    SYSTEM 2

  10. D. Bowman wrote on

    Neither set impresses me, nor does the fact that this browser, with 1 tab open, is using over 1GB of memory as I write this.

  11. Dustin wrote on

    Personally system one has more of a simplistic and overall complete vibe. I would suggest removing the heavy blue block from the browser icons as I think the reason a lot of people have issue with them is they feel heavy. Every other icon has white space for breath ability except the browser. Also a few of the app icons such as the wheel don’t subscribe to the overlap aesthetic that all the other logo forms have, I would suggest modifying those as well.

  12. Diego wrote on

    System 2, look very good and innovative. Those in system 1 look similar to others.

  13. CC wrote on

    I definitely prefer System 1, no question!

  14. Louis wrote on

    System 2 looks better.

  15. dvlupr wrote on

    Nice work with System 1. Clean, updated, and consistent.

    System 2 seems a bit disjointed in look and feel.

  16. Stefan wrote on

    I think system 2’s masterbrand looks very similar to the old Ubisoft logo. I don’t like the swooshy fox tail either, it looks like a step backwards. I love the dynamic tail in the current Icon that is preserved in system 1. Overall I like system 1 better than system too as it feels more modern.

    I think masterbrand 2 is closer to the Ubisoft logo than masterbrand 1 is to the Gitlab logo.

  17. Boris wrote on

    For us, who crossed continents to attend the Firefox 1.0 release party, this logo have a deep meaning. It’s the banner we joined feeling it was the right thing to do, and truely Mozilla showed us we were right. It’s the icon I click on every days for nearly 20 years feeling it’s the right thing to do.

  18. noisys wrote on

    About the masterbrand icon.

    Old icon is cool! Not “Firefox Quantum Browser Icon”. “Firefox 3.5 Browser Icon” is best design!!

    I dislike System 1. The icons are not cutie and Hard to remember and eyes get tired.

    System 2 ’s design like Firefox so far. But the icons are too simple flat.

    I got tired of monotonous design(simple flat).
    Hope to return to the old design.

  19. Petr wrote on

    1

  20. Mathieu wrote on

    The first system is well designed. I like change

  21. Vladislav wrote on

    I would also prefer group 1, with the browser icons from group 2.

  22. Martin de Boer wrote on

    I dont like the masterbrand icons. But #2 is already a lot better than #1, because you recognize it as Forefox. I like all of the new Firefox icons. But again #2 is better than #1, because there is more white space. I think the #1 icons are too much of the same thing. Large slabs of colors yellow, orange, red and purple. The icons of #2 are much more destinctive. However they do nothing to relate to the Firefox logos. They feel if they belong on a generic smartphone. All in all, #2 is defenately better.

  23. Jim wrote on

    I’m very conflicted by these design sets. In System 1, I greatly prefer the masterbrand icon and have a slight preference for the general purpose browser icons. I like that this masterbrand icon lets me see the “face” of the fox, and that the color choices also communicate the “fire” aspect of the branding. I find System 2’s masterbrand icon unappealing because it goes in the exact opposite direction, eliminating the head entirely and focusing only on the tail. To me that just doesn’t seem like an appropriate fit for that branding purpose.

    And the reason I prefer the System 1’s general purpose browser icons is that I feel they lose something when the center is empty, which is another thing I dislike about System 2’s masterbrand icon.

    But for the singularly-focused browser-icons and icons for new apps and services, System 2 looks significantly better to my eyes. The reason is that System 1’s variants are just too blocky and abstract, and other than the rocket, I don’t think I would ever naturally memorize which icon belongs to which app/service. The openness and variety of Systems 2’s variants is therefore more appealing, as I think it would be easier to learn to identify what each one belongs to.

  24. Kam wrote on

    I see a lot of comments critiquing the icons, or the masterbrands, rather than the design systems themselves, or comments just saying one is better than the other, so hopefully this helps. Here are my thoughts:

    System 1:
    I like how the system has a constructed feel, that pieces are being put together and accomplishing things that they couldn’t do individually. Looking at these pieces as the people and the products, I feel like that fits the idea of “Firefox” better than System 2 does. I also think that this design language of “constructing” the icons has good potential to grow.

    System 2:
    With this one, I prefer the aesthetic the negative space provides, it gives the system an overall look of clarity compared to System 1. Although, I don’t see much cohesion between the masterbrand/browser icons and the other icons. They seem to be from two completely different systems. That said, I think some regular iteration can easily solve that. Overall, I like the refreshing look of clarity, and the use of a main icon color to set them apart from each other.

    My final verdict here is that aesthetically I prefer system 2, but I like how system 1 represents the idea of Firefox better.

    Thanks for the open process! I appreciate the chance we’ve been given to share our opinions, and I hope mine was useful. Cheers!

  25. Dave wrote on

    I overall like the first set better. The second set doesn’t look like a single family, whereas System 1 has one cohesive look and feel. I also love the Fox from System 1. The browser icons from System 2 are somewhat better than those from 1.

  26. Johan wrote on

    System 1 is better !

  27. Romain wrote on

    Hey.

    I prefer System 1 icons set!

  28. Billy wrote on

    Where do we get the laptop stickers?

  29. Isabella wrote on

    System1

  30. Gianni wrote on

    Dear Icon Team

    Just remember that an icon is used to show on ONE glance what the app behind it is supposed to do. Many of the icons you use are just fancy doodles and no one know what they stand for. So don’t try to re-invent the wheel, stay true to your roots and don’t start anything that you have to change again in two years. That said, and from a designer’s point of view, System 2 is the one that is more customer-friendly and clear.

  31. Ksenia wrote on

    I like System 1 design

  32. garbledwords wrote on

    system 2, much more flowing.

  33. Jaime Linares wrote on

    Nº1

  34. Helder Santana wrote on

    I feel System 1 shapes far better than 2. Maybe a slight blue shade in this system could avoid confusion with Gitlab branding.

  35. Thomasso wrote on

    System 2 icons with System 1 masterbrand icon. Dont throw your history away, embrace it.

  36. Shelly wrote on

    #2

  37. Alexandre wrote on

    Hello, I like system 2.

  38. Former Fan wrote on

    Neither, please: they both have significant problems!

    1) option 1 has a “brand” icon, but all other icons are very different from it – not even matching the color scheme until after the product icons – and then they are too abstract and distracting to mean anything to anyone. Expect MANY other companies (or trolls) to make similar icons because they can and you cannot trademark… that.

    2) option 2 at least has similarity between the brand and product icons, and the other icons are distinguishable by color – but only a couple of them mean anything and could be easily identified by any viewer. Otherwise what do users ask for: the broken triple-circle icon??

  39. baza wrote on

    System 2 uniquely

  40. Mike wrote on

    Personally, I’d like to see logos/icons that accurately resemble a red panda than a fox, but that’s just the zookeeper in me.

  41. boB wrote on

    System 1 fox head + System 2 secondary icons. Very nice work overall.

  42. Vladimir wrote on

    I like the “System 1” option, it’s perfect.

  43. Josh wrote on

    Group 2 Master brand icon and browser icons. I don’t like either of the apps and services icons.

  44. Emily wrote on

    System 1!!

  45. John Reese wrote on

    Neither of those…

    system 2 is slighty “better”.

  46. PiBi wrote on

    #2.

  47. Simon wrote on

    System 1 fo sho! Number 2 feels already outdated.

  48. Lee Comstock wrote on

    Definitely prefer group 2.

  49. Michael Klein wrote on

    My vote for system 2! Call me conservative but it just wouldn’t be Firefox without that round icon.

  50. Gerard wrote on

    Je préfère la version System 2 plus liée au standard Firefox.

More comments: 1 … 12 13 14 15 16 … 41