Mozilla Open Design

branding without walls
Categories: General

Arrival

240 responses

Seven months since setting out to refresh the Mozilla brand experience, we’ve reached the summit. Thousands of emails, hundreds of meetings, dozens of concepts, and three rounds of research later, we have something to share. If you’re just joining this process, you can get oriented here and here.

At the core of this project is the need for Mozilla’s purpose and brand to be better understood by more people. We want to be known as the champions for a healthy Internet. An Internet where we are all free to explore and discover and create and innovate without barriers or limitations. Where power is in the hands of many, not held by few. An Internet where our safety, security and identity are respected.

Today, we believe these principles matter more than ever. And as a not-for-profit organization, we’re uniquely able to build products, technologies, and programs that keep the Internet growing and healthy, with individuals informed and in control of their online lives.

Our brand identity – our logo, our voice, our design – is an important signal of what we believe in and what we do. And because we are so committed to ensuring the Internet is a healthy global public resource, open and accessible to everyone, we’ve designed the language of the Internet into our brand identity.

Today, we’re sharing our new logo and a proposed color palette, language architecture, and imagery approach. Remaining true to our intent to engage with the design and tech community throughout this open design process, we welcome your feedback on these elements as we build out our design guidelines.

Let’s go into a bit more detail on the components of our brand identity system, developed in collaboration with our exceptional London-based design partner johnson banks.

Our logo

Our logo with its nod to URL language reinforces that the Internet is at the heart of Mozilla. We are committed to the original intent of the link as the beginning of an unfiltered, unmediated experience into the rich content of the Internet.

Mozilla-12jan-1500px_logo

 

 

 

 

 

 

 

 

 

 

 

The font for the wordmark and accompanying copy lines is Zilla. Created for us by Typotheque in the Netherlands, Zilla is free and open to all.

Typotheque was an historic partner to Mozilla. They were the first type-foundry to release Web-based fonts, and Mozilla’s Firefox web browser was an early adopter of Web fonts. We chose to partner with Peter Bilak from Typotheque because of their deep knowledge of localization of fonts, and our commitment to having a font that includes languages beyond English. Prior to partnering with Typotheque, we received concepts and guidance from Anton Koovit and FontSmith.

johnsonbanks_Mozilla_zilla_type_2

Selected to evoke the Courier font used as the original default in coding, Zilla has a journalistic feel. It bucks the current convention of sans serif fonts. Anyone can create the Mozilla logo by typing and highlighting with the Zilla font, making the logo open and democratic. The black box surrounding the logo is a key building block of the design, and echoes the way we all select type in toolbars and programs.

Mozilla comes first in any application of the system, just as the protocol begins any internet journey. Copy lines, colors, and images all flow from that starting point, much like a web journey.

Our color palette

Our color palette, derived from the highlight colors used by Firefox and other web browsers, distinguishes our brand from its contemporaries. Color flows into our logo and changes according to the context in which the logo is used. As we develop our style guide, we’ll define color pairings, intensities, and guidelines.

Mozilla-12jan-1500px_color

Our language and language architecture

Copy lines to the right or below the logo hold core Mozilla messages.  They also hold program, event, and team names — simplifying and unifying a multitude of different Mozilla activities. It will now be easier to know that something is “from” Mozilla and understand how our global initiatives connect and reinforce one another.

The system enables Mozilla volunteer communities across the globe to create their own identity by selecting color and choosing imagery unique to them. Meanwhile the core blocks of our system, bounding boxes and typography, will provide the consistency, making it clear that these communities are part of one Mozilla.

Mozilla-12jan-1500px_architecture

Our Imagery

As we looked at the elements of our brand identity, the concept of one image or icon standing for the whole of Mozilla, and the entirety of the Internet, seemed anachronistic. Since imagery is an important reflection of the diversity and richness of the Internet, however, we’ve made it an important component of our system.

 

In digital applications, ever-changing imagery represents the unlimited bounty of the online ecosystem. Dynamic imagery allows the identity of Mozilla to evolve with the Internet itself, always fresh and new. Static applications of our identity system include multiple, layered images as if taken as a still frame within a moving digital experience.

Mozilla-12jan-1500px_imagery

