Aller directement au contenu

Qu’est-ce que le Flat Design ou Design plat ?

23/01/2018
0

Flat design définition Usabilis
Le flat design, ou design plat, est un style graphique minimaliste utilisé dans la conception d’interfaces utilisateurs (UI). Le flat design est devenu très présent dans les interfaces web et mobile ces dernières années. Dans les diverses définitions du flat design, certains termes reviennent souvent : simple, épuré, coloré et moderne. Mais selon de nombreux utilisateurs et experts UX, le flat design manquerait d’affordance, de personnalité et d’utilisabilité. Le débat est ouvert !

En quoi consiste le Flat design ?

Data storage concept illustration

Le flat design (design plat en français), est un design graphique axé sur le minimalisme. Par opposition à un design réaliste et détaillé, 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. Au lieu de lui expliquer l’utilité d’un élément de l’interface, elle est signifiée de la manière la plus simple possible. On souvent rapproché la “philosophie du design plat de la célèbre phrase de l’architecte Ludwig Mies van der Rohe : « Less is More. »

Quelle est l’origine du flat design ?

D’ailleurs, il y a des similarités entre l’histoire de l’architecture et le flat Design. Le mouvement Renaissance, en particulier, a été un retour au Classique. Des formes géométriques très simples remplaçaient soudain des façades aux ornements très complexes (art flamboyant, beaucoup plus skeuomorphique). Cependant, le courant artistique majeur qui semble avoir inspiré ce design contemporain est l’école Bauhaus dans les années 30.

Le Bauhaus, puissante source d’inspiration

Comme le Bauhaus, le Flat Design met l’esthétique au service de la fonctionnalité. L’essence de la fonction prime. Il s’agit de sublimer le contenu de l’interface et de le rendre lisible quel que soit le support.

Bauhaus précurseur flat design

Le Bauhaus, dans son obsession du minimalisme et du géométrisme, est l’une des sources d’inspiration du flat design

La renaissance du Bauhaus (1920-1960) a aussi servi de base pour asseoir les principes du flat design. Le studio design de Microsoft revisite les courants architecturaux et artistiques des années 1920. Avec le mouvement du Bauhaus, l’accent était mis sur l’idée de créer des produits en quantité industrielle, mais durables et abordables par tous. L’objectif était de faire beaucoup avec peu (“less is more”). Le Bauhaus s’inscrit en cela en rupture avec les mouvements artistiques du siècle précédent (19ème siècle) considérés comme “élitistes” et très attachés à la représentation du réel.  Le style “Bauhaus” a eu une influence certaine sur l’évolution du design moderne qui a repris l’idée d’un design intemporel, où fonctionnalisme et intensité de la forme étaient liés. Une interface pouvait être à la fois simple, esthétique, fonctionnelle et accessible au plus grand nombre.

La “révolution” de l’interface de l’iOS 7 par Apple

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. C’est un moment clé de l’avènement du flat design, mais pas fondateur (voir plus loin).

Flat design avec iOS 7

On associe souvent l’avènement du flat design avec l’iOS 7 d’Apple, à tort !

Le moyen le plus explicite de comprendre la “philosophie” du flat design est de comparer une interface de type skeuomorphique et une interface de type flat design :

Skeuomorphisme de l’interface iOS 6 versus flat design de l’interface iOS 7

Skeuomorphisme de l’interface iOS 6 versus flat design de l’interface iOS 7

“Le contenu est l’interface” : Modern UI, le flat design selon Microsoft

En réalité, avant le passage de l’iOS 6 à l’iOS 7 qui marque l’adoption du flat design par Apple, l’interface du Windows Phone de Microsoft (“Modern UI”) avait été lancée et avait fait grand bruit. C’est assurément le premier exemple de Flat Design au sens où on l’entend maintenant. L’objectif de Microsoft était de se distinguer sur le marché de la téléphonie mobile, concevoir un design qui s’adapte aussi bien au mobile qu’à tout autre appareil et résolution. La formule de Sam Moreau, directeur du design de Windows, est alors très en phase avec les principes du Bauhaus : “Le contenu est l’interface”. Avec un tel changement de paradigme graphique, progressivement, de multiples entreprises ont emboîté le pas, contribuant à généraliser le Flat Design, dont Google et bien d’autres. Certain iront ensuite jusqu’à développer leur propre approche du design plat (Material Design de Google par exemple).

couleur interface metro

Interface Metro de Windows 8, à l’origine du flat Design

Icônes et boutons en flat design pour une meilleure lisibilité du message

Les icônes flat design ont une importance décisive dans l’interface.

Boutons flat design

Les icônes et boutons dans le plus pur style “flat design”

