Design : Spotify dans le Neumorphisme – UX Collective

La façon de procéder est simple. Vous devez donner une ombre intérieure claire et sombre à la couche extérieure avec une ombre portée.

Voici les valeurs que j’ai utilisées pour la couche externe

ombre 1: (color.dark, blur 10, x: -6, y: -6)

ombre 2: (couleur.lumière, flou 10, x: 6, y: 6)

et inversé les ombres pour la couche intérieure (logo Spotify), échange des valeurs X et Y claires et sombres;

ombre 1: (couleur foncée, flou 10, x: 6, y: 6)

ombre 2: (couleur.lumière, flou 10, x: -6, y: -6)

En venant à l’écran de connexion, je me suis senti il ne faut pas en faire trop mais rester simple c’est pourquoi seuls les boutons sont rendus neumorphes tandis que le reste de l’écran reste tel quel. Lorsque vous concevez un bouton avec un CTA important, vous tenez souvent compte du taux de contraste et prenez-en note pour le faire ressortir, ainsi que facilement lisible. Gardant le fait intact, j’ai gardé les boutons tels quels. La seule chose qui est ajoutée est les angles et une variété d’ombres douces. La même technique est appliquée même pour les boutons mais au lieu de leur donner un aspect en retrait, je les ai fait extruder en donnant une importance égale aux 3 points d’entrée de connexion. Voici les valeurs que j’ai utilisées pour la couche externe du bouton

ombre 1: (couleur foncée, flou 10, x: 6, y: 6)

ombre 2: (couleur.lumière, flou 10, x: -6, y: -6)

et retourné les ombres pour la couche intérieure, échanger les valeurs X et Y claires et foncées;

ombre 1: (color.dark, blur 10, x: -6, y: -6)

ombre 2: (couleur.lumière, flou 10, x: 6, y: 6)