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

    I vote for System 1

  2. Chris wrote on

    I personaly prefer system 1 and 2 icons. These icons represent better Firefox than the others.

  3. Tracy wrote on

    System 1 is definitely the better designed set. However the general browser icons are very messy and undefined. I prefer set 2 general browser icons.

  4. Mery wrote on

    Hello,
    I would choose System 2 – I believe it gives a more dinamic sensation (taking into account that Mozilla wants to transmit speed of browser) and has a more minimalist approach (minimalism is the millenial trend nowadays).
    System 1, on the other hand, transmits a more static view and, in my own personal opinion, displays “worn out”, “in the past” designs.

    Regards,
    Maria

  5. Sasha wrote on

    I prefer the System 1 more than 2, because its items look more orderly. Icons from 2 system are too bright and straining eyes.

  6. Charles wrote on

    Besides the similarity of the main logo of System 1 with the Gitlab logo, System 1’s uniform colour palette makes each icons harder to distinguish for users with vision problems, whereas System 2 combines a strong and more pleasing colour variety with a strong shape variety to help users with various degrees of vision problems find their marks.

    Besides, I really like the fox tail logo of System 2, it has strong callbacks to the original logo but is way simpler and more elegant, it is straight to the point. I regret the lack of the blue core in the first and second levels of this system though, the blue core not only balanced elegantly the orange tone in the original design, but also reminded the universal nature of the Firefox browser, the fox embracing the earth symbolizing how Firefox brings the world together. This is a strong symbol that I think is a mistake to give up. It is part of Firefox’s identity.

    So my preference is for System 2, with a strong plea to not remove the blue core of the original logo.

  7. Christian Taylor wrote on

    #1 looks amazing. #2 looks too cartoonish and Samsung-like to me.

  8. M.K. wrote on

    I personally like the system 1 master brand logo more as it still states the roots of everything.
    For the other icons system 2 seems more usable and have a bigger association with the brand.

  9. Lucy wrote on

    I think both these icon sets look good and feel like cohesive families, however I can see there is still a little more work to do (as you have mentioned). I have split up my feedback below.

    Masterbrand icon:
    System 1 – I like the simplicity of this icon, which reads as a book/catalogue as well. However as noted previously it is not far off from Gitlab, so there needs to be more differentiation here.
    System 2 – I feel that this is perhaps a little generic for an overall brand icon. It looks like a background graphic more.

    General purpose browser icons:
    I think both system 1 and 2 work. They are not much different to what is currently in use, and the alternative colours work well.

    Singularly-focused browser icons:
    System 1 – Looks more like it has been designed as part of a set.
    System 2 – Is following the current fashion for line icons, so this should be taken into consideration if you intend not to rebrand for more than 2 years. Having said that, these are clearer and more easily understood.

    Icons for apps and services:
    System 1 – These are not clear. There will be quite a learning curve for users to figure these out as they stand currently. I would perhaps suggest making these a little more simple and so design them a little differently from the other main icons, which can afford to be more abstract.
    System 2 – These are clean and easier to understand. Again these are following the current fashion for line icons.

    For the graphical elements, I do see an upside-down quote in the swirl graphic, as it is really quite bold, but for that reason may end up being difficult to use. I would strongly suggest softening this, so you don’t always have to fit items in the centre of the circle (which could be difficult, for example on corporate literature).

  10. FF Cupola wrote on

    I see no need to change a respected, renowned browser icon. Both sets look worse to me. They look like imitation icons a malware producer would stick onto something to make it legit.

    And why must everything be dumbed down and simplified? How old is Windows 8 by now? Can we get back to some decent refinement?

    In the VR icons there isn’t anything to be seen that I’d associate with VR. And aside from color usage, there’s little in there I’d associate with FireFox. I’d sooner make a fox head icon and stick a VR helmet on it but that would be absolutely cheesy.

    “Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?” – for me both sets do the opposite. Wasting effort on changing what doesn’t need to be changed is a hallmark of unreliability. It means that things I’d hold dear are not in safe hands. And it’s design. It’s not innovative. It reminds me of all those times AMD and nVidia re-released old graphic cards under new names.

    “Do these systems suggest our position as a tech company that puts people over profit?” – no. It suggests to me that a company puts design and outward appearance over technical excellence.

  11. Joe wrote on

    System 1 with general icon from System 2. General icon from system 2 is nice, and better than from System 1, but other icons are better from system 1, system 2 other icons looks like for kids :).

  12. buzzinh wrote on

    System 1 is much cleaner looking and nicer that 2

  13. Howard Lazenby wrote on

    System 2 please because senior citizens using Firefox do not have the time nor the inclination to try and figure out System 1. Thank you.

  14. Michael wrote on

    System 1 definitely!

    System 2 looks like the first steps that they were made from skeuomorphic design to flat one. Not like.

  15. KAREEM wrote on

    I prefer the system 1

  16. Alex wrote on

    System 2 good

  17. Leo wrote on

    I’ll go with System 1 mainly because it looks more human/natural, like painted with a pencil while the other system look more geometric, symmetric and computer-assisted. The only issue with System 1 is that the Master Brand Icon looks nothing like the others, its less natual, more geometric. I’ll keep System 1 and try to keep the human touch in it, not trying to achieve perfection but a natural look.

    Much love to Mozilla!

  18. Casper wrote on

    Right now I’d probably go with System 2.

    While I agree with some of the criticism geared towards S2 (they’re all very NICE icons, but not exactly brimming with personality) S2 icons are cleaner and way more legible straight away, whereas (to me at least) S1 icons look like clumps of colour, too similar to each other at a first glance.

    Possibly though, S1 needs more work (I love the S1 Masterbrand logo for example).

  19. Stu wrote on

    I like System 1. It just feels so much fresher.

    System 2 feels like a) I’ve seen it before and b) it’s designed for 2007 “web 2.0”

  20. Isabelle wrote on

    The masterbrand system 1 icon feels a lot like gitlab, and not so much like firefox. But the system 1 as a whole is a lot more cohesive. In comparison, system 2 looks like a bunch of icons for completely different products. In particular, the icons for new apps and services in system 1 feel like they belong to a same brand, whereas those of system 2 don’t so much.

  21. Edgard M. Marquez A. wrote on

    I like “System 1”

  22. Jonny wrote on

    system 2

    I like system 2, especially the second general purpose browser icon (probably Nightly).

    But I wouldn’t recognize the singularly-focused browser icons as “Firefox”, I think that e.g. the current Firefox Focus icon is better. Also,

    I think that System 1 looks too “broad”. System 2 looks nicer, it rather reminds me of a non-profit organization.

  23. Daniel wrote on

    I prefer the master brand system 2 as the first one made me instantly think about GitLab.

    I prefer browser icons from system 2 as they are clearer.

    For the rest I am more confused. I like the color identity that is the same on system 1, but the logos seem a bit too simple except for picture and privacy that are clear. The others honestly I don’t know what they are representing and what they could do when I click on it. The plane looks like a share icon or also like telegram app.

    On the system 2, the rest of the icons seem clearer except privacy icon that does not tell a lot, maybe password management but that’s it. The system 1 version of privacy could tell account, privacy, passwords, security and is therefore better. I prefer also the picture icon of system 2 but both are good.

    And the rest of the icons, I really don’t know what they represent. The system 2 versions seem to be less confusing as the design is clearer but without a text below I have no way to tell what will happen if I click on it.

    In conclusion I would say good job for all the icons they are beautiful. These are just preferences and personal feelings.

  24. PierAndrea Notari wrote on

    Main icon group 1 because it is iconic and represents the brand intuitively.
    Browser and app icons group 2 because they look more contemporary although they might need some tweak not to be too common like some Chinese brands UX.

  25. Joel wrote on

    the system one icons look the best, but system two has better color scheme to me, but so far im digging the directions

  26. Delia wrote on

    I prefer System 1

  27. Jerome R wrote on

    Same story, I’d prefer group 1, with the browser icons from group 2.

  28. Davide wrote on

    I vote for System 1, but it could be better a mix of the two systems, because they are both nice.
    In particular I prefer to have the globe icon inside Firefox’s logo, because it gives the idea of the web.

  29. MirceaKitsune wrote on

    I prefer the System 2 icons a bit better, so that is my vote. Both are beautiful designs though so I’m happy whichever wins.

  30. Tiny wrote on

    Aesthetically I simply like more the System 1. I feel like they are not far enough of what we know now and they hold better together, I don’t get this feeling with the System 2. If System 1 is refined I think they would be the best decision.

  31. Keyur wrote on

    My opinion:

    1. Masterbrand Icon – System 1
    2. General Purpose Icons – use Masterbrand Icon System 2 instead (Much cleaner, IMO)
    3. Singularly Focused Icons – System 2
    4. Icons for new apps and services – System 2

  32. Rob wrote on

    I’d like to see the masterbrand being an animation that initially makes #2, and flows on into #1.

    Generally the #2 general purpose icons look nicer, but would be better if they had the clear face definitions from #1. (ie, the jawline contrast).

    For the rest, the #1’s nicely match with the masterbrand which is nice… though they might be harder to make intuitive/properly pictographic.
    The #2’s really struggly to match the masterbrand, I can see it’s meant to be the lines of colour from the tails, but going from 3 lines to sort-of-1.5 lines makes the link weak, they also seem to lack substance over the #1s.

  33. M.faiz wrote on

    Système 2 pls

  34. Flavio wrote on

    What is your target of this re-branding?

    – communicate that something has changed or will change so system 1 (ie. instagram new brand)
    – a refreshed communication but nont a big changes with the past so system 2 (ie. google changes)

    Good luck anyway

  35. Brian Flowers wrote on

    If I have to pick one, I go with option 2 because the icons are more easily distinguished. When I look at option 1, I just see a bunch of orange blobs. Same colors, same sizes, all vaguely square or circular…They don’t mean anything and they all look nearly identical on a quick glance. The second option has distinct colors, distinct shapes, clean lines…have you considered how well these work for the visually impaired? Because I’ve got perfect eyesight (at the moment, with my contact lenses in…) and even I find myself leaning in to the screen to try to distinguish these.

    But frankly…I’m also a big fan of “the Unix philosophy” — do one thing and do it well. Seems to me that an overall cohesive brand for things that are not a browser already exists — it is Mozilla. Firefox has better recognition because it’s a *great product*. It does one thing — browsing the web — and it does it very, very well. You can leverage the Firefox name to increase awareness of Mozilla as a whole, which would be great…but instead it seems like you’re trying to just dilute the Firefox brand by applying it to a bunch of programs that most users won’t care about or experience. I really don’t think that’s a good path forward. I think it’s likely to backfire by reducing recognition of the Mozilla brand and also divorcing the Firefox name from the very product which gave it the name recognition that you’re now trying to exploit.

    Go back to your roots. Worry less about branding and focus on building great software for geeks. Because if it becomes the standard tool for geeks, it’s soon going to become the standard tool for everyone else too. That’s how Firefox spread the first time, and it only started to lose ground because it’s lost the technological edge. Spreading your effort thinner and diluting your existing brands isn’t going to fix that. Making a prettier icon set isn’t going to fix that either. Just build the best damn tool you can build and everything else will follow.

    1. DWW256 wrote on

      The issue with using Mozilla as the software brand is that it’s lost recognition as a software development company. It’s recent rebranding has especially cemented the idea, I think, that Mozilla’s mission is cultural: ensuring equal Internet access, respect, and privacy for all. I definitely admire that mission, but reconciling that image with the idea of developing powerful tools on the web doesn’t necessarily work.

      Now that Mozilla Corp. is no longer developing Thunderbird, Firefox is essentially their only application. If they want to start developing new applications, Firefox is the brand to choose, I think. Renaming their browser Firefox Quantum was the first step, I guess–now Quantum is the browser, Lockbox is the password manager, Reality is the VR client, Send is the file sharing service, Notes is the synced notepad, etc. The thing that worries me about the rebrand isn’t how central it is to Firefox (although I agree that Firefox needs to stay Mozilla Firefox, so that people still trust it and recognize its mission), the thing that worries me is that the designs are so unnecessarily minimal. Focus on beauty instead of following the crowd–that’s what I think.

  36. athno wrote on

    System 2

  37. Nick wrote on

    It is necessary to leave everything as it is…

  38. Chris wrote on

    The logo of the first design is an absolute no-go. It looks way to similar to the ones of gitlab and HappyFox!

  39. Roger wrote on

    The System 2 is better.

  40. Tim wrote on

    I feel that the System 1 is let down by the fact the masterbrand icon resembles Gitlab too much. That fact in itself led me to be concerned the System 1 suite looks far too generic – like something downloaded from a free logo website. That said, if they only existed in the subsystem of the Firefox itself, they’re simple and would be fairly effective in that context.

    The System 2 Browser icon is refined enough to be the masterbrand (though without the off-white background). For me, though these are too complex (they don’t need the chamfer), System 2 is a better foundation – or has better direction.

    Good luck!

  41. Mark Levinson wrote on

    1

  42. Susan wrote on

    Nice work! Group 1 with tweaked general-purpose browser icons (closer to Group 2). Group 1’s general-purpose browser icons seem clunky and hard to decipher with the dark circle element in the background where Group 2’s are much clearer.

  43. George Showman wrote on

    Hi Madhava,

    I vote system 1, *except* for the General Purpose Browser Icons. System 1’s master icon is a great new look for the browser, I like that it is not just riffing off the spinning fox of the past. It is both solid/centered/strong and also dynamic/angular/flexible. For the Gen Purp Browser Icons, system 2’s are better (white space makes them so much clearer). For the remaining ones, I think the System 1 icons riff off the chiseled/angular geometry of the fox-face master icon very nicely.

    Cheers! G

  44. Charles Studholme wrote on

    I far prefer the System 1 images. I can relate to them on a more personal level (they make me smile) than the more ‘clinical’ System 2 icons.

  45. Ed wrote on

    As a long time user of Firefox I like #2 better.

  46. Ramoucho44 wrote on

    System 1 is much better

  47. Ben wrote on

    I love the second one but I’d be happy with the first one, with the exception of the masterbrand logo of the first one, as it looks too much like gitlab’s logo

  48. Szobek wrote on

    My favorite pack is System 2

  49. George wrote on

    System 1 by far

  50. Pedro Pisandelli wrote on

    Group 1 icons with group 2 Browser logo…

More comments: 1 … 26 27 28 29 30 … 41