Chaque année, de nouvelles tendances UX/UI naissent et offrent aux designers des nouvelles possibilités d’innovation en matière de “user interface”. En 2019, on avait le droit au Neumorphism qui proposait une atmosphère moderne avec des ombres portées atypiques. Ce style présentait pas mal de problèmes d’accessibilité et de lisibilité. On ne le retrouvait donc pas dans des interfaces complètes mais plutôt via des petites touches d'éléments graphiques.

Avant toute chose, il est important de comprendre que suivre les tendances en termes de design ne va pas rendre votre site automatiquement efficace.

Le Glassmorphism, la nouvelle tendance de 2020/2021

Le Glassmorphism est un nouveau style d’UI Design qui gagne de plus en plus en notoriété. Cette nouvelle tendance se différencie du Neumorphism grâce à plusieurs aspects :

• Transparence (effet de verre avec un flou en background)
  
• Utilisation de plusieurs couleurs avec des objets flottants
  
• Contour fin et net
  
• Couleurs vives

La particularité majeure de cette tendance est donc la transparence. Le but du jeu ici est de créer une hiérarchie de l'information à l’aide de la profondeur de l’interface. L’utilisateur parvient à trier et à sélectionner les éléments par rapport à leur transparence.

Cette utilisation des couleurs et de la transparence donne un aspect moderne et neuf à l’interface. Voilà pourquoi certaines marques n'hésitent pas à utiliser cette tendance, notamment Apple.

L’histoire du Glassmorphism

Le flou en background est d’abord apparu en 2013, lorsqu’Apple a introduit IOS 7. A l’époque, c’était un tout nouveau style corrélé avec le style skeuomorphisme. On avait donc des interfaces assez minimalistes avec des fonds semi-floutés.

Que ce soit dans les onglets, les notifications, les panneaux d’affichage, Apple et même Microsoft ont commencé à jouer avec cet effet de flou qui plaisait beaucoup.

Apple a réduit la cadence depuis et a réduit l’effet de verre sur son système d'exploitation, notamment sur mobile. Mais sur les ordinateurs (Mac OS), les effets de flou sont encore bien visibles.

Microsoft et leur design system "Fluent" utilisent aussi beaucoup cet effet transparent. Ils appellent ces éléments de flou “Acrylic’’ et le présentent comme un véritable composant de leur design system. Microsoft affirme que ce type d’élément permet dans leur design d'interface d'ajouter de la profondeur et de créer une hiérarchie visuelle.

L’impact du Glassmorphism sur le design d’interface

Sachant donc que Microsoft et Apple ont rendu cette pratique populaire, il est normal que les autres marques suivent cette tendance et essayent de tirer leur épingle du jeu. C’est cette année, en 2020, que le Glassmorphism connaît une grosse croissance et 2021 promet une grosse utilisation de cette esthétique.

Sachant que nos actions quotidiennes sont de plus en plus liées à des interfaces numériques, il est normal et nécessaire que les marques optimisent le design de l’interface en continu. On a eu donc affaire dernièrement au Neumorphism, une tendance mettant en avant un minimalisme moderne et épuré. On a affaire en 2020 au Glassmorphism, une nouvelle tendance regroupant des nouvelles formes de conception et de composant.

On voit déjà sur des sites web réservés aux designers, des tas de templates et de designs utilisant le Glassmorphism. Sachant que Microsoft et Apple utilisent cette tendance graphique, nombreux sont les designers mettant en avant leur capacité à s’adapter aux tendances et aux nouveaux designs d’interface.

En naviguant sur des sites de partage de design comme Behance ou Dribble, on voit bien que le Glassmorphism a gagné en popularité et que les designers s’adaptent rapidement aux nouvelles tendances.

Comment fonctionne le Glassmorphism ?

