Flat design et semi-flat design : tout ce qu’il faut savoir

il y a 4 ans
15 min de lecture

Logos, sites internet, couvertures de livre & bien plus encore…

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.

A semi-flat illustration — Design réalisé par felipe_charria

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é. C’est là qu’intervient ce petit guide, pour vous aider à comprendre les mécanismes psychologiques qui ont donné naissance au flat design, et comment s’en servir au mieux dans vos projets. Voici quelques astuces que vous aurez envie de garder sous le coude, parce que même si le flat design n’est plus tout à fait un nouveau phénomène, nous sommes pas près de le voir partir aux oubliettes !

Contenus masquer

1. Besoin de revoir votre branding pour y intégrer du flat design ?

1.1. Faites appel à un de nos graphistes dès aujourd’hui !

2. Services de design

3. Support Client

4. Ressources

5. Entreprise

Le flat design, c’est quoi ?
—

Tout est dans le titre : 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.

screenshot from “Paper Mario” video game showing 2D Mario and a bunch of Toads against a 3D background — Regardez la différence entre flat design et images 3D dans cette capture d’écran de “Paper Mario”. Via 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

Educational app design in flat style — Design réalisé par astuaris

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 du flat design

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 style Bauhaus n’est pas particulièrement élaboré et ne contient pas de détails. C’est un style fonctionnel, tout comme le flat design. Via Bauhaus Dessau

modernist image comprised of multiple colored shapes

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

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.

Un design skeuomorphique réalisé par DORARPOL™

Un flat design réalisé par BryanMaxim

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

screenshot of the Windows 8 start screen — 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, en faisant évoluer les interfaces de Windows Media Player et de Zune, dès le début des années 2000. Microsoft s’était déjà fait connaître comme précurseur de la tendance flat avant même de publier Windows 8.

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 — Les designs skeuomorphiques répondent à la question “qu’est-ce que c’est et à quoi ça sert”. Via Shopify

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.

Illustrated app advertisement — Les éléments de design semi-flat (ombres légères, jeux de lumière) donnent un petit look 3D à ce design. Design réalisé par iGreg

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
—

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

Optez pour du flat design à chaque fois que vous voulez communiquer un message de manière efficace. Les messages comme “cliquez ici”, “faites glisser”, ou encore “voici comment ce produit fonctionne” sont les plus adaptés à ce type de design. Voici quelques exemples courants :

Red app design tutorial featuring flat illustration — Les pages d’aide et les tutoriels d’applis sont de parfaits emplacements pour les designs flat. Designs réalisés par 9zArt

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. Mais si vous essayez de créer le “Uber” de votre domaine d’activité, foncez

Si ces catégories sont les plus courantes, le flat design ne s’y limite bien sûr pas. C’est un style graphique à part entière et rien ne vous empêche d’en tirer un profit maximum, juste parce que ça vous plaît !

Quand ne pas utiliser le flat design
—

blue monster character — Imaginez tous les détails qu’il faudrait sacrifier pour concevoir ce personnage en flat design ! Designs réalisés par Yak!

Le flat design n’est pas à conseiller si le réalisme est important pour votre entreprise, ou que les détails sont importants pour votre message. Voici quelques exemples :

Les couvertures de livres, qui sont généralement réalistes étant donné que les auteurs proposent déjà à leur public des histoires et des personnages fictifs. Les livres sur l’entrepreneuriat ou le développement personnel, en revanche, peuvent tout à fait opter pour du flat design
Les t-shirts et articles vestimentaires en couleur, pour lesquels les consommateurs voudront un design détaillé représentatif de leur style
Les mascottes et personnages, pour lesquels il est souvent nécessaire d’inclure des détails, de sorte à donner de la personnalité aux designs
Le packaging de produit, qui repose souvent sur des designs élaborés et qui sautent aux yeux, de façon à se démarquer des concurrents
Les images sociales et les sites web du service public – ce sont des emplacements sur lesquels vous voulez mettre l’accent sur le côté humain et la diversité

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 confondez pas flat et plat

A flat design meditation app — Même avec seulement quelques éléments, un design minimaliste peut être très beau. Design réalisé par Typelab D

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 votre design soit un succès, faites un bon usage de l’espace vide de sorte à guider le regard de votre public vers les éléments les plus importants. Cela vous permettra de construire une esthétique de qualité tout en donnant du sens à votre design, et vous éviterez ainsi qu’il soit justement trop “plat”.

Couleur, contexte et contraste sont vos amis

black background with image of a woman in geometric shapes — Chaque couleur de cette image a été minutieusement choisie parce que sans ombre, les couleurs et les contrastes sont les seuls éléments disponibles pour créer de la profondeur. Design réalisé par iving

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.

Web design in flat style — Couleur, contexte et contraste guident les utilisateurs. Design réalisé par Fenixo

