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. Robby Marston wrote on

    SYSTEM 1 ALL DAY!

  2. Gauthier Delacroix wrote on

    I prefer system 1 icons that are more understandable. System 2 icons are too complex, I’ll never remind them.

    The only thing on system 1 is…sorry to be the 68th to say it but masterbrand icon is Gitlab…

  3. Vovinam wrote on

    System 2 !!

  4. Ailis wrote on

    System 2 for Masterbrand and General Browser, System 1 for the rest

  5. Miguel Angelo Rozsas wrote on

    System 2, please!

  6. Antonio wrote on

    The browser main icons are both nice, but the others are totally messy. Hope they will be redesigned. ( system 2 over system 1 )

  7. Kiara L. wrote on

    Oh my God. I love the fox head. It looks so cute. I need it. But I like the icons from second group though. I would love some tricky mix of those. But if that fox head won´t win this little “contest”, I will just put it on my desktop. I am so in love with that fox head. <3

  8. Ariel Cavalcante wrote on

    Hey guys, I love the System 1, especially the Masterbrand. I can see it aging like a excellent wine, unlike system 2 (which i think will look dated in 2-3 years tops).

    BUT I have an issue with readability of system 1 browser in the developer edition. I guess the excess of contrast makes my eyes dazzle and I’m unable to “see” the icon entirely.

    Hope it wins! It’s gorgeous :)

  9. guimp wrote on

    System 1 definitely looks better, more mature, modern and follows a more consistent pattern.

    For the browser icons I would go without the blue circle (similar to system 2).

  10. Secreet wrote on

    Sorry, but why? Why do You want to do with (a still good browser) it is not clear what with acid icons.

    In truth, this is more for marketers with managers.
    But this systems icons I do not like (in sys 1 Firefox logo similar to GitLab)

    I use firefox on the desktop/laptop.
    And I do not understand why the good logos and that everyone knows are changing (IMHO: in developer edition it’s the best logo)

    Maybe it’s better to do UI/UX?
    Think and make a better print dialog (compare Firefox and Chromium)
    Auto add-on when editing CSS rules?
    Private browsing – at least in private window dont startup connect i to *.1e100.net or explain why.

    I would use Pocket if I could save pages (not just somewhere on server), it would be super, like scrap* addons

    And in general why should Pocket have Firefox Sync??? Why sync can not save a local copy of a page/note/or something else (not all users have a good and unlimited internet. Remember that!), and if necessary synchronize with mobile firefox.

    Why do not make screenshots and pocket addons to easily remove them if necessary.

    Firefox is a customizing browser! is not it? Look at the Vivaldi browser if You’ve forgotten.

    Therefore, it may be better to have the browser easy to use and then the brandings

    All the best!

  11. BILL MACKNIGHT wrote on

    Version 1 is more like what you think of when you think of Firefox. Other version looks too nouveau. Colors are better in 1st version too.

  12. Laetitia PERRIOT wrote on

    I am a professional web designer and i prefer system 1.

  13. Álef wrote on

    I liked the 2 systems, although I found the 1st most interesting system

  14. Gavalaria wrote on

    I choose System 2

  15. Tomasz wrote on

    Main and firefox – system 1 – nice and modern and still firefox
    Rest – system 2

  16. NIK wrote on

    Group 2, absolutely no question. Group 1 is trendy, straying too far from brand, and does not look unique. Group 2 retains familiarity of firefox while evolving the brand. The twisting effect used in the logo and the icons is a unique and recognizable trait in FF.

    Some of the icons in group 2 need work, but in general it’s much stronger.

  17. Tjipke wrote on

    I’d go for:
    system 2 firefox masterbrand icon,
    system 1 general-purpose browser icons,
    system 2 singularly focused
    system 1 icons for new apps and services

  18. Josh wrote on

    I prefer system 1, though I’m wondering where the blue went in the last two rows of icons.

  19. Mohamed Elhammouti wrote on

    Groupe 2

  20. Shannon wrote on

    I like both 1 & 2 for the main browser icons. I think 1 emphasizes the ‘fox’ in the brand and 2 emphasizes the ‘fire’. I would consider those messages when deciding which route to follow. In regards to the remaining icons, I think 1 may be too complicated and 2 may be a bit simplistic. Perhaps consider a balance of the two.

    I do like the vibrant colors and the contrasts.

  21. luigi wrote on

    System2!

  22. Karina wrote on

    System 1!

  23. Lilou wrote on

    I prefer group 1, with the browser icons from group 2.

  24. MisterJFK wrote on

    Personally, I flipped a coin because I couldn’t decide, so it fell on my face and it’s System 2.

  25. Jim Leedham wrote on

    I like System 2 in general, both the colour range, and the fox likeness, however I like the System 1 Maser Icon over the System 2.

  26. Liz Davis wrote on

    You should really consider accessibility in your designs. Those gradients are trendy now but not very robust enough for future branding. I prefer the icons with some white space to break them up. Simply using color to show line isn’t enough anymore, especially when shrunk down.

    Overall the fox is so iconic I wouldn’t change that part. System 2 is my vote.

  27. Ruben wrote on

    Great work on these visuals! Glad to see Mozilla asking feedback from the community as well.

    I PREFER SYSTEM 1 …
    – the vivid FF brand colors (orange, yellow, blue) tie the family nicely together
    – looking fresh, modern, sharp and cohesive
    – way more mature and trustworthy looking than the toy-like System 2 icons
    – the polygon-based Masterbrand icon offers more flexibility in deriving banners, visuals and promo material (nice T-shirt!), in harmony with the new, boxy Mozilla logo

    … WITH SOME MODIFICATIONS:
    – general-purpose browser icons: please keep the current Firefox Quantum logos!! They were only introduced in FF 57 and are per-fect. Thunderbird 60’s new icon will be aligned to them as well.
    – some new app & services icons are too generic to convey their purpose. I like the Lockbox one!
    – refine the Masterbrand icon to better resemble a fox (and include some blue to diverge from GitLab’s logo?)

    From an avid Firefox user – since 2006.

  28. Kay Keys wrote on

    I strongly prefer System Group 1

  29. Eric wrote on

    Nice work. The master logo of system two felt more immediately like “Firefox” but weirdly unfinished. The system one master logo is beautiful and metaphorical (it’s like a fox looking at a screen). For me, the icons of both systems require a nanosecond or two of interpretation (whose don’t am I right?) but overall system one seems more cohesive.

  30. Alexis wrote on

    El número 1 es el mejor!!

  31. Daniel Serodio wrote on

    I love the current Firefox Quantum icon, I wouldn’t change it but I understand the motivation.

    I prefer System 1, but I have to repeat what half the comments already said: System 1’s masterbrand icon looks like GitLab, not Firefox.

  32. Kareem Elhennawy wrote on

    I will go with system 1

  33. James wrote on

    I like System 2 better overall, but I’m not sure why it gets rid of the globe for the general purpose browser icons. That seems like oversimplification for no real purpose.

  34. Roberto Bagna wrote on

    Not change in logo.

  35. BRUNO REIS DE FRANÇA wrote on

    system 1

  36. JhonnyHuhHutBravo wrote on

    Hey guys, finally something worth to comment nowadays.
    Following the bullets:
    For the quantum browser of both systems and the other ones in system 1, yeah, it feels firefoxyeshy. The grid like forms on system 2 just look like any other app
    System 1 as a whole, yeah it holds together. Quantum browset looks cleaner on syst 2 tho.
    Man, thats kinda hard to think of. I do believe clean-flat-gradient stuff is more trendy now, but i dont foresee any new style trend yet. I really liked the facefox on sys1 resembling the new-apps, thy really talk to each other. That does not happen ins sys2.
    Guys, i do have to confess, i dont like the new apps on sys2. I dont really think they reflect the values listed because they just look like serigraphic masks for me, not much. The simple straigh or circular lines do a better job in this way, imho.
    Hard to say that just looking to the systems guys. I do believe the solely fact you are asking all this straight forward is a wonderful way to that, even so. Then sure yes, we feel appreciated.

    Hope youll really read all of this. I got it is not a vote but please leave quantum as in sys2, its gorgeous. Once youre prioritizing the masterbrand and stuff, keep to the fox, facefox ruls.
    PS: br hue porra. I dont want to live in a country chiefed by Bolsoshit man, that makes me sad. We can do better, promise. Peace, Weed and Good job ;)

  37. Craig Bestwick wrote on

    System 2!

    1 looks like a google app icon system and has no historical connection with the fire fox logo or brand

  38. Josef Klus wrote on

    Hi. I prefer the System 2 Logo because it’s got movement and fire.
    (Took me a while to find the fox in System 1, hidden in the unintelligible yellow mask.)
    However, the System 1 browser icons feel more related to the System 2 Logo than its own icon set.
    While current trends are to make everything new and fancy, I still fall back on throwbacks to the classic and identifiable brand.

  39. João Dini wrote on

    Most of these icons don’t look very cohesive between each other, so I will try to go by them one by one… (Also, sorry for my English, it isn’t my first language)

    1. Masterbrand Icon
    Both systems look very good, and I don’t think neither of them would “not feel like Firefox”, I would be happy with any of these two really.

    2. General-purpose browser icons
    The blue/red scheme on the first icon in system 1 is my favourite here, not only that but the fox has it’s head way more detailed, and for me it feels more recognizable, like “Well that’s Firefox”

    I don’t feel good with the lack of… anything “inside” the fox in system 2 (That blue ball)

    3. Singularly-focused browser icons
    Well, this is weird. Both of them really, in system 1 we have very colourful icons, and the connection I end up making is with Google, not with Firefox.
    In system 2 the icons remind me of Samsung’s software, but the colour and overall shape is better here.

    4. Icons for new apps & services
    Those are even weirder. In System 1 those balls on the side of what looks like a “gallery app” are weird… and none of these shapes really mean something for me, I could see they being used though, but something just feels… off.
    In System 2, well we’re back to the Samsung looking icons, and those are even more colourful. I definitely wouldn’t associate those with firefox

    5. Those last photos with examples of usage of the icons.
    System 1 wins. System 2’s weird circles are… well, weird.

    Thanks for reading!

  40. Josef Klus wrote on

    PS I’m a stalwart Firefox and Mozilla user. Fearing that anything other than System 2 Logo with system 1 icons will force me to remember function associations I never will since their departure from the original is so great.

  41. Dan wrote on

    Both concepts look great and it’s very hard to choose between the two. I was about to say System 2 but the more I look at the app icons for system 1, the more I love it!

    I think System 2 has the stronger Masterbrand icon as it has a closer connection with your previous logo. Maybe try that icon with the System 1 colours.

    Also on the System 1 browser icons, I’d suggest losing the back blue circles just to simplify it more when viewing on smaller devices.

    But great job with both design and am looking forward to seeing what you choose!

  42. Candido wrote on

    I prefer system 1 set overall, I do like the browser icons from set 2.

  43. Banana wrote on

    System 2.
    I would really miss old logo, it reminds me something I’m attached to.
    So imo system 2 logo connects old, good brand with a breath of freshness.

  44. TheRealist wrote on

    Here’s what I’d like:

    – System 2 masterbrand icon

    – System 2 GP browser icons

    – System 2 SF browser icons

    – System 2 New apps and services

    Love the new look hope you see what all your users want wish is a combination of both rather then one monotonous linear choice. Be DyNaMiC Firefox team that is what u are known for so I hope u choose the right icons that we the community likes.

  45. Muieter wrote on

    Hi, Firefox Design team.
    The system 1 logo is a registered trademark in China. Copyright by muiteer.com.

  46. Banana wrote on

    And I think system 2 logo associates more with speed than static fox head.
    And sys 2 icons look simplier.

  47. Lily wrote on

    I like the second group ! Colors and design are really sympathic :)

  48. jhgjh wrote on

    1

  49. Tehmul Ghyara wrote on

    I like System 2 better,
    system 1 not so much.

  50. Matthew Mahnke wrote on

    I like System 1 more; I think its silhouettes are more clear.

    Some of the shapes for System 2 look a bit too complex/abstract. However, some of the colors of System 1 make it hard to discern details.

More comments: 1 … 29 30 31 32 33 … 41