Article original : What is Glassmorphism? How to Create a Glass Card in Figma
Le Glassmorphism est une tendance croissante dans la conception d'interfaces utilisateur. Il donne à vos designs un look moderne et élégant.
Dans cet article, nous allons apprendre ce que signifie le glassmorphism, son accessibilité et comment concevoir une simple carte en verre.
Qu'est-ce que le Glassmorphism ?
Le Glassmorphism est un style qui, comme son nom l'indique, utilise les propriétés du verre pour améliorer vos designs. Il donne un aspect translucide ou transparent à ses éléments.
Les éléments et formes glassmorphiques fonctionnent très bien sur des arrière-plans vibrants et colorés qui accentuent l'effet de verre. Le Glassmorphism vous aide à ajouter une hiérarchie visuelle à vos designs et met l'accent sur le contenu que vous souhaitez mettre en avant.
Accessibilité du Glassmorphism
Les designs en verre ne sont pas les meilleurs si vous concevez pour des personnes ayant des problèmes de vision. Vous devrez être très prudent lors du choix des couleurs et des polices pour vous assurer que les lecteurs d'écran et autres dispositifs peuvent correctement interpréter les designs.
De plus, l'utilisation du glassmorphism peut ralentir votre site et augmenter la consommation de la batterie.
Si vous pouvez contourner ces problèmes, cependant, les designs en verre ont vraiment l'air très cool – alors nous allons apprendre à les créer ici.
Voici quelques conseils pour aider à augmenter l'accessibilité de vos designs en verre :
- Utilisez l'effet de transparence ou de flou avec parcimonie/modération. Ne l'utilisez pas excessivement. L'effet est meilleur lorsqu'il est utilisé sur seulement deux ou trois éléments de votre design.
- Établissez un sens clair de la hiérarchie. Le bon espacement entre les cartes dans la mise en page du design et en vous assurant que les bons éléments se démarquent aidera avec les problèmes d'accessibilité. Rappelez-vous, une forte hiérarchie visuelle aide à donner aux utilisateurs les bons indices visuels.
- Définissez le bon arrière-plan. Assurez-vous que l'arrière-plan n'est pas terne ou fade. L'utilisation de couleurs vibrantes comme arrière-plans aidera à accentuer l'effet. Bien sûr, cela permettra également d'obtenir un look très esthétique.
- L'utilisation de polices plus grandes peut rendre vos designs en verre plus accessibles. Choisissez également des polices qui contrastent avec l'arrière-plan en verre.
Exemples de designs Glassmorphiques
Pour vous donner une meilleure idée de l'apparence des designs glassmorphiques, voici quelques exemples de sites web qui appliquent cette technique :
Site Web Glassmorphique par Sahid Aldi Susilo
Design Glassmorphique par Stefan Brown
Vous pouvez voir ce design ici.
Carte en verre par Pratheek Purohit
Vous pouvez voir ce design ici.
Voyons comment nous pouvons recréer quelque chose de similaire au dernier exemple.
Comment créer une carte en verre dans Figma
Les cartes en verre sont simplement des cartes créées en utilisant le glassmorphism. Les cartes pourraient être des images de cartes de crédit, des cartes de profil, des cartes de facture, et plus encore.
Suivez les étapes ci-dessous pour créer une carte de crédit en verre dans Figma.
Étape 1 – Définir un arrière-plan coloré
Un arrière-plan coloré est essentiel car il aide à accentuer votre design en verre et à le faire ressortir. Vous pourriez simplement utiliser le plugin uiGradients pour sélectionner un dégradé de votre choix comme je l'ai fait ci-dessous.
Étape 2 – Dessiner une forme
Ici, nous allons imiter la forme d'une carte de crédit physique, qui ressemble à un rectangle.
Dessinez une forme rectangulaire avec les dimensions 640×400, et définissez les rayons des coins à 40pt.
Étape 3 – Appliquer un remplissage en utilisant un dégradé
Ensuite, vous devez remplir la forme avec des couleurs translucides comme le blanc. Les deux couleurs du dégradé doivent être blanches mais elles doivent être définies à différents niveaux d'opacité.
Étape 4 – Appliquer un flou d'arrière-plan
Définissez la valeur de flou à 40, ou toute valeur de votre choix en fonction de l'aspect flou que vous souhaitez obtenir.
Étape 5 – Ajouter des contours pour créer des bordures
L'ajout de bordures donne à votre carte un aspect plus poli et élégant. Cela aide à avoir un contraste plus net grâce à des bordures plus épaisses et plus distinctes.
Étape 6 – Appliquer une ombre portée
L'utilisation d'un effet d'ombre portée aide à renforcer la hiérarchie visuelle.
Définissez la valeur de flou à 24 et l'étalement à -1.
Étape 7 – Ajouter votre contenu
Vous pouvez maintenant ajouter du contenu à votre carte comme du texte, un logo, etc. Utiliser le plugin Iconify comme je l'ai fait pour obtenir votre logo Visa et la puce EMV vous fera gagner beaucoup de temps.
Remplissez votre contenu avec la couleur blanche, diminuez l'opacité et définissez le mode de fusion de la couche sur Superposition.
L'effet de givre ajoute une touche finale à votre design. Pour appliquer cet effet, utilisez simplement le plugin de bruit pour remplir l'image avec du bruit.
Si vous avez déjà le plugin installé, allez directement dans plugins et cliquez sur noise. Si ce n'est pas le cas, allez sur https://www.figma.com/community/plugins pour installer le plugin.
Une fois que vous avez installé et sélectionné le plugin, définissez le mode de fusion de la couche sur Superposition et diminuez l'opacité.
Lorsque vous appliquez le plugin de bruit, la carte ressemblera à ceci :
Ensuite, vous changez le mode de fusion en Superposition.
Diminuez l'opacité de votre carte. Jouez avec l'opacité jusqu'à ce qu'elle convienne à votre goût.
Vous pouvez réduire l'opacité en cliquant sur n'importe quel chiffre de votre clavier – 2 pour 20%, 3 pour 30%, 4 pour 40% et ainsi de suite.
Et voilà – une belle carte à l'aspect vitreux.
Conclusion
Ajouter l'effet glassmorphique à vos designs est assez simple. À mesure que la tendance du glassmorphism devient plus populaire, savoir comment créer des designs en verre pourrait vraiment être utile à l'avenir.