{"id":24567,"date":"2022-01-01T01:00:00","date_gmt":"2022-01-01T00:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=24567"},"modified":"2025-08-20T17:23:36","modified_gmt":"2025-08-20T15:23:36","slug":"utiliser-glassmorphism-tendances-creations","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/utiliser-glassmorphism-tendances-creations\/","title":{"rendered":"Comment utiliser le Glassmorphism dans vos cr\u00e9ations\u00a0?"},"content":{"rendered":"

Le glassmorphism est la tendance design<\/a> qui a marqu\u00e9 2022. Aujourd’hui, elle reste une tendance \u00e0 prendre en compte lors du d\u00e9veloppement de votre site internet ou de votre outil.<\/p>\n

Il ne s\u2019agit pas tout \u00e0 fait d\u2019un nouveau proc\u00e9d\u00e9, mais bien d\u2019une technique qui est en train de se d\u00e9velopper, fortement influenc\u00e9e par les g\u00e9ants du num\u00e9rique.<\/p>\n

Qu\u2019est-ce que le glassmorphism\u00a0?<\/h2>\n

Comme son nom le laisse entendre, le glassmorphism est un design qui joue sur la transparence du verre. Pour l\u2019utiliser, il faut cr\u00e9er des visuels qui se superposent en laissant deviner ce qu\u2019ils cachent en dessous.<\/p>\n

\"glassmorphism\"
R\u00e9alis\u00e9 par Offriginal – Dribbble<\/figcaption><\/figure>\n

Vous avez donc affaire \u00e0 un effet de transparence, qui floute n\u00e9anmoins le background<\/a> pour que le contenu de la fen\u00eatre sup\u00e9rieure soit lisible.<\/p>\n

D\u2019o\u00f9 vient le glassmorphism\u00a0?<\/h2>\n

Il faut remonter \u00e0 2013 pour voir appara\u00eetre de mani\u00e8re r\u00e9guli\u00e8re les premiers effets de glassmorphism. Le style \u00e9tait alors assez limit\u00e9, et consistait simplement \u00e0 faire venir \u00e0 l\u2019avant-plan une fen\u00eatre qui floutait l\u2019arri\u00e8re-plan.<\/p>\n

\"glassmorphism
Source<\/a><\/figcaption><\/figure>\n

Si Apple, avec son iOS 7 \u00e9tait le premier \u00e0 l\u2019utiliser, d\u2019autres n\u2019ont pas tard\u00e9 \u00e0 l\u2019imiter. Ainsi Microsoft s\u2019est empar\u00e9 de cette technique \u00e0 son tour pour sa derni\u00e8re version de Windows Vista.<\/p>\n

Aujourd\u2019hui, vous retrouvez cet effet sur de nombreux ordinateurs, Mac ou Microsoft, notamment pour les barres de menu ou certains outils de navigation. Microsoft pr\u00e9f\u00e8re parler de flou Acrylic plut\u00f4t que de glassmorphism, mais cette pr\u00e9sentation est devenue un composant de leur design.<\/p>\n

\"glassmorphism\"<\/p>\n

Selon eux, ce type d\u2019\u00e9l\u00e9ment permet d\u2019ajouter de la profondeur et de cr\u00e9er une hi\u00e9rarchie visuelle. Et c\u2019est bien dans ce sens qu\u2019il devient aussi important de mani\u00e8re g\u00e9n\u00e9rale.<\/p>\n

Inspir\u00e9s par ces grandes soci\u00e9t\u00e9s que sont Apple et Microsoft, de plus en plus de designers int\u00e8grent le glassmorphism \u00e0 leurs cr\u00e9ations d\u2019interfaces. Ils sont ainsi nombreux, sur les sites comme Behance ou Dribble, \u00e0 d\u00e9montrer qu\u2019ils ont int\u00e9gr\u00e9 ce proc\u00e9d\u00e9.<\/p>\n

\u00c0 lire aussi : La fin du Flat Design : vive le Visual Design !<\/a><\/p><\/blockquote>\n

Comment utiliser le glassmorphism\u00a0?<\/h2>\n

En glassmorphism, tout repose sur la hi\u00e9rarchie visuelle. Ainsi, il faut respecter la r\u00e8gle suivante\u00a0: plus un objet est proche de nous, plus il attire la lumi\u00e8re.<\/p>\n

\"glassmorphism\"
R\u00e9alis\u00e9 par RH – Dribbble<\/figcaption><\/figure>\n

Et, dans ce cadre pr\u00e9cis, plus il sera transparent. Les cadres ou fen\u00eatres les plus proches seront donc les plus lisibles, tandis que ce qui est \u00e0 l\u2019arri\u00e8re-plan se floutera. Et cela de plus en plus, si de nombreux cadres doivent se superposer.<\/p>\n

Il s\u2019agit donc principalement d\u2019une superposition de calques. Pour r\u00e9ussir cet effet, il faudra jongler sur leur niveau de transparence. Le plus difficile est de flouter suffisamment l\u2019arri\u00e8re-plan pour qu\u2019il ne g\u00eane pas la lisibilit\u00e9 de l\u2019avant-plan\u2026 tout en le laissant deviner, donc sans le faire enti\u00e8rement dispara\u00eetre.<\/p>\n

Par ailleurs, pour obtenir un effet qui soit esth\u00e9tique, il faut aussi que l\u2019arri\u00e8re-plan comporte des couleurs vives. Trop ternes, les teintes ne parviendraient plus \u00e0 se d\u00e9marquer dans le floutage. Un glassmorphism r\u00e9ussi laisse appara\u00eetre ces coloris dans le fond de l\u2019\u00e9cran, pour mieux rappeler qu\u2019ils existent.<\/p><\/blockquote>\n