Blog Design Graphique – Florian Pioli

Qu’est-ce que la tendance du Neumorphisme ?

Les acteurs du design de manière générale créent volontairement ou involontairement des courants et tendances graphiques qui traversent les époques pour certaines et marques de leur empreinte leur temps pour d’autres. De la tendance du flat design de nos jours, à possiblement la tendance du neumorphisme de demain, voyons ensemble qu’est-ce que la tendance du neumorphisme ?

De quel domaine provient cette tendance ?

Pour le moment, à l’heure où j’écris ces mots, peu d’articles en français sont publiés sur cette tendance du neumorphisme ! Cela n’empêche pas de déterminer sa provenance. Nous pouvons observer qu’en UI Design (User Interface Design), le neumorphisme est de plus  en plus utilisé ! Nous ne voyons pas encore beaucoup d’applications qui utilisent le neumorphisme, mais beaucoup de design d’interface fleurissent sur behance, pinterest et autres plateformes d’images et de visuels.

Néanmoins, la marque multinationale SAMSUNG a été une des premières entreprises à utiliser cette tendance pour leur communication avec l’application de cette dernière pour le livestream de 2020 sur leur nouveau smartphone à paraître.

Samsung neumorphisme communication

Pour le moment, il ne me semble pas que d’autres grands groupes aient utilisé cette tendance dans leur communication. Si c’était le cas, je vous invite à en échanger ensemble dans les commentaires. Cependant, Apple commence peu à peu à y venir en utilisant un style graphique situé entre le total flat design et le neumorphisme. Nous sommes à la frontière entre de l’illustration totale et de l’hyperréalisme.

Par quoi se caractérise graphiquement le neumorphisme ?

Cette tendance a apparemment commencé avec cette publication dribbble qui a lancé la tendance. On doit ce travail graphique d’interface utilisateur à @alexplyuto ! 

Analysons graphiquement le premier visuel du “mouvement” neumorphique afin d’analyser la genèse et non les déclinaisons. Le fond de couleur est soft, souvent d’un dégradé de blanc ou de noir ! Tous les objets qui constituent l’interface sont pour la plupart, de la même couleur que le font. Qu’est-ce qui les fait alors ressortir et qu’est-ce qui les rend visibles et compréhensibles pour l’oeil humain ? Sur chacun des objets est ajouté une ombre portée maîtrisée et tout aussi soft que la totalité du design de l’interface utilisateur ! Certaines variantes sont apportées entre les différents composants : tantôt un dégradé linéaire sur le composant est utilisé pour donner un effet de profondeur, tantôt un aplat de couleur est conservé. Pour vous permettre de visualiser au mieux les différentes variations de composant possible, vous pourrez tester la création d’objets neumorphiques sur l’excellent générateur Soft UI CSS : https://neumorphism.io/

Les couleurs sont utilisées comme des toniques pour faire ressortir les éléments importants comme des appels à l’action (CTA) et autres cartes qui demandent une interaction. Cela facilite l’expérience utilisateur à n’en point douter !

Concernant l’utilisation et la mise en place des images, cette tendance ne semble pas poser de problèmes graphiques, elles s’utilisent sans aucun souci.

Que retenir de cette tendance graphique ?

Pour résumer cette tendance graphique du neumorphisme, retenons que c’est une tendance située entre le réalisme et le flat design, qui fait appel à des dégradés de couleur soft d’une seule tonalité de couleur avec quelques couleurs toniques pour faire ressortir des éléments. Les éléments sont mis en valeur grâce aux ombres portées.

N’hésitez pas à me faire savoir ce que vous pensez de cette tendance et à échanger sur les ressources neumorphiques en commentaire.

Si cet article vous a été utile, n’oubliez pas de le partager sur vos réseaux sociaux, de le commenter si vous avez des questions ! Également, pour ne pas passer à coté du prochain article, abonnez-vous à la newsletter !

Qu’est-ce que la tendance du Neumorphisme ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Share via
Copy link
Powered by Social Snap