D’une part, les textures complexes, reliefs et effets de brillance disparaissent pour laisser place à une couleur vive et unique (aplat). D’autre part, les pictogrammes et symboles se substituent aux représentations réalistes. Le but est d’alléger le poids de l’interface tout en donnant des repères à l’utilisateur. Les formes carrées, rectangulaires et les contrastes permettent d’identifier rapidement tel élément, indépendamment de la luminosité extérieure. Ainsi, les icônes en flat design rendent le message clair et lisible pour l’utilisateur. En effet, une icône réussie est une icône qui indique très simplement sa fonction à l’utilisateur et/ou qui l’appelle à agir. Quant à savoir quelles icônes, entre skeuomorphisme et design plat, sont à privilégier, les avis diffèrent.

Soit dit en passant, en matière de design d’icônes, signalons ce sondage – Flat Design vs Skeuomorphisme – aux résultats très intéressants et très éloquents sur la part d’indécision des utilisateurs et concepteur quant à leur préférence pour un style graphique ou un autre. L’enseignement à en tirer est l’impératif de ne pas avoir d’a priori sur le choix d’un style graphique !

La spécificité de la typographie et des logos dans le flat Design

En termes de typographie, le flat design qui s’en est également inspiré, rappelle le fonctionnalisme du design suisse (ou style international). Ce graphisme suisse était clairement visible dans l’interface de Windows 8. Apple a de son côté opté pour la police Helvetica en concevant ses iPhones.

Style international suisse brockamnn beethoven Brahms Strauss-Poster

Style international suisse Brockamnn musica viva poster green

Josef Müller-Brockmann est le père fondateur du “Design Suisse” dit aussi “Design international”, qui inspira le Flat Design, en particulier dans le traitement de la typographie

Jusqu’à une date encore récente (début des années 2010), les typographies système étaient la seule possibilité en dehors des images… jusqu’à l’apparition des web fonts. Cette nouvelle liberté a certainement contribué au développement du design plat. Ainsi, dans les interfaces en flat design, la typographie est véritablement un élément graphique à part entière. Les caractères de grande taille et d’influence géométrique sont privilégiés pour participer à une meilleure architecture de l’information.

Évolutions des logos vers le flat Design

Evolutio logo Google flat design

Une évolution du logo Google vers le flat design qui semble rétrospectivement “naturelle et évidente”, preuve s’il en est de l’empreinte de ce style de design dans notre perception du design pour ceux qui partagent cette analyse

Evolution logo Apple flat design

L’irrépressible évolution vers un traitement en Design plat se voit jusque dans le logo de la célèbre firme à la pomme qui ne fait pas exception

Evolution logo Instagram flat design

Logo Instagram flat designQuant au logo du réseau social Instagram, il opère un très net passage d’un traitement dans le plus pur style du skeuomorphisme vers le flat design

Evolution logo Twitter flat design

Le logo de Twitter est intéressant car le traitement de l’oiseau était initialement en Design plat, il s’est ensuite sophistiqué en devenant plus “réaliste” pour ensuite épouser cette tendance graphique

Evolution logo Starbuck flat design

Pourtant déjà plat à l’origine, le logo de la célèbre société Starbuck connaît une simplification graphique très nette avec la version actuelle en flat design. A noter que cette évolution est parallèle à la notoriété de la marque qui peut s’affranchir d’informations présentes initialement !

Evolution logo Pepsi flat design

Comme bien d’autres, le logo de Pepsi a connu la même évolution vers le flat design, avec des séquences vers d’autres styles graphique. Voir la version de 1973 – 1990, déjà plate.

Comment reconnaître un “vrai” Flat Design ?

Initialement, les interfaces en design plat présentaient, entre autres, les caractéristiques suivantes :

  • Perte de l’analogie avec des objets du monde réel au profit des métaphores
  • Formes géométriques inspirées du Bauhaus et de l’abstraction suisse.
  • Effets de transparence, sans dégradés ni jeux d’ombres.
  • Absence de relief et de profondeur dans les icônes choisies.

Critères authentiques flat design

Image : Pxhere
D’après toi, mon interface, c’est du “ vrai flat design”?

Pourquoi choisir le Design plat ?

Le choix du design plat s’expliquerait notamment par une évolution des connaissances et des habitudes des utilisateurs/clients. Autrefois, l’utilisateur avait besoin d’éléments inspirés d’objets réels pour comprendre l’utilité d’un produit, d’une application ou d’un système. Maintenant, son expérience du numérique et ses habitudes digitales lui permettent de se diriger dans une interface minimale.

Le flat design présenterait alors certains atouts :

  • D’un point de vue esthétique, il serait plus agréable.
  • L’interface web gagnerait en clarté et en confort de navigation.
  • Le temps de chargement du contenu serait optimisé.
  • Il aurait l’avantage d’être intemporel.
  • Le responsive design serait plus efficace.
  • L’évolution de la charte graphique serait plus souple.

Quels sont les dangers du flat Design ?

Néanmoins, avec le style Flat Design, certaines limites ont été soulignées. En particulier, il y a le risque de perdre l’utilisateur. Or le design d’une interface doit toujours être conçu en pensant au futur utilisateur. Ainsi, voici quelques-uns des reproches qui lui sont faits :

  • Il bouleverserait les repères des utilisateurs.
  • L’aspect épuré entraînerait une perte d’affordance.
  • Les éléments d’interactions seraient moins perceptibles.
  • Il privilégierait l’UI au détriment de l’UX.
  • Ce type de graphisme lasserait sur la durée (perte d’identité visuelle, uniformité).
  • Le design plat serait inadapté pour certains univers/projets.