Donnez vie à votre design flat grâce aux animations

A flat design animation — Design réalisé par Maryia Dziadziulia

Le flat design et les animations sont faits pour s’entendre, tout simplement parce que les designs très détaillés demandent énormément de travail pour être animés de manière convaincante (comme par exemple redessiner les personnages dans plusieurs positions). Tandis que les designs flat sont par nature simples et minimalistes, ce qui facilitent le processus.

Bien que vous puissiez utiliser cette technique pour raconter une histoire ou pour ajouter un peu de piment à votre logo, animer des éléments de flat design peut être une bonne façon de compenser pour les détails que vous avez perdu en enlevant les ombres et les textures. Animez les éléments que vous voulez mettre en avant pour montrer aux utilisateurs où porter leur attention.

Choisissez une police adaptée

Parce que vous avez moins d’éléments à disposition, tous les choix que vous faites sont encore plus importants que d’habitude. Et la typographie est clairement l’un de ces éléments à ne pas sous-estimer.

text “Real Party Kids” in pastel party favor-themed font — Essayez de donner un aspect flat à votre police de caractères pour voir si le rendu est convaincant. Jouez avec les couleurs et l’échelle pour adapter le résultat final. Logo réalisé par minimalexa

Lorsque vous devrez choisir une police pour votre design, prenez exemple sur la tendance flat : faites simple et laissez de côté les éléments décoratifs inutiles comme les empattements. Si certaines polices fantaisistes fonctionnent bien en flat design, elles sont tout de même généralement difficiles à intégrer. Telegrafico et Junction font partie des rares exemples de polices fantaisistes qui se marient néanmoins bien avec le flat design.

Conclusion
—

De nos jours, la plupart des gens verront votre design sur un écran plat, donc au lieu de prétendre que l’image n’est pas ce qu’elle est, adoptez vous aussi la tendance flat. On peut néanmoins remettre en question le fait qu’il s’agisse d’une tendance, vu que le flat design est très populaire depuis une dizaine d’années déjà.

Si vous avez peur que ce style rende votre design trop similaire aux autres, faites attention à ne pas choisir des options génériques. Contactez un graphiste dont le portfolio est unique et correspond à vos besoins, et travaillez directement avec lui/elle pour créer un design sur mesure.

Besoin de revoir votre branding pour y intégrer du flat design ?

Faites appel à un de nos graphistes dès aujourd’hui !

C’est parti !

Auteur

Lindsay Kramer

Lindsay is a copy and content writer who loves all things creepy, beachy, and cheesy. If something somehow hits all three, all the better. Aside from writing, her interests include making art, reading tarot cards, and exploring new places. Learn more about Lindsay’s writing services at lindsaykramercopywriting.com

Des commentaires ?

Sauvegarder mon nom, email et site internet dans le navigateur de recherche pour mes prochains commentaires.

Poster un commentaire

https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcxohMUAAAAADPJmvd1o1JwTzx_sWo4pSlsHD7q&co=aHR0cHM6Ly85OWRlc2lnbnMuZnI6NDQz&hl=fr&v=5qcenVbrhOy8zihcc2aHOWD4&size=invisible&cb=prlnnxcbdfm5

Besoin de conseils en marketing et en design graphique ?

Abonnez-vous à notre newsletter et recevez des conseils créatifs, tendances graphiques, et réductions exclusives. Vous pourrez vous désabonner à tout moment.Je suis un designer freelance

S’inscrire

En remplissant ce formulaire, vous acceptez nos conditions d’utilisation et notre politique de confidentialité. Ce site est protégé par reCAPTCHA. La Politique de Confidentialité et les Conditions d’Utilisation de Google s’appliquent.

Rejoindre la communauté

par Tamara Milakovic

Concours de design actifs

Jeter un oeil aux derniers concours lancés sur 99designs!

Obtenez un design

Designers, consultez les projets

Services de design

Support Client

Questions Fréquentes

Ressources

Entreprise

Français
Anglais

57%

Accueil

Services de design

Obtenez un design

Support Client

Ressources

design by Terbitbasuki

Besoin de conseils en marketing et en design graphique ?

Abonnez-vous à notre newsletter et recevez des conseils créatifs, tendances graphiques, et réductions exclusives. Vous pourrez vous désabonner à tout moment.

https://www.google.com/recaptcha/api2/anchor?ar=1&k=6LcxohMUAAAAADPJmvd1o1JwTzx_sWo4pSlsHD7q&co=aHR0cHM6Ly85OWRlc2lnbnMuZnI6NDQz&hl=fr&v=5qcenVbrhOy8zihcc2aHOWD4&size=invisible&cb=kvaqkgx8632mS’inscrireJe suis un designer freelance

Flat design et semi-flat design : tout ce qu’il faut savoir