Table des matières

Qu’est ce que le flat design ?

Définition

Le flat design, aussi appelé “design plat”, est un style de graphisme caractérisé par son minimalisme. Le flat design repose sur une esthétique sobre, avec des formes simples, des typographies modernes et une composition lisible.

Le design plat est donc caractérisé par une épuration visuelle. Pour ce faire, on supprime tout élément superficiel. Les ombres, les reflets, les effets divers (fumée, brillance, particules, etc.), les détails et la vraisemblance passent à la trappe. Le terme même de “flat” design fait référence à cette absence de volume : il s’appuie uniquement sur des images 2D.

Ce style graphique s’inspire de courants artistiques émergents au XXe siècle. Notamment du mouvement Bauhaus, apparu en Suisse vers 1920.

Le Bauhaus se caractérisait déjà par son minimalisme, ses contrastes importants, son optimisation de l’occupation de l’espace et son utilisation de symboles simplifiés plutôt que d’images vraisemblables.

Le flat design, héritier du skeuomorphisme

Souvent, on associe le flat design à une palette de couleurs vives et unies. Les motifs et les dégradés sont rares.

Le flat design est souvent comparé à son homologue des années 2000, le skeuomorphisme. Celui-ci repose sur des représentations graphiques intuitives. L’idée du skeuomorphisme est d’assimiler la fonction de quelque chose à un visuel approprié par l’imaginaire commun.

Le design plat se distingue du skeuomorphisme par sa simplicité. Là où le skeuomorphisme crée une association entre une fonctionnalité et un visuel connu (qui sert de repère et rassure le consommateur), le design plat se concentre sur l’efficacité de son visuel.

Le design plat joue avec les associations préétablies dans la pensée collective grâce au skeuomorphisme. Son objectif est de simplifier ces informations visuelles afin d’en garder l’essence même.

Le material design et le semi-flat design : cousins du design plat

La popularité du flat design a fait naître des courants graphiques alternatifs. Les deux plus populaires sont le material design et le semi-flat design, souvent confondus avec le design plat.

Le material design est un courant cherchant des compromis entre le flat design et le skeuomorphisme. Le material design se caractérise par une esthétique du juste milieu. Dans l’idéal, il bénéficie de la lisibilité du design plat et de l’intuitivité du skeuomorphisme.

Ce courant est né de protestations à l’encontre du flat design, jugé trop simpliste et plus assez représentatif. 

Le semi-flat design, quant à lui, est une variante du flat design utilisant de la 3D minimaliste pour mettre en valeur certains éléments. Certains y voient une sorte de design plat optimisé, au détriment de la pureté de l’image.

Le semi-flat garde cet aspect très contrasté et coloré du design plat, avec ses formes simples. L’ajout de 3D autorise cependant la création d’images plus complexes. 

L’application du flat design

Le flat design est couramment utilisé dans les interfaces web et mobile, car il est fortement assimilé à une esthétique moderne. Depuis quelques années, le design plat est même standardisé : il est devenu une norme esthétique.

Les marques l’utilisent beaucoup dans leurs logos. On observe, depuis une dizaine d’années, une tendance chez les marques à simplifier et épurer leurs logos. Il participe à moderniser l’image d’une entreprise ou d’un produit numérique. En ce sens, le design plat participe à la communication visuelle des entreprises qui l’utilisent. 

5 bons exemples de flat design

Le logo de Google

Depuis son premier logotype conçu en 1997, Google ne cesse de l’affiner. Au fur et à mesure des années, on observe un maintien de la structure principale : les 6 lettres du nom du moteur de recherche Google, écrites en couleur. Depuis 1999, chaque lettre a gardé la même couleur.

Néanmoins, avec la démocratisation du flat design, on observe une disparition progressive de tous les éléments superflus. D’abord, le point d’exclamation disparaît en 2000. Les ombres disparaissent en 2010. Les volumes disparaissent en 2013.

evolution logo google

En 2015, avec son logo actuel, Google opte pour une simplification de sa typographie : les “o” deviennent des cercles parfaits, le “l” n’est plus qu’une simple barre verticale, etc.

L’évolution du logo de Google démontre une volonté d’épuration de plus en plus flagrante.

Le logo de Twitter

L’exemple de Twitter est intéressant, car son logotype s’est complexifié à l’ère du skeuomorphisme avant de s’épurer à nouveau avec l’avènement du design plat.

