Towards the end of last year, YouTube introduced a “new, softer shade of red” and a magenta gradient alongside other design changes to the app. The team behind it has now detailed the changes.
The previous red — “pure red in the RGB system” — dates back to 2017 and had some problems:
- …perceived to be too loud when implemented in key UI moments.
- …rendered orange on certain screens
- …caused burn-in issues on TVs
These technical issues were resolved by “adjusting to a slightly cooler shade” that also happened to add an “approachable, vibrant personality.” YouTube “stayed away from colors that felt domineering, cold, or corporate,” and aimed for “welcoming, engaging, dynamic, and unified.”
Meanwhile, YouTube introduced a red-to-magenta gradient that you can find in the video progress bar. The design team considered orange and yellow, but magenta won out as being the “most natural pairing” for the new red.
Interestingly, magenta doesn’t often appear in the natural world, so it symbolizes the imagination and evolution that YouTube embodies. We also placed the gradient at a 45-degree angle with magenta on the right, signifying forward movement.
In terms of implementation, red is used sparingly in “brand marks, identity elements, and signature UI moments” to keep it “special and unique.” This includes the logo and product icons.
Meanwhile, you’ll find the gradient in topic icons, progress bar, Like and Subscribe buttons, Premium badge, and Live ring.
Motion was another aspect of this update:
Our startup animation is the logo expanding and contracting with the YouTube progress bar. In this update, we introduced a gradient into the animation for an extra branded punch. We also made the bar a little quicker and thinner to feel more modern, and shortened the duration of the animation by 0.2 seconds.
New channel icons
Looking ahead, YouTube is looking at “imagery, iconography, typography, secondary color palettes, and much more” to continue modernizing the apps.
Add 9to5Google to your Google News feed.
FTC: We use income earning auto affiliate links. More.
