- Lancé en 2005 sur l’idée d’un site de rencontres en vidéo, YouTube est devenu une plateforme média visitée chaque jour par des milliards de personnes dans le monde pour regarder des contenus variés
- Le logo rouge emblématique de YouTube représente depuis longtemps l’identité de la marque, mais un rouge plus doux et un dégradé magenta inattendu ont récemment été introduits
- Il s’agit d’un changement discret mais significatif, qui montre comment YouTube maintient sa marque fraîche à l’occasion de son 20e anniversaire
Pourquoi ce changement
- Les équipes internes de direction artistique et de design de YouTube voulaient faire évoluer le rouge utilisé depuis 20 ans
- En étudiant les éléments existants qui n’étaient plus en phase avec l’époque, elles ont conclu que la couleur faisait partie des priorités d’amélioration
- La nouvelle couleur a été ajustée pour rester fidèle à l’identité de la marque tout en étant plus moderne et plus accessible
Les problèmes de l’ancien rouge
- L’ancien rouge (rouge pur RGB) ressortait trop dans l’UI et posait des problèmes de cohérence colorimétrique, apparaissant parfois orange sur certains écrans
- Sur certains écrans, notamment les TV, il pouvait provoquer un phénomène de burn-in laissant des marques permanentes à l’écran
- Comme le rouge est une couleur intense, il a aussi été souligné qu’une mauvaise utilisation pouvait générer de la fatigue dans l’expérience utilisateur
Introduction du nouveau rouge et du dégradé
- Le rouge a été ajusté vers une tonalité légèrement plus froide afin d’atténuer des problèmes techniques comme le burn-in et les distorsions de couleur
- Tout en respectant l’héritage de YouTube, le nouveau ton a été défini pour être plus doux et plus vivant, en tenant compte de l’accessibilité et d’une sensibilité plus contemporaine
- Une stratégie a été mise en place pour réserver le rouge aux moments clés où l’identité de YouTube doit s’exprimer, afin d’en maximiser l’impact visuel
- Un dégradé y a été ajouté, apportant un effet visuel plus ludique en mêlant le rouge et le magenta
- Il a été appliqué au logo, aux icônes produit, à la barre de progression (
progress bar), aux boutons Like/Subscribe, au badge Premium et aux anneaux du live
Stratégie de design et cas d’usage
- En utilisant un rouge intense uniquement quand c’est nécessaire, YouTube a cherché à préserver son identité de marque tout en évitant la fatigue chez l’utilisateur
- En collaborant avec différentes équipes, l’entreprise a exploré l’étendue des usages possibles du nouveau rouge et du dégradé, et assuré leur cohérence à l’échelle des interfaces produit
- Grâce à des échanges détaillés avec designers, directeurs et ingénieurs, les équipes ont vérifié comment le dégradé apparaissait sur les grands écrans et s’il respectait les critères d’accessibilité
- La couleur de marque a été attribuée aux actions importantes comme les boutons d’abonnement ou de Like, tandis que les états par défaut restent en tons monochromes pour rendre l’information plus claire
Motion design et identité de marque
- Comme YouTube est une plateforme vidéo, il était important d’utiliser le motion pour attirer l’attention et fournir des indications fonctionnelles
- Avec cette mise à jour des couleurs, l’animation de démarrage (
startup animation) a aussi reçu un effet où le logo zoome avant/arrière en mettant le dégradé en valeur
- La barre de progression (
progress bar) a été rendue un peu plus fine et plus rapide, pour renforcer l’impression de modernité et le plaisir visuel
- De petites animations ont également été ajoutées aux icônes des chaînes thématiques intégrant le dégradé magenta, pour renforcer l’unité de la marque et son côté ludique
- Avec une couleur unie, seuls les changements de forme sont possibles, tandis qu’un dégradé permet d’ajuster l’ambiance même avec des mouvements subtils
- Les équipes ont cherché la « bonne dose de sucre » — assez de fun, sans excès — pour éviter que les utilisateurs ne trouvent ces animations trop envahissantes
Prise en compte de l’accessibilité
- Pour garantir le contraste du texte, différentes variations de luminosité et de ton ont été définies pour le rouge et le magenta, avec des valeurs optimisées selon la taille des éléments d’UI et les situations
- Une attention particulière a été portée à ne pas transmettre l’information par la seule couleur, et les boutons importants utilisent la couleur de marque tandis que l’état par défaut reste monochrome
- Un framework adaptatif a été introduit afin de limiter les animations sur les appareils peu puissants ou d’ajuster leur intensité selon la taille de l’écran
- Les animations ont été conçues pour réduire autant que possible la charge visuelle, avec la possibilité de les désactiver si nécessaire
Conclusion
- Le nouveau rouge et le dégradé sont des éléments clés de l’évolution de la marque YouTube à l’occasion de son 20e anniversaire
- Le résultat conserve la force propre au rouge tout en améliorant des problèmes techniques, de design et d’accessibilité
- En utilisant de manière appropriée le motion et le dégradé, YouTube contribue à devenir une plateforme plus ludique et plus humaine
- C’est un exemple qui montre un YouTube en évolution permanente et aide les utilisateurs à ressentir intuitivement le développement de la marque
2 commentaires
À la fin de l’article, quand tout l’écran passe au magenta, ça m’a vraiment brûlé les yeux..
Personnellement, l’ajout d’un dégradé magenta à la barre de progression m’a donné l’impression qu’il y avait un problème d’affichage. Ce qui est amusant, c’est que l’appareil sur lequel j’ai ressenti cela était un Google Pixel.