Le Neumorphisme, une tendance prospère ?

avril 2, 2020 0 Par KiLliAn_Le_MoAl
Temps de lecture : 7 minutes

On évoque souvent le design comme quelque chose qui soit ne cesse de changer, soit inutile. Mais le design possède justement tous les avantages contraires. Il ne change pas tout le temps, c’est l’interface utilisateur (UI) et l’expérience utilisateur (UX) qui changent régulièrement. De plus, il rend l’utilisation de produits ou services attractifs qui ne le serait pas si seul le besoin était considéré.

Les clients de chez N26 le seraient-ils si le design était équivalent à celui des banques traditionnelles ?

Du Skeuomorphisme au Neumorphisme en passant par le Flat Design.

Maquette par Filip Legierski (Dribble)

Le design des produits digitaux en terme d’interface ont beaucoup évolué ses dernières années en passant par toi ou quatre vagues successifs jusqu’à aujourd’hui.

Le Skeuomorphisme.

Le skeuomorphisme est cette tendance qui vise à reproduire dans le design des produits en version digital mais en gardant tout l’aspect des produits réels. Cette technique permet à l’utilisateur de comprendre l’action à effectuer face à l’interface utilisateur. Il rend l’interface homme machine rassurante et ludique.

Application GarageBand

Avant, le skeuomorphisme était très utile et apprécié dans l’univers du design, puis, il a été utilisé partout, tout le temps et à mauvais escient, tant qu’il en est devenu le design le plus détesté. 

Popularisé par Apple, le design skeuomorphique était d’abord un style graphique conçu pour des utilisateurs novices. 

Interface d’iBooks sur iPad

Le créateur d’Apple, Steve Jobs a même été l’un des premiers à utiliser cette technique afin de faciliter l’utilisation des nouvelles technologies au monde. Les technologies devenaient plus intuitives, ludiques et pratiques.

Très populaire à l’origine du web et jusque dans les années 2010, le skeuomorphisme été remplacé petit à petit par le Flat Design.

Le Flat design, au antipodes du Skeuomorphisme. 

Le flat design, est un style graphique minimaliste utilisé dans la conception d’interfaces utilisateurs. 

Par opposition à un design réaliste et détaillé, donc le skeuomorphisme, le flat design élimine les éléments jugés décoratifs ou superflus (détails, ombres, effet 3D…). L’interface en flat design est donc centrée sur le contenu, la fonctionnalité. En fait, le design plat fait appel à l’imaginaire de l’utilisateur. 

La tendance flat design est souvent associée à la sortie de iOS 7 d’Apple, en 2013. En effet, cette année-là, Apple a surpris ses utilisateurs, auparavant habitués au skeuomorphisme caractéristique de la marque. 

Skeuomorphisme vs Flat Design

Mais la marque qui à réellement sortie le premier design flat pour le grand public est… Microsoft !

L’interface du Windows Phone de Microsoft (“Modern UI”) avait été lancée et avait fait grand bruit. 

Accueil de Windows 8 et ses tuiles dynamiques

C’est assurément le premier exemple de Flat Design au sens où on l’entend maintenant. 

Le Matériel Design, la patte Google.

Si le Flat Design n’a pas attendu Google pour être inventé, il l’a attendu pour le populariser. Ainsi, Google a créé une version à sa sauce avec le material design.

Évolution du logo de Google

Le Material design est un langage visuel et interactif créé par Google. Mais c’est aussi un guide pour concevoir une interface graphique (Design system). Ce design est « matériel » car il s’inspire d’objets réels, le papier et l’encre ce en quoi, il se distingue du Flat Design. Google a utilisé le Material Design pour unifier le style graphique de ses applications et de ses plateformes. Son interface présente donc l’avantage d’être très adaptée à une utilisation pour tout appareil et toutes résolutions d’affichage. Le Material Design optimiserait l’expérience utilisateur, tout en offrant des ressources aux développeurs et aux concepteurs d’interfaces. Comme pour tout courant graphique, il a ses amateurs et ses détracteurs.

Le Material Design sur une application

Google, qui développe le material design a défini des objectif pour ce type de design :

  • Le material design doit d’être intuitif peut importe l’utilisateur 
  • Il doit aussi être adapté à tous les supports
  • Il se doit être interactif grâce aux animations dynamiques 
  • Ce design doit d’être homogène avec toutes les interfaces 

Le Material Theming, le Material Design 2.0.

Lancer en 2014, le Material Design commençait à se faire vieux et les sites web/applications se ressemblaient le plus en plus. Il était alors nécessaire de le moderniser et de rendre sa personnalisation au web.

Ainsi, en 2018, Google lance la 2ème version du Material Design, nommé le Material Theming.

Le Material Theming de Google avec la police Google Sans

Les principes, en termes d’interface visuelle, restent les mêmes, la firme de Mountain View a décidé d’intégrer davantage de souplesse, de liberté et de possibilité d’innover dans le design et le développement d’applications.

