L'industrie de la conception Web a toujours été excellente pour lancer des mots à la mode. L'un des exemples les plus récents est le neumorphisme – qui est censé être le «nouveau skeuomorphique» pour les éléments de conception.

Il s'agit d'une tendance de l'interface utilisateur dans laquelle un élément semble se libérer (ou être extrudé) de son arrière-plan. Si vous cherchez un point de référence, cela ressemble à cette scène de Star Wars où Han Solo est gelé dans de la carbonite. Mais je m'égare.

Comme pour toute nouvelle idée chaude, le Web regorge d'exemples de la façon dont cette technique pourrait être utilisée dans le monde réel. Avec cela, voici quelques extraits de code qui donnent vie au neumorphisme!

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

Poussez pour vérifier

C’est un concept intéressant: les cases à cocher sous forme de boutons. Ici, chaque option ressemble à un bouton bien arrondi. Cliquez dessus et le bouton semble «enfoncé». Cela n'a pas seulement l'air cool; il ajoute également un peu d'interactivité unique au formulaire.

Voir les cases à cocher Neuomorphic Pen de Braydon Coyer

La forme entière

Prenant la tendance un peu plus loin, cet extrait de code imagine une forme entière dans ce style. Les entrées de texte semblent avoir été sculptées dans l'arrière-plan, tandis que les boutons éclatent.

Voir la forme néomorphique du stylo par Swapnil

Carte colorée

Les interfaces utilisateur de carte sont une tendance populaire à part entière. Et ils semblent correspondre parfaitement au neumorphisme, car ils fournissent un moyen subtil pour que le contenu se démarque. Ce qui rend cet exemple particulier intéressant, c'est l'utilisation du fond dégradé.

Voir la carte Pen Neumorph – interface utilisateur souple de Cornelius Labuschagne

Neumorphisme au menu

La navigation basée sur des icônes existe depuis un certain temps, mais elle est de nouveau quelque peu nouvelle avec un tiret de cette technique. Les effets de survol rendent chaque bouton très intuitif, ce qui est un must absolu avec ce type de conception à faible contraste.

Voir le menu Pen Neumorphism de Wouter

Collectez les tous

Cet ensemble d'éléments contient à peu près tout ce dont vous avez besoin pour apporter du neumorphisme à vos propres projets. Il y a des boutons, des éléments de formulaire et, d'un intérêt particulier: une barre de chargement. Cela semble juste une extension naturelle du look.

Voir le stylo Un peu de neumorphisme par Damir

Des morphes plus accessibles

S'il y a un inconvénient à cette tendance, c'est que les éléments interactifs peuvent être trop subtils – ce qui nuit à l'accessibilité. Cet extrait vise à résoudre ce problème, avec des états de survol et de clic qui ajoutent des bordures à contraste élevé et des changements de couleur.

Voir l'exemple d'accessibilité du Pen Neumorphism par Michael J. Fordham

Neu Calculations

L'un des cas d'utilisation les plus logiques du neumorphisme serait pour les écrans d'application, comme cette calculatrice. Il emprunte plusieurs des principes de base, mais garde les choses à la fois lisibles et intuitives.

Voir le Pen Neumorphic Calculator de Joseph R Miles

Table It

Les tableaux HTML ne semblent pas être les mieux adaptés à un aspect neumorphique, mais voyez par vous-même. Ici, la table est super propre et les effets de survol de ligne / colonne sont brillants. Une solution très créative.

Voir le tableau Nuemorphic Pen d'Abhishek Anil Deshmukh

Obtenez-le pendant qu'il fait chaud

Il y a un appel certain au neumorphisme. Le look est plutôt transparent et, lorsqu'il est intelligemment mis en œuvre, assez lisse.

À en juger par les exemples ci-dessus, il semblerait qu'il soit préférable d'utiliser le style en combinaison avec des éléments plus contrastés. Cela fournit la bonne ambiance, mais garde la conception accessible et conviviale.

Si vous souhaitez voir encore plus d'extraits d'interface utilisateur neumorphes, consultez notre collection CodePen!