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. Liam Robichaud wrote on

    System 1

  2. Tymek Majewski wrote on

    My votes:
    Masterbrand: None (System 1: are you becoming a geo-locating or a book company? System 2: Where is the fox?)
    Browser icons: System 2
    Others: System 1

    The T-Shirt photo should be removed, it’s a shocker.

  3. Tommy wrote on

    I like the System 1 group. Also System 1 with System 2 masterbrand

  4. Nirmal K wrote on

    Dear Firefox design team,

    First of all, kudos! This is a much needed redesign.

    The browser icons from both systems look awesome, of which I’d prefer the 1st system. However, I agree with Tyler in that your other icons look unprofessional. They look more like they belong to Chinese applications designed to reduce productivity rather than a premium Firefox branded app. While of the two I prefer System 1, it still needs a lot of work (as you people have rightly said) to make it more upscale, of Firefox standards. All the very best and looking forward to the new design.

  5. Kyrodes wrote on

    Why we have to choose between the head and the tail? Why can’t we have a complete fox?

  6. Flavio wrote on

    Adorei o system 2, ícones lindos e designer inovador.

  7. Jacob wrote on

    I also like System 1 a lot better, except for the master brand icon. I think it’s been noted that it looks a lot like GitLab, and I’m not sure how you’d redo it similarly but also different _enough_. Additionally I tend to correlate Firefox more with the tail.

    System 1 feels more descriptive to me – or maybe “less abstract” is a better way to put it – and so I think it will be easier to come up with new icons that make sense, particularly with it’s more “angular” design. I also think that’s what makes it more cohesive, it kind of reminds me of folded paper. I feel like it fits in better with Mozilla’s current rebranding efforts, like the :// etc.

    However, the angular-ness of System 1 might feel colder or less inviting. System 2’s rounded ends and curves might feel a little more human, but I think the icons are harder to interpret. Personally, I think System 1’s warm colour palette offsets this possible drawback.

    As I wrote this, I originally really didn’t like the Lockbox icon of System 2, but then I realized the iconography of the asterisk is probably much more relevant now than a keyhole. It’s like the save icon still being a floppy disk, it probably doesn’t make sense anymore. Just wanted to point out that I actually really like that one now.

  8. QuantumPowah wrote on

    Master1 reminds me of Gitlab and Master2 of Opera. I much prefer the design of the foxes in set 1 and, overall, set 1 looks better with its cleaner and perhaps playful design. I’d honestly avoid anything on the right side if I saw them. I can’t explain it, but they look somehow cheap, like some scammy mobile apps.

    I do like the use of colour in set 2 though. I’d add some more green, blue and purple to the 2 bottom rows in set 1.

    Also, I’ll take 2 of those blue shirts. Thanks.

  9. cristian wrote on

    System 2

  10. Gonzalo wrote on

    I like more system 2.

    But I think Firefox main browser logo shouldn´t change, it is only one year old!! and it is beautiful

  11. Marcelo wrote on

    I do not like System 2 very much. The visual impact is weaker, the lines are broken, not continuous, give me the impression of something not complete. System 1 is way more firefox and can derive a lot of other icons on the same style

  12. Gonzalo wrote on

    The rebranding its not a bad idea, but Mozilla could have more beasts, and maintain Firefox actual identity, that is already awesome

  13. Muhammad Rizaldi wrote on

    I chose system 1, because unique

  14. Connor Hewitt wrote on

    I think System 1 looks best for everything except the masterbrand icon. The system 2 masterbrand icon looks mature and simple, while maintaining a core feeling of “Firefox”-ness. The system 1 icon…. looks like it was plagiarized from Gitlab. Other than that, the System 1 icons do a good job of feeling like additions to the Firefox family. The system 2 icons look a little childish and don’t have much in common with the Firefox feel (especially the bottom ones).

  15. Carlos Copto wrote on

    System 2 with System 1 Masterbrand icon.

  16. Luke S wrote on

    I may be too old, and realize these are for a digital medium, but the gradients are too busy. Most of the icons would work as one color except the main icons for Firefox.

    Aesthetically, the first feels more modern but also feels too abstract. The section seems like a cliche fire icon in a ring.

    I think the primary feeling I get with the two versions of the logo is “generic”. There’s no heart, no personality or attitude. The gradient is trendy and these will be obsolete in 2-3 years easily if not sooner.

    Not that this comment will be among the masses, but I think a step back to remember that a logo is timeless and doesn’t have to describe the company, but it has to at the very least capture the essence. Currently, these options tell me that the Firefox team is generic 😥

  17. yuji wrote on

    I am concerned that there is no sense of uniformity in the color of app and service, but I think that system 2 seems to be FireFox.

  18. Gregory Hansell wrote on

    WOW SYSTEM 1!

    I like what you are doing with 2, but 1 really looks innovative, cool, and more forward thinking.

    Great work all around!

  19. Japanese wrote on

    System 1 is look like a Japanese Akita-dog.
    Very cute😍

  20. toper wrote on

    System 1

  21. Mark Bruckert wrote on

    System 1!

  22. Kennedy Baird wrote on

    What about the GitLab logo?

  23. Jusflo wrote on

    I love both designs to be honest but to choose for final thought I would pick Version or System 2.

  24. Renato Gontijo wrote on

    I prefered system 2 logo and group 2 to other icons. They look more minimalistic than others. They make me feel I’m using a modern product.

  25. Gabriel wrote on

    System 2

  26. Elliott wrote on

    System 1. They’re the most cohesive and distinguishable of the two options, and I suspect they would scale better as well.

  27. FX wrote on

    I don’t like both icon sets. They look flat and not as good as the current ones. Why not leave them like they are?
    I think it should be more important to work on the add-on api to bring back features that were lost with the new quantum system, e.g. toolbar api.

  28. Kresna wrote on

    System 1 a fresh for mozzila

  29. Wil Gaboury wrote on

    I like the system 1 icons in general more than the system 2. But just as side note, when I saw the picture of the system 1 master icon in the blog post’s thumbnail I honestly thought it was the gitlab logo. I don’t think the average person even knows what gitlab is so it’s probably not a big deal, but having that similar a logo will probably mess with most programmers.

  30. Josue wrote on

    Both icon sets look great. I would keep both, but if I were forced to choose, I would choose System 1. Specially System 1 for the Master Brand and general purpose icons. However, If I could, I would go with system 2 for the new apps and services.

  31. Didi wrote on

    I feel system 1 is more versatile in terms of the art direction than system 2, while I feel system 2, for the driving icon, keeps the identity of the old logo while evolving into something new.

    But, overall, in neither of two systems I feel the harmony among the different icons. While this is worse in system 2, there’s something wrong on both of them.

    Just a humble opinion!

  32. Gabriel G wrote on

    System 1, Firefox rules!

  33. Jacob wrote on

    I tried posting a comment a little while ago but it seems to have not worked. Overall it echoed what most people are saying in favour of System 1. However, shortly after I posted, I asked my partner about it and she immediately chose 2 for a reason I hadn’t thought of, nor seen as I skimmed the comments.

    The white space in System 2’s icons helps them differentiate better, especially at smaller sizes. Where System 1’s icons would sort of turn into orange blobs, System 2’s icons would be legible. System 2 would also hold up better to colour changes and monochrome.

    Overall I think System 1 is better from a branding perspective, but System 2 is probably better from a usability perspective.

  34. dpsi wrote on

    I thought Mozilla acquired GitLab when I saw the thumbnail for this post. I definitely think Group 2’s browser logo is truely Firefox, but I’m not in love with either groups of icons for the other programs.

  35. hywong wrote on

    System 1 Firefox Masterbrand Icon is very similar to Gitlab’s own ‘fox’ icon…. :P

  36. Me wrote on

    System 1 all the way

  37. ezequiel wrote on

    system 1

  38. Moises Perez wrote on

    Go for System 1

  39. Ro wrote on

    I’d prefer Group 1 overall, including the browser icons. I think they upgrade the existing icons without changing too much.

  40. Angie wrote on

    System 1

  41. Gabriel H Martins wrote on

    System 1

  42. Ramesarv Amit wrote on

    My feedback:
    System 1Masterbrand Masterbrand with other icons of system 2.

  43. Sven wrote on

    I only have one concern:
    The system 1 fox resembles an arrow down, which is probably not the connotation you intended.

  44. winter wrote on

    Honestly, the system 1 icons just look SO much better to me. If i clicked that fox face and something Firefox related came up i would go “Oh, of course!” On the other hand, if i clicked the fox tail from system 2 and got Firefox i would say “Ah… i see.”

    Maybe that doesn’t come through in text, but the tail seems to be missing something essential from the existing iconography while not providing enough of its own to latch onto. I guess humans are more programed to recognize faces (even abstract, nonhuman ones) than tails.

    I like the rest of the system 1 icons too. The browser ones are similar, but the first are just cuter and that’s a plus. The others… well, i don’t necessarily know what they all are but i like the look of the first group more, they seem to make more sense or be more recognizable.

  45. Rifaz Nahiyan wrote on

    I really think that Firefox really needs to show that its hugging the world. Without the world in the logo, I think it loses its meaning somewhat and doesn’t quite reflect Firefox’s mission.

  46. Evandro S. wrote on

    System 01!!

  47. Apurv Jyotirmay wrote on

    The icons from System 2 look much better, specially for other applications that are being developed under Firefox brand. For the master icon, I’d prefer the icon from System 1. It looks a lot better, and different from Firefox Browser icons. And I think, that’s how it should be.

  48. Patric wrote on

    I really like System 1 icons. To counteract what people generally say, I’m in love with those bulkier general browser icons.

  49. Marcin wrote on

    I think System 2 looks better overall(As some people already mentioned system 1 also seems kinda like Gitlab ripoff) aside from the color scheme of the apps icons, which in my opinion should be more in line with colors of the other icons.

  50. felipe wrote on

    System 1, please!

More comments: 1 … 21 22 23 24 25 … 41