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

    Call me conservative, but I will miss the old FF-logo.
    If I had to choose from those two new icon sets, I would choose set 2 with differently coloured system icons.

  2. Kherox wrote on

    Il réalité like style 1

  3. Keorl wrote on

    I prefer the 2nd set, it looks more modern and natural, it feels more Firefox. Thought I’d prefer if we kept the planet in the browser icons.

    The color schemes and stylization of the first set, as well as the 2nd set’s master icon, look old fashioned to me. Make the colors a bit flatter instead of gradients and you have 1980 logos … with the color scheme and the way they are arranged in shapes being very close to the cloth of the mattress covers in my parent’s holiday caravan when I was a kid … that thing must date back in the 70’s.

  4. Rom wrote on

    I prefer the set of icons of system 1, which respect much better the colors and shapes reminiscent of something that flies, that is a free electron, that is free to go where it wants and that has been designed from the outset for this purpose.

    I find that the second pack could more correspond to the derived applications and other services of Mozilla, their primary color being blue.

    Still in this second pack, the shape of the icons form either circles, or squares, which give a corporate impression in the background, all of their shapes (not the first 3 at the top), remind of other software icons paid or not, made by companies like Google and Microsoft to name but a few.

    Colours like blue and green are already used too much (and too often as a partition).
    On the other hand, orange, violet and red are brighter and more luminous colours like the Sun, which gives a luminous, free, soothing appearance.

  5. zark3in wrote on

    I like system 2 keeps the personality of the firefox but more modern.

  6. kilowat wrote on

    system 2 !!!

  7. B Monnier wrote on

    I prefer by far system 2

  8. Jeff wrote on

    Hi,

    I m in favor of simplifying, so I guess more system 2 than 1

    Good work guys

  9. Couzinet wrote on

    Bonjour,

    Bonne idée de pouvoir donner notre avis dessus.
    Pour ma part, je pencherai pour le SYSTEM 1 sur tous les types d’icônes. C’est plus harmonieux je trouve (les couleurs comme les icônes), ça fait plus design actuel.
    Je vous remercie d’essayer de continuer à fournir un navigateur alternatif puissant. Ça ne doit pas être facile tous les jours, mais je croise les doigts pour que vous puissiez exister encore pendant longtemps et que vous restiez comme vous êtes.

  10. Thomas Richert wrote on

    I prefer System 1 but with the General-purpose browser icons of System 2

  11. Andy wrote on

    Personally i definitely find the System 1 approach more interesting, though the browser icons may need to be little refined, but the “origami-style” edges look very refreshing and cool.
    For both of versions of browser foxes it looks strange that the head is not looking toward the globe as it was long time before, and the paw that was hugging the globe was the pretty detail also.

  12. trabatt wrote on

    Definitely prefer system 2
    Gone with the tail, alright we can understand why
    But keep up the basic Firefox whirpool shape, please !
    Besides, the system 1 3D-like look is a bit heavy and old fashioned, isnt’it?

  13. VItaly wrote on

    I like system 2. I think it’s better.

  14. RUsl wrote on

    I do not like both variants, too many bright gradients, annoying the eye, but choosing the lesser evil of the two, this is from the second group.

  15. Jean-Jean60 wrote on

    Bonjour,
    Pour moi, c’est purement graphique comme choix, je garde le FireFox Lasterbrand Icon System 1 et pour le reste je prend le system 2 dans son ensemble. plus aéré plus jeune de belle couleur comme j’aime.
    Voilà pour moi Cordialement PJ.

  16. DSAureli wrote on

    I like System 1 better, it has a very enjoyable design, but I would keep the Quantum browser icons, maybe just a little simplified (poorly crafted example as attachment).

  17. Vladimir wrote on

    I prefer system 2

  18. alealedez wrote on

    I love totally System 1. Visual identity on the first place! #System1

  19. mdv wrote on

    System 1 for sure :)

  20. istvan nagy wrote on

    both is ugly.

  21. Pushing Giants wrote on

    System 2 is a nice evolution of the logo and is my preference. The primary logo maintains its equity, I can still see fire and a fox, and it has a fresh modern look. While system 1 is nice, it’s much too generic.

  22. evgenius123 wrote on

    I prefer the first option.

  23. Adam wrote on

    To be honest I would prefer to see SYSTEM 2. More familiar and feels more smooth, better

  24. Simone wrote on

    I really like the idea to make new icon. I like system 1 except that master icon does not look like Firefox at all, so people unaware of the new brand may be confused in identifing Firefox logo. For me system 2 general icons are not so good, browser ones, instead, are quite nice.

  25. Barbara wrote on

    I prefer system 1, looks good!

  26. Lala wrote on

    PLEASE go with system 1. It looks new and refreshing and not like the base intuitive design every asshole dev makes because they’d rather people get into it fast than learn anything new.

  27. RowDogSA wrote on

    System 1 masterbrand icon with system 2 icon set.

  28. Kent Power wrote on

    Apart from the Masterbrand icon, I prefer group 1. It just looks more contemporary to me personally.

    Although ya, the masterbrand icon draws too many comparisons to gitlab. but you’ve probably heard that about a million times already

  29. ET3D wrote on

    I don’t understand what any of the icons are meant to convey, in either version. All I understand is the Firefox image, I think that the current one is fine, and I don’t see much use for it either. The only hint in this post of how these icons are used is one phone screen image, and even that doesn’t contain them all. A little explanation of what they actually mean would have helped.

    So basically my understanding, from the pictures, is that you’re talking app icons and general merchandising. For merchandising, I think that the current Firefox logo looks better than either of the new ones. For app icons, I think that system 1 icons are better simply because of better colour use, which would make them more distinct and eye catching (the actual shapes are irrelevant). For apps and services I think that system 2 is better, for pretty much the same reason.

  30. Florentin wrote on

    For me, definetly the System 2. They look more modern, they like like a step forward and they are simple and screem “Firefox” all the way. The other looks like they are an upgrade made a couple of years ago

  31. Robson Niemeyer wrote on

    System 2 without doubt!

  32. TGOS wrote on

    All the icons for new apps & services are meaningless to me and to me icons should be meaningful. E.g. looking at Apple’s App icons, in 8 of 10 cases I know what kind of app that is if I just see the icon, even if the name is unknown to me and I’ve never used that app. System 1 is inconsistent, as most icons have a rather edgy look , except for the browser icons and one service icon, which are still round and thus don’t fit to the rest of the icons (they stand out as if they don’t belong there). System 2 is much more consistent in shape, but I don’t like the browser icons (not my taste) and I strongly dislike the coloring scheme new apps & services icons of system 2. The coloring scheme in system 1 is at least consistent.

  33. Karen E. Ramos Álvarez wrote on

    I like System 1 as a whole. Master icon love! I have to agree the System 2 App icons are way easier to understand.

  34. Johannes wrote on

    I’d like to see the master brand icon 1 used as the browser logo. Klicking/touching the fox head when opening Firefox would be very cool.

  35. IcetheUnknownRanger wrote on

    I think the logo should stay as it is. The firefox logo on set one looks, as many have pointed out, like the gitlab logo and the firefox logo on set two isn’t recognizable as firefox to me. Some of the other icons from set two are ok, but others remind me of icons from dodgy apps from the play store. Honestly, I think the current logos look very nice and I love what you did with the logo after the quantum update!

  36. Dim wrote on

    In my opinion System 1 is better!

  37. Mat wrote on

    System 1

  38. Damien Gray wrote on

    I prefer the system 1 icons over the system 2. I find them easier to read and they will scale better to different sizes.

  39. bober wrote on

    System 2

  40. Elliott B wrote on

    As others have said, the masterbrand logo for system 1 looks too similar to Gitlab’s logo. It would cause way too much confusion and could potentially introduce legal complaints.

    I’d really like the masterbrand from system 2 tweaked to fit in with system 1. Overall system 1 is nicer, but that conflict with Gitlab holds it back.

  41. Anonymous wrote on

    System 1 icons looks far too childish. It looks as though you gave a child a bunch of basic shapes and told them to form some icons.

    System 2 at least looks more professional with the design.

  42. CharlesFr wrote on

    Hi,

    I’m on holiday but I will reply as a designer. A rebranding is the most difficult thing and the most exciting project to make for a designer and I hope my view will help you guys. :)

    First, there is no brand strategy without a company strategy. The brand represents our present or future values. What we what to achieve, our future world. Designers, we are not painters.

    It’s impossible to have a result without any goal.

    Firefox is an app, a browser. It’s what billions of people around the world think about Firefox. It’s really difficult and dangerous to change that.

    Because your users won’t understand what is Firefox and they won’t know there is more wonderful products made by Firefox or Mozilla.

    Our world is overcharged of brands, ads, signs and it’s true…

    For the rest, I think you need to define clearly what is Mozilla(your global strategy, roadmap)? What is Firefox(product strategy, roadmap)?

    It’s a must-services strategy or multi-brand strategy? Or both of them? Or maybe something else?

    Do you think your brand represent that?(Mozilla or Firefox?)

    What product does it mean? What app does it mean? What a feature does it mean? What service does it mean? For Mozilla or for Firefox?

    The relation between Mozilla and Firefox is unclear.

    The Firefox product is an app with features and additional features(is a service?).
    This additional feature (service?) is autonomous or you need to have to use Firefox to make it works?

    If your reality app is an additional feature? Do we need to have a common Firefox branding? Because this app can be implemented in the playstation 5 (with I guess VR gear implementation and a gear less expensive etc…)? But if this app is implemented inside your playstation as a browser… it’s maybe better to say it’s Firefox… because Firefox is a well-know browser… etc…

    As you can see there are a lot of things to define before drawing.

    I hope these questions will help you! ( I don’t know in which context you are working etc… and there is no negative mind in my text, only questions)

    But without these informations, it’s really difficult to say if your drawings are relevant or not.

    Feel free to contact me or ask questions if needed. :)
    It’s nice to support an open project.

  43. Richard Yao wrote on

    The system 1 masterbrand icon looks like a stealth bomber. The system 2 masterbrand icon looks like a flame. If you guys want to commit brand suicide (brandicide?), either of these is a fine choice.

    System 2’s icons have no cohesiveness while the poor fox around the globe in system 1 has had its front leg chopped off and looks more off than the original icon.

  44. Dan Neely wrote on

    Could you combine icons from both systems?

    In System 1; the master icon looks nothing like Firefox to me.

    In System 2; the 4th and 5th rows of icons look nothing like Firefox.

    Rows 2 and 3 I’m broadly indifferent on, if mixing though I’d use row 2 and row 3 from system 1, because the row 1/2 and 3/4/5 icons look more closely related to each other that way.

  45. Kev wrote on

    System 1. Period. :)

  46. Topik wrote on

    The browser icons from system 1 look irregular and weird. System 1 with the browser icons from system 2 will work well. For the browser icons, it would probably be a good idea to have something that can easily fit in a circle, considering that OSes are now switching to circles. (Ex. Google Pixel)

  47. chris wrote on

    No offense to Mozilla designers, but I really hate all of System 2’s icons but the masterbrand/general purpose browser icons. Those I don’t hate or really like, they just don’t really leave a lasting impression on me. Meanwhile, the singularly focused browser icons look like generic ios app icons that a startup churned out.

    I also hate System 1’s masterbrand; not because it looks bad, but because it looks WAY too much like Gitlab. So much so that I saw the thumbnail of this article scrolling on Reddit & thought it had something to do with the company.

    Other than the masterbrand however, System 1 looks absolutely BEAUTIFUL. Especially the stable/Aurora/nightly icons. All the icons are really pleasant to look at. With another masterbrand that doesn’t remind everyone of Gitlab System 1 is definitely the way to go.

  48. LiTO wrote on

    System 2 – Master Icon
    System 1/2 – Browser Icons
    System 1 – Singularity Icons
    System 2 – New apps

  49. Giulia wrote on

    Nice work! I definetely prefer the 1st one: I like the geometric approach, the clean cuts and it’s extremely versatile. I also like the idea ro have something different for the master logo. Thanks for sharing, inspiring work!

  50. Fan wrote on

    I like more 1

More comments: 1 … 8 9 10 11 12 … 41