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

    System 1

  2. Jeder wrote on

    For me it would be masterbrand and general-purpose browser icons from system 2, the rest from system 1

  3. ryan babcock wrote on

    Please don’t forget how iconic the current firefox logo is. It would be a shame to lose that brand recognition. System 1 main logo looks kinda silly.

  4. Ed B. wrote on

    The whole thing is a waste of time and money. Half the icons don’t even seem to relate to Mozilla to me.

  5. Andriy wrote on

    System 2

  6. Wade Campbell wrote on

    System 2 is clearer. System 1 is too abstract. I’m a 35-year graphic designer.

  7. Christopher Valcourt wrote on

    I adore system 1. but like the master icon of system 2 just a little more. SYSTEM 1!

  8. Léunar wrote on

    I’ve read some of the comments in order not to reiterate too much. I too preffer the first system.
    the resemblance of the master logo with the Gitlab logo is clear, but then again a) Gitlab is not necessarily a brand with awareness in the same space as a general purpose Web Browser (I would not expect that at all) and b) It is Gitlab to take the icon of a fox (this was bound to happen eventually)! Furthermore, and i don’t know if this is intentional, Firefox’s master logo in system one contains the pages of an open book. Which talks about knowledge, and is, i think, a great hint (although perhaps more adequate for a Firefox wiki app?). I also love how the colors in the individual logos in system one are much more contrasty and the shapes are simpler, easier to reduce in size, and i think, easier to remember.
    System 2 doesn’t do anything for me in terms of shapes or colors. Stylish, sure, but more anonymous.
    Indeed the only thing i preffer from system 2 is the Firefox Quantum icons, more similar to the current one and thus more recognizable. By simple virtue of brand awareness, I’m guessing these these will just have to do (brand awareness is the main enemy of all brand rennovation).
    And soembody already said this but masetr logo 1 is super anonymous. It even remind me of the Eye of Comodo Dragon web browser, or some version of Northon Antivirus. No.
    A doubt that remains in my mind is, if there is a logo hyerarchically above Firefox Browser (the master icon)… what does that mean for the Mozilla brand?

  9. Riley wrote on

    The system 1 masterbrand icon is gorgeous, maybe a little vox media but as a stand alone piece it’s amazing so I’m in for system 1.
    To keep with the feeling of FireFox I feel the orange, red, pink color scheme is foremost, pieces like the general purpose browser icons for system 1 are not quite as cohesive when they remove the orange and pink or a couple of the icons for apps and services on system 2.
    The thoughts of staying warm colors does make the expansion to new products easier in some respects as you already have something tying them together as show by the numerous ideas proposed for other icons in those colors.
    The warm colors help with speed, maybe not safety quite as much.
    The system 1 are kinda cute so more wit than reliability and they look newer and more innovative where as the 3d effect on system 2 feels a little more dated.
    Again with the “cute” thought on system 1 is people over profit, which I think stands pretty in line with wit as it’s a person first design make it interesting and then as people think about it as person.

    As an extra thought can the iris icon (first system 1 singularly-focused browser icon) overlay each of the blades, I like the gradients, just feels a little out of line and maybe the overlay would help?

  10. Harold L. Bates wrote on

    In general, I like System 2 better than System 1, and feel that the icons look like a more cohesive group. System 1 feels like more of a departure for me. Either way … great work Mozilla!

  11. Guillermo wrote on

    System 2 is the best!!!

  12. dywined wrote on

    Vote for system 2, it’s a clean design easier to use correctly

  13. Axis wrote on

    Simply “too many colors and gardients”. These designs would have been cool 10 or 15 yesrs ago, but not now.
    Sorry for that comment. I am a graphics designer and I know what I am saying.

  14. Anthony wrote on

    I’m not hugely in love with either system, but I think that may be because they still need more work.

    That being said I give the edge to System 2, primarily due to the increased clarity presented by the icons for new apps and services. Two of the five in System 1 are completely inscrutable to me (upper right and lower left). The System 2 icons for new apps and services seem to have more potential for rendering understandable symbols.

  15. Russ wrote on

    I think System 2 looks better but with master brand icon 1.

  16. Steve Mercury wrote on

    Clearly System 1 is the more pleasing to the eye when it comes to the entirety for classic desktop and mobile apps.

  17. Brent wrote on

    To be taken seriously, Firefox needs a professional appearance.
    These new icons may please core fans, but they do not convey meanings that an average user can understand, and they use obnoxious colors that will drive users away.

    Try again.
    Or, get some professional design help.
    Please.

  18. Sl wrote on

    I think an identity, organic or artificial, may evolve but the core is always the same. 15 years ago Mozilla bore Firefox and the logo told us who it was: I saw it as an artificial entity that felt organic, that changed and grew as it learned. It felt genuine.

    I don’t think the new system options show any of those signs of the initial joy when the browser was first introduced. The current designs feel generic, too mainstream to what is out there now which is not what I equate with browser nor the company.

  19. Benoît wrote on

    Me too! Group 1 for the brand logo with Group 2 browser icons.

  20. sarah wrote on

    Definitely prefer System 1! It’s simpler and instantly recognizable as a language

  21. ChrisR wrote on

    System 1 looks far more polished. Something about System 2 doesnt look as nice.

    The primary browsers icons are good on both systems but for me the deciding factor is the other apps icons, System 1 looks consistent while System 2 looks a little too random.

    Just my 2cents.

  22. Dec B wrote on

    I like system 1 the most, but I don’t like either master icon. I think that #1 doesn’t really fit with the rest of the brand, but #2 looks too generic. Maybe the master icon could be the head from the browser fox.

  23. Mat wrote on

    I feel like system one makes more sense and is more accessible – I wouldn’t be surprised to learn System one is the new Firefox logo. For people who hadn’t heard of the brand if someone were to show them system one over system too I feel like they would remember system ones association better as it’s more recognisable as a fox and colours fit.

    Also going down the hierarchy of system 2 it feels more like you copied icons from Samsung and don’t seem to fit with your brand.

  24. Nick wrote on

    As a graphic designer I have to say that I like the system 1 set better. System 2 seems like it has mixed design identities. There are the more conventional vector designs and then there some line art icon designs. The system 1 set has the same design identity throughout. Apart from that line art icons seem weaker to me and I believe that they don’t always work well in design.

  25. Nicolas wrote on

    System 2 reminds me of something I hate: a preloader. And that’s not fast or fast at all

  26. Iron wrote on

    System 1 <3

  27. TechnoBoy wrote on

    The icons are great to remove people’s bad taste of firefox and start a new page. Also they are very modern and detail-less. I love them. I choose the second group. They are great.

  28. Arash wrote on

    I quite like the system 1, except the Masterbrand Icon.
    Please use the master brand icon of system 2 and everything else from system 1.

  29. Gaelle wrote on

    I prefere system 2. The 1 is so minimalist and we don’t recognize mozilla system behind

  30. TomW wrote on

    System 2 has icons that are more recognizable and distinct, but less coherent as a whole than those of System 1. System 1 “future products” icons are too similar to each other and less indicative of function than those of system 2.
    Having said that, I think you should fire all the “brand designers” and other ballast and get back to your core competency, i.e. writing good software with better functionality than competitors that people actually want to use. Fancy graphics design is not going to save a crappy product or a team that ignores its own customers.

  31. Nick wrote on

    System 1

  32. D Mesmer wrote on

    I’d like to see the System 1 set, but with the System 2 masterbrand icon. What’s that in the middle of some of the System 2 Firefoxes…an elephant or a white rhino?

  33. Leonardo Piccioni wrote on

    Masterbrand icon: System 2’s is very clever. System 1’s is cute, too, but reminds me too much GitLab — and I guess this would be a popular complaint.

    General-purpose browser icons: Both are nice and recognizable. System 2’s are probably less similar to Chrome/Chromium’s logos, and has a clever use of negative space (but I wouldn’t mind if blue sphere returned), but fox’s ear and tail could match better.

    Singularly-focused browser icons and new apps and services: System 2 seems more coherent, from a stylistic standpoint, with general-purpose browsers and masterbrand. As a sidenote, I think both proposals to Focus browser very clever.

    In summary, both are very good work, but I prefer System 2.

  34. Andrey wrote on

    System 1

  35. Jorge Ramirez wrote on

    I like the system 1, but the main master brand reminds me about gitlab, about the System 2, I think the colors of the other apps makes me lose the relationship with firefox.

  36. Geert-Emo wrote on

    Personaly I appreciate the second set A LOT more than the first.

    The colors of ALL artwork are very agressive for my taste.
    They remind me of the color schemes on the first PCs back in the day (US taste, perhaps?)

    More interesting would be if Mozilla would stop trying to make Firefox look like Chrome (the new IE) and go it’s own way like up till some years ago… (remember Netscape?)(once the best browser).
    “New” and “going with the flow” is not always better….

  37. Chinmai Prabhune wrote on

    Hi
    System one gives more of a big brother is watching you feeling.
    System 2 for me gives the comfort which an open source non profit browser has given me for more than a decade.
    System 2 it is for me
    Thank you

  38. Not Even Kidding wrote on

    This is what you’re doing? This is what you think is important.

    All the feedback(mostly negative) that you receive about the constant superfluous and completely unnecessary changes while problems and issues languish unaddressed, and this is what you think Mozilla and Firefox needs?

    More redecorating? More reshuffling of the Titanic’s deck chairs? Logos are not, nor do they “offer design tools”. They are stupid little icons. Firefox has a perfectly adequate one with exceptional global recognition. So, you’re plan is to break that too?

    Meanwhile, what was and should still be the predominant web browser (WEB BROWSER!) continues to be fat, slow, and increasingly irrelevant as it yet again, redecorates itself.

    Genius!

  39. Bruno Bazin wrote on

    Hello

    I like the “general-purpose browser icons” of the system 1. Their blue background in the center of the pattern makes them more full and warm than those of the system 2.

    It’s the opposite for “singularity focused icons”. Blue makes those of the system 1 poorly readable. They also have a side “already seen elsewhere”. Those of System 2 are more readable and, given what is shown, more apt to express singularity.

    The same goes for the “new apps and services icons”: the system 1 is pleasant to the eye “from a distance” but less decipherable, less legible. It is fuller but suddenly less light and less clear. Even if the patterns are interesting (the keyhole in the middle of a hexagon), the range of colors that compose them make them less pleasant because less easy to decipher. The system 2 seems more promising.

    For the “firefox masterbrand icon” I like system 1: The fox head is rather well seen. The system 2 less evokes the change of logo, even if it is an interesting evolution of the existing one.

    Ultimately, the t-shirt is super classy. Where can I buy one ?!! :)

  40. Jeff wrote on

    System 1 for sure, except that the master brand icon is too angular to match well with the rounder icons in the set.

  41. Paul Strauss wrote on

    System 1 is more pleasing to my eye

  42. Dulce wrote on

    I like system 1 icons,not the colors for apps and services though. I think it’d look better if you use system 2 colors for system 1 apps icons.

  43. Daniel G. wrote on

    System #1 for sure.

    System #2, main icon loses the ‘fox’ also a few of the other icons show remind me of a janky netscape knock off.

  44. Tom wrote on

    System 1 FTW!

  45. Felice Croul wrote on

    I prefer system 1. I do like the system 2 masterbrand icon better than 1, but I don’t like the rest of the icons in system 2 group.

  46. Amelia wrote on

    Some great work here! I am also of the camp “System 1 Master Brand Icon with System 2 Singularly-focused icons”, I think the System 1 Singularly-focused icons are too abstract and ‘Microsoft-y’.

  47. Meryl wrote on

    The whole system is more distinct in the first direction! The other properties are recognizable as being related to the logo. In the second direction, the icons for apps and services look more like generic icons; I wouldn’t know they were related to the firefox logo if I hadn’t seen this article.

    I think the first direction is much more successful and is more recognizable as a brand!

  48. Lancelot wrote on

    I far prefer the system 1 icons, but the system 2 master logo captures more of the essence of Firefox, I feel.

    The system 2 logos look slightly childish and are less easy to understand

  49. ChrisJ wrote on

    Definitely System 1 – Foxy McFoxface

  50. Aleksandr wrote on

    System 1 overall seems like the better overall choice in my opinion, but man will that masterbrand icon take some getting used to. While definitely unique the geometric fox face makes me think of brands like GitLab or Metamask, but I think you all have done a good job of setting your design apart.

    System 2 honestly doesn’t feel like it belongs with the Mozilla ecosystem. I can’t quite put my finger on it but it almost feels too textured for controls (though I will admit the general browser icons are quite good).

More comments: 1 … 11 12 13 14 15 … 41