Flat Design

Le flat design est le standard en vigueur depuis un certain temps maintenant, et pour de bonnes raisons : c’est une esthétique sobre, moderne et surtout, c’est un style qui permet de faire passer les messages rapidement. Le tout, en étant clair et épuré. En regardant un design créé de cette manière, il est facile de penser que ce n’est pas si dur à réaliser et qu’on pourrait faire tout aussi bien soi-même, sans effort ou compétence particulière.

Mais ce n’est pas du tout le cas. Cette tendance a une très longue histoire, et il faut connaître tout un tas de choses pour pouvoir réaliser un design plat de bonne qualité.

Definition

C’est un style de design graphique en deux dimensions, c’est-à-dire “plat”. Il n’y a pas d’ombres en flat design, pas d’effets de lumière, pas d’images en 3D. Au lieu de cela, le flat design met la 2D à l’honneur de façon à communiquer clairement et rapidement tel ou tel message.


Capture d’écran de “Paper Mario”. Très bon exemple de flVia Nintendo

Un flat design efficace est simple par nature. Cela signifie que ces designs-là comprennent souvent des éléments “invisibles”, que l’on ne remarque même pas. Les utilisateurs interagissent avec ces éléments, sans jamais vraiment les voir, même lorsqu’ils font partie du visuel. Voici quelques exemples :

  • L’utilisation d’un panier pour que les utilisateurs sachent où cliquer une fois leurs courses terminées. Certes, l’icône est visible, mais les utilisateurs savent très bien quoi faire, même si elle n’est pas accompagnée d’un call-to-action (“cliquez ici”)
  • La décomposition des informations sur une page à l’aide de différentes couleurs de fond et en donnant à chaque paragraphe un espace à lui seul
  • L’utilisation de combinaisons de couleurs spécifiques pour que les utilisateurs sachent au premier coup d’oeil quelles images vont avec quels textes. Par exemple, on met généralement les informations urgentes/importantes en rouge et en gras

En conception de site web, où tout est pensé pour guider les utilisateurs instinctivement sur la plateforme, le flat design s’est détaché de la tendance qui l’a précédée, celle du skeuomorphisme. Si les designs skeuomorphiques reposent sur des indices visuels et audios qui indiquent aux utilisateurs comment faire fonctionner un objet en créant une analogie visuelle avec l’objet réel, le flat design prend l’utilisateur par la main et le guide pas à pas, lui proposant ainsi une expérience immersive et intuitive.

L’histoire

Le flat design est certes apparu en réponse aux designs skeuomorphiques, mais ce n’est pas tout. Comme beaucoup d’autres mouvements avant lui, le design trouve son origine dans plusieurs tendances, notamment le style suisse, le modernisme et le mouvement du Bauhaus.

Esthétiquement parlant, le flat design s’est largement inspiré du style suisse, également connu sous le nom de Style typographique international. Le style suisse est audacieux, percutant, et fait fi de tout superflu. Ci-dessous quelques uns des éléments que le flat design a emprunté au style suisse :

  • Contrastes forts
  • Minimalisme
  • Utilisation des couleurs et des contrastes pour créer de la profondeur
  • Utilisation efficace de l’espace
  • Utilisation de symboles plutôt que d’images réalistes, pour communiquer les concepts

Le modernisme renverse les règles artistiques traditionnelles pour créer une image qui correspond strictement à la vision de l’artiste.

Le flat design est né lorsque le skeuomorphisme a perdu de son utilité. Les designs skeuomorphiques représentent les objets de manière réaliste pour que les utilisateurs fassent la comparaison entre l’objet réel et le design pour comprendre le fonctionnement d’un appareil. Le skeuomorphisme comprend également des éléments audios et tactiles dans le même but. Par exemple : le son d’un appareil photo qui se ferme lorsqu’on prend une photo avec son téléphone, ou encore le fait que l’on puisse surligner du texte avec son doigt.

Les designs skeuomorphiques aident les utilisateurs à naviguer dans le monde numérique en faisant référence au monde analogue. Lorsque vous voulez jeter un fichier de votre ordinateur, vous le faites glisser sur l’icône “poubelle”. C’est du skeuomorphisme. Si vous voulez passez un coup de fil, vous appuyez sur une icône qui ressemble au combiné d’un vieux téléphone, bien que de nombreuses personnes n’aient même jamais utilisé l’un de ces vieux téléphones, justement. Nous n’avons pour ainsi dire plus besoin de faire référence à un objet analogique pour comprendre à quoi sert chaque icône. C’est ainsi que le skeuomorphisme a disparu et que le flat design est né.

Le flat design à l’ère numérique


Le design plat de Windows 8 a été créé pour faciliter l’intégration du système opératoire. Via Microsoft

Les mouvements mentionnés ci-dessus ont pavé le chemin vers le flat design, mais ce sont Internet et l’esprit de compétition entre entreprises qui ont démocratisé ce style graphique.

Avant, l’esthétique générale d’Apple était elle aussi skeuomorphique, et c’est ce qui a poussé Microsoft à aller dans une autre direction.