La spécialiste de l’UX Kate Meyer, issue du Nielsen Norman Group, aborde dans cette vidéo le flat design appliqué aux interfaces utilisateur et la raison pour laquelle il réduit selon elle l’efficacité des utilisateurs.

Comment réussir une interface UX en flat design ?

Avec le design plat, l’UX designer doit être vigilant sur certains points en particulier :

  • Bien sélectionner la palette de couleurs.
  • Réfléchir au design des boutons et des icônes.
  • Être attentif aux typographies qui guideront l’utilisateur.
  • Mettre en valeur les éléments cliquables.
  • Utiliser une mise en page avec des éléments familiers.

Dans la vidéo ci-dessous, « Making Flat Design usable », Kate Meyer donne 5 pistes pour renforcer l’utilisabilité de l’interface réalisées en design plat :

Le Flat design, simple mode passagère, ou tendance durable ?

Depuis sa toute première utilisation, les débats se multiplient : est-ce une mode ou l’avenir du design ? Pour ce qui est de l’effet de mode, de nombreuses marques ont adopté le design plat, ne serait-ce que dans leurs logos comme on l’a vu plus haut, au risque de rompre avec leur image. Cependant, la tendance du Material design, initiée par Google, tend à insuffler davantage de mouvement et de “réalité” dans le design minimaliste. Bien d’autres tendances émergent tout en restant confidentielles pour certaines comme le “butalism”.

Flat design versus material design

Flat design VS Material design

Flat design long shadowImage creativemarket.com

Long Shadow, une “déclinaison” du flat design “pur et dur ?

Entre Material design et Flat design, la tendance graphique dite “Long Shadow” (ombre longue/grande en français) est un concept graphique également lancé par Google. L’objectif est de mettre de la profondeur, du volume. Les boutons, icônes, logos etc., en particulier, seraient plus vivants, réalistes, visibles et mémorisables pour l’utilisateur. Et dans le même temps, on garderait un rendu final minimaliste.

On ne va pas trancher ce débat qui reste ouvert. Il va de soit que le style graphique est déterminé avant tout par l’usage de l’interface. Opposer l’UI et l’UX est une erreur qui revient pourtant souvent, même si certains principes, dans la mise en oeuvre,  doivent parfois être envisagés pour une collaboration harmonieuse !

Alors, faut-il concevoir des interfaces flat design pour faire moderne ?

Choisir flat design par mimétisme

Image Pxhere

Faut-il choisir le flat design pour ressembler aux interfaces des acteurs majeurs de votre secteur ?

L’erreur courante consiste à se laisser influencer par ce que l’on considère, sans aucune étude préalable, comme la “norme” du moment. Combien de concepteurs souhaitent réaliser une appli ou un site Web “à la manière de…” au prétexte que cet acteur domine son marché ou a rencontré le succès. On ne saurait trop vous dissuader d’opter pour le flat design par mimétisme.

Le flat design est mieux adapté à certains projets, moins bien à d’autres. Il convient de s’interroger à la fois sur les utilisateurs cibles et sur les objectifs de l’entreprise (ou de la marque), avant de réfléchir au meilleur design d’interface (web, mobile, borne interactive etc.). Outre une étude ethnographique et un bon benchmark UX,  les tests utilisateurs vous aideront à identifier la plupart problèmes d’ergonomie, tels que le manque d’affordance d’un bouton en flat design par exemple. Une étude préalable s’impose avant de se lancer vers telle ou telle tendance graphique du moment.

Quelques sources

On vous recommande cette présentation pleine d’humour pour en finir avec toutes ces platitudes !

Voir aussi :

Conclusion

Influencé par différents courants artistiques et graphiques axés sur le fonctionnalisme, le flat design a envahi le graphisme des interfaces web et mobile ces dernières années. Ses adeptes ont vanté la flexibilité de ce design, la vitesse de chargement et la simplicité d’utilisation. De plus, le flat design correspondrait aux évolutions du web, dont le responsive design. Mais faire minimaliste sans égarer l’utilisateur, c’est compliqué. Ainsi, pour ses détracteurs, trop de flat design nuit à l’identité de l’entreprise/société et à l’expérience de l’utilisateur.

Au-delà de l’aspect épuré qui peut plaire ou déplaire, la perte d’affordance est le principal piège à éviter lors d’un passage au flat design. Entre technologies, habitudes et attentes des utilisateurs, le designer doit trouver le bon équilibre pour optimiser UI et UX. Le Material Design et le Long Shadow pourraient alors être vus comme des moyens d’intégrer des éléments skeuophormes, tout en conservant le principe du minimalisme, base du flat design.

Lire aussi : Concevoir en Flat Design vos interfaces graphiques

Lire aussi :

Voir nos services :