En coulisse

Que se cache-t-il derrière la nouvelle icône de Google Chrome ?

Collaboration: Mariana Hurtado
Traduction: Stéphanie Casada

Google Chrome affichera une nouvelle icône. Il ne s'agit pas d'un remaniement, mais d'une opération de nettoyage, explique la graphiste bernoise Mariana Hurtado.

Google Chrome aura une nouvelle icône au cours de l'année 2022. Elle ressemble trait pour trait à l'ancienne. Le designer de Google Elvin Hu explique dans un thread Twitter le travail qui a été effectué pour le nouveau symbole. La graphiste suisse Mariana Hurtado s'est penchée sur le logo. Son avis sur : « Il s'agit moins d'une refonte que d'une campagne de nettoyage. Il y a beaucoup de petits changements, mais de bons changements. »

La nouvelle icône en détail

L'évolution des icônes de Google Chrome est simple à expliquer : on essaie de la rendre plus simple. Au cours des treize années d'existence de Chrome, l'icône est passée d'une sorte de boule de cristal à un cercle stylisé. La dernière itération du cercle a été publiée en 2014 et devrait être remplacée dans le courant de l'année 2022.

Google Chrome 2008
Google Chrome 2008
Google Chrome 2011
Google Chrome 2011
Google Chrome 2014
Google Chrome 2014
Google Chrome 2022
Google Chrome 2022

Deux choses sautent tout de suite aux yeux :

  1. Le bleu au centre est plus proéminent.
  2. Les ombres ont été supprimées.

Mais ce n'est pas tout. Elvin Hu écrit : « Nous avons simplifié l'icône principale de la marque en supprimant les ombres, en affinant les proportions et en éclaircissant les couleurs afin d'être en phase avec l'image de marque plus moderne de Google. »

Le bleu prend de l'ampleur

La nouveauté la plus évidente est le bleu au centre, qui est devenu plus grand. Une comparaison avec des lignes permet d'illustrer ce point.

L'élément bleu s'est sensiblement agrandi
L'élément bleu s'est sensiblement agrandi
Elvin Hu/Twitter

« Des proportions plus équilibrées le rendent plus accessible », dit Mariana. Une icône a pour fonction de transmettre un grand nombre d'informations, comme le nom du programme, la fonction, le contenu, etc. , mais ne peut le faire que sur quelques pixels. De plus, une icône ne doit pas être perçue comme un élément perturbateur sur l'écran. « L'œil doit glisser sur une icône, mais cette dernière doit en même temps être comprise en une fraction de seconde », explique la graphiste. Pour que le message d'une icône passe directement de l'œil au cerveau, il ne faut pas que quelqu'un s'y accroche en pensant : « Mince, c'est bizarre », même inconsciemment.

Elle décrit le plus grand cercle bleu au centre comme « discret ; exactement comme il devrait l'être. »

Les dégradés de couleurs extrêmement subtils

Voilà pour l'évidence. Les couleurs sont beaucoup plus profondes. Car il ne s'agit pas simplement d'une couleur plate, mais d'un dégradé très subtil. Le rouge passe de Red 600 (HEX E53935) à Red 500 (HEX F44336). Yellow 600 (HEX FDD835) passe à Yellow 500 (HEX FFEB3B) et Green 600 (HEX 43A047) passe à Green 500 (HEX 4CAF50).

Les dégradés expliqués en détail
Les dégradés expliqués en détail
Elvin Hu, Twitter

C'est tellement discret que même en agrandissant les dégradés, on ne remarque pas de trop grandes différences.

Les dégradés de couleurs du nouveau logo Chrome sont toujours très proches du drapeau bolivien.
Les dégradés de couleurs du nouveau logo Chrome sont toujours très proches du drapeau bolivien.

Les dégradés de couleurs sont un peu plus évidents lorsqu'ils ne sont pas représentés comme des dégradés de couleurs.

Les extrémités du dégradé de couleurs
Les extrémités du dégradé de couleurs

« Les ombres et les dégradés de couleurs sont des tendances qui passent », déclare Mariana. « Mais du point de vue de l'expérience utilisateur, les valeurs de contraste élevées sont plus accessibles aux utilisateurs dont la vue n'est pas parfaite ». Mais cela ne s'applique qu'aux interfaces utilisateur, pas à l'utilisabilité de l'application elle-même, ajoute-t-elle. Une fonction peut toujours être compliquée, même si elle peut être clairement perçue par tous.

