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. Gal S wrote on

    System 1 is my favorite but with little more colors on the Icons for new services.

  2. Simon wrote on

    I’m not sure if I like the new logos. Master Option 1 looks like Gitlab – and Master 2 has no fox, you could just call it Firewave
    I think, the logo of Quantum (or a similar one) fits perfectly as a Master-Logo. It has details (fur, paws, ears), is modern and non-generic, and with a blue touch
    General-Purpose 2 look nice.
    Singularly-Focused and Bonus 2 however, they look to me as if they were taken from a generic “Ribbon-Style” icon theme, to replace the icon of some stock apps, like the default browser or the gallery.
    I prefer the Selection 1 there. They still have the familiar yellow-to-red gradient with a blue touch, and that should be the common factor between all the Firefox apps. Flat design can be obsolete in the future, but colors will stay.

  3. Brandon Moore wrote on

    the only thing i like from the 1st system is the browser icon, which is a better iteration than the one from the 2nd system. it has motion and depth where option 2 feels too perfect or geometric. introducing a new primary logo is a bit confusing though, especially since it’s so abstract. sure its kind of a fox, but the 2nd system’s logo builds on all the former versions of Firefox– it’s familiar enough that people can recognize it and im not sure ive seen anything that suggests that needs to change so dramatically?

    the 1st system’s icons are confusing because the use of the colors is so similar. in the 2nd set, not only are they much more unique in form but color as well and those will definitely work better.

    there’s a Playskool vibe to set 1 that is off-putting, but set 2 definitely feels like a mature Firefox system. solid “yes” for Option 2

  4. Justin McDowell wrote on

    It’s great to see the brand evolving at Firefox. Y’all have done a good job over the years, but this has become really necessary lately, so I’m glad to see this project getting started.

    I’m not going to comment on what other brands this brand might look like, because who cares? No matter what you come up with someone will tell you it looks like something. The important thing is does this look like Firefox?

    The Masterbrand icon in System 2 is the clear winner here. It looks like Firefox but without the baggage. It’s swooshy like the current browser icon and looks simultaneously like a fox’s tail and a lick of flame. In System 1, the icon looks nice, but nobody will recognize the master brand without the browser icon also present, at least not without a lot of work. This might have been easier in your pre-Chrome heyday.

    For the general purpose browser icons, we really have to get rid of the globe, so again System 2 is the main contender. It looks like the current browser icon, but simplified and with a stronger silhouette. I like the evolution of the fox in System 1, but the globe has to go. If you make it all black, it becomes an indistinct blob. Even in color, it’s still too much of a blob. System 2 looks crisp and would remain distinct in all-black. I do like the idea of evolving the fox, as in System 1, but the execution is a bit clumsy and somehow makes it look more complex. The goal is simplification.

    For the rest of the icons, System 1 has succeeded. There’s versatility, yet it remains consistent all the way down. It will be a challenge to not make everything look boring and samey, but overall, it holds together much better. You might reverse the presence of cooler colors in the apps and services category and reduce them in the singular-focus browser set. Browsers should all be consistently fiery hot, leaving applications to cool off a bit. I realize you’re pulling that purple from the globe, but as above, ditch the globe.

  5. Mary wrote on

    System 1!

  6. sergio wrote on

    Estoy conforme con el actual, no veo la necesidad de cambiarlo

  7. Nicandro wrote on

    System 1 for all, except General-purpose browsers.

  8. Kaitlin wrote on

    System 2!

    With caveats:
    – I would like the masterbrand icon to include the fox. (Maybe make the firefox quantum browser icon the masterbrand icon. And then the browser icons are the masterbrand icon in the different browser colorings)
    – I think the icons for new apps and services don’t feel like they’re part of firefox. Maybe it’s the coloring not being orange.

    System 1 has too many cons for me.
    – Masterbrand icon looks like Gitlab
    – the icons feel chunky
    – the similar color scheme (and chunkiness) makes it difficult for me to differentiate between products.

  9. Kent wrote on

    System 1 in each option…

  10. Anthony wrote on

    I prefer the system 1 masterbrand icon.

    System 2 browser icons

    And then system 1 again for the singular focused and future product icons.

  11. Brian Masinick wrote on

    I like both sets of logos, but I prefer the second “System 2” group slightly over the other group. They look cleaner and simpler, which I think scales well across multiple devices.

  12. Julio Nevado wrote on

    System 1

  13. UnluckyProfessional wrote on

    System 1 looks the coolest

  14. Srdjan wrote on

    First one definitely. The second one is too Samsung and hard to recognize

  15. bear wrote on

    I like #2. Fox hugging the planet and overall rounder nature represent FF best imo.

  16. Jyoti wrote on

    If I really had to choose between the two, it will be system 2 because it’s more closer to the classic old Firefox logo.
    I understand that the change is necessary because of branding reasons, to convey a message that Firefox is not just about browser but it’s much more. How about somehow integrating all of those elements in the logo. But also keeping the old logo for the browser and new logo as the umbrella logo for Mozilla

  17. alex wrote on

    I really also like the current logo (I also adore the 2005 one). It simply just is Firefox as we know it. The red fox wrapped around the globe which represents the World Wide Web. I know there isn’t much hope for you guys not to change it, thanks for the opportunity of letting us express our thoughts.

  18. Hanjo wrote on

    Système 2 for masterband and général, all other systèm 1

  19. Ronnie R wrote on

    #2!

  20. Jonathan Olsen wrote on

    System 2 with System 1 icons for apps and services

    1. Ivy Markwell wrote on

      +1

  21. SIG wrote on

    Looking at both systems, I couldn’t tell you what most of the icons are supposed to be.

    I think System 1 looks too trendy and cliche, while System 2 lacks personality. Neither one says “Firefox” to me.

  22. Alex wrote on

    Im in love with the system 1 icons just make it happen

  23. Ben wrote on

    I feel that the group 1 icons are too bright, and thus are hard to identify due to too much colour pop. However, the design looks nice and modern, and would mesh well with the common icons seen from google, amazon, and current icons shipped in Linux distributions with Gnome or KDE. the perspective in shape in the group 1 icons is very similar to that of Cisco documentation or cloud service symbols. Once familiar, it can be easy to identify what each icon does in the whole system. One issue i see is that many are very similar, possibly causing confusion.

    I like the expression and purpose found in group 2’s icons, however they appear childish and unrefined. It is harder to tell what each one does, but each is uniquely identifiable.

    What i think you should take away from this impression is that Group 1 is my preferred style as it meshes with the current “scene” and will fit in as a like-product on users machines. it feels similar to current gen. However, group 1 is too homoganized, and needs more individuality in the icons, and possibly a more muted colour scheme as it is very bright at the moment. Take the shapes and styling from group 1, and the uniqueness of group 2, and combine them. Each icon should be very distinct from other icons, with a clear symbol of what it does. no words should be needed to identify an icon, the icon should speak for itself.

    >>>>> Do these two systems still feel like Firefox?
    Yes! Very much so. These both have the same brand identity as much as the previous logo. They just look “newer”. It is still visibly Mozilla though.

    >>>>> How visually cohesive is each of them? Does each hold together?
    They are both visually cohesive. Group 1 is a little too much the same as each other, while group 2 is a little too sporatic. Group 1 definitelt feels like a “more complete set” though.

    >>>>> Can the design logic of these systems stretch to embrace new products in the future?
    Yes, i think it would be very easy to incorporate new icon designs that fit these themes.

    >>>>> Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
    Yes, these icons look professional and polished, worthy of being placed in an enterprise setting as well as on a home machine. I think they reflect Mozilla’s image accurately. Group 1 feels closer to a “full product” in my eyes… something about group 2 seems a little… “beta release?” or out of fashion.

    >>>>> Do these systems suggest our position as a tech company that puts people over profit?
    I don’t know if the design says that, but the fact that you are asking this question and accepting feedback does.

    Mozilla’s actions speak for themselves, and i think that’s more important. Your icons are an image of your brand. Your brand is defined by your actions, and your actions indicate that you value your workers as well as your users. Therefore your icons will represent that too. not inherently, but because of their relationship to you as a brand.

    Hope this helps!

  24. Casey wrote on

    System 2:

    it retains the red panda tail (seems to be forgotten that a Firefox isn’t an actual fox – and yes, I know a red panda isn’t an actual panda)

  25. KO wrote on

    I love the System 1 design better. Go for it.

  26. Alex wrote on

    Im in love with the system 1 icons just make it happen. Maybe the flagship icon would be better if it had less edges and a bit more circular ends

  27. artsurmesure wrote on

    I would definitely keep the fox in the firefox. Although this may be seem somewhat off-track, animals are disappearing. And so, you should keep the fox in, and lets push this farther. Maybe have a portion of profits given to a foundation that helps sustain the environment, animal and their habitat. If your logo is lacking emotion, bring that emotion in your mission… so my answer is #1, feels less abstract.

  28. Sandro wrote on

    System 1!

  29. Rzuf wrote on

    I like the fox icons in system 2, but prefer the geometric icon designs in system 1

  30. Daci wrote on

    I prefer System 1 and don’t like the abstract system 2,except for the foxes. I really think the fox encompasses everything and don’t want to see it go.

  31. Rory Prior wrote on

    Oh boy where to start? These all look instantly dated and forgettable. By all means modernise the app icon, but really you’re so late to the flat design party you risk redesigning for it just as its starting to slide out of fashion. Great iconography and branding is generally timeless and doesn’t need a major redesign every few years to try and mimic whatever the current fad is. Most iconic brands see small evolutionary changes over the course of decades. I also have no idea why you feel everything needs to be in some kind of family of awkwardly similarly designs. Does the Fanta logo look anything like the Coca Cola one? No because while they’re both soft drinks from the same company they are different products. Don’t hobble the other brands by forcing the dominant one upon it, let them speak for themselves.

  32. Tycho wrote on

    I love System 1. The icons are a bit more colourful and stylised.

    However I think the Master icon from System 2 is more recognisable (and doesn’t look so similar to Gitlab’s like System 1’s does).

    So my vote is System 1 with the master Icon of System 2 :)

  33. Tim wrote on

    I think System 2 has more beautiful Firefox icons.
    Although the masterbrand icons are nice in both systems, the first one is much too close to gitlab in my opinion.
    I don’t have strong feelings about the singularity icons, but I think I like system 1 a little more here – you can also see more similarities here.

  34. Glen wrote on

    The master brand icon for system 1 feels like Starwing/Starfox, whilst the one from system 2 feels like Sonic the Hedgehog vibe. Whilst you could argue for #2 being Two-tails, (a fox?) The first one seems more definitive, even if it is a nod to the game. I also like the icons for system one, they have more solidity on my small screen.

  35. xa wrote on

    Me too! Group 1 but with Group 2 browser icons.

  36. Lexo Alonzo wrote on

    System 2 +1

  37. Sunny wrote on

    I feel System 2 is a great redesign!
    It captures the essence of the classic logo and looks modern and fresh as well.

    Great work on the icons and the colors, Loved it! Kudos to the designers.

  38. Flac wrote on

    What I like the most is the browser icons from System 1, especially dev and nightly version. (the throat of the default should be a bit brighter, like the end of it’s tail)
    But only these three what I really like… These are colorful, quite contrasty, complex, but not overcomplicated.

    The rest of System 1 have many colors as well, but those are senseless. Those look like you was not dare to create icons with only one or two colors. And those colors absolutely have no contrast. They are just float into eachother, blurring all edges. Simply overcomplicated.

    About System 2: Most of them are just some line, which is not a problem, moreover those will look better in a 3rd party svg icon library (like Font Awesome). But I am not satisfied with the usage of shadows. In the singularly-focused icons those are for emphasizing the 3d feeling, I know it. But in the new apps… I don’t get it why you had to twist two half circle. Those are overcomplicated as well, in my opinion.
    The master-brand and the browser icons are okayish, but a bit too simple.

  39. Alexis Olveres wrote on

    I love the group two.

    But in the section of singularly-focused browsers icons I would like you to use colors similar to those of the icons for new applications and services.

  40. Eion MacDonald wrote on

    20180731. oh!
    I dislike your system 1 with an intensity I did not know I felt.
    System 2, Oh why not keep as your master icon the present Firefox Quantum Icon. This would be best for continuity.
    However, beware, you must consider those who are colour blind, or aged, or have sight problems and have simpler not so complex icons available. Regards eionmac

  41. Christian Pernillo wrote on

    Really love system 2, but I think this system with system 1 extra icons would look gorgeous, think about mixing both ;)

  42. Nikita E wrote on

    Please dont pick gitlab logo.
    System 2 flaming tale is awesome!

  43. Robin Manger wrote on

    System 2 is the better one, but some of the browser icon are unclear what they mean.
    Every icon should be crystal clear on what it represents without any extra text or info.
    Better clear and intuitive than new, cool and colorful.

  44. Lucas Sampaio wrote on

    I liked the Group 2 Icons, but I loved the Group 1 logo.
    So… I don’t know. Sorry

  45. George Bartz wrote on

    I think system 2 is the smarter move. Not that one looks better than the other but system 2 can evolve with future design trends and will be more functional overall. The icons can be flattened out if things need to be simplified or built into 3d objects in the world of VR/AR. I think system 2 is more unique overall. The disconnected lines with the tapered edge will be a nice differentiator while system 1 seems more trendy and current style. Also, the master icon will be a nice evolution from the current Firefox logo which will keep some of that brand history.

    Either way, they both look great!

  46. João Pedro Gonçalves Munhoz wrote on

    For the masterbrand I prefer the System 1 as it uses the fox to represent the brand (which reminds me more of Firefox than the flame does – and I love the fox).

    In the browser icons, System 1 keeps the blue sphere – which I also like – on it. But it looks a bit complicated to understand. I really appreciate how the fox looks ahead in the System 1, differently of the actual icon, and it’s shape looks simpler and easier to understand. But the color degrades aren’t working as well as they work in the System 1. I don’t know which one I choose as both look cool in some way.

    For singularity-focused browsers and new apps & services, again System 1 does a better work with the colors. The shapes in System 2 are much simpler but the colors aren’t consistent. As I don’t really like outlined icons, I would choose System 1.

  47. Jeffrey Conklin wrote on

    System 2 looks the best to me.

  48. Aiden Gregg wrote on

    I like System Two’s masterbrand and general-purpose icons, and System One’s singularly-focused browser and new app/service icons.
    Two’s masterbrand and general-purpose icons are more like the current Firefox icon, so more people may recognise them as being associated with Mozilla.
    One’s singularly-focused and new app icons are more cohesive, they all use the same visual style. They also look more like the real-life objects they represent, as in the case of the new Lockbox icon.

  49. Eric wrote on

    system2

  50. Alex wrote on

    System 1 looks like the logo for gitlab

More comments: 1 … 19 20 21 22 23 … 41