Facebook "Visual Identity 2012–2013"

Facebook’s visual identity already had a lot going for it in 2008 when I started working there. They had chosen a bold and simple color scheme, had a simple well crafted wordmark, and had thankfully avoided the glossy web 2.0 aesthetic so prevalent at the time. Still, I believed there was huge opportunity for improvement. That opportunity, along with their mission and company culture, was a major reason why I wanted to work there.

Unfortunately, refining a visual identity that seemed to work alright did not rank high in the list of priorities. In our efforts to keep up with Facebook’s rapid growth, designers regularly one-offed designs for new products or initiatives. This inefficient use of time also led to a very fragmented visual landscape.

One of the first efforts to address this came at a Hackathon in 2009, when fellow designers Everett Katigbak and Mark Bixby joined me in an exercise to rethink Facebook’s wordmark. I followed this up by writing Facebook’s identity guidelines, illustration guidelines, and design resources wiki.

Everett Katigbak, Mark Bixby and I spent a Hackathon in 2009 rethinking Facebook’s wordmark

From the Hackathon, this was my first attempt at redrawing the wordmark

Early attempt at mapping Facebook’s brand

Over the years I made progress on various pieces in this system, advocated to anyone who would listen, and also had several failures. I always believed that a more significant effort was needed. Facebook has a long history of projects being self-initiated by passionate individuals within the organization, and in 2012 I was determined to develop a comprehensive and cohesive visual identity system.

2012—How I came to think about Facebook’s visual landscape based on audience and context

Camera App

My first big opportunity to try some of these ideas came in 2012 when I noticed some mockups for the upcoming Camera app circulating on Pixel Cloud—Facebook’s internal tool to share design mocks. The product designers were proposing to use the typeface Klavika for the Camera wordmark. While Klavika does have good qualities, I have always felt like it was too stiff and mechanical for Facebook’s brand. Seeing an opportunity, I contacted them, and despite being days away from the launch, they humored me. I quickly started redrawing Klavika for the Camera wordmark to make it just a little more humanist.

Unmodified Klavika—App icon by Jorn van Dijk

Ben’s redraw of Klavika

Final Camera app wordmark

Typeface

Despite the Camera app’s limited success, the custom type was well received internally. After modifying Klavika again ourselves for other projects, we decided to commission Eric Olson—the original designer of Klavika—to take the approach and develop a complete typeface. Currently the typeface has two weights—regular and semibold—and supports over 75 languages.

Facebook Regular

Mockups implementing the typeface

Favicon

Soon after Camera, and concurrent with the typeface development, I started applying this same philosophy to the rest of the identity. Despite having the full wordmark, the favicon had become the primary identity mark for Facebook, and there were efforts under way to replace the wordmark in the products with just the favicon. Facebook had done a poor job providing these assets to the public, and as a result, many people often made their own. Even if they did find the official one, the two-color design also led many people to modify the icon. All of this, as you can imagine, resulted in a lot of fragmentation.

Google image search for Facebook icon

This fragmentation wouldn’t have been so bad, but even Facebook itself wasn’t consistent. Shown below are the two primary favicon designs it was using—and there were others.

The old favicons

Attempting to solve this, we created a new favicon that was strong enough and flexible enough to work in any context. Collaborating with Aaron Sittig—designer of the first favicon—our approach was to redraw the “f”, adjust the proportions, and remove the bottom highlight bar so the new favicon at its core is a simple one-color glyph.

The new favicon

One of the issues with the previous favicons was their use on certain backgrounds or in certain contexts. An obvious benefit of a one-color glyph is that it can work as either a positive or negative shape.

I worked with designers Jorn van Dijk and Brandon Walkin on hinting the new favicon for all the various sizes needed in the product interfaces.

Another important consideration of the new favicon was designing with modular border radius in mind. Whenever possible, we use the default radius, but to accommodate certain interfaces or contexts—like iOS—where a different radius is ideal, the icon can be adjusted.

Finally, the new favicon is also designed with different visual styling in mind. While the shape and proportions should not be altered—aside from border radius—the icon itself can be styled to match the visual aesthetic of a particular interface or context. Shown here are the icons for iOS and Android respectively—styled by Jorn van Dijk.

All of this hopefully makes it much easier for third-parties to incorporate and style the glyph for their interfaces without modifying the shape or proportions. Below are some mockups incorporating the new favicon.

Before—iPhoto

After—iPhoto

Before—Windows 8

After—Windows 8

Before—Instagram

After—Instagram

Sub-Brands

Having mostly finished the development of the typeface and new favicon, I developed standards and templates for the creation of new sub-brands. A sub-brand is just any subordinate product, service, team, group, page, etc. Over the years, sub-brands had been developed in a one-off approach—each designer solving the same problems over and over. Not only does this lead to a very messy visual design, but it’s also an incredibly inefficient use of a designers time.

A sample of the existing visual identities for Facebook sub-brands

My approach to this entire system can be summed up with tools not rules. Instead of creating a bunch of rules telling people “no,” I tried wherever possible to create a flexible, well-documented system of assets that was easier to use than the alternative. One rule I did feel the need to impose however, was to never again incorporate the favicon into a new mark for a sub-brand. It’s hypocritical to ask third-parties not to modify our favicon and then turn around and do it ourselves.

With that in mind, Jorn van Dijk and I developed guidelines for creating new icons for sub-brands. Each icon at the basic level needed to function as a one-color glyph, but it could also be rendered in a full-color illustrative version.

After an exhaustive survey of existing Facebook sub-brands, I tried to create an extensive system of the various lockups someone might conceivably want to use for a sub-brand. Again, instead of trying to be very restrictive, I wanted to try to accommodate the past while moving us towards consistency.

One of the main places these sub-brands show up publicly is on Facebook operated pages, so designer Kris Brady and I worked with the teams who ran the pages to update their icons within the new system. These simple one-color glyphs perform much better at all the sizes necessary for the product interface.

Wordmark

Though it’s not used as much anymore, it was important to apply the same approach developed for Camera and the typeface, to redrawing the Facebook wordmark itself. This was approved, but unfortunately hasn’t been implemented after my departure from Facebook.

Old Facebook wordmark—Designed by Joe Kral / Cuban Council

New Facebook wordmark—approved but not implemented

Previously, one of the few rules Facebook had about its wordmark was that it should always be white reversed out of a darker color. This often broken rule was finally done away with in this system.

Like Icon

The original 16x16 pixel Like icon used in the interface was drawn by Soleio Curvo. I was responsible for adapting all of the pixel icons into larger vector illustrations for use in marketing materials. During this visual identity redesign, I took the opportunity to simplify the icon I'd drawn previously and worked with the Internationalization team to create translated Like button graphics.

Documentation

One of the most important and time-consuming aspects to this project was writing the documentation and creating ways to easily distribute the assets to people. Internally, I built, wrote, and maintained the Design Resource Center page on the internal wiki. I also worked with designer Kris Brady and the marketing team to build an external facing Brand Resource Center.

Visit facebookbrand.com to download offical Facebook assets.

System In Use

Since leaving Facebook in 2014, it’s been exciting to see this system being implemented by Facebook. Third-party implementations of the favicon are also a vast improvement. Below are uses of the system that I did not design.

Final Thoughts

Facebook as a product and organization evolves very fast, and it was a challenge trying to design a system that was flexible across many mediums and contexts. Separate from the visual design work, there was the incredible task of creating awareness, gaining support, and ultimately creating a cross-functional team to approve and implement these changes. Even though no system is ever perfect, I’m proud of what we accomplished and look forward to seeing how Facebook continues to evolve their visual identity.