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

    Love the 1st group!

  2. Tim lucas wrote on

    I think the in-house team have nailed it on the head.
    A nod to what has gone before but fresh and new.
    Great job!
    The outside design is just a rehash of what is already there and adds nothing new, a tired continuation of what went before.
    Just proves that an in-house design team are able to do an awesome job.

  3. ES. wrote on

    I think system 1 looks nicest.

  4. A.K. wrote on

    It’ll be better if we can keep the old logo also.

  5. Burak wrote on

    For me it is:
    For masterbrand: System 1
    For general-purpose: System 2
    For singularly-focused: System 1
    For new apps: System 1

  6. Kevin wrote on

    I’m going to opine for system 2 because it is more beautiful and the real face of Firefox, and that do not change to system 1 will become unrecognizable and end up thinking that it is from another brand or another browser with virus, but congratulations Mozila for making Firefox better.

  7. Frans wrote on

    Why not give people an option on which icon to use. Not everyone likes the same thing. I for one would like to stick with the current one. Force me to use something I don’t like and I will drop the app. Give me a choice and I will love you forever…

  8. Andrew wrote on

    System 2

  9. Dennis wrote on

    Dear Design-Team,

    Thoughts on System-1:
    – Masterbrand icon has character, is recognizable, but for me it looks too much like an open stylized book; but I see much potential for this general direction
    – The stylistic elements of this design system look more refined, and overall more distinctive, as well as clearer

    Thoughts on System-2:
    – The circled elements look too generic in my opinion, it could be anything
    – The colors scheme with purple, blue, etc. looks good
    – Stylistic elements have too much gimmicks in my opinions, like e.g. shadows, waves, etc. It feels too much

    There is good potential, I am looking forward to the design development.

    Greetings,
    Dennis

  10. Matt wrote on

    I like system 1 with system 2 browser icons as well. :)

  11. Payton wrote on

    System 2 master with System 1 icons, refined.

    Thanks :)

  12. Arnaud wrote on

    system 1

  13. Samuel Pickard wrote on

    System 1 all the way

  14. Linus G. wrote on

    I prefer System 1 too.

  15. Sarah Lasair Berry wrote on

    I like System 2, because System 1 seems too blocky and geometric, while System 2 evokes a sense of smoothness, speed, and convenience.

  16. H wrote on

    agreeing with others here that system 2 masterbrand is much too similar to gitlab. the system 2 masterbrand icon also seems more like firefox (or a modern redesign of the same logo). system 2 masterbrand and gen-purpose browser icons + system 1 single-focus browsers and new apps seems like the best overall design to me. system 2 new apps icons don’t seem consistent with rest of system 2 (much less firefox in general), maybe because of the different color palette.

    1. H wrote on

      *system 1 masterbrand is too much like gitlab

  17. Gaelle wrote on

    Hi
    I prefere system 2
    Why ? Just suggest, smart and dynamic
    And ne cause thé principal logo of system1 remind me an existons logo of an Escape Game Compagnie named FOX in the BOX

  18. Ken wrote on

    I like the main icon and the colors used in group 2.
    I don’t like how group 1 all of the icons look like the same icon with the color skope.

  19. Alice wrote on

    Like many people here (or so it would seem) I prefer system 2 browser icons and system 1 app icons. That said, I don’t think they fit together so I’d go all-in for system 2 :)

  20. Chinmay Joshi wrote on

    I vote for system 1. I really love these sleek, simple & attractive logos along with geometric shapes.

  21. Zilvinas wrote on

    Please, do not kill the fox. Please do not make it look like a pen, a generic swish or something like that. Please. Fox is good, fox is love, fox is life. If you steer away from it – Firefox will start to resemble something else, something generic and safely forgettable.

  22. Taksim Robero wrote on

    Thanks for being open! I like system 1 better, system 2’s misc icons do not represent Firefox brand in my view.

    I like change but some of the system 2 icons are too far a move from what Firefox brand is now. System 1 is both different and new but also truer to Firefox brand.

    Cheers!

  23. Steven Feven-Parsons wrote on

    I would say the second master brand icon with the second set of icons. The first master icon is too angular in my opinion, whilst the more rounded version not only feels like a web browser but retains the Mozilla identity in the ‘tail’.

  24. Sylvbouy wrote on

    The first One, mostly for the master one ! The Fox ! Not sure for the other but they seem too conventionals.

  25. Marie wrote on

    I prefer the system 1 set, including the browser icons which are smoother than the system 2 set. Love the geometric fox face. As for the other the other sets of symbols, both systems look a bit childish to me, but system 1 less so than system 2.

  26. HD-OZ wrote on

    I like the “System 2” design. It is clear, simple, tasteful design; with a feeling of intuitativeness.

  27. Mark wrote on

    Top 4 icons from set 2 then rest of the icons from set 1.

  28. Tony Lyons wrote on

    Answers aligned to the evaluation criteria below:

    Do these two systems still feel like Firefox?
    – Yes. However, Masterbrand 1 feels too analog and literal. Masterbrand 2 has more agility and potential for brand growth.

    How visually cohesive is each of them? Does each hold together?
    – Both have flaws. The visual realtionship between the graphic elements in both systems lack coherence.

    Can the design logic of these systems stretch to embrace new products in the future?
    – Masterbrand 1 has the best potential for this.

    Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
    – Potentially yes. The above values naturally need to be reinforced elsewhere and not just in the visual interpretation alone.

    Do these systems suggest our position as a tech company that puts people over profit?
    – Again, potentially yes. “Putting people first”, needs to be the overarching mantra going beyond the design system.

  29. Emad Ibrahim wrote on

    public static void main(String[] args){

    private String system = “System Group: “;
    Private int group = 1;

    for (int i = 0; i < ∞; i++){
    System.out.println("I choose"+ System + group + "all the way :D <3");
    }
    }

    :D :D :D

  30. Erin wrote on

    My thoughts:

    The Master Brand Icon

    Do these still feel like Firefox? System 2 does. System 1 doesn’t naturally remind me of the Firefox brand. Over time, I think people could become conditioned to recognize it, but it’s not a natural reaction for me at this time.

    General Purpose Browser Icons

    Although system 1 looks more like the existing firefox logo, I think that System 2 is more usable, particularly at smaller scales. It’s easier for me to see the shape and recognize it.

    Singularly-Focused Browser Icons

    Without knowing the specific use of these icons, I’m going on look and feel only. I prefer the look of system 1 here. I recognize the aperture and the rocket. I’m not sure what the middle one is supposed to be.

    Icons For New Apps & Services

    Although I still like the styling of system 1, I feel like some of them are not as easy to recognize. The photo/image one in particular was not as intuitive for me. Some of the others … I’m not sure what they are.

    I do feel like System 2 icons would be easier to see and identify at small scales.

    —

    So at this point, I think System 2 wins overall for me. Good luck, can’t wait to see what you develop from this. :)

  31. Neil Ramsden wrote on

    Loving System 2 – note of caution though…. some similarities here…
    https://www.maxol.ie/… ;–(

  32. Tim Koper wrote on

    System 2

  33. Hemant wrote on

    System 2 is more better, more looking good and it looks more genuine.

  34. Hemant wrote on

    System 2 is better, looks better and it looks more genuine.

  35. Freya Wildwood wrote on

    I like system 2 for the Firefox logo. The reason for that is the name is Fire and then Fox. Fire is always changing, moving and it’s an evolution of change. One can still see that there’s still a tail for the fox that’s also represents change moving and evolution. Even the colours used are changing, show movement and the evolve over each design.
    As a graphic designer myself, I know that changing the design of the logo is not an easy task and I’m sure you’ve spent many hours coming up with the ideas of system one and system two. I notice you call it system and not new logo, because it will evolve over time to be many things under a system and not just brand marketing.
    When working with clients I always tell them and I stress this! “take your time to decide what it is you want your Logo to look like. Do not make a snap decision as you may regret you decision later.”
    System two, with the open designed icons, and good use of white space CAN evolve over time.
    The re-design of a brand (and a design of a logo) should not be taken lightly and as there can be repercussions later if not thought through enough.
    Yes I have taken time to look at both versions of the system, I have not made a snap decision and I have not gone with my gut (don’t get me started with gut instinct). I have methodically and logically looked at both logos, icons and colours and I weighed all the pros and cons for both.
    Version one looks good now, as the design is happening now but it won’t translate into the future. It will become stale fast.
    Great brands stay because they can change over time with the needs of company. Like Kellogg’s, Coca-Cola, the Olympics, and even new one like Apple.
    System two is the one to choose, that is my professional opinion.

  36. Dava Guthmiller wrote on

    System 1 is great. Love the overlapping icon styles and the new fox icon.

    For the fox/browsers icons, these don’t connect as well as part of the overall feel. System 2 handles these better. The open white space at the center makes them more readable. System 1 versions are too tight and dense with color.

  37. John Leidl wrote on

    Group 1 with Group 2 Icons

  38. Kelly Tsao wrote on

    I think the icon system from Group 1 is more emblematic of the Firefox brand. While Group 2 is cohesive, the icons are not as individually strong. I think the browser icons of Group 1 are by far better than Group 2 as well, but actually prefer Group 2’s master brand icon slightly.

  39. Mariana wrote on

    I prefer system 2, because remember old brand, but with new visual

  40. Michael Meinhardt wrote on

    Definitely system 1 with system 2’s browser icons. I feel like looking at the browser icons from system 2 at different scales won’t devolve into an incomprehensible mess of colors.

    I feel like system 1’s color scheme and design evokes “FireFox” more than system 2, which I feel looks more like a hodge-podge of other’s designs.

  41. Shawn wrote on

    I like the the masterbrand icon from group #1, but group #2 for everything else.

  42. Juan Fernando Ruiz wrote on

    i love group 2

  43. Guli wrote on

    I really like the System 1 masterbrand icon, but for all the other sub-icons System 2 is my preference.

    For the master icon you can clearly see the (Fire)fox and its colour schema is great! However, System 1 sub-icons are too thick in shapes and there is no contrast or space inside the icon to easily perceive the logo. It looks like a blend of colours and not a particular shape. Moreover, the colours are too similar so they all look a bit same. System 2 logos on the otherhand are both easy to perceive and are a bit more colour-coded, so not only the shapes but also the colours hint at the product they represent. Thanks!

  44. digibrink wrote on

    System 2 and it’s not even close. The new icons set for both systems need work still, they’re struggling.

  45. Karl wrote on

    I prefer System 1 for the Master brand and System 2 for the browser icons. For the rest, I’m not that keen on either of them but System 1 looks better than 2.

  46. ana wrote on

    Group 2.
    Much clearer, the forms stand out better than group 2 and will be easy to identify in all sizes.
    It is also more “iconic” less “illustration” and more straight forward.

    Ana

  47. Alex wrote on

    It seems to me that it is worth leaving a choice, since both options are good.

  48. DH wrote on

    Group 1

  49. wrote on

    absolutely second system.

  50. Lucas Petes wrote on

    System 1 w/ System 2 browser icons – for sure.
    Just one thing: I can’t “feel” Firefox in none of them.
    Firefox = friendly = natural = people.
    I think the current palette is too electric-rainbow-neon-saturated-OMG-MY-EYES. By using more unrealistic colors and less *organic* shapes (angular or perfect curves), you turn it into a more generic computational / artificial thing and kill the ‘living’ and ‘biological’ aspect of the original logos.

    I understand how challenging it can be to design something under the previous conditions but I think the brand is also losing its essence and becoming more distant from people

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