How might it work? We intend to invite artists, designers, and technologists to contribute to an imagery collective, and we’ll code curated GIFs, animations, and still images to flow into mozilla.org and and other digital experiences. Through this open design approach, we will engage new design contributors and communities, and make more imagery available to all under Creative Commons. We’re looking for input from creative communities to help shape and expand this idea.

Mozilla-12jan-1500px_apps2

 

 

 

We will roll out the new brand identity in phases, much as we have with concepts in this open design process, so please be patient with our progress. As we develop our design system, we look forward to hearing your feedback and suggestions using the comments below. You’ve been with us from the start and we’re glad you’re here. We’ll continue to share updates and comments in this space.

Mozilla-12jan-1500px_environmental

Mozilla-12jan-1500px_apps1

 

Photo credits
Brandenburg Gate https://commons.wikimedia.org/wiki/File:Berlin_-_0266_-_16052015_-_Brandenburger_Tor.jpg
Iron Filings https://www.flickr.com/photos/oskay/4581194252

240 comments on “Arrival”

  1. Joyce wrote on

    I like the fox..sorry..

    1. Tim Murray wrote on

      Hi Joyce,

      This brand identity is for Mozilla, not Firefox. The Firefox character lives on.

  2. Luffy wrote on

    Isn’t the ‘m’ in the logo very similar to the m&m chocolate font? could be a copyright issue when mozilla logo is shortened to that m

    1. Sally G wrote on

      As a newly designed typeface, and not being a candy company, I doubt that there would be a problem. And maybe m&m learned from the E.T. fiasco (when they were afraid of the product placement and Reese’s Pieces got all the publicity). However, no making Mozilla candy for premiums!

  3. sridharan wrote on

    well good job keep it ups superb

  4. CHANDRA DUTT SHARMA wrote on

    very nice.

  5. mike wrote on

    I’d rather keep the old Firefox logo(orange fox, blue earth). Billions of people already familiar with the old logo. Force people to recognize/memorize the logo is just adding cognitive cost for user without obvious benefit. I’d suggest do a 1% experiment for current users and see how many people want to adapt to new logo and how many people want to keep the old logo.

    1. Tim Murray wrote on

      Hi Mike,

      Thanks for commenting. This brand identity is for Mozilla, the nonprofit champion for a healthy Internet and the maker of Firefox, the open-source browser. It’s not a replacement for the Firefox logo. Cheers ~

  6. Santhosh Kumar wrote on

    I don’t like the new logo. IMO it’ll look odd in any contemporary site.

  7. Shitopifa wrote on

    I think the original Mozilla Firefox logo is still good, and I really enjoying the services more than other website services.

    1. Tim Murray wrote on

      This is not a replacement for the Firefox logo. It’s for Mozilla.

  8. Md Marghoob Inam Naghmi wrote on

    Hey,

    I think it’s a cool stuff. It will take some time but people will love it.
    New approach is always bumpy. Some will like and some will not.
    Motive should be correct.
    Mozilla motive is “Open”.
    I think this new Logo is a representation of this motive.

    I do agree that using it in online environment is difficult but I hope it will improve in future.

    Color pattern is also good.
    Just make sure colors should be easy on eyes.

    Fonts should be more usable.

  9. karabo lisa wrote on

    wow this is the best i love it very much

  10. Joseph PIMETE wrote on

    beautiful

  11. NILESH CHAVDA wrote on

    worls no 1…Nice & best for internet browser

  12. iqbal wrote on

    Hi tim really niece presentation so you are good looking

  13. afshin wrote on

    very nice

  14. babayo shanga wrote on

    Good outlook!

  15. Castleton N. wrote on

    The new logo is too complex for today’s society, not to mention it’s being used for many other companies as shown. Change it back.

  16. Ade wrote on

    Will the firefox logo be getting a makeover/do-over as well?

  17. Andreas wrote on

    If the new logo is for the Mozilla org its ok and nice .
    Also you should have 1-2 variations depending if the backdrop is lighter or darker.
    An inverted whit or black etc.
    Please don’t chance the Firefox logo! Never remove the lovely fox!!
    Its one the best logos of the IT industry!

    Cheers and keep up all the good work!

  18. Fahad M. Siddique wrote on

    This is beautiful, i can not imagine Internet exploration without Moz://a ;) the FirFox Guru!

  19. jcho wrote on

    I liked the new moz://a logo from the moment I first spotted it some time ago, and that was before I was even aware you had a rebranding exercise, or this blog that I’m only now reading. More importantly, I instantly ‘got’ it; incorporating the colon and double slash into the logo made perfect sense to me for the company that you are. So what if that idea’s been used in other logos before; what strikes me as being particularly serendipitous is how the :// happens to nicely fit in, to transform part of the Mozilla brand name yet keep it legible, rather than simply being appended to it.

    Having looked at the other contenders: http://www.numerama.com/content/uploads/2016/08/jb_mozilla_all-routes.jpg — I believe this is the right choice; it’s simple and understated, yet is the clearest of them all in conveying Mozilla’s identity.

    So, great job with the rebranding!

  20. Ghanshyam Singh wrote on

    Good

  21. Sree wrote on

    LOGO is awesome…just loving it……. ://

  22. Forest Mars wrote on

    I remember my m&m chocolatiers. Its cool tyhough.

  23. Chase J wrote on

    Man, you talk about innovating with a slab serif font, and then you write the article in a sans serif. That’s the most disappointing thing.

  24. Barbara wrote on

    Very nice! I enjoyed reading through the process (although “previous” and “next” were a tad confusing!) and was disappointed to have not realized the process had been going on and I missed out! I would have suggested incorporating the new type into a sort of dyno head shape. Anyway, it’s cool; you are all great; I am especially glad the “fox” is with us!

  25. DeeTee wrote on

    I LIKE it! Can I get a t-shirt? :-0

  26. kimsland wrote on

    In an era where :// have been removed from user’s view on most browsers, I find this idea to be outdated and confusing. I also find that others will not be able to even write the logo without accidentally looking like Internet text protocol when its actually a company name! Plus it seems to look as though your company name is more “moz” now, which is an unrelated to your company!

    And to change from Mozilla to Moz, will be bad move in my opinion, I pronounced Mozilla as mO-zilla, so now its moz? Like in Mozzie which is slang for a mosquito?

  27. Mika wrote on

    Loved it all! And the “One in a Mozillian” tshirt… I’d love to spread it all over Israel <3

  28. Brian Carl Miller wrote on

    While I admit that sometimes change can be a good thing, but to be clear, not always. Case in point, take for example our flag. Its easily recognized immediately all over the world and it says “USA” without even 1 letter on it, but now if we were to change even one item or color, suddenly people would be wondering who is that? We can change anything we want about our country, its policies and loyalties and attitudes and governing bodies, but the flag that represents us does not change, imagine if it did…I guess what I’m trying to say here is simply ” If it ain’t broke, don’t fix it” I like the original logo just fine and can spot it anywhere so why not just leave it alone? Would you recognize “Uncle Sam” in a new outfit of designer clothes and colors? I think not. Best of luck in your endeavors to get yourselves rediscovered and known again.

  29. Vivek wrote on

    Cool but as a fan of Firefox browser I strongly feel Mozilla need to step up their A game in comparison to Google’s Chrome and the new kid on the block Microsoft’s Edge even Opera seems to be catching up.

    Best regards,
    Vivek

  30. David wrote on

    You should leave well enough alone.

  31. Nigel wrote on

    Mozilla,please beat microsoft we need freedom not entrapment.

  32. Lorand wrote on

    Most of the people like’s a lot this new design.I’m not going with the herd and I cannot find nothing good or valuable in this .I really hate it.My advice :keep the old fox ,and don’t lose your identity mozilla….

    1. Tim Murray wrote on

      This is not a replacement for the Firefox brand identity. It’s a refreshed brand identity for Mozilla, the nonprofit champion of a healthy Internet and the maker of Firefox, the last independent browser. Have no fear that the Firefox character is not going away.

  33. Krystina wrote on

    I think it looks great!

  34. William Logan wrote on

    Looks kinda similar to GiffGaff’s corporate identity! I like it, though it’d benefit from less-outdated memes. Where can I get one of those round cuddly foxes on the reception desk?

  35. Kim Sihota wrote on

    I love what Mozilla has been doing but based on some of the comments I have read here it appears to me that there are a lot of people who do not understand the Mozilla role. I have been using the products from the Mosaic/Netscape days. I have assumed the name came from the combination of Mosaic and Godzilla and that the Godzilla influence had to do with the little original gecko mascot thingy (maybe making him seem tougher?) Anyways I believe you need to provide some historical context so the world will actually have a better understanding of your role. I find it difficult and I have had some background using several of the products you have developed over the years. Differentiating things like Mosaic, Netscape Navigator, Gecko, Firefox, Thunderbird, SeaMonkey are difficult for the common user. Your quest to rebrand may be a good one but it really doesn’t matter if the public does not understand what you do in the first place. To me Mozilla is the strong underlying foundation that has developed and supports other products. As such the image needs to be strong, functional and stable. To me associating multiple images to the name does not meet that goal. In fact, it weakens an identity that is already not well understood.
    I rely on Firefox as my browser and Thunderbird as my email client. As far as Mozilla is concerned I want to know that the foundation will continue to support and improve these flagship products. The name and image need to inspire confidence in the strength of this supporting foundation. Visually I liked the impression of the Moz://a idea but I agree that this representation of the name comes with some major drawbacks. I don’t know how you will be able to overcome these problems outside your own products. Maybe the Moz://a portion should only be provided as a graphic with an overlay (below?) with the real text. Again, this will become a problem as the history of the name is forgotten. Without knowing Mozilla who will recognize where Moz://a actually came from?

  36. Disappointed Commenter wrote on

    I comment something on the Web very seldom, especially in English: I know it not so well. But now it’s personal. :) Mozilla team, you gave us the execellent browser, I’m using it for… forever. You sponsored Let’s encrypt, if I’m not wrong. I’m sure, you’ve done so many good things beside. But, please, just make sure that this clumsy awful old school logo will never be shown in a start page and in a new tab page again.

    1. Tim Murray wrote on

      This is not a new logo for Firefox. It’s a new brand identity for Mozilla, the nonprofit champion of a healthy Internet (and maker of the Firefox open-source web browser). Thanks!

  37. Welshboatman wrote on

    The ‘M’ logo on your browser site looks exactly like the UK Morrisons supermarket logo. Not a good idea.

  38. Lou wrote on

    Sometimes companies over think and over engineer a non existent problem.
    Im open minded, spontaneous, adventurous and love new things, but this time Mozilla, you’ve got it wrong!
    If i came across a web browser with the existing fire fox logo vs the new new moz://a logo for the first time, I would be instantly drawn to the current logo. I bet a huge number of people will feel the same way.
    The current fire fox logo works! It is distinct and immediately recognisable. It is bold, it is confident, it is reassuring!
    It does what it says on the tin – ‘fire fox’.
    Why fix it if it aint broken?

    1. Tim Murray wrote on

      Hi Lou, This is not a replacement for the Firefox logo. It’s a refreshed brand identity for Mozilla, the nonprofit champion of a healthy Internet and the maker of Firefox. The Firefox character lives on. Thanks for being a part of this open design process.

  39. Lou wrote on

    Ok, so just read a post that Moz://a is not a replacement for the Firefox logo.
    Well thank goodness for that!
    It would have been good to make this point very clear from the start though…..not everyone reads through numerous post or long explanations beforehand..
    just lost 10 mins of my life ranting about a logo…needlessly!

  40. Victor wrote on

    Absolutely fantastic! Incorporating the link into the logo was just a stroke of genius. I look forward to this new design campaign!

  41. Daniel wrote on

    It is Great.
    I like it personally.

  42. David wrote on

    I love this! I am definitely interested in getting a t shirt with the new design if an when those come around

  43. Jumei Setyo wrote on

    i Think this is so fresh by the way this is for world wide or only in american?
    if world wide you can insert local content for a guideline new brand identity so it can be world wide style :)

  44. Chris Healy wrote on

    Looks very like the M&M’s logo, almost exactly like the M on each M&M.

  45. Flath wrote on

    good

  46. Saiful Umar wrote on

    Best of luck.

  47. sandeep wrote on

    New fonts are looking nice. I am still a big fan of Mozilla and I would love to use these new looks.

    Kudos!

  48. kj2008 wrote on

    The logo LOOKS all right, and I like the type face, but I think the cutesy ://a business messes it up. It will result in two spellings of the name, which with computers is problematic. The secretary in me wants to ask you to please start over, or at least try what Evangeline T. was suggesting.

  49. dennis wrote on

    it will be awesome

  50. Sanjeet Shrivastava wrote on

    AWESOME……. Specially I liked the concept for LOGO moz”://”a
    Thanx

More comments: 1 2 3 4