Navigation

Toutes les catégories

Voir les derniers articles

Comment utiliser le Glassmorphism dans vos créations ?

Le glassmorphism est la nouvelle tendance design qui va marquer 2021. Il ne s’agit pas tout à fait d’un nouveau procédé, mais bien d’une technique qui est en train de se...

Publié par Melanie De Coster

Le glassmorphism est la nouvelle tendance design qui va marquer 2021.

Il ne s’agit pas tout à fait d’un nouveau procédé, mais bien d’une technique qui est en train de se développer, fortement influencée par les géants du numérique.

 

Qu’est-ce que le glassmorphism ?

Comme son nom le laisse entendre, le glassmorphism est un design qui joue sur la transparence du verre. Pour l’utiliser, il faut créer des visuels qui se superposent en laissant deviner ce qu’ils cachent en dessous.

Vous avez donc affaire à un effet de transparence, qui floute néanmoins le background pour que le contenu de la fenêtre supérieure soit lisible.

 

D’où vient le glassmorphism ?

Il faut remonter à 2013 pour voir apparaître de manière régulière les premiers effets de glassmorphism. Le style était alors assez limité, et consistait simplement à faire venir à l’avant-plan une fenêtre qui floutait l’arrière-plan.

Si Apple, avec son iOS 7 était le premier à l’utiliser, d’autres n’ont pas tardé à l’imiter. Ainsi Microsoft s’est emparé de cette technique à son tour pour Window Vista.

Aujourd’hui, vous retrouvez cet effet sur de nombreux ordinateurs, Mac ou Microsoft, notamment pour les barres de menu ou certains outils de navigation. Microsoft préfère parler de flou Acrylic plutôt que de glassmorphism, mais cette présentation est devenue un composant de leur design.

glassmorphism

Selon eux, ce type d’élément permet d’ajouter de la profondeur et de créer une hiérarchie visuelle. Et c’est bien dans ce sens qu’il devient aussi important de manière générale.

Inspirés par ces grandes sociétés que sont Apple et Microsoft, de plus en plus de designers intègrent le glassmorphism à leurs créations d’interfaces. Ils sont ainsi nombreux, sur les sites comme Behance ou Dribble, à démontrer qu’ils ont intégré ce procédé.

 

Comment utiliser le glassmorphism ?

En glassmorphism, tout repose sur la hiérarchie visuelle. Ainsi, il faut respecter la règle suivante : plus un objet est proche de nous, plus il attire la lumière.

Et, dans ce cadre précis, plus il sera transparent. Les cadres ou fenêtres les plus proches seront donc les plus lisibles, tandis que ce qui est à l’arrière-plan se floutera. Et cela de plus en plus, si de nombreux cadres doivent se superposer.

Il s’agit donc principalement d’une superposition de calques. Pour réussir cet effet, il faudra jongler sur leur niveau de transparence. Le plus difficile est de flouter suffisamment l’arrière-plan pour qu’il ne gêne pas la lisibilité de l’avant-plan… tout en le laissant deviner, donc sans le faire entièrement disparaître.

Bon à savoir
Par ailleurs, pour obtenir un effet qui soit esthétique, il faut aussi que l’arrière-plan comporte des couleurs vives. Trop ternes, les teintes ne parviendraient plus à se démarquer dans le floutage. Un glassmorphism réussi laisse apparaître ces coloris dans le fond de l’écran, pour mieux rappeler qu’ils existent.
  • Enfin, les designers aguerris en glassmophism prennent le temps d’ajouter de fines bordures sur les extrémités de leurs cadres.
  • Ceci permet de délimiter encore plus ce qui doit s’apparenter à une plaque de verre, et donc d’être dans un résultat plus proche encore de la réalité.

 

Attention à l’accessibilité

Le glassmorphism reste encore relativement nouveau.

Ce qui le rend parfois incompatible avec certains navigateurs. Ainsi, Firefox a parfois quelques difficultés avec les CSS s’appuyant sur l’effet de flou (blur). Et cela peut gêner l’utilisation des design pour le public.

Attention
Il faut aussi vérifier que la lisibilité reste optimale, notamment pour les personnes présentant des problèmes de vue. La superposition et le flou d’arrière-plan ne favorisent pas toujours la lecture des applications. Dans ce cas, il peut être utile de proposer une version de l’application sans cet effet flouté, au choix de l’utilisateur.

Inutile d’ailleurs de coder tout un site ou toute une interface de cette manière. Cela deviendrait vite plus redondant qu’esthétique. Imaginez des dizaines de fenêtres qui se superposent en se floutant mutuellement, et vous aurez surtout les prémices d’un mal de tête.

Le mieux est de l’utiliser avec discernement. Ce n’est pas la peine de présenter des boutons en glassmorphism, par exemple…

 

Le glassmorphism commence seulement à être exploré par les designers. Ce qui implique que c’est maintenant que vous devez vous l’approprier et le tester à votre tour.

Jouez avec, détournez-le, transformez-le… C’est ainsi que l’on fait évoluer la présentation des sites et des interfaces, et que l’on dessine l’avenir.

5
/
5
(
1

vote

)
Lire la suite de l'article
Afficher les commentaires (0)

Commentaires

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Tuto : comment retoucher un portrait dans Photoshop ?

Vous avez suivi nos conseils pour photographier un portrait, mais ce dernier n’est pas parfait. Pas de panique, sur Photoshop de nombreuses retouches sont possibles. Dans ce...

Publié le par Charlotte Chollat
Graphisme

Comment ajouter de l’interaction sur votre site web ?

Un site web ne doit pas seulement exister, il doit aussi vivre. La différence entre les deux réside dans la qualité des interactions que vous aurez avec les...

Publié le par Melanie De Coster