Il est assez simple d'obtenir cet effet de Glassmorphism une fois que l’on a compris la logique des composants et des éléments qui le composent. Il faut d’abord respecter la règle suivante : plus un objet (composant, boîte, etc.) est proche de nous, plus il attire la lumière. Cela permet de créer une hiérarchie visuelle. Dans le cas du Glassmorphism, cela signifie que plus un élément sera proche de nous, plus il sera transparent.

Le Glassmorphism est composé d’effet tournant autour d'une combinaison de flou en background, de transparence et de combinaison d’ombre. On retrouve donc dans ce style plusieurs couches et plusieurs calques plus ou moins transparents permettant d'ajouter de la profondeur.

Le remplissage d’une forme peut donc être un peu plus transparent pour donner l'objet en dessous un effet de flou.

Mais ce qui rend cet effet si particulier, ce sont les couleurs utilisées en arrière-plan. En effet, les couleurs ne doivent pas être trop ternes, sous peine d'avoir un effet trop peu visible. Les couleurs vives et même les dégradés sont nécessaires donc.

Si vous connaissez les interfaces d’Apple, vous avez sûrement déjà vu leur background multicolore sur Itunes ou autres. Ces jeux de couleurs et ces différences de ton sont faciles à discerner même lorsqu'un effet de flou transparent les survole.

Autre petit détail que les amateurs de Glassmorphism utilisent, ce sont les petites bordures. Le fait d’ajouter un contour aux éléments peut permettre de simuler les bords d’un morceau de verre. Cela donne un joli contraste entre le flou d'arrière- plan et la netteté de la bordure.

En réalité, ce style ne connaît pas vraiment de limite. Le Glassmorphism peut être lié au Neumorphism et  d’autres styles d’UI Design. Il y a encore beaucoup de nouveaux effets créatifs intéressants à découvrir et les designers ne cessent d'innover à ces niveaux là. Pour preuve, la montée en force du Glassmorphism depuis quelques mois.

Glassmorphism et accessibilité

Tout comme le Neumorphism, le Glassmorphism peut poser quelques problèmes en matière d'accessibilité. En effet, l’effet de flou peut ne pas être supporté sur certains navigateurs. Par exemple, contrairement à Chrome, Firefox a du mal avec les effets CSS utilisant l’effet de "blur".

De plus, il est important qu’une interface utilisant le Glassmorphim fonctionne aussi sans les effets de flous transparents. Car parfois, la lisibilité n'est pas forcément optimale avec ce genre de style. Cela permet de garantir que les personnes ayant des problèmes de vue puissent toujours utiliser l’interface en question.

Aussi, c’est une erreur de designer la totalité d’une interface avec ce style. D’une part car cela peut desservir l'accessibilité et la vitesse de chargement. D’autres parts car cela peut rendre l’expérience utilisateur trop complexe ou trop ennuyeuse. Rien ne sert donc d’en abuser. Le but est de trouver une véritable utilité à ce style et non pas de l'utiliser par pur esthétisme.

Il est difficile donc d’utiliser ce style pour des boutons ou d’autres éléments que des box sans que cela fasse “trop”. En effet, les boutons doivent par exemple garder un aspect contrastant par rapport au reste de l’interface.

L’avenir du Glassmorphism en 2021

Les mises à jour IOS, macOS avec BigSur d’Apple et autres confirment que le Glassmorphism est une tendance en pleine croissance. Certes, toutes les marques ne vont pas adopter ce style, cela ne devient pas une norme non plus, mais le Glassmorphism a de belles années devant lui.

Le fait d'avoir toujours de nouvelles tendances de design qui émergent chaque année est normal. L’humain s’ennuie rapidement et est toujours en recherche de nouveaux éléments créatifs afin d’optimiser les interfaces en continu.

On est passé de Skeumorphism, au style Neumorphism, à un style plutôt plat, pour maintenant se concentrer sur un style encore plus innovant qui est le Glassmorphism. Et cela est dû à la passion des designers qui cherchent constamment à explorer des nouvelles choses et tester différentes façons de designer des interfaces.

‍