YOUTUBE
Since 2014 I’ve been a creative director focused on identity design across all YouTube products. My team has designed the elements and specs for: the YouTube logo, logo architecture, typefaces, iconography, color theory, imagery (illustration, photography, animation, video etc), motion design, and UI/UX. My team functions as an internal agency and is staffed with graphic designers, interaction designers, animators, illustrators, art directors, UX engineers and a copy writer.
The Logo
The new YouTube logo was launched on August 27, 2017 and was created to address changes in our business, the expansion into a multi YouTube app world, the addition of subscription service, growing b2b offerings and our community programs.
YouTube Logo Sans was designed to continue the tonality of the original logo, but was optimized for screens and legibility at small sizes.
While also looking at the icon, we noticed that it wasn’t quite symmetrical or balanced, so that was addressed with the updated type to build a clearer and better balanced mark.
We created the sonic branding and new logo animation system in 2022.
Philosophy
Before we could begin designing an expansion of YouTube’s identity we needed to establish a design philosophy that would unite all the product and marketing teams that was grounded in our mission and business goals.
YouTube Sans
YouTube Sans is our proprietary display face used throughout our products and marketing. It’s design reflects the communities that call YouTube home, and you can read an article I wrote about its creation here.
Beyond the huge personality it’s also has alternate glyphs and stylistic sets, it’s a variable font, it has rounded, monospace and italic versions, and we built in grades for use in light and dark theme.
YouTube Sans currently covers 219 Latin languages, 90 Cyrillic, 25 Arabic, Hebrew, Korean, Japanese, Thai, Tamil and Devanagari.
Grades solves the optical illusion that occurs when you transition from black text on white to white text on black. Using the same font, in the same weight and size will lead to one looking larger than the other, and grades versions solves this.
We also created contextual alternates which adjust based on the letter that precedes or follows a character.
Iconography
YouTube has three distinct tiers of icons within our products that are primarily used as way finding: app icons (or app launchers), topic channel icons, and system icons.
This is our current set of app icons.
All of our icons are designed on the same grid which our display face, YouTube Sans, also aligns to.
The topic channel icons are used in app and on third party platforms and are used to identify a themed channel operated by YouTube either algorithmically or curated.
System icons are the core navigation within YouTube products no matter the form factor or app. They have been designed first and foremost with accessibility, app binary size in mind and light & dark themes. Seen here is a small sampling of our over 400 system icons.
Imagery
YouTube comes to life with our rich imagery in product and marketing. Here is a sampling of our imagery spec which includes: illustration, animation, photography, video, pattern and texture.
Our illustration style changes often to reflect the communities that call YouTube home. We focus on the humanity, seeing the hand of the artist and avoid overly vectorized geometric imagery.
Our animation is only used when appropriate in telling a story, we do not animate for the sake of animating.
Photography plays a huge role at YouTube as we want to focus on representing our content creators in an authentic way.
In our spec we cover everything from how to shoot in a studio, portraits, objects, environments, night vs day, crowds, moments, color v black and white, lighting, inclusivity etc.
Sometimes imagery isn’t appropriate, or simply isn’t available, so we developed a pattern, texture and shape library.
We felt pattern could abstractly represent community in the way that one shape represents one person and the grouping of shapes in a pattern is the collective community. Patterns coming together represents communities coming together. This allows us to bring in YouTube’s personality in places like error states etc.
Visual Expression
All of the identity elements we’ve designed come together to visually express the brand and below are examples in product and advertising of some of our work come to life.
Standards
With all the new design updates to YouTube that my team has done, we needed a place to document it all that was easily shareable internally as well as externally. We created a completely custom website with dozens of embedded tools as well as design documentation, best practices, explorations, accessibility, internationalization, and legal information. The site is fully available in light and dark themes, just like our products, so designers and partner agencies can see designs in realtime. Below is a sampling of the headline sections.
