Tendance UI : Neumorphisme et implémentation CSS
Le neumorphisme mélange des techniques du skeuomorphisme et du design plat. Tout comme le skeuomorphisme, c’est un style de réalisme qui imite des objets réels et en crée une représentation 3D dans l’environnement numérique. Avec son élégance et son détail, le neumorphisme est une nouvelle bouffée d’air frais du design plat et de tous les autres styles et tendances qui mérite l’exploitation. Nous allons donc découvrir dans cet article le principe du neumorphisme ainsi que son implémentation CSS.
Quel est le lien entre le neumorphisme et le Skeuomorphisme ?
L’un des aspects les plus intéressants du neumorphisme est qu’il s’inspire à la fois du skeuomorphisme et d’autres styles massivement populaires, tel que le design plat. Oui, les deux sont opposés l’un à l’autre mais le neumorphisme se situe en quelque sorte entre les deux, l’exemple suivant illustre cette comparaison :
Le neumorphisme peut être facilement compris comme 3D sur une toile 2D. Nous créons une illusion de source de lumière de n’importe quel côté de l’objet en utilisant des ombres « directionnelles » pour obtenir cet effet 3D.
Nous définissons la hauteur et la profondeur à travers les ombres qui tombent vers l’extérieur d’un certain élément et les ombres à l’intérieur de l’élément (ombres en médaillon) respectivement.
À quoi ressemble le neumorphisme dans la conception de l’interface utilisateur ?
Le neumorphisme est une question de contraste subtil et de couleurs unies. Mais comment pouvons-nous créer une interface qui offre un “Effet wow” sans aucun élément flashy? Dans le neumorphisme, tout est dans l’utilisation de l’ombre et de la lumière.
L’astuce principale est de s’assurer que votre élément et votre arrière-plan sont exactement de la même couleur. Ceci afin que nous puissions ensuite créer la sensation que ces composants sortent de l’arrière-plan, en utilisant des ombres pour créer l’apparence saillante.
Il faut également s’assurer que la couleur de l’arrière-plan et des composants fonctionne bien sous une forme solide, car il faut appliquer cette même couleur tout autour de la conception. Pour que le jeu d’ombres fonctionne, l’arrière-plan ne peut pas être entièrement noir ou blanc uni. Vous aurez donc besoin d’une sorte de couleur pour que l’ombre apparaisse visuellement. Une fois la couleur principale choisie, l’étape suivante est de chercher deux ombres : une ombre sombre et une ombre claire.
Ce sont les détails supplémentaires que vous appliquez à tous les composants qui créent ce style uniforme.
Neumorphisme : cartes et boutons
Les cartes neumorphes sont différentes des autres styles ordinaires de conception. Les cartes dans Material Design, par exemple, ne semblent pas flottantes puisqu’il n’y a pas d’ombre pour créer cet effet soit dans le cas normal ou même lorsque l’utilisateur survole cette carte. Ceci est dû au fait qu’ils extrudent de l’arrière-plan, créant ainsi un aspect en relief.
Le moyen d’y parvenir est de prendre les ombres claires et sombres qui accompagneront l’arrière-plan et de les utiliser sur les côtés opposés des cartes. Vous pouvez jouer avec le positionnement de ces deux ombres, ce qui donne l’impression que les cartes sont vues depuis un certain angle par l’utilisateur.
Neumorphisme et CSS
Créer une interface neumorphique avec CSS peut paraître aussi simple que d’appliquer une propriété box-shadow régulière sur un élément quelconque, mais en réalité c’est bien plus nuancé que cela. La particularité d’une interface utilisateur neumorphique provient de l’utilisation de plusieurs valeurs d’ombre de boîte et de couleur d’arrière-plan pour obtenir différents types d’effets et de variations.
C’est une combinaison de deux ombres de boîte, sombre et claire. En outre, un arrière-plan dégradé sur l’objet peut être ajouté à l’effet.
Faisons d’abord un rappel rapide sur la propriété box-shadow afin que nous puissions mieux la comprendre. La syntaxe de cette propriété est comme suit :
box-shadow : [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];Nous pouvons appliquer plusieurs ombres en utilisant des valeurs d’ombre de boîte séparées par des virgules. Jusqu’à quatre valeurs peuvent être concaténées, une pour chaque côté de la boîte.
Exemple :
box-shadow: 10px 10px 40px #00d2c6,-20px -20px 50px #00ffff;Cet exemple montre les valeurs de propriété du box-shadow pour un élément d’interface utilisateur neumorphique. Les valeurs individuelles de décalage, de flou et d’opacité peuvent être ajustées pour être supérieures ou inférieures, en fonction de la taille d’un élément et de l’intensité de l’effet que vous essayez d’obtenir. Pour le neumorphisme, il est nécessaire de garder les ombres douces à faible contraste.
Utilisons à présent des variables CSS pour garder les valeurs abstraites et mieux comprendre les variations.
box-shadow: var( — h1) var( — v1) var( — blur1) var( — color-dark), var( — h2) var( — v2) var( — blur2) var( — color-light);
Conclusion
Le neumorphisme est une tendance qui vise à créer une combinaison d’éléments flat design couplés aux techniques de skeuomorphisme, d’une façon innovante afin d’apporter un effet visuel épuré.
Cependant, bien que cette tendance soit considérée comme agréable et créative, il faut faire attention à l’aspect d’accessibilité qui n’est pas toujours assez optimal. C’est le cas notamment pour les personnes ayant des déficiences visuelles (interfaces très claires, manque de contraste, compréhension de ce qui est cliquable ou non, etc.).
Ce style n’est donc pas adapté à tout type d’application, il doit être appliqué en prenant en compte l’aspect accessibilité afin d’assurer une manipulation facile et optimale aux utilisateurs quels que soient leurs profils et leurs déficiences.
