Branding Mozilla: Towards Mozilla 2.0

Recommendations for the branding and visual identity of the Mozilla Foundation’s product and project line - by Steven Garrity


This document is intended to offer suggestions to the Mozilla Foundation for the future of the Mozilla brand and visual identity. It is not intended to replace or redo the good work that has already been done in this area. Any suggestions made here that contradict, conflict, or replace guidelines, recommendation, or other work that has already been done reflects more my ignorance as the author than my opinion of what has been done.

As the Mozilla project moves towards an end-user focus from a developer and platform focus, the branding and visual identity of the organization and its software will need to be revisited. With the recent separation from Netscape and AOL, the need for the Mozilla project to have a brand of its own is all the more necessary.

Keep What Works

Progress indicator graphic from a very old NetscapeFirst, the Mozilla project has a lot going for it. It has a long heritage, reaching back to the early Netscape web browsers. The Mozilla name was an apt choice as a nod to the roots of the project. It is also unique (free of trademark issues), memorable, and relatively easy to spell and pronounce. Mozilla is a good name.

Lose What Doesn’t Work

The Mozilla LizardThe Mozilla project is lacking a strong visual identity. The Mozilla lizard is widely recognized by developers and early-adopters on the web, but does not reach far beyond these groups. It is also used inconsistently across projects and products.

Any good visual identity builds on what is already established, while improving on the weaknesses of past. So too should the visual identity of the Mozilla project and products. A unified, consistent, but flexible brand and visual identity would be a great complement to the technology developed under the Mozilla project.

Products, Projects, and the Foundation

The broad scope of the Mozilla project has lead to confusion among end users. The term “Mozilla” is used to describe a web browser, a suite of applications, a platform, and an entire collection of software projects.

The recently formed Mozilla Foundation has already started the work of clarifying the terminology. The name of the Mozilla Foundation itself is a good and clear name that obviously defines the official organization that manages the Mozilla project.

They have also clarified the eventual naming of key Mozilla products; the current Mozilla Firebird project is the temporary development name for what will eventually be called Mozilla Browser; the current Mozilla Thunderbird project is the temporary development name for what will eventually be called Mozilla Mail. This is clear, simple, and smart.

Seemingly simple and obvious declarations like this are important for the success of the Mozilla project. People can’t use software that they don’t know how to ask for. People can’t tell others about software that they don’t know what to call.

The Mozilla Browser and Mozilla Mail names are clear, simple, and strong names for what will become the flagship products of the Mozilla project.

Version Numbers

The Mozilla application suite is approaching version 2.0 (version 1.5 at the time of this writing) and the independent applications are approaching 1.0 (Mozilla Firebird is at 0.71 and Mozilla Thunderbird is at a humble 0.3 at the time of this writing). Many have speculated that the official replacement of the application suite with the independent applications would be appropriate time to declare them version 2.0.

The change in focus and new independent applications certain does warrant a new version number.

The Mozilla Suite ver. 2.0:

The Visual Identity So Far

The many Mozilla icons throughout the yearsAs the software produced by the Mozilla project stabilizes and matures, so too should its visual identity. The Mozilla 1.0 suite was generally internally consistent. The browser, mail, and composer applications had a consistent style. This style was also reflected in the Modern theme used across the application. Unfortunately, the common use of the Classic theme, based on the look of Netscape 4, led to further brand confusion between Netscape and Mozilla.

As the Mozilla project transitions its flagship applications from the original Mozilla application suite to the new independent applications (Mozilla Firebird, Mozilla Thunderbird, etc.), the general confusion about the project and products is reflected, understandably, in a disparate collection of logos and icons.

Time for a Change

It won’t be long before these new standalone applications reach their 1.0 status and are ready to take over as the flagship products. This likely jump in the version number and the overall improvement and shift in the software is an appropriate time to improve and standardize the Mozilla visual identity.

Like any good visual identity, ours should reflect the reality of the products it represents. The new Mozilla applications each stand alone, yet they are related and are often used side-by-side. A common style element and style can be applied to icons and logos that are appropriate for each application.

Thunderbird icon as of 0.3The current icon for Mozilla Thunderbird appropriately puts the function of the application in the forefront, and the association of the brand (currently the blue flames) clearly on the periphery. This is a good model.

A proposed icon for Mozilla FirebirdA proposed icon for Mozilla Firebird follows these same good ideas — combining the primary functionality of the application (in this case represented by the globe — a commonly used web-visual) with secondary branding (the Firebird “F”).

Both of these are good examples in of themselves, but the problem is obvious when you see them side-by-side: there is no consistency. Let me be clear: this is not a criticism of the current icon designers — both are very well done, and as I stated above, both are smartly executed. The current icon designers can not be expected to match when there is no defined common visual style. In addition, both applications are beta software, so the visual branding (so far) is secondary to their development.

