Les différents styles artistiques en User Interface

Introduction

Bien que la user interface n'est pas en soit une discipline "artistique", elle n'en reste pas moins un métier créatif.

Plongeons ensemble à la découverte des principaux courants artistiques qui ont inspiré le design d'applications et de Design systems connus de tous !

‍

Apple et le Skeuomorphism

Le skeuomorphism (ou skeuomorphisme) imite les objets du monde réel, en utilisant des textures, des ombres et des dégradés afin de donner de la profondeur et du réalisme aux interfaces.

Ce style de design a d’abord été implémenté dans les premiers modèles d'ordinateurs et de smartphones, afin de rendre la navigation plus claire et de permettre aux utilisateurs de se repérer facilement. Le premier iPhone, sorti en 2007, en est un parfait exemple. Les applications et leurs icônes ressemblent autant que possible aux objets physiques qu’elles remplacent.

‍

‍

Instagram, par exemple, est représenté par un appareil photo vintage avec beaucoup de détails. L’enregistreur ressemble à un micro avec une texture imitant du métal brillant. L’application “Notes” a un fond jaune à lignes qui ressemble à un véritable bloc-note. La fonction de chacune de ces applications est claire et l’utilisateur peut facilement s’y retrouver.

Depuis l’apparition des styles minimalistes, le skeuomorphism a perdu en popularité. En effet, ce style de design est particulièrement chronophage et ses nombreux détails sont peu adaptés aux petits formats.

‍

Le Flat Design, “Less is More”

Le flat design est un style de conception d'interface utilisateur minimaliste qui met l'accent sur la simplicité et offre une expérience utilisateur épurée. Il est caractérisé par un grand espace ouvert et des lignes nettes. On y retrouve des formes géométriques simples et des couleurs vives.

Ce style de design a été rendu populaire dans les années 2010, notamment grâce à la sortie d’iOS 7 ou au Material Design de Google. C’était un changement considérable par rapport au skeuomorphisme utilisé précédemment. Le flat design garantit un chargement de la page plus rapide et facilite le responsive. Les icônes sont simples et transmettent les messages plus facilement que des images détaillées. Les typographies n’ont pas d’empattements et sont donc plus lisibles. C’est par exemple le cas d’Helvetica, qu’Apple a choisi d’utiliser pour ses iPhones, ou la Roboto dans Android.

‍

‍

Avec le flat design, on revient aux bases du design tel qu’il a été pensé dans les années 30 avec le mouvement du Bauhaus : “Less is More”. Les interfaces utilisant le flat design sont fonctionnelles et se concentrent sur l’UX.

Cependant, en éliminant les textures sur les éléments, il devient difficile d’anticiper la manière dont vont interagir ces éléments. Il peut par exemple être difficile de reconnaître un bouton. Le flat design créé également une sorte de lassitude, de monotonie d’un site à l’autre.

‍

Le Neumorphism, l’association du Skeuomorphism et du Flat Design

Le neumorphism (ou néomorphisme en français) est un style utilisé en design d’interface, apparu en 2020 dans une publication Dribbble du designer Alexander Plyuto. Inspiré par le flat design et les interfaces minimalistes, le néomorphisme joue avec les couleurs, les ombres et les textures afin de donner un aspect 3D plus réaliste aux interfaces numériques.

Il s’agit en quelque sorte d’une version moderne du skeuomorphism, dont le but était également de reproduire des éléments du monde physique. Son nom, inventé par Jason Kelly, est d’ailleurs un mot-valise composé de “néo” (nouveau) et de “skeuomorphism”. Le neumorphism est cependant plus moderne et minimaliste que son prédécesseur et a pour objectif de simplifier la navigation.

‍

‍

On retrouve souvent des couleurs pastels et monochromes, des ombres subtiles, des bords arrondis et de faibles contrastes. Cela donne l’impression que les éléments ressortent de l’arrière plan. En neumorphism, on utilise également de nombreux espaces blancs ou gris, qui permettent de faire respirer les interfaces. On obtient une sensation d’élégance et de légèreté.

‍

Le Glassmorphism, un style futuriste et épuré

Le glassmorphism (ou glassmorphisme) est un style de design d’interface populaire qui se caractérise par un effet de verre givré, des éléments transparents et des arrières-plans floutés.

En utilisant des couleurs vives en arrière-plan, ce style moderne et épuré créé un contraste et donne de la profondeur aux interfaces. Cela crée un effet 3D et donne une impression de légèreté. Le glassmorphism permet également de mettre en avant le contenu et d’améliorer la lisibilité, en créant une hiérarchie visuelle claire.

‍

‍

Ce terme a été inventé et popularisé par le designer Michał Malewicz dans les années 2020 mais le glassmorphism était utilisé auparavant, notamment par Apple. On retrouve en effet déjà des effets de verre et des jeux de transparences dès la mise à jour iOS 7, sortie en 2013. Depuis, cette tendance a également été adoptée par Microsoft et fait partie intégrante des interfaces macOS Big Sur utilisées par Apple en 2020.

C’est un style élégant et versatile qui donnera un aspect futuriste et sophistiqué à vos interfaces.

‍

L'originalité impactante avec le Neobrutalism

Le neobrutalism (ou néo-brutalisme) est une tendance design contemporaine qui associe le brutalisme à des éléments modernes. Il met l'accent sur l'utilisabilité et le contenu.

Mais qu’est-ce que le brutalisme ? Il s’agit d’un courant architectural développé au milieu du XXe siècle qui se caractérise par des bâtiments bruts, sans ornements et entièrement fonctionnels. L’important n’est pas l’esthétique mais l’utilisabilité.

Adopté par de nombreux sites web en 2023, la popularité de ce style de design d’interface a récemment explosé. Le neobrutalism remet en question les normes du design. Bien distinct des styles vus précédemment, il permet aux sites de se démarquer grâce à un aspect moderne, brut et audacieux. De plus, il permet une meilleure accessibilité et contribue à améliorer l’expérience utilisateur.

‍

‍

Le néo-brutalisme se caractérise par :

• L’utilisation de formes géométriques asymétriques (rectangles, étoiles, polygones, etc.)
• Des couleurs vives avec des contrastes importants
• Des typographies originales, larges avec des formes géométriques brutes et un travail sur l’espacement entre les lettres
• Des ombres noires brutes
• Des lignes épaisses pour séparer les différents éléments

Ces éléments facilitent la lisibilité de la page pour les utilisateurs et leur laisse un souvenir marquant du site.

‍

À la croisée des styles : l’exemple de l’Apple Vision Pro

Le design d’interface est en constante évolution. Les styles se réinventent au fil des années afin de gagner en simplicité, en clarté et en modernité tout en restant esthétiques et attrayants pour les utilisateurs.

Les designers n’hésitent pas à innover en intégrant plusieurs styles différents dans leurs interfaces. C’est notamment le cas pour l’Apple Vision Pro, le célèbre casque de réalité augmentée et virtuelle d’Apple, dont les interfaces s’inspirent aussi bien du glassmorphism que du neumorphism.

Ces styles permettent d’intégrer de façon fluide et moderne des interfaces numériques dans le monde réel et s’adaptent parfaitement au contexte de l’Apple Vision Pro.

En design d’interface, les styles ne cessent de se démarquer les uns des autres pour s’adapter à chaque situation et la créativité semble inépuisable !

‍

‍

‍

‍