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. san-smith wrote on

    I think that System 2 looks more pleasant. I vote for System 2.

  2. cidus wrote on

    I think System 2 looks cleaner, sleeker, and looks like it reduces/minifies (sp?) better.
    System 1 looks too github-y/ubuntu-y for me (not necessarily a bad thing, just not as original I guess).

  3. Brian wrote on

    System 1. Shake things up a bit and I like the variety and cleverness of the icons (I’m a graphic designer).

    1. veronika wrote on

      system 2- firefox icon
      system 1- icons

  4. Matt Adams wrote on

    While very nice, System 2 is completely outclassed by System 1. The System 1 icon set is categorically superior.

    This isn’t opinion, by the way; it’s demonstrable, objective fact. You can discontinue the survey now.

  5. Tim Hughes wrote on

    First thing I thought was that it looked like the GitLab logo and that this was some kind of collaboration. https://gitlab.com/gitlab-com/gitlab-artwork/raw/master/logo/logo-square.png

  6. Cat Peterson wrote on

    Aloha (again) from Honolulu, My iPad-created response went to a blank page, so reposting, SAVE THE FOX!!! Why are you messing with success? SAVE THE FOX!!!! Seriously, clicking on the Firefox — the fireFOX — logo is fun. Safari and Chrome logos are lame. So why are you spending hundreds of thousands to create yet another look-alike shiny logo? SAVE THE FOX!!!! Seriously disappointed. Don’t you have better things to do with your time and money, like… Saving the Internet? SAVE THE FOX!!!! Hope you don’t just become another browser option, rather than having some personality! SAVE THE FOX!!!! Warmest aloha, Cat

  7. Lea wrote on

    System 1

  8. Mauricio wrote on

    System 2. Firefox is awesome.

  9. Michał Górzyński wrote on

    System 1

  10. Alice wrote on

    In my opinion, icons from both of the systems could be adopted, however not each one.
    First of all, I consider the new icon from System 1 as the best for representing the whole family, because it harbours a different aesthetic from the browser. Therefore, the latter may better be considered as a specific element of the services family.
    Then come the browser icons from the System 2. These are rather minimalistic and clear enough to be recognised as the browsers while also showing an evolution with subtility. They take both hands of the services’ history and the will to make it evolve.
    Finally, I consider the new services icons from System 1 to be the best ones. My reasons are that I find them easier to be interpreted and understood by the users, and that they seem to better embrace the “global design concept” implicitely chosen for the four previous icons.

    In a most general way, I find the two groups pretty nice, and think that the icons should be chosen, depending on which ones the users can recognise the most easily.
    Best regards to the developpers! :3

  11. Chris wrote on

    I prefer the system 1, change a little the logo is better and the color is nice😃

  12. Allan wrote on

    Both look fresh, but what about in 5-10 years? I’d vote System 2, the white space makes the icons more legible, especially at a smaller scale. I’d suggest you remove the off-white backgrounds and/or drop shadow, it makes the System 2 icons less crisp.
    And while gradients are fashionable now, System 1 looks a bit muddied because of it.

    Keep up the good work Moz!

  13. Chris Zuber wrote on

    System 2, completely. Maybe I’d prefer some from 1 if I knew what sorts of things the bottom row of icons would be for, but I prefer the aesthetics of 2 better.

    Also, does the master brand of 1 seem too similar to GitLab to anyone else?

  14. twilderman984 wrote on

    System 1 for all

  15. Dave wrote on

    1, but mail logo from 2.

  16. Greg wrote on

    TL;DR: I prefer the masterbrand icon from System 2 and think the System 1 individual items have more potential, but both are lacking. I think they all look much better on desktop, but suffer on mobile.

    Love your openness on this!

    Generally, System 1 seems very in vogue. I like the geometric shapes and bold colours, but not so big a fan of the random subdivisions of colour in the singularly-focused and new icons: they add distraction to the logos making them less clear and a bit cluttered (particularly on mobile). The clear (and understandable) divisions in the browser icons look great though.

    It feels like you’re trying to be flat-but-not-flat, adopting bold icons and then adding divison/gradient. I think that hits trends, but it seems like a pointless exercise to me and might not age well.

    The System 1 masterbrand is a serious no-go for me. The similarity to GitLab’s Tanuki in both form and colour (it’s super unfortunate you’ve both adopted orange dogs for mascots!) is confusing and will lead to claims of copying (I like yours more though).

    I like the idea behind System 2, with the mobius twists in everything, but it’s a subtle effect even on desktop. Again, it seems to be going for flat-but-not-flat, and again I think that’s completely lost on mobile where it just looks fiddly. They also have a bit of a corporate feel to me, maybe a bit Amazon. A bolder approach for these could look really good, and I’m really looking forward to see how they’re approached in rework.

    The System 2 masterbrand is probably my favourite icon of the bunch: clear, bold, evocative, great colours, and a clear familiarity for existing users.

    Also, the pattern on the System 2 t-shirt (rash vest?) is to die for. Probably not the output to prioritise, but I’d absolutely wear one if the text was removed.

    Super excited to see this go forward!

  17. Chris wrote on

    System 1 for me

  18. Boril wrote on

    Here’s my idea for Firefox branding: stop with all the grandstanding political statements because it makes us all look like idiots for using the brand. If that continues, I may as well just use Chromium or Brave.

  19. granitDev wrote on

    I greatly prefer the System 1 icons, except for the mail, get rid of the 4 dots that make no sense and obscure what it is I’m looking at. That way the actual envelope stands out more and it’s more obvious what that symbol is.

    System 2 icons look like logos for children’s toys. I don’t like them, they remind me of cheap plastic toys.

  20. ropib wrote on

    I like System 1.
    I believe System 2 is easier to make apps or services icons, but because they have less singularity.

    Like some of the others i don’t like so much the browser icon in System 1. It should be more geometric, more angular, less conservative.

  21. Charlie wrote on

    I like System 2 Masterbrand icon more. It’s very simple but it’s easy to guess it’s firefox-related. System 1 icon is just a bunch of pointy triangles that, aside from the color scheme, feel more like Microsoft to me.

    Firefox Quantum System 1 icon looks like an evolved version of the current one, but evolved kind of haphazardly. The paw disappears, but outward-pointing tufts get emphasized, messing with the flow. You can barely tell the “globe” is even globe-shaped.

    Firefox Quantum’s System 2 does more with less, it has a nice classic vibe and the circular curvature evokes a globe without an actual blue circle being present. If you really have to make everything increasingly simplistic, this is an elegant way to do it at least. All the curves and gradients complement the overall shape.

    I don’t particularly like either of the singularly focused browser icons, but System 1 looks considerably worse. The pointy mosaic design feels like Microsoft again, but even more so because of the colors. The designs technically have something in common with the Firefox logo, but I dont think I’d guess they’re Firefox products. And the leftmost logo makes me think of Picasa, though I like the circular shape.

    I don’t know what to say about the new app and service logos. I think I might prefer System 1 designs for those? The bottom two seem to exude pure essence of unremarkablity, and I feel I’m going to forget about them the instant I close the browser tab. Really, they could be sent on spy missions. Really, the final five look more like colored interface buttons than actual app icons.

    I hope you can come up with something modern yet palatable, good luck to you all.

  22. Jeremy Lec. wrote on

    Hi,
    System 1, because I love the masterbrand icon!

    I am a little skeptical about other pictos, which I globally don’t find very easy to understand (on both systems).

  23. Georgi wrote on

    System 2 reflects better the “spirit” of mozilla/firefox, system 1 is too “edgy”.

  24. Tom wrote on

    Firefox is my favourite viewer in laptop and phone too. Please leave us actual logo, it is the best.

  25. Ryan wrote on

    So, the big question is: What is “Firefox”?

    If it’s not the browser, then what is it?
    What products does the brand encompass?

  26. Geronimo wrote on

    System 1

  27. bill wrote on

    At a first glance, I think that both the two general-purpose browser icons do not fit their respective system. When I look at any of the two system, I have the feeling that in both of them their respective browser icon feels odd.
    That being said, I definitely prefer System 1!
    The more simple the better, in my opinion.
    The most significance in the fewest amount of drawing: that should be the ultimate goal.

  28. Bender wrote on

    System 2 icons are cleaner in terms of shape and color. Some of the icons in System 1 look too flashy and busy for me, especially the ones with multicolors.

  29. Jeronimo Misa wrote on

    I really like the general browser icons for the system 2, but the icons for services and singularly-purposed browser icons in system 1. I also believe that the choice of colours is great, but that it faces the “instagram mistake” (as I call it) of replacing a good icon with a new one that tries to be the evolution by metallic or gradient colouring. Minimalistic colouring such as sublime text’s new icon, electron, bash, atom and emacs as well. The colours you chose are great to make the association with the firefox brand but I’d rather choose a single colour of those for each individual product, it might look much more appealing. A great example of what I mean is the elementary OS circular icons, which have this simplistic look.
    As regards to the criteria questions, except the general browser icons, they do not feel like firefox (yes, one may establish a connection as said above) but I believe that it mixes with the next question which is, do they hold together by their own? I don’t believe so, since it seems they were made to be more about that link that about the product itself. Let me explain, I see sameness, everything is the same, the icons are not being made for the product, but for something that looks like the other ones. Give each product their own identity. Firefox is about a good product for everyone, those icons just reflect the Firefox brand, not the good product it is. I believe that answers for the last question about profits.
    As to if they may be stretched to many other products, i believe so, they are pretty generic. However, I do not see reliability, nor speed, nor evolution (its the same path instagram took, and the system 1 icon looks like gitlab). the first icon of the singularly-purposed icons of system 1 reminds me of another brand, I cant remember which one, but it seems like a replica of another one, I’d prefer system 2 in that particular icon.
    I attach an image I found on the internet for the purpose of expressing what I mean by simplistic and powerful icons (except for the instagram one, that one is just ugly)

  30. Vale Kenny wrote on

    System 1, not a doubt. System 2 has a decidedly ‘Microsoft’ feel i.e. ‘I’m trying to be attractive and useful while still trying to maintain a branding requirement, but end up doing nothing well’
    System 1 is throughout a ‘Mozilla’ feel, feels like a natural evolution of the brand, and provides an easily associated form with an application.

  31. Jesse wrote on

    System 2 by a long shot. More aesthetically pleasing and instantly recognizable.

  32. Lucy wrote on

    I like the general-purpose browser icons for system 2 better. The space in the middle feels open and inviting, like it’s leaving room for the user in the middle. It invites you in!

  33. Van Eliot Santos wrote on

    Firefox Masterbrand Icon
    – System 2 because it stays consistent with the Firefox logo. The System 1 logo looks like the Fox Racing and Gitlab logos.

    General-purpose browser icons
    – I prefer the way the System 1 icons were colored (has various colored shapes and not mere gradients). The only thing I liked with the System 2’s is that the sides are perfectly round. I would love the System 1 logos to have that.

    Singularly-focused browser icons
    – System 2 because it looks sleek and easy for the eyes. System 1’s has way too many colors.

    Icons for new apps and services
    – System 2 coz I find them more intuitive at first glance.

    TL;DR: Overall I liked System 2 but with System 1’s general-purpose browser icons.

  34. Mikael wrote on

    Get the designer of the current Firefox browser icon to do a System 3 option. That icon is one of the best ever made in all of tech.

  35. Hans Wellens wrote on

    System one looks nice!

  36. Gary Lange wrote on

    I like the System 1 design. It’s clean and recognizable, and it’s on the right side of the line between abstract and TOO abstract.

  37. Casper wrote on

    The System 2 Apps and Services logos remind me of the dated Office for Mac 2011 icons

  38. Giuseppe Longo wrote on

    I agree with serverl comments:

    I like very much the masterbrand and browser icons os System 2, but NOT its Singularly-focused icons and Icons for apps and services, i prefer System 1 for them, but i don’t like very much them either.

  39. Jennifer Robbers wrote on

    The system 2 icon designs are easier to identify and are much crisper. However, I love the master icon from system 1 and think that should be put with the other icons from system 2!

  40. Team-on wrote on

    System 2 better.

  41. White wrote on

    For my opinion, I think that system 1 is more interesting, but those “Icons for new apps & services” have too orange, I would color them similarly to system 2.

  42. miewoo wrote on

    system 2

  43. MK wrote on

    1

  44. Ishy Squishy wrote on

    I prefer the main logo and browser logos of System 2 since they feel sleek and modern to me, but System 1 for the rest of the logos because I like the geometric style design and System 2’s alternatives don’t feel like part of the Firefox brand. In my opinion, the browser logos of System 1 don’t feel right in terms of their proportions. The earth (or circle) in the middle seems a little squashed and the tail is very high in comparison to the head.
    Thanks for giving us the opportunity to comment on the designs!

  45. Carsten wrote on

    System 1 does have the CI-colours wich i like. The Problem taht i see, is the the similarity of the masterbrand icon with the Gitlab logo

  46. cybernard wrote on

    If I didn’t know that this probably costs 10’s of thousands to design and hours of labor I wouldn’t care either way. Instead of cosmetic face lift how about dedicating those resources to getting a better score in http://html5test.com

  47. Wirlog wrote on

    System 1 for most of the icons but for the APPS System 2, because on System 1 they’re an orange mess with no color variety.

  48. mweishaar wrote on

    First, even though you spelled it all out very clearly, most people don’t take the time to read and are simply “voting” in these comments.

    Second, I don’t quite get the point. Firefox *is* the browser, I don’t see it as the brand for other things. I thought if anything, Mozilla was the brand and Firefox was the product.

    To your criteria:
    Do these two systems still feel like Firefox?
    Short answer: no
    Longer answer: only System 2 seems like firefox.

    How visually cohesive is each of them? Does each hold together?
    Short answer: yes
    Longer answer: But I don’t like them. I think System 1 has too many gradients. They bug me. Is that blue, purple, fuscia, red? System 2 resembles fire, much simpler.

    Can the design logic of these systems stretch to embrace new products in the future?
    Short and long answer: I have no idea

    Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
    Short and long answer: What? No. How could they?

    Do these systems suggest our position as a tech company that puts people over profit?
    Short and long answer: What? No. How could they?

    Questions: How do these hold up as monochromatic images? Is there a plan to have simpler more graphic (e.g. 2 color, black-on-white, white-on-black) representations as well?

    Lastly, I know this is coming from the creative side of the house and this is what you do, but rebranding won’t save the products. I keep hearing how Firefox is working hard to regain market share and improve the browser. Just make sure as a company you aren’t forgetting to build the best browser in favor of the brand.

  49. Jordan Maris wrote on

    I much prefer the second set, for me the first set is nice but looks a little “cartoony” and not as professional

  50. Manny wrote on

    System 1 looks the best except I think the first icon looks better on System 2

More comments: 1 … 15 16 17 18 19 … 41