Categories: General

Arrival

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

    Hope, whatever will be outcome, it will be the best for web-moz user, keep doing good work.

  2. Oliwier Brzezinski wrote on

    I love the new design although the old logo will always be remembered.
    I guess it’s time for change.

  3. Syed Sajid Ahmed wrote on

    New logo, elegant thought, vibrant colors. Amazing work!

  4. Chidi Chris Uriel wrote on

    It is cool and amazingly awesome

    1231681_191480241030806_1238109227_n

  5. San Jai wrote on

    Eagerly waiting …. my team have been huge Mozilla users and contributors as well.

    http://www.vc-india.com

  6. HANK wrote on

    Well the reason i picked Fire Fox in the first place was that the little fox wrapped around the world and it caught my eye because it told me i could find the answer to anything in the World and that’s why Mozilla Fire fox is followed by so many people. you know there’s something our country has very little of anymore and if there was more of it we would be living in a more peaceful world but we live in a greedy society and we forget where we came from and what got us there and your little fire fox got you where your at and now your putting an end to him and showing the people how loyal of a person you really are what you should be doing is surrounding that little fox with some new design and celebrating the success that the logo brought to Mozilla Fire Fox

    1. Tim Murray wrote on

      This process is about updating the brand identity of Mozilla, the nonprofit champion of a healthy Internet. It’s not about Firefox, our open-source web browser. Thanks for your comment!

  7. trlkly wrote on

    My complaint is a really insignficant one. It has to do with the official SVGs.

    They have a bunch of junk leftover from using Adobe Illustrator. It’s fine that you used that software, but it leaves behind some pointless bits, and essentially advertises their software.

    All you need is the XML declration, then the SVG tag with the xmlns and viewbox properties as given, and then the rest of the file. The rest is just junk that Illustrator adds to every SVG they make. Heck, the enable-background attribute is was never implemented correctly and is deprecated–partly because Illustrator used it by default.

    (Personally, I also think using an embedded stylesheet is pointless since you apply it to only one color. but I could see some reason you might do that. Still, you could consider just using a fill attribute. And the group is kinda pointless, too. )

  8. Mr Rithy wrote on

    very good

  9. Helga techer wrote on

    its nice

  10. mynah lortzing wrote on

    The block around the logo looks fine to me, and the “protocol” id really cool. But is there an alternative to “highlighting” other text? I would prefer a rectangular text box.

  11. vera wrote on

    wowwwwwww!!! this is cooooolllllll
    I really enjoying the services more than other website services.
    so congrats!

    dacia

  12. Parvez Shaikh wrote on

    Mozilla and Firefox are same things for many, so the confusion about the ‘fox’ going away is understandable.
    I don’t agree that moz:lla looks misleading. A brand is identified by its logo and a logo doesn’t necessarily include its whole name. It could simply use a stylized ‘M’ and still be recognized as Mozilla. Mozilla is getting a brand makeover, not a name change, after all. It’s still written and called Mozilla.
    Anyways, this is an impressive concept overall. And thanks for being there for us, the people of the internet.

  13. JEFF TILTON wrote on

    Are you kidding did you just putt these up so the real ones will look that much better because I’m sorry but these are all pitiful I would be embarrassed to have one as my logo YUCKOLA

  14. odunga fredrick wrote on

    good time Mozilla i appreciate

  15. George wrote on

    Congratulations…

  16. ThiruN wrote on

    Great! just great!
    The logo perfectly fits Mozilla and i don’t want them to change it.
    I don’t know why people are going nuts over the ‘://’ part. When Mozilla had the dino logo, did the people searched the ‘dino’ on the internet? then why is everyone is going mad over this?
    ‘Moz://a’ is the ‘logo’ while ‘Mozilla’ is the ‘name’. Please!!! Nobody asked you to enter ‘Moz://a’ in the address bar! it’s not a name damn it! it’s the logo!
    And for god’s sake! this is not replacement for firefox logo! this is the logo for Mozilla.

  17. Ali wrote on

    Very interesting move! Keep going!!!!

  18. Nektarios F. wrote on

    :// looks like a sad or confused face.
    Moz://a looks ugly as a typed word and as I already mentioned above when I make the connection with modern internet language and smileys I think it projects a somewhat negative vibe. Not sure if everyone will bother to have your special font to show it better.

    :-)

  19. Glenn Pryor wrote on

    Love it! … for the most part. That includes the excellent mottos/ catch phrases re what you stand for, and your campaign to popularize it. It is interesting that you have had to explain that none of this affects the Fox logo, that it won’t go away, and that Firefox is only pasrt of Mozilla. That shows the need to make the difference clear. I really like the new font and logo. Some critics/ comments have good points, though some of it is over my head. I don’t know code, or the history of internet design as used in the 90’s… I think that will not be a big issue for most people, especially the general public. I assume you are mainly reaching out to the general public, and are seeking to inform and gain support from them. Though I have no formal training in it, I think I have a decent eye for design. I like your design changes, though I am concerned some of it is too “busy”. I’m sure you’ll make some adjustments as needed. Best of luck!

    glennyalemarch107kb

  20. Peter M’menge wrote on

    Superb! Very creative and so wow !

  21. Santosh S Malagi wrote on

    Hey please dont change the FireFox!

  22. LERRY wrote on

    this is a new experince in new MOZILLA

More comments: 1 2 3 4