Définition
Le style neumorphism ou neumorphisme est un style de design d’interface qui combine minimalisme et réalisme en imitant des éléments physiques par des effets visuels subtils.
Il utilise des ombres douces, des surbrillances et des creux pour créer un relief en 3D délicat, avec des couleurs souvent claires et monochromes, et des contrastes faibles. Les formes, aux coins légèrement arrondis, paraissent flotter ou s’enfoncer dans l’arrière-plan.
Evolution du Flat Design et du Material Design, tendant vers plus d’élégance, on l’appelle aussi Soft UI (user interface), en raison de la douceur de ses contrastes.
Apparu en 2020, le neumorphisme se distingue du design skeuomorphe, qui consiste à imiter le style graphique du réel, par exemple un tableau de bord avec des éléments en métal.
Il est surtout utilisé dans des contextes hi-tech, par exemple pour des interfaces graphiques d’applications informatiques.
Bien qu’esthétique, ce style peut compromettre l’accessibilité (faible lisibilité) et la hiérarchie visuelle. Il marque un équilibre entre innovation et sobriété, mais reste moins fonctionnel que le Material Design.
Caractéristiques graphiques
Le style Neumorphisme se caractérise par :
Couleurs :
- les designs néomorphes utilisent souvent des palettes de couleurs douces, agréables à regarder
- on utilise un petit nombre de couleurs, avec une forte tendance à la bichromie ou à la trichromie
- couleurs neutres voire éteintes, désaturées (gris clair, gris foncé) en fond agrémentées d’une ou deux couleurs d’accentuation, légers gradients
Contrastes :
- les designs en style neumorphisme présentent des contrastes minimaux, car ils utilisent les ombrages pour distinguer les éléments
Visuels :
- les visuels du type photo ou illustration ne sont pas ou peu présents dans le style neumorphique, qui préfère l’abstraction
- si on en utilise, on privilégiera des illustrations vectorielles ton sur ton
Effets :
- profondeur : avec des ombres subtilement décalées, on crée une impression de profondeur, comme si les éléments sortaient de l’écran ou y étaient enfoncés
- des ombres discrètes, intérieures comme extérieures, mettent en valeur et distinguent les divers éléments : boutons, lignes, encadrés
- les coins des éléments (boutons, encadrés) sont systématiquement arrondis
Typos / polices de caractère
Moderne et abstrait, le design de style neumorphisme s’associe harmonieusement avec des polices de caractère sobres et minimalistes, des sans-serif droites et sans fioritures, tout en restant lisibles malgré les contrastes subtils des éléments neumorphiques.
Voici quelques exemples de polices recommandées :
1. Sans-serif géométriques
- Montserrat (élégante, large gamme de graisses)
- Futura (géométrique, intemporelle)
- Gilroy (léger et moderne)
- SF Pro (police système Apple, optimisée pour l’UI)
2. Sans-serif arrondies
- Rubik (jeu entre angles doux et géométrie)
- Quicksand (légère, aérée, avec des extrémités arrondies)
- Nunito (équilibre entre rondeur et neutralité)
3. Polices UI modernes
- Inter (conçue pour les écrans, hauteur de x élevée)
- Roboto (neutralité, adaptée à tous les usages)
- Segoe UI (police Microsoft, douce et lisible)
- Poppins (géométrique, dynamique, excellente hiérarchie)
4. Polices minimalistes polyvalentes
- Open Sans (neutre, excellente lisibilité)
- Lato (chaleureuse, structure ouverte)
- Raleway (léger contraste entre pleins et déliés)
Comment faire un design neumorphique
Styler les arrière-plans
Les background sont soit plats, uniformes, soit dotés d’un subtil gradient entre deux couleurs très proches, l’une plus claire que l’autre.
Très important : ce gradient doit posséder la même orientation en degrés que celle des ombres, pour préserver la logique visuelle. En général, cette orientation ira en diagonale, d’en haut à gauche vers en bas à droite, ou d’en haut à droite vers en bas à gauche.
Par exemple, donnez à vos arrière-plans cette propriété CSS :
background: linear-gradient(145deg, #c7c7c7, #ececec);
Styler les boutons
Les boutons sont de la même couleur que l’arrière-plan, et ne s’en distinguent que par leurs subtils ombrages, doubles :
- une ombre plus claire prend la lumière
- une ombre plus foncée du côté opposé cache la lumière
Par exemple, donnez à vos boutons cette propriété CSS :
box-shadow: 20px 20px 40px #a1a1a1,
-20px -20px 40px #ffffff;
Utiliser un kit UI
Des kits permettent d’appliquer un style neumorphique en reprenant du code CSS ou des modèles. En voici quelques exemples :