The New Mozilla Visual Identity

A good brand and visual identity is more than just a good logo. The entire user experience of the software contributes to the brand including, among many other things, installation, operating system integration, polish, and performance.

Don’t Just Look Good

The great programmers and engineers working on the Mozilla project don’t need us to tell them that these areas are already taken care of. The Mozilla applications have been strong in stability and functionality and have been making great strides in terms of usability, performance, and polish. Good default settings, manageable options, and a simple intuitive interface have helped Mozilla Firebird become one of the best web browsers available long before reaching 1.0 status.

Be a Good Desktop Citizen: Mesh with the OS

Mozilla OS X Icons and the Apple Document Icon RecommendationsWhile the cross platform nature of the Mozilla applications is fantastic from the point of view of development, most users only have one operating system. Seemingly small issues, like moving the Options menu item from the Tools menu on Windows and Linux to the application menu on Mac OS X add up to make a big difference in the native feel of an application.

On the surface, the key visual differences between the three main operating systems are the icons and the application skins. The Mozilla applications already make elegant use of the windowing systems on all three platforms. As a result, the main window and window-control widgets already look as good on OS X as they do in Windows, KDE, or Gnome.

The three platforms differ in icon format and style. Fortunately, all three platforms have well defined specifications for both the format and the style of the icons. While the icons should share the same elements across all three platforms, they should adopt the details of the local environment.

All three platforms, Windows, Mac, and Linux (Gnome & KDE) have clear human interface guidelines. For example, the Apple HIG documentation clearly outlines the differences between application and document icons, and how file type text should appear on document icons. Apple even provides a high-quality template from which to build compliant document icons on the OS X CD. The most recent Mozilla document icon, while beautiful, breaks from a clear and simple tenet of the guidelines.

Stand Alone, and Together

While the Mozilla project is in the process of moving from an integrated suite to independent applications, the need for brand and visual consistency remains. The logos and icons of the individual applications should be designed in such a way that they can stand alone, or together.

Examples of icons sets

Leave Breathing Room and Make it Easy to Look Good

Many organizations have extensive branding and visual identity guidelines that are never followed. Too much detail, if not presented in a useful and engaging way is self-defeating. Rather than ruling the appearances of applications with an iron fist, a visual identity program should be a delight to developers; it can make it easy to look good.

You don’t see, for example, many Mac developers complaining that they can’t customize the look of the OS X windows, buttons, and other GUI controls. This is because when a developer puts together a native OS X application using default controls, it looks great by default. A simple “Hello World” window is displayed with beautifully anti-aliased text on a subtly-stripped frame. Even if the look of OS X isn’t to your taste, you can not argue the benefits of such consistency.

So too should the Mozilla visual identity program help the developers of the Mozilla project. When designing an icon, for example, the standards put forth in an effective visual identity program can be seen not as limiting and invasive rules, but rather as good work already done for you.

Learn from Others

Inconsistent icons in Windows XPThere is no shortage of prior art in the world of visual identities. Apple has long benefited from the strength of a fiercely consistent visual identity based on simplicity and elegance.

While there are plenty of good examples, there are many examples of what not to do. Microsoft, in their move towards the rich colors and smooth surfaces of the Windows XP visual style did themselves a great disservice by not finishing the job. Many prominent icons in the system were left in the old pixel-sharp design of the Windows 9x series. The result is visually jarring and undermines the user’s feeling of confidence and stability.

Sharing rather than selling

Open source software is often criticized as suffering from weaknesses in asthetics and user-interface because the software is often written by developers, for developers. The Mozilla project has already shown that an open source application can be attractive and usable. Better yet, we can take advantage of our collective ownership in the Mozilla products. Mozilla Firebird, for example, is the browser of choice for many of the world’s best designers, interface developers, and icon artists. In trying to give an application the polish and elegance that we want for ourselves, we can help the Mozilla products become more palatable to a wider audience.

How? Start by Saying No.

Much of the improvement of the Mozilla Firebird browser over the main Mozilla browser came from the direction of a small group. They were good at saying no. In the beginning, it was their own project — they could say no to whomever they pleased. By the time the project was moved to the forefront of the Mozilla project, they had earned the right to keep saying no by proving that their methods worked: Mozilla Firebird was becoming a great web browser.

Saying no, though, is not productive in of itself. It must be followed with direction. I propose the foundation of a Mozilla Branding and Visual Identity group that will be charged with the brand and visual identity of the Mozilla products.

Let’s Go!

I humbly suggest we get started on this work now (if it is already underway, then let’s help out).

Creative Commons License

This document is covered by the Attribution-ShareAlike License from the Creative Commons.