L’essentiel en bref
- Les logos en dégradé sont devenus courants au milieu des années 2010, quand de grandes applis ont remplacé des icônes détaillées ou à plat par de simples pictogrammes sur des dégradés colorés.
- La refonte d’Instagram en 2016 a remplacé une icône d’appareil photo détaillée par un simple contour d’appareil sur un dégradé du chaud au violet, faisant de la couleur le principal signal de reconnaissance.
- Messenger est passé d’un bleu uni à un dégradé de bleu, violet et rose en 2020, en même temps qu’il introduisait la messagerie entre Instagram et Messenger.
- Le système de marque de Mozilla en 2019 a donné à Firefox et à ses produits associés une famille commune de dégradés vifs, montrant qu’un dégradé peut unir plusieurs signes.
- Les leçons pour tout logo en dégradé : garder une forme simple, conserver une couleur reconnaissable, fixer exactement le dégradé et toujours avoir une version à plat.
Sur cette page
Les logos en dégradé célèbres sont passés d’inhabituels à omniprésents au milieu des années 2010, quand certaines des applis les plus utilisées au monde sont passées à de simples pictogrammes sur des dégradés colorés. Ce virage a donné aux designers une leçon qui vaut encore : quand un logo apparaît comme un petit carré parmi des dizaines d’autres, la couleur fait plus le travail de reconnaissance que la forme. Les meilleures identités en dégradé associent un signe très simple à un dégradé fixe, distinctif et utilisé partout.
Cet article examine trois refontes largement documentées et en tire des leçons générales. Il décrit ce qui a changé publiquement, pas comment ni pourquoi les entreprises l’ont décidé. Pour l’art d’en fabriquer un, voyez les logos en dégradé : quand ils fonctionnent.
Pourquoi les logos en dégradé ont envahi les icônes d’applis
Les écrans d’accueil des téléphones ont changé ce qu’un logo doit faire. Chaque appli reçoit le même carré arrondi à peu près à la même taille, entouré d’autres. Les illustrations détaillées s’estompent à cette taille, et une couleur unie est partagée avec des dizaines d’autres applis. Un dégradé offre quelque chose entre les deux : une signature de couleur avec plus de combinaisons que l’aplat n’en permet, lisible même quand le pictogramme dessus est trop petit pour être vu nettement.
Instagram, 2016 : le dégradé devient la marque
En mai 2016, Instagram a remplacé son icône d’appareil photo rétro et détaillée par un simple contour d’appareil en blanc sur un dégradé allant du jaune et de l’orange chauds en bas à gauche, en passant par le rose et le magenta, jusqu’au violet en haut à droite. Au lancement, l’entreprise a présenté ces couleurs comme une évolution de la bande arc-en-ciel de l’ancienne icône. La refonte a d’abord suscité de fortes réactions, et le dégradé est resté au cœur de la marque depuis, rafraîchi en 2022 avec une nouvelle police.
linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)- Le pictogramme s’est simplifié à mesure que la couleur s’est enrichie. Un appareil en contour laisse au dégradé la place d’être la partie reconnaissable.
- Le capital existant a été conservé. Les couleurs de l’ancienne icône ont été réinterprétées plutôt que jetées.
- Un trajet diagonal du chaud au froid donne au dégradé une direction dont on se souvient, pas seulement un ensemble de couleurs.
Messenger, 2020 : un changement de couleur qui annonçait un changement de produit
En 2020, Messenger a remplacé son logo bleu uni par un dégradé de bleu, de violet et de rose. Le changement est arrivé en même temps que la messagerie entre Instagram et Messenger. La forme, une bulle avec un éclair, est restée : on pouvait donc toujours la retrouver ; seule la couleur a bougé.
La leçon : un dégradé peut dire « ceci a changé » sans perdre la reconnaissance, tant que la forme que l’on connaît reste. C’est un schéma utile pour toute refonte : changez un seul signal fort à la fois.
Firefox, 2019 : une famille de dégradés pour plusieurs produits
En 2019, Mozilla a présenté un nouveau système de marque dans lequel Firefox devenait le nom d’une famille de plusieurs produits. Le logo du navigateur a gardé son renard, simplifié, et la famille a partagé des dégradés vifs de jaune, d’orange, de rouge, de rose et de violet sur les icônes des produits. Chaque icône avait sa propre forme, mais les dégradés partagés les faisaient lire comme des parents.
Ce que ces identités en dégradé ont en commun
| Identité | Année | Ce qui a changé | Leçon |
|---|---|---|---|
| 2016 | D’un appareil détaillé à un pictogramme en contour sur un dégradé du chaud au violet | Simplifier la forme, laisser la couleur porter la reconnaissance | |
| Messenger | 2020 | D’un bleu uni à un dégradé de bleu, violet et rose | Garder la forme, changer la couleur pour signaler une nouveauté |
| Firefox | 2019 | D’un logo de navigateur à une famille aux dégradés communs | Une rampe de dégradé peut unir plusieurs signes |
Cinq leçons pour votre propre logo en dégradé
- 1
Gardez la forme très simple
Le dégradé fait le gros du travail : le signe dessus doit donc être lisible à la taille d’une icône d’appli ou d’un avatar.
- 2
Conservez une couleur reconnaissable
Si vous avez déjà une couleur connue, construisez le dégradé à partir d’elle. La reconnaissance déjà acquise mérite d’être gardée.
- 3
Fixez exactement le dégradé
Notez chaque repère, chaque position et chaque angle. Un dégradé reconstruit à l’œil dérive, et la reconnaissance dérive avec lui. La cohérence de marque explique pourquoi.
- 4
Ayez toujours une version à plat
Les favicons, la broderie, l’impression en une couleur et certaines interfaces ne peuvent pas montrer un dégradé. Choisissez une couleur unie et une version blanche ou noire du pictogramme.
- 5
Utilisez le dégradé au-delà du logo
Les meilleurs exemples répètent leur dégradé dans les fonds, les accents et le mouvement, pour qu’il devienne un actif de marque distinctif à part entière.
.logo-tile {
/* Flat fallback: the one colour chosen for small or limited uses */
background-color: #d62976;
/* The exact gradient, with every stop recorded */
background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
border-radius: 22%;
aspect-ratio: 1;
}Un dégradé peut aussi mal tourner derrière un logo plutôt que dedans. Si votre logo repose sur votre propre dégradé, lisez poser un logo sur un dégradé, et pour bâtir toute une identité autour d’un dégradé, l’identité de marque en dégradé.
Les questions qu’on nous pose
Quand Instagram est-il passé à un logo en dégradé ?
En mai 2016, quand il a remplacé son icône d’appareil photo détaillée par un simple contour d’appareil sur un dégradé allant du jaune et de l’orange au violet en passant par le rose.
Pourquoi tant d’applis utilisent-elles des logos en dégradé ?
Les icônes d’applis partagent toutes le même petit carré arrondi : la couleur fait donc l’essentiel de la reconnaissance. Un dégradé précis est plus distinctif qu’une couleur unie.
Les logos en dégradé fonctionnent-ils à l’impression ?
Souvent avec soin. Les dégradés peuvent former des bandes ou se décaler à l’impression : chaque logo en dégradé doit donc aussi avoir une version en couleur unie et des versions noir et blanc en une couleur.
Comment faire un logo en dégradé qui reste reconnaissable ?
Utilisez une forme simple, fixez les repères et l’angle exacts, répétez le dégradé dans toute votre marque et gardez un repli à plat pour les petits usages ou les usages limités.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