Pourquoi y a-t-il des dégradés de couleurs alors qu'on ne les perçoit presque pas ? « Je me suis aussi posé la question », dit Mariana. « D'un point de vue professionnel, cela n'a absolument aucun sens. »

Fait partie d'une stratégie et d'écosystèmes

Mariana rit. Elle dit qu'elle n'a pas remarqué le nouveau logo sur son écran, qu'il s'agisse de celui du smartphone ou du PC : « Elvin et son équipe ont donc bien fait leur travail. Je ne vois que Chrome et pas de dégradés ou de cercles bleus. »

En y regardant de plus près, elle voit les petites différences et constate que cela fait partie d'un effort plus important de la part de Google. Les produits du géant de la recherche doivent avoir la même sensation sur une plateforme, utiliser les mêmes couleurs et parler le même langage visuel. « Vous devez regarder et savoir et sentir immédiatement que c'est Google. »

Elvin Hu et son équipe ne se sont pas contentés d'un logo. L'icône de Chrome sous Windows est différente de celle sous Mac. « Nous voulions que les icônes soient reconnaissables en tant que Chrome, mais qu'elles soient également belles dans le contexte d'un système d'exploitation », écrit-il sur Twitter.

L'icône Chrome sous Windows 11
L'icône Chrome sous Windows 11
Elvin Hu, Twitter

En contraste flagrant, le nouveau logo Chrome sur macOS a un effet trompe-l'œil et semble être un objet tridimensionnel tangible.

L'icône Chrome sous macOS
L'icône Chrome sous macOS
Elvin Hu, Twitter

Le navigateur Google doit se présenter de manière native et intégrée dans le contexte de différents systèmes d'exploitation.

Autres infos intéressantes : les icônes pour les versions développeur, bêta et non choisies

Dans son thread Twitter, Elvin donne un aperçu supplémentaire de son travail. Le designer montre un projet que l'équipe n'a pas approuvé. « Nous avons essayé d'introduire plus d'espace blanc », écrit-il en montrant l'image suivante :

Un projet rejeté avec trop de blanc
Un projet rejeté avec trop de blanc
Elvin Hu, Twitter

Mais les designers ont rapidement abandonné cette idée. En effet, ce design nécessitait un contour qui rendait les éléments colorés de l'icône plus petits. « De plus, l'icône est alors plus difficile à reconnaître, surtout si elle est placée à côté d'autres icônes Google. » Nous introduisons maintenant quelque chose qui devrait être adapté aux tailles d'écran modernes.

Il existe d'autres icônes Google qui changent : si vous avez installé une version bêta ou une version développeur de Chrome, l'icône est dotée d'une bannière indiquant soit « Beta » soit « Dev ». Lorsque l'icône est réduite, ces inscriptions étaient jusqu'à présent difficilement lisibles. Désormais, « Beta » devient « B » et « Dev » devient « D ».

Le mot « Beta » devient un « B »
Le mot « Beta » devient un « B »
Elvin Hu, Twitter

Et une petite particularité pour finir : si vous avez installé une version bêta de Chrome sur votre iPhone ou votre iPad depuis Testflight, votre icône de Chrome sera assez spéciale : « inspirée des applis de développement d'Apple, la version Testflight de Chrome a une icône qui ressemble à un croquis de construction. »

Icône Testflight de Chrome
Icône Testflight de Chrome
Elvin Hu, Twitter

Nouvelle icône Chrome

Chrome a une nouvelle icône. Qu'en pensez-vous ?

  • Il était temps ! Elle est super !
    24%
  • Elle est horrible. Je veux de nouveau celle de 2008 !
    14%
  • Quelque chose a changé ?
    61%

Le concours est terminé.

Cet article plaît à 78 personne(s)


User Avatar
User Avatar

Journaliste. Auteur. Hackers. Je suis un conteur d'histoires à la recherche de limites, de secrets et de tabous. Je documente le monde noir sur blanc. Non pas parce que je peux, mais parce que je ne peux pas m'en empêcher.


Informatique
Suivez les thèmes et restez informé dans les domaines qui vous intéressent.

Smartphone
Suivez les thèmes et restez informé dans les domaines qui vous intéressent.

Ces articles pourraient aussi vous intéresser

  • Skeleton Loader

    Skeleton Loader

  • Skeleton Loader

    Skeleton Loader

  • Skeleton Loader

    Skeleton Loader