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

    I’d say I prefer Group 1 icons more than Group 2. However, I think every icon except the browser icons should be Group 1. The browser icons in group 2 look better

  2. Andrea wrote on

    i prefer System 1

  3. Calrn wrote on

    System 1 of course ! :)

  4. Jan-H. Schrooten wrote on

    What you are trying to cope with is three-fold:

    First, you are developing two designs which are thought-through very well, generally.
    Every product group is distinctive, although the icons go together well and are identified as belonging together.

    Secondly, you focus on designs which are simplistic and reduced to the main aspects. This is sensible because it is ergonomic and helping the users to easily recognize the icons.

    Thirdly, you are redesigning the old concept. This works with either the use of colors or form.

    Taking a deeper critical view, what you need to realize now, is that both systems lack on one of these three aspects.

    While the first design system shows advantages concerning the first two aspects, its masterbrand icon is not useful to relaunch the old concept.
    The circular form of the original firefox icon is not recognizable in the new approach. Only one color group (warm colors of yellow towards red) shows resemblances to the old icon.
    This is certainly why many of the comments here aim to favour the combination of the first system icons with the masterbrand icon of the second system.

    In the second system, the icons designed for new apps and services do not match the color or form of the old design at all. On the other hand, they match the first two criteria (distinctiveness, simplicity) very well.

    Best regards,
    Jan-H. Schrooten

  5. hervé wrote on

    Hi
    System 2 for me !!

  6. hervé wrote on

    Hello
    System 2 for me !!

  7. LoveBlogging wrote on

    A nice post. Thank you!

  8. ismail elesheby wrote on

    +1 :)

  9. Ryan Hargett wrote on

    Not sure which system I prefer, but the icons for singular focus and new apps just make me think of Office for Mac.

    Also, I SO want that T-shirt from the hero image!

  10. sgbns wrote on

    I like the system 2 icons, but the masterband looks oversimplified. I also like the idea of the fox icon in system 1, but it clashes with the browser icons.

  11. Mifan Twan Ardana wrote on

    As a person who does not really understand technology but still wants to use technology, I like and interest about the number 1 system …influence, it’s just very gaudily.
    really I like the shirt :3

  12. Chris H-C wrote on

    I like System 1 except for the masterbrand icon which has a book symbolism I think distracts from the Firefox purpose (unless it’s intentional and we’re going deep into public libraries or something :D )

    Attaching Focus’ icon to the concept of a camera (specifically a camera with a mechanical aperture) seems like a distraction. It brings in concepts of images, photography, … things that aren’t what Focus is today and I’m not sure it will be later.

    Otherwise, I adore the colour use in System 1.

    Good work, I look forward to seeing the next version!

  13. Sixtine FLEURY wrote on

    System 2 !

  14. Michael Car wrote on

    Colors cause much more of a response. What I mean is that, while many people who tend to have a, “Meh” or neutral and lackluster opinion (which in marketing, is still NEGATIVE), many, even in that group gave a non- neutral reaction. Sure, some were negative, but you couldn’t please everyone even if… sorry, I tend to ramble, but you get my point. But, I still have to convey my MAIN POINT which is, I think if you stick with the…well, I guess orange and… Indigo, I suppose, anyway if you stick with the 2 “recognized” colors, regardless of design, I think you may find a much more positive response to ANY of the designs you put out there. Not that I am assuming you have money to blow from a 1 man focus group (lol), but I say, try some designs with the 2 colors and then some… well, something different, obv’y, I think you may see what I mean. Anyway, huge fan of the browser for decades, and recently of MDN.To a learning-addict like myself, well, kid in a candy, right? Thanks!
    Michael

  15. BorbingoBoy wrote on

    All from System 1 except for the general-purpose one from System 2; I also prefer the inclusion of Earth above not having it. I would also rather choose the second system masterbrand one, but it looks overly simple.

    Though, I personally enjoy the looks of the Quantum/pre-Quantum general-purpose ones. They looked very good with all the details.

  16. John Jh wrote on

    System 2 is more nice, keep it! :)

  17. CH wrote on

    definitively group 2

  18. none wrote on

    system 1

  19. Maximiliano wrote on

    All system 1 has good design. I prefer them.

  20. Linus wrote on

    Actually, I prefer System 1, but with general icon from system 2. The head of the fox in System 2 has too much contrast to the rest of the body for my taste. But general icon from System 2 is really modernistic and I guess you could make a lot out of that. I love the examples given what you could make out of System 2’s general logo, and to be honest, I’d absolutely buy that System 2 t-shirt.
    Really excited to see what you guys do with that stuff.

  21. Florin wrote on

    For me, a veteran of Firefox, system 2 is the better option!

  22. DAY wrote on

    The fact that so many people want to combine the two approaches, should tell you neither are strong enough on their own. You’ve overwhelmed everyone with choices.

    I think I would have omitted color out of the equation before asking the general masses for their professional design opinion. We would be able to see if the designs hold up on their own. Most of them feel a bit too abstract to say anything obvious and so they will require supportive copy.

    Let’s start off by saying one thing: combining them doesn’t work. They are two different approaches, using two different visual languages and design techniques. The only thing really uniting them is the currently-trending 90’s bright color palette.

    When you combine the two approaches, you get a mishmash of ideas going and an inconsistent style. That’s what happens when you pitch a client on a logo and they’re torn between two choices, so they request you merge them together. In the industry, it’s called a Frankenstein logo. Piecing together the best of two concepts to create one, convoluted idea that combines “the best of both worlds.” Usually, the client walks away happy because the designer validated the client by obliging. But at the end of the day, it ain’t going in the designer’s portfolio.

  23. Chris wrote on

    I think the round shape with the tail is just too iconic to dismiss in the future. When it comes to the overall brand, system 2 is way better imho. However I think the other icons in system 2 can be reworked to look more like a family. I also like the sense of speed and dynamic in this system.

  24. Paul McAuley wrote on

    Drop the Firefox brand entirely and rebrand to something more logical for the web:
    https://wiki.mozilla.org/images/d/d2/FireSpider.png

  25. Marcin wrote on

    The second group looks better and is more related to Firefox. In the first group, there is not enough visual distinction and it all blurs into similar shapes and colours. The “singularly focused” and “icons for new apps” sections in group 2 should be reworked though. Look a bit out of place. Still more recognisable than group 1.

  26. Hexandcube wrote on

    I think think that 2’nd system looks more like Firefox. It’s just better.

  27. Felinix wrote on

    First system is better, honestly. Firefox have got quite a recognizable color palette and you should use it everywhere. First row of second system’s “foxes” are better than those from first one, though.

  28. Colin wrote on

    Style 2 all the way. Style 1 is way too blocky and old-fashioned.

  29. Yousuf Syed wrote on

    I loved how Firefox Quantum included a new design for the browser that made it beautiful and unique and it’s great to see Mozilla taking more steps to improve on their design.

    Here are my thoughts on the new design:

    – Masterbrand Icon: The system 1 Firefox icon looks better, I prefer the fox shape because it helps with brand recognition, Mozilla is best known for Firefox. it would look better if it had noticeable gradients for all the polygons.
    – General-purpose Browser Icons: The system 1 icons looks better because they feature more shapes like the tinted fox neck, the tail is shaped better and features the great colors, and have beautiful gradients. at first, the shape of the fox’s head looked weird but grew on me.
    – Singularity-focused browser icons: For the final icons, I would like to see the shapes of system 1 with the gradients of system 2, one for each icon, and the way it shows depth with its shadows.
    – Icons for new apps and services: Same as above.

    keep up the great work Mozilla!

  30. Jenni wrote on

    Firefox Masterbrand Icon – System 1
    General-purpose browser icons – System 1
    Singularly-focused browser icons – System 2
    Icons for new apps & services – System 2

  31. Vanessa wrote on

    System 1 all the way!

  32. Andrea Favero wrote on

    I like more the System 1’s icons but with the Firefox masterbrand icon from System 2.

  33. Robert wrote on

    I LOVE System 2 General-purpose browser icons (and dislike everything else) and would suggest using the new System 2 General-purpose browser (orange and red) icon as the Firefox Masterbrand Icon. Would look super awesome on a dark navy t-shirt with Firefox text underneath and nothing else on the front and the url on the back.

  34. Jutrzenke wrote on

    System 1

  35. Ryan wrote on

    The System 1 logo looks a little too similar to Vox Media. I like that System 2 keeps the spirit of your current logo, but gives it a refresh.

  36. Anvit wrote on

    I like the simplified Master brand and the browser icons from system 2. Not a fan of the rest from either system but if I had to pick, I prefer the aesthetic of system 2 (though I do think that they aren’t iconic enough and don’t strongly communicate what they stand for)

  37. Ibrahim wrote on

    System 2 for the master brand and general purpose browser icons, else System 1 all the way :O

  38. Sammy wrote on

    system 2

  39. Nassim wrote on

    Although I preferred the second master brand icon at first, I do think the first one has more character and an additional “modern edge”. What I’m sure about is that the browser icons should definitely not be the ones in the system 1. The color harmony created in the system 1 is great, so I would go with system 1 with system 2’s browser icons.

  40. Chipotte wrote on

    Hello, I vote for System 2.
    Thank you

  41. Betinem wrote on

    I love the Marketing Icon and the Browser-Icons of System 1. I do not know, if i like the app Icons of System 2 a bit more, as they are a bit more versatile in colours, but generally i love System 1.
    To be honest, i don’t like System 2 Browser-Icons. Not at all… Sorry.

    Greetings and best wishes,

    Sascha

  42. Anonym1024 wrote on

    I like the fox in the current logo, from the browser Icons I think Group 2 is better, I don’t think there is any way a logo without a fox will make me think of Firefox/Mozilla when I see it. That can 100% be said about the presented non-fox icons, maybe there is some chance for it with other systems, but fox-centric system might be a safer bet (*any* fox-like logo I’ve ever seen made me think of Firefox, so that’s telling)

  43. Clara wrote on

    Really love the System 1!

  44. Georges wrote on

    System 1 icons are great, especially the main logo. But I would change the tail of the fox for the second design, a symbol of circular movement, active, fast, not a simple camp fire.

  45. Laurent Simon wrote on

    System 1 icons are far more simpler. They give a new strong identity. Except the browser icons: they don’t fit with the overall style and are pretty unreadable.

  46. LordBBK wrote on

    System 2 is the best

  47. Carl Smith wrote on

    Use the “System 1 – FireFox Masterbrand Icon” for the System 1 browser icons.

    To be honest, the browser icons suck in both systems, but the System 1 Masterbrand Icon looks really cool. The shield shape is reassuring too.

  48. Marc T. wrote on

    System 2 is better

  49. Max wrote on

    System 1 ! Thx

  50. Vador wrote on

    System 1 :)

More comments: 1 … 38 39 40 41