Qu’est-ce que le néomorphisme ?

Qu'est ce que le néomorphisme

Le néomorphisme ou neomorphism est une nouvelle technique de conception d’interfaces utilisateur. Ce style est en hausse en 2019-2020, et apparue sur dribble. Dans la famille de l’ UI design (nouvelle tendance de design d’interface), nous avons déjà eu le skeuomorphisme, le Flat design. Et justement, le néomorphisme est une combinaison de techniques du flat design à ceux du skeuomorphisme. Le but est de créer une interface utilisateur plus douce et plus lisible.

Skeumorphisme et le Flat design?

Puisque le néomorphisme vient de ces deux concepts, nous allons redéfinir en premier lieu ce qu’on attend par skeumorphisme, et en second lieu le flat design.

  1. Le Skeumorphisme :

C’est une conception d’interfaces utilisateur avec une apparence qui imite celle du monde réel. L’exemple le plus proche est l’icône de corbeille de notre ordinateur. Le style de conception Skeumorphisme essaie de concevoir des interfaces d’utilisateur plus réaliste et familiers aux utilisateurs.

  • Le Flat design :

Le Flat design, le monde est flat est un concept avec un style minimaliste. Aucun effet de profondeur, pas d’ombre portée aux alentours, aucun reflet. Pourtant, il apparaît plus moderne, et correspond mieux à l’utilisation des écrans. Certains pensent qu’il manque quelque chose : un côté ludique de boutons en relief pour donner plus de plaisir lorsqu’on appuie dessus !

L’exemple plus concret du skeumorphisme n’est autre que chez iPhone avec les icônes de l’ios 6. Et par la suite, iPhone s’est tourné vers le Flat design avec les icônes de  l’ios 7.

Le Néomorphisme dans une application mobile

L’effet de néomorphism se construit comme suit :

  • Rectangle arrondi : tout commence par le traçage simplifié d’un rectangle à corners arrondis. Ce rectangle arrondi contiendra les informations désirées.
  • Couleur blanche : ce rectangle est colorié en blanc et s’y ajoute suffisamment d’ombre pour ressortir un détachement de lueur.
  • Création d’une lueur : la lueur s’obtient en jouant sur l’intensité de l’ombre : une sombre et une claire. C’est une technique imitant l’existence d’une lumière qui projette des rayons lumineux dans le coin (en haut à gauche) de l’écran. Avec un bon ajustement, l’élément de design se change d’apparence comme si c’était un objet plus réel et lumineux.
  • Flutter : c’est l’outil qui permet d’intégrer le néomorphism dans une application mobile. Comme d’autres framwork, Flutter la création d’un effet d’ombre, deux règles sont à appliquer : Les ombres sont  d’une couleur plus sombre que l’arrière-plan ; et les lumières d’un ton plus clair que celui de l’arrière-plan.

L’enjeu du Néomorphisme

Le Néomorphisme apporte un nouveau paramètre, qui n’existait pas ni dans le Skeumorphisme ni dans le Flat design : l’épaisseur ! En effet, les icônes deviennent plus épaisses. Le problème : ils se ressemblent tous à un tel point que certains utilisateurs ont des difficultés à hiérarchiser les icônes. Les daltoniens par exemple, ne sont pas capables d’utiliser cette nouvelle interface.

Pourtant les faiblesses du Néomorphisme pourraient être rectifiées avec du Flat design, et l’utilisateur n’aurait plus ce sentiment de monotonie !