Pour cela, le design évolue avec davantage d’espaces blancs et de transparence, des formes beaucoup plus arrondies, de la barre de recherche aux images des cartes (les blocs où est organisé le contenu) en passant par les boutons et onglets, des icônes très colorées, qui sont une  nouveauté de la version P d’Android, la typographie Google Sans à la place du Roboto pour les en-têtes et la barre de navigation placé en bas de l’application ou flottante ou un site pour une expérience utilisateur améliorer.

Un plus grande choix d’icônes permet aussi une plus grande personnalisation.

Mais côté construction de ce design, Google fournit du « code pré-construit » open source : les Material Components.

Les différences entre le Material Design

En outre, la compagnie met en avant trois sections distinctes sur son site, dont Design (avec des solutions et conseils pour les professionnels du design) et Développement (composants open source et documentation spécifique). En résumé, les actions principales se résument à pouvoir modifier un thème selon ses préférences, l’appliquer aux maquettes et l’utiliser pour coder.

L’objectif principal est d’avoir une interface différente de celle de Google.

La personnalisation du Material Theming

Le Neumorphisme, la nouvelle ère du design ?

Si vous flâner sur des sites tels que Dribble ou Behance, vous n’avais pas pus échapper à la nouvelle tendance du design nommé le Neumorphisme.

L’idée de base du Neumorphisme c’est d’ajouter de la profondeur sans dénaturer les interfaces “flat”. On garde donc des couleurs sobres et on ne cherche pas à reproduire des boutons existant mais on se concentre plutôt sur l’effet de profondeur que l’on peut donner aux boutons “flat”.

Les différents styles de bases de boutons ou cards

C’est presque comme si l’interface avait été formée sous vide.

Si vous voulez tester des éléments du Neumorphisme dans du code ou juste essayer de modeler un élément, ce site (https://neumorphism.io/#55b9f3) vous permettra de vous former un avis.

Le principal avantage de ce style est sa fraîcheur, qui donne une certaine différenciation à votre interface. Elle peut être mélangée avec d’autres styles pour ne pas donner un côté trop « plastique » à vos visuels.

En voici quelques exemples :

Maquette d’application d’alarme (Naina Jaiswal / Behance)
Maquette d’application de température (Zander Ashe / Behance)
Éléments de Neumorphisme

Mais comme toutes nouveautés, il y a encore de nombreux différents à régler.

L’accessibilité du Neumorphisme.

Même si le Neumorphisme peut donner un coup de fraîcheur aux interfaces d’aujourd’hui, il reste encore de nombreux problèmes d’accessibilité à régler car sinon, l’expérience utilisateur s‘en trouve entaché.

Les couleurs, une priorité !

Par exemple, l’utilisation d’un fond sombre ou d’un gris bien foncé. N’espérez même pas pouvoir faire du Neumorphisme sur fond blanc. Pour obtenir un effet décent il faut utiliser des ombres noires ET des ombres blanches. Si votre fond est noir ou blanc, l’une de ces deux ombres ne se verra pas et tout votre design tombe à l’eau ! D’autant plus que l’effet de relief s’accommode très mal des arrières plans autres que les aplats de couleur. Enfin, on est très loin des critères d’accessibilité de base. La raison est simple : les bouton ont globalement la même couleur que le fond.

Mode White vs mode Dark

Si vous vous balader parfois sur des plateformes d’inspiration de design, vous pouvez voir des maquettes d’applications ou de sites web, mais le problème c’est que 95% des démos de neumorphisme que l’on peut voir aujourd’hui présentent de gros problèmes d’accessibilité… 

Le contraste du Neumorphisme, une plaie !

Le Neumorphisme possèdes aussi d’autres inconvénients tels que le manque de contraste entre les éléments et le fond peut causer des problèmes de visibilité. Si vous souhaitez utiliser ce style, il faut bien faire attention à hiérarchiser vos éléments importants, que ce soit avec la typographie, le relief ou le contraste. 

Par exemple, les boutons peuvent être un vrai problème dans le Neumorphisme car les bordures ne sont pas faciles à voir et à se fondre avec l’arrière-plan. Bien que cela fasse partie du charme du neumorphisme, il est également plus difficile à utiliser. Un autre problème est de savoir quoi afficher lorsque le bouton est enfoncé. L’effet actuel peut ne pas être suffisant en soi et peut laisser les utilisateurs se demander quel état est activé ou désactivé.

En voici quelques exemples :

Maquette d’application de smart home (Vadim Marchenko / Dribble)
Composants de Neumorphisme (Drew Andersen / Dribble)
Maquette d’application musicale (Caroline Lima / Behance)

Le Neumorphisme possède donc de nombreux problèmes notamment au niveau de l’accessibilité mais il a le mérite de rendre le design élégant.


Après toute cette présentation, on peut pour le moment établir que le Neumorphisme est plutôt quelque chose qui attire notamment les designers que un projet porté à une interface entière. Mais une chose est sûr, c’est que le Neumorphisme ne sera pas seul à exister pour être généraliser dans les années à venir, il sera connu du grand public lorsqu’il pourra être mélanger à d’autre design et ainsi devenir la tendance à respecter absolument !