Making the Cut
As you may know John Slater and I have been creating a new Firefox logo style guide with the help of the Royal Order and a small team of community members who’ve volunteered as our informal panel of advisers. We’ve made a lot of progress so far and hope to have the beta version of the site ready this month. In the meantime both John and I will continue blogging about our progress at various stages to keep you apprised of all the details. With that said, here is a quick behind the scenes look at one of the first challenges we worked on and the thought process going into it.
The Firefox logo is pretty straightforward, but over time we’ve actually accrued lots of alternate variations and lockup combinations – with the wordmark, product number, partner co-branding, etc. When we took an inventory of all these we found around 32 different logos, which from a branding perspective was a pretty large amount of visual identities to have on tap. So before we could work on the guide itself, we had to conduct an internal audit to clean and consolidate everything. With careful consideration given to each one, we narrowed down the set to eight key logos that we felt had the strongest brand presence and represented the most common use cases. Here they are:
Looking at all the existing logos, the first group that we decided to retire were the different partner lockups. These can serve as a general template for co-branding, but each partnership is unique and requires specific treatment. So going forward we felt its best to work directly with each partner and create new ones on a case by case basis. Next, we chipped away those that felt redundant or busy. Including lockups that were communicating a little too much at once and confusing the information hierarchy. For example this one which shows: the Logo (core product), Mozilla wordmark (parent company), Firefox wordmark (core product name), version number (product specific information), and of course the registered trademark symbol.
Our breakdown for the final eight goes something like this:
- Firefox logo is one of the primary visual identities and widely recognized by millions around the world. So this should be used as often as possible.
- Lockup with both wordmarks reinforces product name and Mozilla as the parent company. This should be for more general use such as press materials, T-shirts or posters.
- Lockup with a strong link to version number is best for communications specifically promoting Firefox 3, such as a download page or product info sites.
- Wordmark lockups without the logo are available for times when that is necessary. Featuring the Firefox logo is always preferred, so if using the wordmark by itself, do so only when the Firefox logo is presented somewhere nearby.
- If you don’t have space for a horizontal logo, you can use one of the two vertical lockup options.
We put a lot of thought into these guidelines and feel pretty good about them, but if you have any questions or comments please don’t hesitate to share with us!
September 6th, 20084:28 am at
on the vertical logo+wordmarks versions, i’d suggest moving the text part slightly to the right. true, at the moment it’s left-aligned with the round logo itself…but it looks visually unbalanced, because (as with all roundels) there’s not enough “weight” around the edges, making the text look unduly heavy and off-balance. all it would take is an em or so further to the right to get the text closer to a more pleasing “visual vertical alignment”.
September 6th, 20085:59 am at
In the logo-only version, would it be acceptable and preferable to
move the (R) or TM to the upper right, so from afar it looks like a
spark or droplet from FF splashing its tail in the ocean rather than,
uh, FF generating a bubble of greenhouse gasses, or uh, FF dropping a
pellet of fertilizer? Or is the current location visually better
to override this trade-off?
September 7th, 20089:29 am at
That last one you showed, if you remove the version number, would make a great picture for those who don’t know that the icon means Firefox, and thus great for the downloads pages, yes? Having a good chunk of information can be good in certain cases.
September 8th, 20089:41 am at
Gc – As far as I know, there are no specific legal requirements as to where the registered trademark symbol should go. But it usually falls on the upper or lower right. For the Firefox logo we’ve chosen to place it on the bottom and personally I think its a better location (visually) than anywhere else.
Ryan – You’re right, chunks of information is good in some cases and that is why we have a variety of logo lockups to choose from. If you look, at the 2nd logo in the primary visual identities, it is exactly what you have described. Though for a download page, I would still recommend the lockup with the version number. Its always good to know what specific software you’re downloading.
September 26th, 20085:08 pm at
[...] a lot of people. Big thanks are due to Tara Shahian for her invaluable help throughout (especially cleaning up our previous logo mess); Tim Hogan, Stephanie Bankhead and Aaron Shimer from the Royal Order for the web design, logo [...]
November 14th, 20085:31 pm at
Thanks, this is one of the better posts I’ve read today. I share your vision about that. Thanks man!