2013 Evolution

Firefox OS

The need — Through my work and interacting with others who used the Firefox logo in video, print and web, it became clear that the artwork came with a few usage concerns like SVG compatibility and color consistency. Listening to feedback over the years and documenting these examples, the desire to reshape the look to reflect the mobile-first brand evolution made it a perfect time to step back and solve these issues.

The solution — Simplifying a style doesn’t always mean bringing it down to basic geometric shapes and solid colors. You can in fact bring simplicity to a visual by better balancing color, contrast, shape, and detail. To that last point, we removed quite a bit of detail in this latest revision but purposely added more detail where needed to accommodate today’s high resolution screens. The simplification process not only focused on the look but also the structure by making it SVG compatible and more accessible for the broader Mozilla community.

The first step in the rebuild was to go in and strip out all the detail that was using blend mode layering such as multiply, screen and overlay – mostly found in the tail area. As stated, a key goal of the redesign was to make it work flawlessly in SVG as well as open up the possibility to rebuild all the internal structure using SVG and CSS gradients.

Once we had removed a fair amount of the current detail, it was time to look at introducing enhanced detail where it would be needed when scaled to larger sizes. The continents on the globe were reimagined with high resolution displays in mind and we paired those with a removal of the high gloss to create a softer, deeper color globe. Combining these deeper blues with now lighter oranges in softer detailed fur, we achieved that greater contrast that would create better separation of the elements at all sizes.

A final touch (and one that made me very happy) was the arm of the fox now extended from a shoulder instead of layering behind his chest. It’s a small detail, but it really seemed to unify the form of the fox and make it feel more cohesive a brand element.

Unlike previous versions, this updated logo was created specifically with mobile in mind. It was optimized to be crisper and cleaner on small screens and lower resolution devices, yet also scale quite nicely for use in retina displays and accurately recreated in SVG so it’s more ‘of the Web’.

2017 Evolution

Firefox Quantum Launch

The need — Firefox Quantum when launched was over twice as fast as the previous version, built on a completely overhauled core engine with brand new technology. To compliment all the under the hood work, we decided to slap on a beautiful new look designed to get out of the way and let the product shine. A key part of the "reintroduced" product was a refreshed logo that would speak to the all-new baked in slickness.

The solution — This was a fairly strong departure from the classic Firefox logo design and really needed to speak to the launch's underlying theme of speed and simplicity. In comparison to the detail reduction from the 2013 evolution, it was decided to go even further and strip the logo down to the basic forms. The continents of the globe were removed, much of the detail on the fox was paired back, and a new simplified "non-artichoke" tail form was introduced. The new tail was built with much cleaner sweeping curves and was meant to get much closer to symbolic flame shapes.

Beyond the core vectors of the build, the color palette was electrified to use a much more vibrant palette. The new fox form used a singular gradient that started at magenta on the left all the way to bright yellow at the tip of the flame. The white flame elements of the tail were finally removed as they were often problematic in certain print aplications.

This version of the logo also introduced what became a much loved color palette for the Firefox Nightly release channel. Inspired by the aurora borealis, I recolored the fox in purples, blues and greens as a nice dark theme departure for the standard orange/yellows. To this day I still get comments on how much the Nightly version of the logo is loved.

2019 Evolution

Firefox Brand Family Project

The need — As the Internet continued its rapid growth, Mozilla looked at various ways to bring new tools and services to the end user beyond the browser. A range of new apps and services with the Internet as the platform was in the works to help people be more efficient, safer, and in control of their time online. We had the projects in place, but we didn't have a cohesive brand system to bring it all together.

The solution — Firefox needed a new look to support its evolving product line. This rebranding project focused on creating a brand family for Firefox and involved myself, the original artist of the icon John Hicks, as well as the branding agency Ramotion.

These teams made up of both internal and external brand designers began imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of the Emerging Technologies group. We went down three paths of focus for ideating - fox, fire, and free - with the final works ultimately being a blend of ideas from all three streams.

After 18 months of Dropbox Paper iterative process reviews, public posts detailing the work, as well as a few livestream feeds, the Firefox parent brand was born representing the entire family of products.

With any Firefox logo design, there are always folk who have very strong opinions on change, and this round was no exception. The new browser logo was the strongest departure yet from the classic look, as it was intended to align with the "ribbon" aesthetic of the new parent brand. A goal I had was to ensure it still looked like the fox was hugging a globe and keeping it safe. Though stripped of most defining globe detail, that key visual connection would remain in place.

Though the parent logo and other products ultimately didn't get off the ground quite as intended, the Firefox browser logo is still in use today.