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

    2.

  2. Jmm wrote on

    System 2

  3. Matt wrote on

    System 2 masterbrand, system 1 icons. The System 1 masterbrand looks too similar to the GitLab Tanuki.

  4. Marcos wrote on

    Wow, only a transparent company would do something like that. Worth Firefox

    I liked the icons of the first group more with the icons of the second group for use in the browser.

    Congratulations for the initiative.

  5. Theo wrote on

    Well, I find both sets of browser icons to be beautiful and relating to the masterbrand icon
    maybe the second set would be a cleaner start, because it changes a bit more than the first one (compared to what we have now)
    for focused apps (second row) I really prefer the first set, the second one makes me think of some cheap applications you can find on the internet, which does nothing more than spying on you and displaying adds (sorry for the team that designed this, that’s actually not that bad, I have just had personnal experiences of bad applications that had those kinds of icons)
    and as for the third row, I still prefer the first set, as it is more cohesive and more to my taste, the second one is better at differentiating each application though

    so overall, I would personnaly go for the first set: even if the icons are a bit less unique, they have a stronger sense of belonging to one larger set
    and the style is just more actual than the second one

  6. Victor Iysuka wrote on

    System 2!

  7. Rismal wrote on

    for me System 2, except for singularly-focused browsers.

  8. DWW256 wrote on

    I like the master brand icon from system 2 (the icon for system 1 just looks too generic and not enough like Firefox) and the single-purpose icons from system 1, but I don’t like the Firefox browser icons from either. The revision of the Firefox logo in Firefox Quantum has been something I’m indecisive about: the logo has lost a lot of its detail and therefore beauty in the latest redesign, but there are some good sides: as an icon, the loss of detail has increased clarity and concision, the tail has been improved and made the logo appear more balanced, and the new color scheme is quite nice. Minimalizing the logo further, however, I do not want–it’s just about as good as it can be right now. The general-purpose browser icon from system 1 just looks immature, and the icon from system 2 lacks the globe and the cool tail from the current Firefox Quantum logo! I can’t really accept either of them as a browser icon. I believe that by using the master brand icon from design 2, keeping the current Firefox Quantum logo, and using the other, single-purpose icons from system 1 would make the best balance.

  9. Laptop wrote on

    System 1

  10. Matthew wrote on

    For me it’s just the name, because when you talk to others you just say Firefox and not “that fox thing, there’s even a browser!”
    Anyway most of the icons looks not childish, ok maybe a little, but too simple, I mean I get it probably the main concept it’s to keep things simple but personally I don’t like it. Maybe you should just stick with something with a Fox involved, just my 2 cents. I’ll keep using Firefox (the browser at least) because it’s Firefox and I’ll trust Firefox and not because the logo. I will keep using colors like red and orange anyway. It’s nice that you’re asking to the people.

  11. theron davis wrote on

    Honestly, I love both. The color combined with the design of each icon set just speaks for itself. I have to throw my hands up and let you, Mozilla, decide the way of the future. Looking forward to it!

  12. KK wrote on

    I prefer System 1. To me, the icons are more visually appealing and eye-catching. All of the icons in system 1 all match so well I think they would make for a beautiful, easy, and clear user experience.

  13. Alex Zimmerman wrote on

    Much prefer System 2, including the specialized browser icons. I like the cleaned-up nod to tradition of the main icon and the simplicity of the specialized icons. They will show up better on mobile screens.

  14. Pedro Henrique Martines do Amaral wrote on

    System 1 so perfect, I love it.

  15. Nick wrote on

    System 2 – Firefox Masterbrand Icon + System 1 General-purpose browser icons…

    + I don’t understand the rest ?

    Now here’s something to think on about : Changing isn’t always for the better.

    ‘New’ doesn’t mean ‘better’.

    I like the ‘old’ icons. From a distance I know “that’s Firefox” and most people do.
    Isn’t this what you should be aiming ?

    I’m not a super hype designer, just a beginner developer and I need my icons to be simple and functional. “Style” isn’t something I actually need in what I do. FUNCTION is what I like.

    Changing icons won’t make more people come towards Mozillas system.

    Just do as Google does, put Firefox standard in every new PC system.

    People are too stupid to notice anyway.

    They don’t use Firefox because it’s bad, they use Chrome because they’re not giving a choice and don’t care much about their private life because they don’t know about what Google does with theirs.

    And they’re too lazy to compare anyway.

  16. dasdas wrote on

    All 1 BUT master logo2

  17. Linh wrote on

    System 1 for sure

  18. Stephanie wrote on

    I agree. Group 1 with the Group 2 browser icons!

  19. Ioan Timofte wrote on

    I prefer the second design.. It looks pretty good :)

  20. Devonta White wrote on

    I love system 1. It’s clean, futuristic and well designed.

  21. Padmanabha Rao wrote on

    System 2 is a great evolution for the firefox. I think people across age, gender and culture would make sense of the icon/graphy easily with little need to dig.

    System 1 is pleasant for the initiated but alas they are the 1 percent.

  22. Lara wrote on

    Hi ! I’m a graphic designer from Paris.
    I really like the 2nd system for the browser icons etc, it is modern and represents the best Firefox (though the purple-blue-green gradient is not well made in my opinion) for the rest of the icons, I don’t like the 1st system, but the 2nd one doesn’t fit well with the browser icon and the whole idea. I also think it looks too much like Instagram (and boomerang, layout etc.) Because of the outline style and bright gradients
    I like the idea of “volume”, maybe it can be nice to try and keep it but apply it to plain icons (which would be more consistent with the main browser icon) and also re think the gradients (I may be wrong but to me it doesn’t look like they’re following a chart or something, but more following the trends and like “yeah purple-blue-green looks cool and modern and everyone is using it so I guess it works” )
    Anyway good luck and well done ! Can’t wait to see the final result
    (PS : sorry if my English isn’t perfect I hope you got what I meant)

  23. Stetson wrote on

    I prefer System 1. The browser icons look more like an evolution of the current logo and the other icons look more solid and complete than System 2. The whole set has a very Material Design vibe to it, which I quite like.

  24. Darius wrote on

    Both systems have some inconsistencies.

    System 1 icons look more interesting to explore and more unique, yet some of them aren’t memorable because they are too abstract. Some icons might not work well in small sizes because of indistinguishable details. Browser icon doesn’t fit with the of the family because all icons are made of stylised geometric shapes except the firefox that tries to mimic the existing logo.

    System 2 could be easily improved by making end points for all lines sharper as in browser icon. However, they already look outdated and ‘seen’. They could’ve been a nice update some 5 years ago.

    There is easier to spot inconsistencies when all the colours are desaturated.

    If the main family icon (fire ring without the fox) from system 2 could be taken, tweaked and used in system 1 as browser icon, it could be it.

  25. Krixus wrote on

    Well.. just let me say the following..

    Chrome has simplicity only – You followed!
    Chrome has no advanced UI customization – You removed yours!
    Chrome has no advanced add-ons – You removed yours!

    Right now there is absolutely no reason anymore to use Firefox. Happy Pale Moon user since you came up with Australis.

    I really loved you in the past. But what Firefox once was – what Mozilla once was… this is a dead thing of the past. And that is something about which you should not be proud at all.

    Today Firefox is another flavor of Chrome – just with a different engine.

  26. ciga wrote on

    personally i’d prefer the group 1 :)

  27. Mary-Ellen Wayne wrote on

    I much prefer the System 1, especially the General-purpose browser icons. I tweeted on June 17, 2018 about how much I liked the Firefox Nightly and Firefox DevTools logos (Link: https://twitter.com/maryellenwayne1/status/1008519641529049088) “@FirefoxNightly The app icon is beautiful and looks very nice on my phone. Outstanding product development in that area!” & “@FirefoxDevTools is still the ultimate, but I like the overall look of your modifications (@FirefoxNightly).”

    I like the colours thing with the tails in System 2, but I prefer System 1 because it has a core. A core is important to me. The System 2 General-purpose browser icons look incomplete, in my opinion. However, even though I prefer the System 1 General-purpose browser icons, the head if it or something looks a bit too compressed. So perhaps some modifications can be made to tweak that pesky part.

    Summary: System 1!

  28. Andre Henkel wrote on

    In my opinion System 1 looks clearer, more modern and has a stringent CI

  29. nicolas wrote on

    Interesting to see more work being done on Firefox’s visual identity and to get the chance to have a glimpse on these first directions! Some comments below :)

    Both systems:
    — I am highly unsure of the need for a “master” logo, and am afraid it will end up confusing most people that doesn’t follow Mozilla very closely. I understand that the Firefox desktop browser is now only one instance of the Firefox family of projects and products, but it is still the one named “Firefox” without suffix. Having a master logo is an interesting consideration, but eventually I strongly think that having the same logo for the general brand and for the main browser would be wiser.
    — There’s also a need to think these for style durability in the longer term, once the gradients-everywhere trend will be gone (i.e. in a few years). It’s fine to use gradients now, but how can these evolve in a new style? For example, the first system can one day be used with plain colours (but will still need several of them to differentiate the different parts), while the second system can evolve to a single colour style if needed.
    — T-shirts, wallpapers and office signs are fun to think about, but aren’t that representative of how most people will encounter the brand. Might be more useful to mock-up product web pages, installers, first-run guidance windows, and other things in that vein.
    — The colours for Nightly and Dev Edition are too close to each other. They are hard to tell apart.

    System 1:
    — The master logo, as good as it is, is too reminiscent of Gitlab’s own logo. If most Firefox users won’t have heard of Gitlab, most Gitlab users are familiar with Firefox. Being two key free software projects, it might not be the best to have logos too similar.
    — I’m all for continuing the already engaged simplification of the browser icon, but here it gets quite uncanny. It looks quite good and the head is lovely, but the absence of arms makes the animal a fox-snake or fox-worm chimera. If that’s too much details, there might then be a way to wrap the animal differently around the globe.
    — The others icons are fine, even if their only common trait seems to be the use of gradients. The days the gradients are gone, they will miss something to be recognised as a consistent family.

    System 2:
    — Without a globe, possibly by familiarity with the original logo, the fox looks lonely. It also creates a weird countershape and on that white background at least, the brightness of the tail miss contrast.
    — The tail itself is a step back to what have been introduced with the Firefox Quantum logo. It misses some volume. The left part of the associated master logo is a better rendition on that matter.
    — On the other icons, the folder-rounded-ribbon effect is a no-go. It has been done and done and overdone and now feels very dated and very late-2000’s. Other than that, the icons are quite nice and have potential for evolving across other styles in the years to come. So it’s a matter of finding another rendition for now.

    Thanks for publishing this, looking forward to the next iterations :)

  30. Robert Adamson wrote on

    I think that the System 1 icons are over all better. The only exception is for the category of “New Apps & Services”, where I think the System 2 Icons are better. For me “better” means that in some why they might actually convey some level of meaning regarding what the software will do if a user clicks on them.

  31. Justwyoming wrote on

    System 1 icons have more depth and dimension and in general feel better thought out. Not a fan of the secondary level icons of system 2. They feel more like icons you can get and tweak in an online vector store. And the story is less related.

  32. Brenda Bauer wrote on

    System 2 – cleaner, more differentiated icons.

  33. Aris wrote on

    System 1

  34. zer011ne wrote on

    System 2 is the best. They look more free and playful. More open sourced. Secondly if we silhouette both the systems, 1 will look flat while 2 will look clean.

  35. Checker wrote on

    System 1

  36. the Bern wrote on

    Like has often been said set 1 with the general purpose browser icons of set 2 and consider modding the masterbrand icons with some flames to differentiate from Gitlab

  37. David Hunter wrote on

    Definitely System 2

  38. Mia wrote on

    I’m gonna day I’m more partial to System 2. As an architect and strategist, the wider range of shades, and the greater abstraction of the symbols allows for greater flexibility while still adhering enough to the old system to be immediately recognizable.

  39. Adam Dobson wrote on

    System 1 looks better

  40. Everton wrote on

    System 2…

  41. Manu wrote on

    system 2

  42. Nicholas wrote on

    They are both excellent, not exactly an easy choice. Slightly off topic, where can I get the T-Shirt?

  43. Esra wrote on

    I think a combination of both elements would be the best.

    I love the flat aspect of System 1 because it still fits in the current trend going around. But the icons are too angular and “blocky” (separate colors).

    I love the organic shape that is in System 2 because it feels much more natural and familiar. Along with the gradients since it’s also in the trend. However it its more of a “folded” design that could work but wouldn’t be compatible with other design languages, except Samsung.

    So narrowing it down: Flat, Organic/Soft, gradient, Familiar, Simple, and Fluid (+with other designs).

    As much as I love the System 2 masterbrand, the fox still needs to be in there (can’t just be -fire). But then it can’t be similar to the web browser. I’d say a centered balance look.

    If I had the skills, I would of whipped up something of what I’m talking about so it’d actually make sense!

    I love the direction this is headed, I actually feel good using Firefox and genuinely appreciating the developers and community.

  44. dev wrote on

    System 2 ,first one is so perfect,go with that without the fox heads,n do variations of tht one

  45. raed wrote on

    system2
    is more simple and clear and user’s eyes can recognize the icon quickly.

  46. alexandru_stemata wrote on

    System 2 ,please!!

  47. Alexis wrote on

    Agree with the above, system 2 for the general purpose browser icons (although I think the _current_ fox for the browser with less “hair” would be preferable). For the brand, I’m split between the two – I like the new “head-on” fox, but the nostalgic in me feels the system 2 brand feels more like home (coming from someone who used Phoenix 0.1).

    The rest of the icons, definitely system 1. Apart from the main brand and the general purpose browser icons, the rest of the system 2 icons look like utter crap to be blunt. I’m not really sure what some of those icons are for (both system 1 and 2), and more or less all of them are just “graphics” (apart from focus, reality and rocket in system 1 maybe) with no real clue as to what they’re meant to symbolize.

  48. Matheus Miguel wrote on

    I’m with group 1

  49. Marius Morawski wrote on

    In system 1, the other app/service/…-icons look good and match their brand icon well, but neither they nor the brand icon say “Firefox” to me, which is a shame. Also, the 1st system’s browser icons feel clunky and weird – it’s like were forced into that system. Maybe this system just deviates too much from the classic Firefox icon.

    For the 2nd system, the brand and browser icons feel very firefoxy and look very nice. I find that important – that is the core/origin of the brand.
    The other icons… meh, too little swoosh, too much genericky line-art – they don’t fit in well, IMO. The color scheme alone just doesn’t do it for me.
    Still, I like this one. Please don’t water down the distinctiveness of the core-brand to make more products fit under that umbrella.

  50. Ton wrote on

    It is unfortunate here that we have a distinct choice between legibility and character.

    System 2 has a cleanliness in its use of shape and linework that conveys meaning more readily at the sizes often found in the digital space. However, as the prevailing design language of the internet, is also suffers from a familiarity and blandness – gradient and dimensioning on generic icons conjure a fusion of Material Design and Microsoft Office from years past.

    System 1 houses a playfulness from the illustration-inspired design trends of modern SaaS startups. But it comes as a cost, especially in this iteration, of a bloat and chunkiness that renders the visuals into blurred gradient shapes at sizes where icons are most useful. Out of context, even the most digital savvy would be guessing.

    The Fox Head of System 1 rings the bell of nostalgia for those who saw the demise of Netscape and wished for an alternative to Explorer. But to the Chrome generation, could they have deduced the cunning animal from such abstracted geometry?

    In short, System 1 for its potential but not its execution.

More comments: 1 … 34 35 36 37 38 … 41