You’re reading all articles tagged 'mozilla'
Firefox Identity Project
I was only a few days into my summer holiday when my twitter replies suddenly went mental. Unexpectedly, a project I’d been working on with Mozilla had been publicly released for feedback. Now that I’m back the moment has kind of passed, but I still wanted to blog something about the project and the thinking behind it.
Firefox 57 launched in Autumn 2017 with a redesigned UI and the latest version of the Firefox icon, designed in-house by Sean Martell. This version fixes a problem I’ve had with it from the beginning: the odd spiky tail. The Firefox now has a curvaceous tail made of flame, rather than spikes:
This version also removes various details and takes it away from being a Red Fox to more of an elemental being. I often think of it as looking more like a nebula than anything solid – I love it. This version also introduced the bright Photon colour palette which informed lot of the work to come.
It was around this time that Mozilla approached me to work on an identity for Firefox. Firefox has always been the main product, but the family is growing with apps like Send, Lockbox and Focus. The goal was twofold: Design a system to make all these products visually cohesive, as well as a ‘masterbrand’ logo and identity to encompass all the products. The goal wasn’t to redesign the Firefox icon as such, but there may be some changes in order to create a system.
To do this, Mozilla used three designers to explore three different paths: Sean Martell (Communication Design Lead at Mozilla), Ramotion, and myself. While we worked sort-of-seperately, each path inspired other paths, and together we created enough ideas to fill a large coffee table book. Hopefully we’ll able to publish some of these in the future, and explain the thought processes that led us to where we are now.
Over time, the work was honed down to just two paths – Ramotion stayed on theirs, while the work that Sean and I were doing merged organically into one.
System 1 represents the path that Sean and I took:
System 2 represents the path that Ramotion took:
The unease that comes with such projects is the inevitable snark-fest that follows. I deliberately avoided the comments sections on various sites, but one response that I heard loud and clear was that the System 1 masterbrand logo was a rip-off of Gitlab. Yes, there are certain similiarities in a face-on geometric fox head, but it’s lazy to suggest it’s the same logo. I’d never even heard of Gitlab until that point, and neither would the general audience of Firefox.
I also read the Design Week article which reported Hicksdesign as being a ‘London-based branding studio’ (wrong on both counts, but hey, it’s a mention!).
The project is still not complete by any means, but we’re getting nearer to a solution. I’m sure the public release has given Mozilla plenty to chew over ;)
Cairo beats Safari?
As highlighted recently by Jeffrey Zeldman, Firefox text rendering lags behind that of Safari, or rather Gecko lags behind WebKit. This is because at present, Gecko browsers use the older Quickdraw graphics library, originally developed for OS 9, rather than Quartz, or the more recent Core Image libraries. Its been the main reason I prefer Omniweb or Safari over Camino/Firefox, text just looks SO much crisper and smoother.
Things are about to change however, as the switch to the Cairo graphics library in Gecko browsers will allow them to use Core Image on the OS X platform. There is already a developer release of Firefox 3.0, codenamed Gran Paradiso with Cairo enabled. You can also grab a latest trunk build of Camino, which also uses Cairo.
The improvements are already easy to see. My personal rendering bugbear has been the sub navigation on Amazon, which always renders roughly, particularly in Gecko. Compare these screenshots:
Not only is Gecko with Cairo improved, it actually looks better than WebKit!. Looking at the example that Zeldman used, italics are MUCH improved also:
It’s early days so there will be plenty of bugs, especially as the Mac platform is behind Windows and Linux, who’ve had Cairo enabled for about 6 months now. Testers are needed for OS X, so if you can lend hand, so please do grab a build and get reporting those bugs.
Following on from the branding of Firefox, comes the new logo for Mozilla’s email client, Thunderbird. When Stephen Desroches sketched out the orginal idea for Firefox back in December, he had in mind how this affects the other applications, and Thunderbird was sketched out too:
After Firefox 0.8 came out, I started work on fleshing theses sketches out, trying various bird types. Early on we decided to keep the envelope metaphor, and include a globe. At this point I couldn’t find any reference to a real Thunderbird, so I didn’t have a starting point. I tried a few approaches:
These are my working sketches – #1:Too evil! #2: Dove =
too fluffy! (although it stood for mail in many countries)
#3: Too different in position to Firefox #4: Too hunched! #5:better, but still a wierd shape. Generally, the perspective on all but the first sketch looked a bit odd.
Finally I’d found a reference to a mythical Thunderbird in Native American art, which had a crest. I really liked this idea, and added it to the final sketch. Sketch #6 is a basic vectors sketch using #5 as a basis, but adding the crest and improving the posture.
Finally we had something we had something that the team were all happy with.
This time I was using Illustrator CS to create the logo. I started by creating the main colour palette – a range of tones as new swatches, I usually do about four: ‘Darkest. Dark, Mid, Light’. With each colour, I checked the option for ‘Global’. All gradients were then created using these swatches. This allowed me to adjust the colours for, say, “Mid tone” and it would then update all the instances of that colour – even those used in gradients.
Here are the final icons:
More importantly, Thunderbird also gets Kevin Gerich and Stephen Horlander’s brand spanking new pinstripe theme for OS X. When you compare this interface with the Windows equivalent, you can really appreciate the attention to detail. They’ve gone to huge lengths to make this look and feel as much of a native app as possible. I only converted to Apple Mail from Entourage back in January, but I’m giving Tbird a spin to see if I’m tempted over. So far I particularly love the 3 column layout option. At the time of writing, the new icon artwork has only been checked into the Windows version – OS X will come soon.
Now that Firefox and Thunderbird are both ‘done’, the task is go back over both of them, tweaking and polishing before the final release candidates.
Shortly before Christmas, I had an email from a chap called Steven Garrity, who works for Silverorange, and runs a blog called ‘Acts of Volition’, in which he publishes a radio show on regular basis. (really worth a listen BTW). He asked if I would like to join a recently created Mozilla branding team, with the immediate aim of producing a new logo identity for the Firebird browser, soon to be renamed firefox (Ben Goodger has written up the reasons and process for the name change). The branding team came into being after Steven wrote an article recommending changes to Mozilla’s existing branding. I jumped at the chance, and today Firefox 0.8 is finally released, and the work is no longer confidential.
Over Christmas (thanks Steven!) ideas and concepts were put forward. The timescales were tight (the design would chosen 2nd January), and the concept difficult to illustrate. A firefox is actually a cute red panda, but it didn’t really conjure up the right imagery. The only concept I had done that I felt happy with was this, inspired by seeing a Japanese brush painting of a fox:
The final chosen design was a concept from Daniel Burka and sketched by Stephen Desroches, which I then rendered using Fireworks MX. I’ve been using Fireworks over Illustrator or Photoshop for icon design as I love the way I can work in vectors and see the result in pixels, rather than smooth vectors. The updated gradient tools in MX make this possible too.
As with all icons, the smaller the resolution, the harder it is to create a legible icon. OS X icons start at 128×128 pixels, Windows XP uses 48×48 whereas 95-2000 only has a maximum size of 32×32. Starting with the 128×128 version in all its detail, I scaled this down to the various sizes, and began removing excess and simplifying the shapes.
As you can see, once you get down to 16×16, which is used in areas like the windows taskbar and OS X list views, its nearly impossible. I still have some work to do on this and other Mozilla branding, so the project continues.
0.8 is also the first milestone release to have the gorgeous new OS X aqua theme. If you’ve not seen this yet, Kevin Gerich has posted screenshots of all the different screens so that you have proof of all its lickability. Better still, download the 0.8 release and try it out.
Update: Forgot to mention that there is a page of promo graphics on the Mozilla Site – get linking! You can also read more about the project from Steven Garrity