Ce n’était ensuite qu’une question de temps avant que les autres suivent l’exemple et abandonnent à leur tour le skeuomorphisme, comme cela a été le cas d’Instagram, par exemple. Enfin, Apple a suivi en 2013 avec iOS 7, et dans les années 2010, le flat design s’était finalement imposé partout.

side by side comparison of skeuomorphic iPhone apps and their flat design counterparts

De nos jours, les designs flats sont tellement ancrés dans notre quotidien qu’on ne les remarque pour ainsi dire plus. Et c’est justement tout l’intérêt. La tendance est allée au-delà des seules interfaces et s’est étendue aux illustrations, à la publicité, aux logos et à bien d’autres choses encore. Le flat design est intrinsèquement lié au minimalisme, ce qui facilite les choses à bien des niveaux. Regardez les designs que vous aimez, et vous verrez qu’ils constituent probablement tous des versions différentes de flat design, chacun à leur manière.

Du flat design au semi-flat design

Le design “semi-flat”, également connu sous le nom de “flat 2.0”, est un design essentiellement flat auquel on a apporté quelques touches de 3D, comme les ombres par exemple. C’est un bon compromis entre un design 100% flat et la 3D. Il permet de conserver les avantages du flat design, tout en faisant ressortir certains éléments d’une composition.

Le semi-flat design est intéressant notamment pour contourner les inconvénients du flat design, par exemple celui de devoir se retenir d’ajouter des informations et donc de prendre le risque que les utilisateurs ne comprennent pas bien à quoi sert telle ou telle icône, juste pour garder un design parfaitement flat.

D’un point de vue moins fonctionnel, le semi-flat design ajoute de l’intérêt visuel à l’image. Le flat design traditionnel est efficace, mais le semi-flat design permet aux graphistes de créer un effet similaire sans pour autant sacrifier toutes les subtilités et originalités qui différencient un design d’un autre, ou permettent d’inclure d’autres tendances graphiques (comme celle des dégradés de couleurs par exemple).

Quand utiliser le flat design

Cette infographie explique de manière directe et en semi-flat design, comment utiliser le produit en question. Design réalisé par LittleFox.

Les pages d’aide et les tutoriels d’applis sont de parfaits emplacements pour les designs flat.

  • Les infographies, dont le but est de présenter des données complexes de manière digeste
  • Les manuels d’utilisation, pour expliquer un processus étape par étape
  • Les publicités, où le public n’est pas allé chercher l’information lui-même et n’a clairement pas envie d’un message surchargé d’éléments
  • Les designs de logos et de branding, puisque les concepts ne sont pas forcément connus du public et doivent être communiqués immédiatement et avec efficacité
  • Les icônes d’applications mobiles et autres designs trop petits pour contenir beaucoup de détails
  • Les jeux sur mobiles, où les utilisateurs cherchent à faire passer le temps et n’ont pas besoin d’un design complexe inutilement
  • Les interfaces sur lesquelles l’utilisateur doit savoir immédiatement ce qu’il doit faire ensuite. Si votre site est dense et contient beaucoup de pages, le flat design n’est peut-être pas idéal pour vous.

Si ces catégories sont les plus courantes, le flat design ne s’y limite pas.

Réaliser un design flat, étape par étape

Vous vous êtes décidé pour un design flat, mais n’êtes pas certain de savoir où commencer. Voici un petit guide étape par étape pour vous aider :

Ne pas confondre flat et plat

Même avec seulement quelques éléments, un design minimaliste peut être très beau.
Les designs flat sont par essence minimalistes. Mais ce n’est pas pour autant qu’ils doivent être plats et ennuyeux ! Généralement, les designs minimalistes sont faciles à lire et ont un look sobre et moderne à la fois. Mais cela ne les empêche pas d’être fun et dynamique ! Tout dépend de ce que le graphiste en fait.

Pour que le design soit un succès, il faut faire bon usage de l’espace vide de sorte à guider le regard du public vers les éléments les plus importants. Cela permettra de construire une esthétique de qualité tout en donnant du sens au design, et éviterera ainsi qu’il soit justement trop “plat”.

Couleur, contexte et contraste

Opter pour un aspect flat signifie que vous perdrez certains des éléments clés que l’on retrouve habituellement dans les designs, comme les ombres autour des boutons pour indiquer qu’on peut cliquer dessus, ou encore des images réalistes qui permettent de s’identifier. Avec cette boîte à outil limitée, il faut faire preuve de créativité en jouant sur les couleurs, les contrastes et les échelles.

Cela veut dire utiliser des couleurs davantage saturées pour mettre l’accent sur certains mots et donner aux utilisateurs suffisamment d’informations pour qu’ils puissent comprendre comment utiliser certaines fonctions. Par exemple, placer une petite flèche à droite et à gauche de l’écran pour que les utilisateurs sachent qu’il est possible de faire défiler l’écran horizontalement. Les choix esthétiques délibérés comme celui-ci permettent aux utilisateurs de comprendre comment utiliser votre design en l’absence d’éléments skeuomorphiques.