À l’origine, le logo de Twitter établi en 1998 représentait déjà un oiseau bleu. On le reconnait par sa forme, car il ne possède aucune ombre, volumes, ni détails dessinant les contours des plumes ou du bec. Seul un point blanc représente l’oeil.

Le logo se complexifie en 2007, avec l’apparition d’ailes et d’une couleur différente sur le ventre de l’oiseau. En 2009, le logo ressemble à un personnage de dessin animé. Les pattes sont d’une couleur différente, le bec aussi, l’œil est rempli d’une pupille avec un reflet et des détails (comme la présence d’un sourcil) s’ajoutent. C’est l’expression d’un skeuomorphisme : le logo ressemble de plus en plus à un véritable oiseau. 

Dès 2010, l’entreprise fait marche arrière, en adoptant d’une année à l’autre un logo extrêmement épuré. Ce n’est plus qu’une silhouette d’oiseau remplie d’une même couleur bleue. Twitter possède toujours un logo basé sur ce modèle.

evolution logo twitter

Le logo de Twitter montre véritablement un clivage dans les standards esthétiques. L’année 2010 est une année charnière de transition entre le skeuomorphisme et le flat design.

Le logo de l’application Mail d’Apple

Le logo de l’application Mail d’Apple est un exemple parfait de transition du skeuomorphisme vers le flat design.

L’ancien logo de l’application Mail d’Apple représentait une enveloppe. Cela avait pour but de rassurer les utilisateurs, de leur indiquer la fonction de l’application (l’échange et le stockage de mails) en représentant un objet universellement connu utilisé pour une fonction similaire.

Ainsi, on associe la fonctionnalité du logo immédiatement à une correspondance épistolaire virtuelle. Il rend l’approche de l’application intuitive aux novices des nouvelles technologies. Un ciel clair entoure l’enveloppe et remplit le cadre du logo.

Aujourd’hui, le logo s’est adapté à la tendance du flat design. L’œil reconnaît toujours une enveloppe dans le logo de l’application Mail d’Apple, alors qu’en soi, il ne représente plus qu’un rectangle avec trois traits de la même couleur que le fond. Celui-ci est devenu uniformément bleu, rappelant le ciel original. 

Modern UI, l’interface utilisateur de Windows

En 2012, Microsoft adopte une nouvelle esthétique pour l’interface utilisateur de son nouveau système d’exploitation : Windows 8. Cette interface, baptisée “Modern UI” ou “Metro”, représente la quintessence du flat design.

design windows 8

La Modern UI présente une interface épurée, composée de carrés et rectangles emboîtés les uns dans les autres. Chacun possède une couleur vive, différente de celle de ses voisins. Le tout semble parfaitement rangé.

Cette interface est un excellent exemple de flat design, car il en ressort une véritable modernisation de l’esthétique. Elle possède aussi un côté pratique, car le compartimentage des applications optimise l’ergonomie de l’interface.

De plus, l’interface peut afficher de nombreuses applications sans perdre l’utilisateur. Les icônes de chacune de ces applications utilisent du flat design. La Modern UI possède donc elle-même un design plat, mais présente des applications qui ont aussi un design plat, ce qui contribue à renforcer ce sentiment de pureté.

Dots, un site web à l’image de ses jeux

Dots est une entreprise de jeux mobiles américaine. Pour ses jeux, Dots utilise le flat design comme principal support de la direction artistique. Notons d’ailleurs que le flat design est tout à fait approprié aux interfaces mobiles, qui ont pleinement bénéficiées de son essor.

Le site web de Dots est à l’image de ses jeux : épuré, contrasté, clair et sobre, il bénéficie d’une grande lisibilité. 

Le site limite aussi ses ressources en adéquation avec les codes du flat design : pas d’animation, pas de détails superflus, tout est très simple. 

Dots site web

Surtout, elle participe à la cohérence de l’ensemble de l’identité visuelle de l’entreprise. L’entreprise applique le flat design partout : dans ses produits, dans l’esthétique de son site et dans la conception de son logo.

Cela lui permet de bâtir une identité visuelle solide, ce qui renforce l’attachement de ses joueurs et contribue à la reconnaître plus facilement. 

En conclusion

Dans cet article, nous avons vu ce qu’était le design plat et présenté 5 exemples concrets de son utilisation. Cela dit, si vous voulez en savoir plus sur le graphisme, vous pouvez consulter notre guide complet sur la conception graphique.