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. Mr. Owl wrote on

    I like the system 1.

  2. James W wrote on

    I like system 1 better, but I don’t necessarily like the master brand logo. The stylized ears look too much like a bow which detracts from the overall look of the system.

  3. Olly Killick wrote on

    System 1 without a doubt. No question.

  4. Prechtig wrote on

    I just want all icons for browsers to somehow involve a fox, I just don’t like the new singulary-focused browser icons. Furthermore, I think system 2 is the best.

  5. Louise Ormerod wrote on

    System 2 feels much more ‘firefox’, especially the icons. With the flowing gradients and the softer edges, I could recognise the brand from the icons alone.

    The first set is nice and fresh, however it feels too much like other brands wanting to ‘refresh’ their system by having much cleaner icons and graphics, but start to fall into the trap of stripping away their personality.

    System 2 feels stronger.

  6. Daniel wrote on

    System 1 all the way. Better colours and less Chrome similarities!

  7. Yasin YAMAN wrote on

    I liked System 2 due to its visuality and brand history.

  8. John L. wrote on

    The fox with the flaming tail IS the Firefox. You simply can’t eliminate the fire and you are losing a LOT of brand recognition if you lose the standard browser logo.

    Evolved as it has, it’s a powerful statement and is immediately recognized.

    The work put into marketing Open Source products is immeasurably important and you do not want to throw that away for the sake of change. I can’t emphasize this enough.

    Keep the fox and flame. Everything else can be altered to fit that motif, but for the love of gods don’t throw away so many years of brand building.

  9. zepar wrote on

    i dont like system 1 at all, and only the general brand and PC browser icons of the 2nd system, the design of all other icons from the 2nd system doesnt work with the first two at all

  10. Rammbock wrote on

    System 1

  11. M I wrote on

    System 2!

  12. Uarabei wrote on

    System 2 +

  13. PC Cobbler wrote on

    I like system-1 much better, except for the masterbrand which is rather ugly.

  14. Jon wrote on

    I prefer system 1.

  15. Hugo Brand wrote on

    Leave things as they are…

    Otherwise System 1…

    *groan*

  16. Michael Karpinski wrote on

    First of all, I really like the design of both systems! I will say objectively I like System 1 as a whole best, however as others have mentioned, I feel that the masterbrand icon is too similar to GitLab’s (abstract, geometric, orange, fox head). For that reason alone, I would say System 2 is the best choice. I’m excited to see what you end up deciding! :)

  17. Lachezar Petkov wrote on

    System 2

  18. Justin Strickland wrote on

    I like System 1 Masterbrand Icon. It still evokes the idea of FireFox, where System2 masterbrand icon loses the fox entirely and is mostly just a somewhat familiar swoosh but mostly misses the mark with me.

    I’d really like to see System2’s general browser icons with the implied globe in them. The way the front paw is extended makes it look like the fox could be running around the globe, an indicator of its speed, or cradling the earth making it appear to be fostering the web, something I find synonymous with Mozilla.

    For the remainder of the icons, I’m finding system 2 much more preferable. They give themselves space to breath and let the eye pick up on details, and the separate colors make them more quickly recognizable. System 1 specific and new app icons are all a bit too chunky so I can’t pick out the details and only the ones that are fairly obvious really create any connection for me, the rocket for instance.

    To sum up: Masterbrand 1

    Everything else: System 2

  19. Jan Michałowicz wrote on

    If you really decide to kill oryginal Fox (I like this logo very much) I prefer System 2 as more traditional. System 1 can be used to represent almost everything meaning it is to geometrical and no-Firefox specific

  20. Bernardo wrote on

    The #1 for master brand is better, since it shows the “M” and the fox, which means Mozilla is more than Firefox, but is still Firefox’s company, while the second one only “firefox company, nothing else”.

    As for the icons, while #1 is adorable, the #2 are more easy to be distinguished and follow a design different than most apps. I liked a lot the change in color and shape between icons while keeping them simple.

    TD;DR: master icon 1 with other icons 2.

  21. Angel wrote on

    I much prefer the look of the System 1 icons!

  22. Iykury wrote on

    I like system 2 for the masterbrand icon. I think the General-purpose browser icons should be the system 2 icons, with the blue sphere in the background like the current logo. Also, I think system 1 looks better for the singularly-focused browsers and the new apps and services.

  23. Cam wrote on

    Changing the brand logo is a big step. The danger is losing its distinct appearance to a sea of logos that look very like other brands and like each other. I have a preference for System 2 but really would prefer something bolder.

  24. dtulyakov wrote on

    1

  25. Nor wrote on

    I love the system 1 icons!!

  26. Catherine Desrochers wrote on

    Why not the First one with the spinning Fox logo from the second one?

  27. j Gregor wrote on

    Totally with Tyler on this one.

  28. MozUser wrote on

    I like simplicity of the System 2, less sharp edges, less colors

  29. Peter Ekstrand wrote on

    The system 1 master logo, but with system 2 icons look the best.

  30. Ahmed khatab wrote on

    I like system 2

  31. Derek wrote on

    I’m not a fan of the system 1 master logo. At first glance, it reminds me of some sort of email logo. If I stare long enough I can see the fox head but it’s not obvious right away. The system 2 master logo does feel more of an evolution from the current logo. Definitely system 2 general purpose browser icons. System 1 singularly focused browser icons and system 1 icons for apps and services.

  32. Mike Lis wrote on

    I think System 1 is more “fashionable” and in line with popular styles, but I worry that there’s not enough detail to the designs to differentiate them from other products. System 2 has the reverse issue. The icons don’t match the look of any of the modern operating systems (Android, iOS/Mac, or Windows), but they also look distinctive in a way that you will *know* they belong to Mozilla.

    I think it’s a question of what you’re trying to do. Do you want Mozilla apps to blend seamlessly into their environment, or stand out as a unified brand?

  33. Richard Becker wrote on

    I think system one looks sleeker and more attractive! Also I think the system 1 icons can represent more than the circle-based one’s in system 2.

  34. Kenny Heimbuch wrote on

    The top icon under the “System 1 masterbrand icon” set is pure genius. Whoever came up with this deserves a big raise :)

  35. Britta wrote on

    SYSTEM 1.

  36. Jim H wrote on

    I prefer System 2 because 1.) the browser icons of it are more recognizable as “Firefox” and 2.) The non-browser / future family icons differentiate clearly and are likely to remain recognizable as they are scaled on various screens.

  37. mariona wrote on

    system 1

  38. Vlad Norton wrote on

    I hope creators will choose first system because:

    — it’s more flexible
    — it has modern and cool style like instagram’s design for example
    — it more compatible inside system than the second
    — it has different and unique shapes
    — it has more organic color gamut and more fits for smth awesome!!! Guys just look at this, I guess, it’s completely reflects the essence of MOZILLA in magnificent modern rendering.

    PLEASE VOTE FOR THE FIRST SYSTEM!

  39. Victor wrote on

    I love both! but I’d go with System 2 :-)

  40. Alex wrote on

    System 1 looks beautiful when large. System 2’s twisting 3D shapes tax my mind. But System 1 icons all look the same when they’re very small. Also, I think the Earth in System 1 browser icons is too dark and purple.

  41. Drupal wrote on

    Definitely prefer system 1, the logos resemble more each other.

  42. H young wrote on

    System 1. Nice job! … from one designer to another. :)

  43. Isaac wrote on

    Love the look of System 1! But prefer System 2’s icons

  44. anon wrote on

    System 2 FTW

  45. MegO_Bonus wrote on

    Vote for system 2

  46. Milos wrote on

    The logo should in my opinion still show a fix wrapped around the planet and it should be obvious that that’s the case. In one of the designs the planet is missing and in the other it’s just a patch of blue. If I never saw a proper Firefox logo before, I wouldn’t have gotten it.

    Things should be as simple as possible, but no simpler.

  47. Matthew Sanabria wrote on

    System 1 all the way for me. The icons for the browser in system 2 are too round. The rest of the icons in system 2 look like Instagram styled icons. The icons in system 1 give me more of a Firefox and Mozilla feel. I would suggest working on the master icon since it rivals that of GitLab.

  48. wickux wrote on

    I like the common color palette idea in System 1 but I think System 2 icons are more readable. I would drop purple from the common palette and use it only in icons directly related to privacy (e.g. Private Browsing, Firefox Focus)

  49. James wrote on

    Definitely prefer the masterbrand Icon of System 2, but I feel like the other icons for System 1 are relatively more clear… though both are somewhat ambiguous without explanation.

  50. I StM I wrote on

    Hey Firefox design team
    I think you should go for a mix of both systems, as follows: system 2 for the masterbrand and general icons, and 1 for the other icon sets.
    System 1’s masterbrand icon feels less Firefox-like, because the symbol of a fox shaped as a circle and composed of his head and tail delivers a strong and recognisable identity Firefox acquired over time. Plus, general icons seem very messy, with the fox’s head mixing with his tail, and very unbalanced. In opposition, s2 icons are cleaner and nearer to the brand.
    However, I would go for system 1 for the other icons. In addition of having a more cohesive and fire-like color palette, the outlined icons of system 2 feel weaker and could look too much like Material Theming outline icon set (not sure about that though).
    They also look less cohesive because of the color palette going from hot to cold colors.

    Here’s my opinion as a graphic designer 😁

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