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. Cristian Mos wrote on

    “Never ask your client for advice.” N. N. Taleb

  2. Vinc wrote on

    System 2 is meh.

    System 1 is GitLab.

    System 0, the current system, is much better than both in my opinion. Keep it please.

  3. Bruno wrote on

    System 1 is more cohesive but also more confusing, too abstract. System 2 icons are clearer. Also, System 2 really feels like Firefox, whereas System 1 feels like a clear departure from the Firefox we know, somewhat like a jump in an unknown future. To sum up, I prefer System 2.

  4. janis1207 wrote on

    The icon design peer se would be +/- Ok, but frankly, I don’t like both color schemes. Do they really need to SHOUT AT YOU? Yeah, they will be noticed, but will they be liked?

  5. urielejh wrote on

    SYSTEM 2.

    S1’s doesn’t feel right. they appear as a bunch of – well designed – random icons.

  6. Rita wrote on

    System 2 is the one! Great job.

  7. Martin wrote on

    System 1 master icon, just NO. It has nothing to do with Firefox. I hope I’ll never see it again. As someone else already noticed, it’s a Gitlab icon.

    General purpose browser icon I could go with either. The blue globe has always been there in the Firefox logo.

    Singularly focused icons, System 2 is better. System one uses Gitlab colours and the first icon is just a the inside of google android camera icon.

    Icons for apps and services, System 2. Though neither set is particularly meaningful to me.

    Thank You
    Martin

  8. Alexis wrote on

    For the masterbrand I would merge the two of them into just one. I like the colors in system 2 better and the icon designs from system one. I don’t like how the negative space in the center is treated in any of the two sets, only looks good for the first browser icon in system one ( the one with magenta-yellow gradient). I would also remove the dots from the corners of the envelope icon in system one.

  9. Rachel Rawlings wrote on

    After seeing the samples on Ars Technica, I believe the System 2 masterbrand icon is better, preserving the current Firefox iconography without suddenly looking like Gitlab.

    The General purpose browser icons are equally good, though I lean slightly toward system 2.

    Then we get into trouble.

    Neither system has a good icon for Focus or Reality–they’re too generic and I would never recognize them as part of the Firefox family. Rocket is recognizable in either form but looks childlike in System 2. Very slight edge to system2 overall for palette unity.

    Finally, the new services icons — they’re hideous. System 2 completely loses the cohesive palette that made the other browser icons identifiable as firefox-related projects. System1 finally takes a clear win for being somewhat expressive and not totally throwing away red and orange, but what are these?

    Only the upper middle is recognizable in both samples as some kind of photo app, and in system 1 the upper right looks like a security-related application. Hang-glider vs parachute? Not sure, and the bottom row is just incoherent.

    Good luck with the rebranding. I was at the “Free the Lizard” party in SOMA when Mozilla was spun off from Netscape, and have been a user ever since.

    Thanks,

    Rachel Rawlings

  10. HatlessTerror wrote on

    I really like System 2 icons, but i feel like System 1 icons would look more appealing to more people.

  11. RAF wrote on

    For me second is nice.

  12. Daniel wrote on

    System 1 for sure! Looks better and it’s more cohesive. But still looks like non-Firefox icons need some work. While System 2 Firefox icons looks ok too, the disparity of style is greater for non-Firefox icons.

  13. perico wrote on

    Pues… System 2 me parece mejor.

    Saludos… o/

  14. Cassidy wrote on

    Responding to one prompt:

    Do these systems suggest our position as a tech company that puts people over profit”

    Not to me.

    System 1 is reminiscent of companies that are just the opposite.

    System 2 evokes a similar feeling *but* i think that the familiar designs will convey “people first” to those who have a soft spot for the swoosh.

    I feel like it’s lazy to say “neither” but if this is an important quality/goal, I have to say neither. I don’t know what would satisfy this requirement. A design that doesn’t immediately evoke “silicon valley startup” I guess.

  15. Michelle K wrote on

    I vote for System 2.

    The supporting icons for System 1 are prettier, but don’t function as well as System 2.

    The use of white space makes the icons much more distinguishable and identifiable. For me, there is a slight contrast issue with System 1 and I find myself having to look a bit longer to make sense of their meaning. My guess is that this will be an even bigger issue at smaller sizes (see how well System 2 works well in the mobile mockup).

    Overall, very nice! Excited to see the final set.

  16. Roberto De Giuli wrote on

    I love the new System 2 icons: they look clean and fresh. The colours of the icons in System 1 looks vintage. Most of all, System 2 is really cleaner in my opinion.

  17. Marat wrote on

    ( non-designer opinion )

    I give my vote to system 2. For me easier to locate app/icon which has different shape and color from others. And I see each app as a separate instance for doing that particular thing. If I had 5 same color apps in my “dock” I probably would add some random apps in between. That’s all really.
    Otherwise system 1. T-shirt with fox face looks much cooler than the one David.

    Just amazing how big job you did. Amazing work!!

  18. Jessica Davis wrote on

    Ageed! Group 1 with Group 2 browser icons. I think both main icons work. The 1st more signifies the fox, while the 2nd more signifies the internet/browsing.

  19. Taylor wrote on

    System 2 retains much much more connection with Firefox. If you want to simplify the look, System 2 does this perfectly without deviating. Having the little flame/tail I think is what does it.

    System1 looks to much like everything else. Instagram much? No thank you.

  20. Michal wrote on

    I’d say mix mastebrand system 2 logo (although system 1 looks cool anyway) and general purpos system 2 logos, with apps and icons from system 1, which looks much more consistent and interesting than the system 2 ones, which are quite…ordinary.
    Anyway, good work!

  21. Magdy Reda wrote on

    Wonderful work, there. System 1 gets my vote, with the masterbrand icon an istant classic, love the creativity.

  22. Travis wrote on

    I like System 1, but other than the obvious Firefox element, I don’t have a clue as to what the other service icons are and I wouldn’t even know how to describe them to someone who needed help and I couldn’t point at the screen.

  23. Sam wrote on

    I like the system 1 masterbrand, but it doesn’t say “Firefox” to me nearly as much as the system 2 masterbrand.

    The system 1 general purpose icons definitely feel more comfortable and trustworthy (though the missing leg is a little odd), while the system 2 general purpose icons feel a bit more modern and progressive. (I’m really just sharing feelings here, not saying either is particularly better.)

    Neither set of singular focus icons feel at all connected to “Firefox” or their master brand. If I saw these in the wild, I wouldn’t be able to tell they were related.

    The system 1 new app icons connect pretty well with the system 1 masterbrand. The system 2 new app icons don’t connect well to the system 2 masterbrand, but connect better with the system 2 general icons. I think a little less symmetry might help.

    Keep up the good work!

  24. Kamil wrote on

    System 1 for sure.

    On system 2 browser icons misses globe therefore makes me feel incomplete. Additional icons doesn’t look like they come from the same masterbrand. They also feel too generic.

  25. Marie wrote on

    I quite like the icons for the System 1 and System 2 general purpose icons. Not so much the other icons, especially the boxy ones.

  26. Miguel Arroyo wrote on

    System 1 feels more somehow more flexible, and definitely more modern.

  27. mozzribo wrote on

    Overall, system 1 has a more unique, fresh and recognisable feel. It’s more foxey and fiery. The singulars and new services are also way more brandable in system 1.

    Looking forward to the final result!

  28. Mamdy wrote on

    System 1

  29. Alfred wrote on

    Not sure if Firefox needs to rebrand at all, but you guys know that better than me.

    But I do know that master 1 is very similar to GitLab. Too similar, it could get confusing. In the other categories, I feel system 2 looks better.

  30. Badulesia wrote on

    system 2 icons !
    In system 1 most icons have the same colors, and the meaning of most of them is really unclear.

  31. DIEGO wrote on

    Hello, definitely System 2, thanks!!!!

  32. Eskander wrote on

    This is really bad. You probably already made up your mind but I’ll say this anyway. Why are you making Firefox the umbrella while you have the Mozilla brand already. It has always been Mozilla Firefox, Mozilla Thunderbird, Mozilla .. so why it is not Mozilla Lockbox, Lockbox Notes …

    1. Eskander wrote on

      * I mean Mozilla Notes

  33. Jedidiah Clemons-Johnson wrote on

    I personally prefer the overall feel of System 1, but as others have pointed out the style immediately draws parallels to Gitlab. I like both so that does not necessarily bother me, but it is an unfortunate parallel. I do like some of the color variation of System 2 apps and services icons, but more often then not prefer the icons in System 1, if only they did not only use the sharp fire colors, some more blues would be nice. I also prefer the System 1 General Purpose icon, feels more like the classic icon while updating well enough.

  34. Jesús Parra wrote on

    I like Group 1 with Group 2 browser icons.

  35. Josh Morin wrote on

    Love current quantum logo, why drastically change something that works for you guys? Less branding and more focus on building awesome software.

  36. dale wrote on

    the icons have to be easy to figure out and understand most of them do not fit into that idea.

  37. Vangelis Katsikaros wrote on

    System 1 looks fresh, but master logo instantly reminds me of gitlab.

    I’d say system 1 with system’s 2 master logo

  38. Kaan Genc wrote on

    I think 2 looks better. 1 deviates from the well-known Firefox logo too much, keeping a resemblence to it for the master logo makes more sense to me.

    Also, master logo of 1 looks way too similar to GitLab’s logo.

  39. Tyler Sticka wrote on

    I like a lot of the child icon explorations in both systems. I think either direction for those could work in either system.

    When it comes to the “master brand” and general purpose browser icons, I prefer System 2.

    If you do an image search for “fox logo,” you will see (a) a lot of Firefox knock-offs and (b) a lot of forward-facing fox faces. In System 1, the master brand icon feels more like the latter, trendier but also more generic. It feels more like a stock logo than something connected to Firefox. While the generic browser icons feel more like Firefox, they also feel blobby and indistinct, and the connection between master and general is less clear than in System 2.

    Excited to see how these progress!

  40. Richard Kendall wrote on

    I’m drawn to the 2nd set, in terms of the fox icons, and that the additional icons have more white space and appear visually sharper. But I’m also drawn to the more Firefox brand colours in set 1.

  41. Nathan S wrote on

    Adjectives that come to mind for System 1: warm, vibrant, connected, powerful, distinctive.

    System 2 icons seem glossy but generic. As one of the other commenters put it: “System 2 icons look like they are from an obscure icon pack on google play store.” They have a lot of empty space, and less heart than System 1.

    Thus, IMO System 1 better captures the “feel” of Firefox and the people-powered nature of Mozilla.

    Props to Mozilla for conducting this as an open process!

  42. Yuri Antonov wrote on

    Group 1 with Group 2 browser icons.

  43. Eric wrote on

    I really like System 1 from top to bottom. Here’s why:

    – It takes the modernity to a whole new level
    – There’s a beauty in the simplicity and crispness of the straight lines throughout each icon
    – Feels much more ownable from a brand identity standpoint

    Nice work. love the approach.

  44. Michal wrote on

    I prefer Group 1.

  45. Frank wrote on

    Both are very nice but as others have said, system 1 looks to much like the Gitlab logo. System 2 is modern and still easily recognizable.

  46. Arkthus wrote on

    I don’t like System 1, it doesn’t recall anything of the old branding.
    System 2 Master logo simplifies the historical logo, as do the Browser icons.
    The problem of system 2 is with the apps icons. It lacks unity.

    But I think you should stop with gradients, it’s an outdated style, and I think you will gain in simplicity, legibility and flexibility if you flatten all of these.

  47. Minnix wrote on

    System 1 🦊

  48. DanD wrote on

    I prefer the System 1 “Master Brand” image presented here, it is bolder, resents more as a Fox (“Fire Fox” still makes me think of a literal Fox at this point, and matches not as much with a swirl). I like the System 2 “General purpose browser icon” for being more familiar and keeping the old Fox around (that iconic shoulder!) (Although I admit System 1’s “General purpose Browser Icon” is bold and stylish and good, it is more of a departure, and I am quite fond of the current Firefox launcher icon and previous two versions of said official firefox launcher icon.

    For the “Single focus icons”, I have a concern that System 2’s icons are too generic and not identifiable as Firefox. They particularly look like Samsung’s android app branding, which adding to their genericness reminds me of early TouchWiz designs that represented Samsung’s departures from upstream Android Open Source Project (AOSP). For a long time Samsung TouchWiz was slower and jankier than AOSP, and TouchWiz was widely panned by the tech press. I would suggest to avoid this connotation, and avoid being confused with another brand in general.

    I appreciate System 1’s “Singular focus icons” for being bolder, more new and standing out as their own thing, although they aren’t super strong yet. I understand these are starting points, but in my view both Systems would need a bit more polish before they would be final-round-ready.

    For both systems: I like the colorful abstractness of these, it’s pleasant to look at for a second, but I don’t think they have staying power. The classic Firefox Browser icon uses darker tones to ground the image, and reduce the “visual glycemic index” — stop my eyes from having a sugar rush and being overloaded and wanting to move on quickly.

    Is there a way to make the icons seem less ephemeral, while not making them lose modernity?

    Lastly, I like the System 2 swag more than System 1 swag. Even though System 1 is more identifiably Fox-y, I think the System 2 stuff looks nicer. I wouldn’t know this was Firefox related without the word-mark, but it’s a nice design. with Michelangelo’s Davig, this is a classic type of “design masterwork”, so maybe this next bit is unintentional: Did you mean to channel a bit of Vaporwave “Aesthetic”? And if not, would you consider it and look into it? It’s a fun aesthetic to riff off of. A word of warning: It’s a bit meme-tastic, and thus attracts… a troll-y element out here on the internets. Probably a bad idea to get wrapped up in that too much. But still, you could bounce your designs off of a Vaporwave type of direction and see what inspiration comes of it.

    Thanks for including us in the process. Best of luck with this!

  49. bart wrote on

    System 2 is like evolution not revolution which is way better

  50. Jack wrote on

    Sometimes change for change sake is not progress. While beauty is in the eye of the beholder, icons should be, more than anything, INTUITIVE. The icons in System 2 fit the bill while also keeping a link to Firefox’s tradition.

More comments: 1 … 18 19 20 21 22 … 41