Article : Le Neumorphism va-t-il apparaitre sur nos applications mobile ?

Le Neumorphism va-t-il apparaitre sur nos applications mobile ?

// Temps de lecture +/- 4 min

La nouvelle tendance de design d’interface (UI) va-t-elle détrôner le Flat design ou encore le material design de Google ? Les débats sont ouverts !

Qu’est-ce que le Neumorphism Design?

Le neumorphism ( ou neumorphisme ) est un technique design de conception d’interface utilisateur de skeuomorphisme (technique visant à imiter l’apparence d’un objet réel lors de la conception d’un objet virtuel). Cette nouvelle tendance fait le buzz depuis quelques semaines sur les réseaux créatifs comme dribbble et Behance. Buzz notamment initié par le post viral de Skeuomorph  qui a gagné près de 5000 likes :

exemple d'interface utilisateur design nemorphism

Pour résumé, le Neumorphism vise à créer une combinaison d’éléments flat design couplé aux techniques du skeuomorphisme, permettant de rendre les éléments d’interface utilisateur plus doux et plus lisibles. L’objectif de cette utilisation réside à attirer davantage l’attention de l’utilisateur. Le point central du Neumorphism est l’effet des ombres appliquées à une forme, donnant cette sensation de surface illuminée.
Pour cela, le designer joue avec les ombres (claires et foncées) internes et externes afin de donner vie à des éléments de design. Prenons l’exemple d’un bouton : Lorsqu’on appuie dessus, les ombres vont progressivement s’inverser afin de créer un effet d’enfoncement.
conception d'une application par Aravind
Design par Aravind

Quelle évolution pour le neumorphisme en 2020 ?

L’UI design n’échappe pas aux effets de mode et connait un cycle de vie des tendances. L’œil humain se lasse vite des choses dont il s’habitue. En passant entre 3 et 5 heures devant son petit écran, on peut comprendre qu’un renouveau soit nécessaire. En 2020, le neumorphism s’apparente au skeuomorphism 2.0, ou l’évolution logique du skeumorphism avec certains codes du Flat design.

L’intégration de ce design UI dans une interface mobile peut être novateur et apparaître comme une forte identité. Mais attention aux changements radicaux qui pourraient perturber la lisibilité de certains utilisateurs, trop habitués au Flat design. De ce fait, tout changement de design doit se faire avec parcimonie.

Comment créer un style de neumorphism ?

L’outil de prédilection pour tester les différents styles d’une application reste Adobe XD. En effet, cet outil vous permet de créer facilement des effets de Neumorphism, comme le montre ce tutoriel vidéo, réalisé par le youtubeur Dansky

Pour les amateurs de l’HTML / CSS, voire même pour les plus novices d’entre vous qui souhaitent laisser parler leur créativité, rendez-vous sur https://neumorphism.io/ . Cette landing page a été spécialement conçue pour créer des formes neumorphism et exporter le CSS. Voyez plutôt :

ADLS
CONSEILS

Comment l’intégrer dans une application mobile ?

Pour construire un effet de neumorphism, Le point de départ le plus simple est de construire un rectangle arrondi qui contiendra des informations. Ce rectangle doit être blanc avec suffisamment d’ombre pour que le blanc se détache comme une lueur. Pour faire apparaitre cette lueur, il suffit de jouer avec les ombres, une sombre et une claire : comme s’il y avait une lumière projetant des rayons dans le coin supérieur gauche de l’écran. On rend réel et lumineux un élément de design.
Ce jeu d’ombre externe peut être reproduit à l’intérieur de l’objet pour un style différent.
logo flutter en nemorphism design
L’outil de prédilection pour intégrer le neumorphism dans une appli mobile est Flutter. Il prend en charge toutes les parties intégrantes de Neumorphic UI de façon simple et efficaces, dont notamment les « Shadows » et les « Gradients » .
Le principe technique et fondamental c’est qu’à l’inverse de ce qu’on pourrait penser, les ombres ne sont pas noires et les lumières ne sont pas blanches. En effet, l’arrière-plan et l’environnement visuel doit être pris en compte. Sur Flutter ou bien d’autres framwork, la couleur est d’ailleurs la première chose à corriger quand on souhaite créer un effet d’ombre. Il faut donc appliquer ces deux règles :

  • Les ombres sont d’un ton plus sombre que l’arrière-plan
  • Les lumières sont un ton plus clair que l’arrière-plan

Lire l’article : Comment créer une application mobile avec flutter ?

Le neumorphisme ce n’est pas nouveau

comment créer une forme en style nemorphism

La conception design du premier Iphone, commercialisé en 2007, promettait une interface liée au skeuomorphisme, afin de faciliter la compréhension d’iOS. À cette époque, on pouvait traduire cela par l’apparition d’icônes et de boutons dans un style réaliste et novateur.

Un peu plus tard, Apple se converti au célèbre flat design et arbore un design d’interface plus épuré et visuellement plus simple. Aujourd’hui le flat design reste une norme de qualité, de simplicité et d’élégance dans le design UI.

Le mot de la fin

Le Neumorphism, révolution du design d’interface d’application doit toutefois être utilisé avec intelligence. En effet, l’objectif de cette innovation étant de captiver l’utilisateur en lui offrant un nouveau visuel épuré. L’idée de la transition semble la plus adéquate et nous allons probablement voir une évolution du Flat design vers le Neumorphism. De ce fait, ce deux styles UI seront indéniablement couplés dans des versions intermédiaires afin d’offrir une transition douce pour les utilisateurs.
Le neumorphism est probablement une tendance éphémère, mais pour combien de temps ? Personnellement, chez Adls conseils, nous accordons beaucoup d’importance à ce design d’interface qui peut potentiellement révolutionner l’UI dans les mois à venir. Visuellement, on adore !
Le logo Adls conseils en neumorphism design

Crédits :

  • Image de l’article : si google faisait une refonte en neumorphism par Arabi
  • Style Application : Aravind
  • Logo Adls conseils : Alex

Rédigé par Alex Defontenay linkedin auteur




Inscrivez-vous à la Newsletter