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

    Combine System 1 ‘s masterbrand icon of remaining icons in System 2.Haha..I ‘m looking forward to this update.

  2. jk wrote on

    system 2 for masterbrand icon
    system 2 for general-purpose browser icons
    system 2 for singulary-focused browser icons
    system 2 for icons for new apps & services
    BUT: maybe you could put more colors in the “singulary-focused browser icons”
    and … sorry, I do not speak English very well ;-)

  3. AhmedD wrote on

    Group 1 is far away better because group 1 icons are more unique rather than group 2 icons which seem to be done before for another product

  4. Torin Doyle wrote on

    Hi Mozilla.

    I’m not sure if my first post went through properly.

    I dislike all of those new designs. They are too minimal. I prefer the colorful logos of old. The c. 2004 Firefox logo was my favorite.

  5. Max wrote on

    First set is better, as for me.

  6. Shnalla wrote on

    Like the job that was done.
    It makes sense, and freshen up the brand.

  7. Phil wrote on

    System 1 in my opinion

  8. dragon wrote on

    system 2

  9. omar wrote on

    1, With browser Icon from 2

  10. Anderson wrote on

    System 2 é interessante. Para mim, a raposa deve permanecer clara nos ícones, afinal, é o mascote da marca.

  11. Pierluigi (Italy) wrote on

    Without thinking twice, first impression, for Masterbrand and General-purpose browser I like most System 2.

    Talking about singularly-focused browser: System 1, Icon 1 (leftmost) looks too like… Google Chrome. :S

  12. Kazuhito Kidachi wrote on

    I love current Firefox icons, very much. Personally, I don’t feel any reason to change the logos at this moment.

  13. Daniele Iannaccone wrote on

    I prefer the system 1 lot, overall. Only, the masterbrand icon in system 1 pack do not give the idea of “fire” (while the one in system 2 isn’t representative of a fox), in my opinion, and this isn’t a good thing for an icon which should represent the whole brand…

  14. Arnaud wrote on

    I agree with Tyler as well, but maybe the master icon of the group 2 could be used as Firefox icon in the group 1. Otherwise, in my point of view, the current icon of Firefox could be used in the group 1 as well.

  15. Claire wrote on

    1 !!

  16. Mikhail wrote on

    I love System 2 browser icons, but icons for non-browser products look like menu icons (or pictograms), not like product logo.
    And all the icons from system 1 are very heavy and not distinct.

  17. Smelly wrote on

    System 1 Master Icon Looks like an orange book on a pyramid.

    System 2 Master Icon is the Crunchyroll Logo.

    Cheers.

  18. Charlie Bordon wrote on

    System 1

  19. Simon D. wrote on

    I really like the system one icons. And here I also like the icons for the Firefox browser. Unlike others who like the system two icons for the browser more, I don’t. So if I could choose I’d take the system one icon set.

  20. Panos Stokas wrote on

    I’m using Firefox since Phoenix. I don’t care about the icons as long as the browser is secure, fast and functional (as it has always been).

    But to answer your question, I think group 1 looks like a rebranding while group 2 looks like a modernization of the current brand.

  21. Ilya wrote on

    System 2 is good variant.

  22. Davide wrote on

    I like the System 1

  23. SergioBh wrote on

    Group 1 with Group 2 browser icons.
    I would like to propose a change to the blank empty area in the browser icon. Why not make a fox head glimpse?
    Ciao

  24. GUILLERMO DANIEL ALFONSO PEREIRA wrote on

    I choose the system icons 1

  25. Sol wrote on

    I really prefer the Group 1 icons; and in any case all of them are colorfully great!
    Good work

  26. Barynov wrote on

    I vote for the system 2

  27. Mlocik97 wrote on

    I think first (system 1 Firefox Masterbrand Icon) is so much similiar with GitLab logo, so I think it’s not very good to choose that.

  28. Nicola Fioretti wrote on

    System 2 Masterbrand and General Browser, System 1 everything else

  29. Xav wrote on

    Hi , i vote for System 1. System 2 seems to be far from the style of Firefox.

  30. Ian Loves FF wrote on

    Firefox icons 1 option 1 is great – stays true to the original icon. Anything less is a total disaster. Firefox without the fox … what is that anyway?

  31. MrDocx wrote on

    firefox masterbrand icon : system 2 WITHOUT HESITATION because system 1 looks too much like GitLab !!
    For the rest both systems are beautiful, personally I prefer
    general-purpose browser icons : system 2 ,
    singularly focused : system 1,
    icons for new apps and services : system 1.

  32. Carles wrote on

    I like system2 icons in general because they are more minimal, except for “icons for new applications and services” which I prefer system 1. System 2 are completely different from other icons and doesn’t feel like the same group.

  33. Alaeddine Messadi wrote on

    Definitely System 1 and I love the Maser Icon. :)

  34. Raynar wrote on

    System 1 across the board looks good as design for me.

  35. abdelhamidabid wrote on

    great job mozilla last few years has been nothing but great experience using firrefox keep working and evolving

  36. Salvatore Moschelli wrote on

    System 1 reads well over all. Cleaner lines. Less use of gradients

  37. Luca Strahlendorff wrote on

    I love both systems.
    What about making these icons a part of the theme-store? So that any user can change that.

  38. Waffle wrote on

    Absolutly the second! :)

  39. Olha wrote on

    System 2, it’s pretty easy to reproduce and recognize

  40. Vincent Bouton wrote on

    System 1, BUT, with others colors (it looks like Instagram)

  41. Davide Depau wrote on

    I’m totally a fan of the “system 2” design. While giving the brand a touch of modernity, it stays in line with the historic logo. “System 1” changes everything too much in my opinion, and the generic browser icons look kinda weird to me.

  42. gabriveronika wrote on

    system 2, please ;)

  43. Joy Reed wrote on

    I prefer system 1. Really like the masterbrand logo and think it is strong enough to serve as the masterbrand and replace the browser icon, as those don’t fit in the groug as much. System 2’s icons are okay, but the way the gradients are applied is odd cause it shops the form up. System 1 is just clearer and cleaner to me.

    Thanks for asking people for feedback. Pretty cool you are doing that :)

  44. sergio wrote on

    I love the system2 icons

  45. Alessandro wrote on

    I prefer group 1, but choosing group 2 master icon :)

  46. sergio wrote on

    System2 !

  47. hengkidermawan wrote on

    please don’t change the logo, its the legend, every I see that logo I see the internet, I see whole world, I connect to everyone…firefox is the live legend

  48. Javiera wrote on

    I like more System 2

  49. Fernanda Carvalho wrote on

    System 2 in general is more detailed. I like the color usage as well. Although I have to say that I think the general-purpose browser icons from System 1 are better.

    Great changes, congrats from a graphic designer :)

  50. David wrote on

    I like the minimalist idea behind system 1, but it’s just not clear enough of an icon set. I think system 2 allows for better visualization and instant understanding of what they are about. Frankly, though, maybe you can get a third option.

More comments: 1 … 31 32 33 34 35 … 41