Le neumorphisme, du design en relief

Que ce cache t’il derrière ce nom un peu barbare de neumorphisme, c’est un courant du webdesign qui joue avec les ombres et les lumières pour donner un aspect de relief très épuré et doux.
Le design dominant encore aujourd’hui dans le web design reste le flat design, des aplats de couleur sur une grille simple, ou l’on privilégie la lisibilité.
Le neumorphisme est avant tout élégant et futuriste, mais semble clairement plus adapter aux interfaces de type gestion de domotique, application mobile, tableau de bord..etc.
L’application de dégradés légers ajouter à ce style de webdesign rend votre interface très esthétique.

Comment fait-on du neumorphisme ?

Le secret se joue de le dosage des ombres par des ombres clairs et foncés.
Pour rappel pour réaliser des ombres n’hésitez pas à revoir l’article « Les ombres avancées« .
Pour avoir cette impression de relief, il faut utiliser la couleur de fond de votre bouton de la même couleur que son parent.
Vous pouvez ajouter un border-radius pour adoucir et arrondir le design.
Exemple un bouton simple sur fond gris clair, pour pouvoir mettre l’ombre plus clair.

body{
background: #e3e3e3;
}
.btn{
background:#e3e3e3;
height: 50px;
width:50px;
display: flex;
justify-content: center;
align-item: center;
padding: 1.5rem;
color: #444857;
box-shadow : 2px 2px 10px #c2c2d5, -2px -7px 10px #fff;
border-radius:25px;
margin:10px;
}

Il faut bien retenir de cet exemple :

• Le fait que l’arrière-plan est le même sur le bouton et sur le fond sur lequel il se trouve.
• Que l’on ajoute 2 ombres une claire et une plus foncé que l’arrière-plan.
• Il est préférable d’appliquer des contours arrondi pour accentuer l’effet de relief.

Différentes applications du neumorphisme

L’utilisation la plus courante sera sur les boutons et sachant que différents états du bouton peuvent être appliqués. Comme le bouton cliqué ou indisponible et l’on utilise une autre astuce celle du dégradé sur bouton.
Pour un bouton que l’on clique, nous voulons un effet comme s’il était enfoncé.
Il faut donc réaliser un dégradé inverse de celui des ombres, l’ombre clair avec le côté obscur du dégradé et le côté foncé du dégradé avec le côté clair de l’ombre.

Il est donc possible avec un dosage d’ombre sombre et claire et de dégradé d’obtenir cet effet simplement et de décliner sur différents éléments de votre design.
Attention cependant à l’utilisé avec parcimonie, car il est principalement utilisé sur des interfaces épurées.

Afin de vous facilité la tache, vous pouvez vous aider d’un générateur très bien fait neumorphism.io

See the Pen Neumorphism by josuao (@josuao) on CodePen.