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

    Overall I like the System 1 icons and top logotype. The fox stands out, something I felt was a miss on the current FireFox. The dark center in the browser icons giving a more grounded feeling with richer tones throughout.

    The line icons of System 2 feel cheap and over-done at this point, giving a “me too” throw out to the eco-system.

    My $.10.

  2. Leon wrote on

    For the brand as a whole, System 1 seems to be more cohesive as units under the same umbrella. At first glance, I didn’t mind the masterbrand icon for System 1, but it is such a departure from the current browser icon. It feels like an over-simplification and conforming to some very rigid geometry to be “on-trend”. As a standalone, it doesn’t evoke the same feelings mentioned in your own criteria. To me, the fire swirl of System 2 and the fox (with hand) are really nice illustrative elements, but I would like to see some combination with the blue globe still. Feels a bit empty with the negative space left open, leaving one thinking, “what is the fox wrapped around?”. I can’t really speak to the rest of the icon set, as there is not enough context provided for how those will be used, whether they would be a suite or come individually, and what each image represents. I like the color combination used in the System 1 Singularly-focused set. It’s a good branching off of the masterbrand palette without straying too far. The System 2 Icons for New Apps have some good explorations of colors that seem fitting at a tertiary level, but only if used within the main brand ecosystem. One last note: I’m not sure what the nightly versions of the icons are supposed to be, they’re kind of cool, and maybe giving off some Pokemon vibes :P

  3. TT wrote on

    The proposed icons are ‘Inorganic’ (graphics). The Sys-1 ‘FOX’ is Organic (art).
    I prefer any organic relationship with my inorganic Firefox Browser.

  4. happysurf wrote on

    My choice is System 1

  5. Traviata wrote on

    System 2 please. System 1 looks like a GitHub knockoff and would make the brand less recognizable, I feel.

  6. happysurf wrote on

    My choice is System 1.

  7. Dragoon Aethis wrote on

    I think masterbrand and browser icons from System 2 are much more familiar, immediately recognizable and when I see those, I think “that’s Firefox”. On the other hand, all the other icons from System 1 feel much more at home with their color palette, compared to System 2 which appears immature and “generic”.

  8. Torin wrote on

    Hi Mozilla.

    I don’t like any of those new designs. Why so minimalistic?

    Your Firefox c. 2004 logo was by far the best in my opinion.

  9. Sebas wrote on

    System 1 is not option, it’s the same Gitlab logo.

    Idk why nobody noticed that fail.

  10. Dan Huby wrote on

    System 1 all the way. Modern, sharp, clear. It looks like a brand for the future.

  11. EffPeh wrote on

    Personally, I don’t like either system, which is clearly too colourful for me, regardless of the design. But if it helps, it’ll be all right with me… :P

  12. Leandro García wrote on

    The principal icon from System 2 and Icons’s set from System 1 are the best choice.
    The first because it keep going the essence of Firefox, and the second cause they has more simpleness.
    Aesthetically talking, I think simplicity is synonyms of efficiency.

    Grettings from Buenos Aires, ARG.

  13. Adam Maxe wrote on

    I don’t quite see the reason for why this re-design is needed, but if i have to chose then i’d say like the rest of the people here, “The browser icons from group two and the rest from group one.”

    I would like Firefox to keep the original fox icons as closely to the original as possible since… well.. they just look good and get the job done.. dont fix what is broken and that no one has a problem with! The remaining icons however (besides the browser icons) from group two look far too childish and not very professional at all, so the remaining icons should be taken from group 1, they looked more professional.

    1. Adam Maxe wrote on

      Isn’t*

  14. Damou wrote on

    System 1 for me !!

  15. K mard wrote on

    … alternatively, you can simply do what Google has always done, which is to force changes upon people with little regard for their preferences

  16. robotnik89 wrote on

    System 1 with system 2 browser icons.

    Good work!

  17. Martin wrote on

    Definitely, the System 2!
    Why?… is stylized, solid, does not dilute the image as a browser and most importantly, has a more defined personality (as other comments say, system one is similar to that of GitLab).

  18. Juan wrote on

    System 2 gp browser icons
    System 2 existing app icons
    System 1 new app icons

  19. Lucas wrote on

    Ok, so as far as masterbrand goes, both system 1 and 2 remember me of firefox, though I slightly prefer system 2, even if it is missing the fox part in the logo. System 1 has the fox but Ididn’t like the logo concept.
    The General purpose logos are all fine, both system 1 and 2. System 1 logos remind me more of the actual firefox logo, but system 2 are very cute too.
    Now, about the singularly focused browsers, I really like system 2 better, the color scheme reminds me more of firefox and I like its simplicity. System 1 logos have an ugly color scheme in my opinion.

    Now, last but not least, the new apps and services logos. I hated both. System 1 are too orange (maybe an logo without background color, just border-colored like the system 2 logos would be better), and System 2 color scheme don’t look like firefox at all.

  20. İsmail Arılık wrote on

    I liked system 2 icons.

  21. Josh McHugh wrote on

    System ONE!

  22. Adrián Sorge wrote on

    Sistem 2 🤩

  23. Miles M wrote on

    All the proposed icons in system 2 have a sense of movement or directionality that suits firefox better than system 1, but the “gradients everywhere” approach to shading both of these is kind of infuriating… The new mozilla brand feels a lot more reliable and impressive than something that on trend like another instagram. Will that still look modern in a couple years? What’s wrong with solid colors?

  24. Arkadiy wrote on

    I lie system 1 more. It looks more modern.

  25. Ryan wrote on

    Love selection 1! However I would loss the globe behind the fox in the general-purpose browser icon like in selection 2

  26. chukura wrote on

    I prefer System 1. I actually like the cute looking browser icons, even though System 2’s browser icons seem more ‘mature’ and what we all might be used to. I like the retention of the globe.

  27. Lucas wrote on

    Complementing my last comment, I really miss the Earth on System 2 general browser logo, but I guess with time I could get over it, I found the fox arms and face very cute changes, and may like it better than the System 1 logo, despite the lack of Earth in it. If it had a Earth too it would be my favorite logo of the batch

  28. Graham Carter wrote on

    Got to be System 2! System1 are just too fussy and compressed.
    System 2 icons are open, fresh and just downright breezy!

  29. Rusty Neff wrote on

    Let;s go with the icons for System 2 please… that would be my preference.

  30. Edward wrote on

    I have been a Firefox user since always.

    I already understand why Firefox is not as popular as the most used … is that Firefox runs very slow on old computers! I remember, when I had old computer, most of the time, Firefox seemed like I had a dial-up connection (very slow).

    I’ve never had a problem with Firefox since I bought a new computer.

    Firefox is more friendly, you can switch between tabs, even with the entire screen, you can leave it as you want (changing icons in the browser).

    Make sure you get it fast on old computers (also on computers that have many installations and uninstallations of programs).

  31. Daniel Gomes wrote on

    System 2 gets my vote. Nice fresh icons and more colourful than 1.

  32. Firefoxsince2006 wrote on

    I’d say system 1. Not having a fox like system 2 kinda takes out the meaning out of Firefox. I loved the recent icon redesign but an icon with shadows as it currently is, doesn’t yet fit the flat design modern OS use.
    Therefore system 1 is the way, and the other app icons also are better than the simplistic versions of system 2.
    Firefox should follow that design too and avoid so many shadows and borders, and embrace a flatter look inside the photon UI

  33. Kat Suricata wrote on

    Respectfully: the Firefox logo is *iconic* on the internet, and throwing away more than a decade of brand equity for trendy‐looking nonsense that’ll look dated five years from now seems like a MASSIVE downgrade.

    The design language for the candidates is soaked in late‐’10s design language that just will not hold up. If there’s any chance of you reconsidering… consider it.

  34. Joseph wrote on

    I like the concept of system 2.
    I don’t prefer the non-Brower icons but I think the concept of a completely unique elegant *firefox* design theme that doesn’t remind me of other brands design themes (nothing specific, system 1 just doesn’t feel unique).
    I think the icons in system 2 could definitely use some polishing but I like the direction direction of design that they are going in

  35. Doug wrote on

    System 2 is easily the winner to my eyes for one simple reason: the masterbrand icon is easy to relate to the app icon. I think the other masterbrand icon would just confuse people due to how dissimilar it is to the app icon.

    All that said, I’m worried this is getting a bit complicated. Shouldn’t the Mozilla branding be the masterbrand? If “Someday this icon may be what people think of when they hear the word Firefox” then wouldn’t people expect to click that icon to launch Firefox?

  36. Alfred Pengelly wrote on

    Definitely System 1. System 2 looks dated already.

  37. Michelle V. wrote on

    System 1 is more cohesive and I like how the “M” for Mozilla is tied into the primary icon. It feels fresh. I also like that the Mozilla logo has a distinctive look and doesn’t replicate the Firefox logo as much as it has in the past.

    System 2 feels less cohesive although I do like the line-art feeling that the logos have. If the Firefox icons were able to be expressed in a similar fashion I might like it better.

  38. Andrew wrote on

    #1

  39. britt wrote on

    I was going to choose system 1, but then saw people pointed out that it looks like Gitlab’s logo, and it really does, so I wouldn’t go with that one. Maybe revisit that design completely.

  40. regdoug wrote on

    The icon set I like best is System 2 master, System 1 browser icons, System 2 other apps

  41. Marko wrote on

    System 1

  42. FalkonZero wrote on

    I’ll go for system 1 !

  43. Edward wrote on

    *Playing, because I do not know if it was sent by another browser (I do not know if it has to go through moderation).

    I have been a Firefox user since always.

    I already understand why Firefox is not as popular as the most used … is that Firefox runs very slow on old computers! I remember, when I had old computer, most of the time, Firefox seemed like I had a dial-up connection (very slow).

    I’ve never had a problem with Firefox since I bought a new computer.

    Firefox is more friendly, you can switch between tabs, even with the entire screen, you can leave it as you want (changing icons in the browser).

    Make sure you get it fast on old computers (also on computers that have many installations and uninstallations of programs).

    There are also times when I write comments and are not sent to blogs (I have extensions installed)!

  44. Umang Chauhan wrote on

    System 1 is the best

  45. Gabriel wrote on

    I like group 1 icons.

  46. Sean Behan wrote on

    I like the second set because I don’t particularly like how set one is completely orange and only one colour for all the non-browser icons

  47. ck058 wrote on

    I’m partial to System 1’s masterbrand because even nonhuman mascots add some humanity. However, it does not go as well with its browser icons as well as System 2’s masterbrand and browser icons do. System 2’s masterbrand and browser icons carry implications of speed. System 1’s masterbrand carries implications of intelligence and reliability (through the solid geometric form of the icon). System 1’s browser icons are familiar, and maybe you don’t need to fix what isn’t broken.

    Rows 3-5 of System 2 convey no feeling and don’t go with rows 1-2 in palette or design, in any way. If you handed me System 2 and trimmed off the top two rows I would never guess they were options for a Mozilla product.

    The same icons in System 1 convey reliability through their forms. Humanity is also conveyed through the warm color palette.

    There is the problem which often appears in flat design, where objects are simplified so deeply they become nearly or entirely unrecognizable.

  48. Stacey Savitsky wrote on

    I like the fox from the system 1, but the other icons are mostly better in the system 2 list.
    However, what BOTH systems are seem to be missing is consideration for accessibility.
    I work as a UX Professional with emphasis on accessibility, and so this is the first thing I noticed.
    Imagine all these icons in the actual size that they are going to be used in. Are they still easily visible and distinguishable from each other? System 2 seems to be doing a better job with the icons that are just outlines. Less busy, looks more like a picture rather than a spot of colour. The other ones though rely only on colour as a difference and fail the contrast test for accessibility.
    Other than that they look great.

  49. Davar wrote on

    I would like to see a flat version that shows a more consistent approach.

  50. Advanced Business Solutions wrote on

    We love the system 1 proposal, we hope this will be chosen :-)

More comments: 1 … 16 17 18 19 20 … 41