Le flat design est un style graphique d’interface qui représente les éléments à l’écran par des aplats de couleur, des formes simples et une typographie nette, sans ombre portée, relief, dégradé ni texture imitant la matière.
En français, on parle aussi de design plat. Le style s’est construit en réaction au skeuomorphisme, qui imite l’apparence d’objets physiques : cuir, papier, boutons en relief. Dans une interface plate, la hiérarchie visuelle ne repose plus sur l’illusion de profondeur. Elle passe par la couleur, la taille des éléments, l’espacement et la graisse des caractères.
Ses composantes habituelles sont une palette restreinte et contrastée, des icônes réduites à des pictogrammes, une grille régulière, de larges espaces vides et des boutons en aplat. Les formes simples, souvent vectorielles, se redimensionnent sans perte, ce qui facilite le responsive web design.
Le flat design se distingue du skeuomorphisme, son opposé, et du minimalisme. Le minimalisme réduit le nombre d’éléments affichés, alors que le flat design porte sur leur rendu : une interface plate peut être chargée, une interface minimaliste peut garder des ombres. Une variante, souvent appelée flat 2.0 ou design semi-plat, réintroduit de légères ombres et des contrastes pour signaler les éléments cliquables. Le terme s’emploie en conception d’interfaces web et mobiles, de jeux d’icônes et de chartes graphiques numériques.
Le débat sur le flat design est souvent esthétique. Selon nous, il est d’abord fonctionnel. En retirant ombres et reliefs, on retire aussi des indices qui signalent qu’un élément est cliquable. Nielsen Norman Group a mesuré cet effet dans une étude par suivi du regard (Kate Moran, « Flat UI Elements Attract Less Attention and Cause Uncertainty », 2017). Neuf pages ont été déclinées en deux versions et testées par 71 participants. Pour trouver l’élément visé, les versions aux indices faibles ont demandé 22 % de temps en plus et 25 % de fixations en plus.
L’auteure précise dans un article de réponse publié la même année que l’adversaire n’est pas le style plat, mais l’absence d’indices visuels. Dans l’étude, trois paires de pages sur neuf ne montraient pas d’écart : des pages peu denses, à la mise en page classique, avec des cibles saillantes et très contrastées. Notre lecture : le flat design fonctionne quand l’interface est simple et que les éléments d’action restent nettement signalés.
Les règles WCAG 2.1 du W3C fixent, au niveau AA, des seuils de contraste qui s’appliquent pleinement aux interfaces plates. Le critère 1.4.3 demande un rapport d’au moins 4,5 pour 1 pour le texte courant et 3 pour 1 pour les grands caractères. Le critère 1.4.11 demande 3 pour 1 pour les informations visuelles qui identifient un composant d’interface et ses états. Le W3C précise qu’un bouton n’a pas besoin de bordure visible si son texte ou son icône suffit à l’identifier. L’aplat est donc compatible avec l’accessibilité du site web, à condition de soigner les contrastes et les états de focus.
Nous recommandons le style plat pour les pages simples, les sites vitrines et les applications aux parcours courts et répétés, où l’utilisateur apprend vite l’interface. Nous conseillons une approche semi-plate pour les interfaces denses : catalogues étendus, outils métiers, tableaux de données. Le choix relève de l’UX design autant que de la charte : il se tranche sur les tâches des utilisateurs, pas sur la tendance du moment.
Gratuit, le modèle Word de cahier des charges site internet d’Advalians structure vos besoins et vos critères, pour comparer les agences à armes égales.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Le skeuomorphisme imite des objets physiques, avec textures, ombres et reliefs, alors que le flat design les supprime au profit d’aplats et de formes simples. Le premier rassure par la ressemblance avec le réel. Le second mise sur la lisibilité et la cohérence.
Entre les deux, le design semi-plat garde des aplats mais rétablit de légères ombres sur les éléments cliquables. Pour trancher, listez les actions clés de vos pages et vérifiez qu’elles restent identifiables sans explication.
Rétablissez par la couleur et la forme les indices que le relief apportait.
Faites ensuite valider le repérage des actions par quelques utilisateurs.
Mesurez le temps et le taux de réussite sur des tâches de repérage : trouver tel bouton, ouvrir tel menu, accéder à tel contenu. Comparez deux versions si vous hésitez entre un rendu plat et semi-plat, par un A/B testing ou un test modéré.
Complétez par une carte de chaleur des clics : des clics répétés sur un élément non cliquable signalent un indice trompeur. Contrôlez enfin chaque couleur de texte et de composant avec un calculateur de contraste.
Pas en soi, mais il en crée facilement. Le risque principal vient des contrastes faibles : texte gris clair, boutons pastel, contours fins. Les règles WCAG 2.1 du W3C demandent, au niveau AA, au moins 4,5 pour 1 pour le texte courant et 3 pour 1 pour les éléments qui identifient un composant d’interface.
Un bouton n’a pas besoin de bordure si son texte suffit à le reconnaître. Vérifiez aussi que l’état de focus reste visible au clavier sur chaque élément interactif.
Oui si vos pages sont simples et vos parcours courts : le style plat allège l’interface et se décline bien sur tous les écrans. Préférez une approche semi-plate si vos pages sont denses, si vos visiteurs viennent rarement ou si vos actions clés sont nombreuses.
Critère de décision : faites repérer les actions principales d’une maquette par cinq personnes extérieures au projet. Si l’une d’elles hésite, renforcez les indices visuels avant de figer la charte. Ce repère est indicatif.
Modèles, grilles et guides prêts à l’emploi pour vos projets marketing et communication.
Longtemps perçu comme le département des « belles images » ou des dépenses..
