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. Petit Etre Malfaisant wrote on

    I’ll go for system 2 !

  2. Steve12L wrote on

    Hi,

    Definitly system 1 ! Great job. 👍

  3. Luxi wrote on

    I prefer System 2. System 1 remembered me on Google Chrome with the edges.

  4. Alexander Brüning wrote on

    Honestly, I’m not feeling either one. The current browser logo is a really nice evolution of the original, the first one seems overly simplistic except for the head and the second just isn’t right without the earth in there. Both seemed to be attempts at forcing minimalism/flatness where it isn’t needed. Besides, the master icon from #1 looks a lot like the GitLab logo.

    The Firefox logo, to me, already is a pretty strong, long-lasting brand. Don’t undermine that. If I had to choose one I’d go with #2 because the other icons are clearer.

  5. Tomasz wrote on

    In my opinion System 1 is better!

  6. Jeff wrote on

    I like System 2 better. Great work!

  7. Scott wrote on

    Thanks for the opportunity to comment on this process- I support your work! Here are my thoughts:

    System 1:
    Pros: Color scheme is modern/in line with what all the cool kids like these days, and ties together the icons well. Browser level icons still look like a fox speeding around the world, just with updated colors and slightly different lines. The foxes arm is gone and, hey, who misses it?
    Cons:
    Masterbrand icon looks like Gitlab, as others have said. It also loses any of the visual idea of fire beyond the red and yellow colors. Maybe that’s not such a big deal, but you DO have brand identity already. Also, I feel like as the internet moves onto more touchscreens, it’s easier/more satisfying to put your finger on a circle, not this fix shape. Maybe I’m overthinking it, but it is less pleasing to push icons with sharp edges.

    System 2:
    Pros:
    Very few for me. The masterbrand and browser level logos are touchable? I like the 3-D twists in the lower level icons as opposed to a simple flat aesthetic (cough Google’s material design cough). Still keeps a bit of the old Firefox in there. I like the colors.

    Cons:
    Many. The masterbrand logo loses both the fox (except the tail sort of) and the world, and just looks boring and nondescript. They don’t convey anything about the company or its values really. For the browser and master levels, where is the world that the fox was circling? Is it dead? Feels like it. The lowest level logos seem too playful/ whimsical- I think someone on here already compared them to Microsoft Word, Excel, Powerpoint for Mac circa 2013. I agree, they feel a step behind. Some are so abstract it’s hard to know what’s happening in them.

    Good luck!

    1. Valentin wrote on

      +1

  8. Geert-Johan Riemer wrote on

    Although both sets are beautiful, I like System 2 more. It has more recognizable/different logo’s, is fresher and more modern. Also: System 1’s master logo looks a lot like GitLab’s logo. I feel that if System 1 is going to be selected, at least the master logo must change to avoid confusion.

  9. YoonLin wrote on

    System 1 icons are way more attractive than the System 2 ones. However, if a suggestion may be entertained, ditch the black centre’s in the Browser icons in System 1. Makes it look like the Firefoxes are hugging a heart or ball of darkness. Not too auspicious IMHO.

  10. Roblin Marcel wrote on

    Personally I prefer system 1 except the 2 attached.

  11. Pepijn wrote on

    I like system 2. I think the logo’s for the introduction of new apps are much more understandable. System 2 got the smoothness of the gradient better. It connects more with the main logo of FireFox.
    Keep up the good work!

  12. Bob wrote on

    Here’s some feedback: Nobody gives a poop about the icons. Stop ruining the company and the browser with pointless work like this. Concentrate on making the browser useful, functional, fast, lightweight, and powerful. Like it was when it was called Phoenix! Then maybe I’ll switch back. Thank you.

  13. hulk41 wrote on

    System 1, with the browser icons from system 2.

  14. Russ J. wrote on

    Overall, I like the shape of the System 1 icons better; they look less childish and more current. Having said that, I would remove the globe from the Firefox logo and use a more varied color palette, with hues chosen for icons according to a criteria-based standard (for instance: orange for apps, purple for features, green for features, etc.)

  15. penal wrote on

    I like the system 2 masterbrand icon more. System 1 looks like gitlab.

  16. lebonalex wrote on

    TYPE 1
    really cool logo

  17. Lusoroberto wrote on

    1 -> trop chargé visuellement / Too visually charged
    2 -> pas mal dehors 2-3, mais le logo du navigateur me plaît / not bad outside 2-3, but the browser logo pleases me

  18. Jerome wrote on

    Well, that’s a great work!

    In my opinion, System 2 seems to have the finest look with a modern design.

    I don’t like particularly two things in system 1 :
    – the masterbrand icon has too much straight lines and doesn’t refer enough to the actual icon
    – the general purpose browser icons have something like a “smudge”.

    So, definitely… I prefer System 2.

  19. Батя wrote on

    I like is logo number 2

  20. Parker wrote on

    I really like system 1 more than system 2. I feel like it’s in line more with where Firefox is going in the public’s eyes.

  21. Harfeur wrote on

    I love system 1 but it will be better with the master brand icon of system 2

  22. GM wrote on

    I love the system 2. The system 1 looks too much like gitlab and would be a very drastic change

  23. bull500 wrote on

    The current set is beautiful and iconic. Don’t understand the need to change.

    Firefox brand has always been – Fire + Fox
    That’s kinda missing in the new design’s here.

    For what its worth the System 2 set is far better since it still sticks with the iconic Fire+fox format and the color palette is far better.

    System 1 has better single focused browser icons so do try to combine it with the System 2 colors.

    Overall System 2 >> System 1

  24. Marty wrote on

    Please don’t redesign. It serves no purpose and all the elderly I’ve carefully installed Firefox for will be completely confused and lost.

    You do realize that those are the growing market, right?

  25. axel wrote on

    Do these two systems still feel like Firefox?
    – for the general-purpose browser icons both, for the rest only system one

    How visually cohesive is each of them? Does each hold together?
    – only system one, for system two the general-purpose browser icons don’t fit the rest

    Can the design logic of these systems stretch to embrace new products in the future?
    – therefore system two will work better

    Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
    – I would say both do, but for system two the icons for new applications and services would have to be redone

    Do these systems suggest our position as a tech company that puts people over profit?
    definitely both! but that may not only be the icons

    Great work!

  26. Adrien Collot wrote on

    System 2 by far. System 1 looks overoaded to me.

  27. Jicee wrote on

    i prefer System 1 :-)

  28. Maxime wrote on

    The group 1 is my favorite.
    As said before, i find the second group app icons a bit childish and non serious.

  29. Patrick Fox wrote on

    I prefer System 2.

    Do I get extra points for having fox in my name?

  30. JULES wrote on

    System 1 ‘s the best!

  31. Faravel wrote on

    I actually prefer system 2, the icons are much simpler and easier to comprehend. They also live up to the brand identity of Firefox. The only thing I am bothered of are the general purpose browser icons, they can still be improved by adding some elements from the system 1. To me, it looked more like a dog rather than a fox.

    If I were to comment on system 1, the icons are too abstract especially the icons for new apps and services. Also the other icons looked too familiar with another brand, I just can’t point which company/brand exactly.

  32. Augusto B. wrote on

    I like System 2.

  33. DanM wrote on

    System 2 for sure.
    As other people have said, masterbrand 1 looks too much like GitLab and I think it’s too much of a departure from the existing logo to be recognisable for the general public.
    System 2 all the way, the browser logos on system 1 look weird, it looks like the fox has been squished down, and there is no sign of the old world or the fox hugging the world, like logos of old. It looks strange.

  34. John wrote on

    For the general-purpose browser Icons I prefer the System 2, but i would make a small change to it: I would include the fox’s tail from System 1.

    I really like that Tail-Like-Fire look!!! System’s 2 tail is very awful!!!

  35. Mateusz wrote on

    System 1 is great.
    System 2 looks like Opera not like FireFox. General-purpose browser icon for S2 look like embryo of pigs.
    Apps icon from S1 are more pleasant.

  36. MacOSO wrote on

    Icons from the set of System 1 is awesome! But the main icon is very similar to the GitLab’s logo. However the second one is saving association with Firefox, but the main element has disappeared: fox is covering the whole world.

  37. Angela wrote on

    Je trouve le système 2 bien plus lisible et compréhensible !

  38. jokip7 wrote on

    I’d prefer System 2 over System 1 by far. I much prefer the current browser logo to either of the proposed ones though. Also, the masterbrand logo in system one is very very similar to the Gitlab logo.

  39. Goldor0ck wrote on

    Basically, I’d mix both systems.
    The brand master icon in system 1 is ridiculous, it looks like a combination of a square and a losange. So keep system 2 for this icon.
    For the other browsers (builds and singulars), I prefer system 1 which are more ‘Firefox-like’.
    For the apps and future, system 2 looks like a design for iOS v 13, so forget them too.
    In short: master icon as system 1, all others as system 2

  40. Torzivalds wrote on

    Hello, I love new icons! I still prefer the first icons, but the main one looks too much like Gitlab. otherwise very good job, well done!

  41. Ben wrote on

    System 2 is way too much in the Firefox spirit : round, with that fox tail. That is the Firefox that I know, the other one is just an imitation ;)

  42. Djordje wrote on

    System 2 is the best! The main ffox icon should be that without fox head, just the tale in circle. It is perfect!

  43. Philippe wrote on

    System 2 is best

  44. Flobell wrote on

    System 2 for me.

  45. Jagjot Singh wrote on

    System 1 is the way to go.

  46. Slawo wrote on

    I really like system 2, clean and modern.

  47. Haşim Sait wrote on

    The minimalist approach of the second system makes me feel like the firefox future logo meme is real (attached to the comment) and the browser icons of first look better imo, i don’t like minimalist designs that much and the app logos of first system are also way better than the second system imho.

  48. Moziller wrote on

    System 2.

  49. Dimas Oktoluqman wrote on

    I don’t like both Masterbrand icons, they don’t feel close to the iconic Firefox logo, too simplified. But i like the orange variation of system 1 General-purpose browser icon. It’s simpler but still recognisable as everyone’s favorite browser.

  50. Roman wrote on

    The first suite is more look-fine for me

More comments: 1 … 6 7 8 9 10 … 41