Le flat design est un style de design servant à concevoir graphiquement des interfaces (logiciel, application mobile, interface utilisateur, site web…) Il trouve son origine dans le graphisme suisse des années 50, plus connu sous le nom de “Style international”. Simplicité et efficacité sont les termes principaux qui le caractérisent en grande partie. En privilégiant un graphisme minimaliste, épuré, coloré et moderne, ce style graphique met l’accent sur la fonctionnalité, la lisibilité et l’efficacité du message ainsi délivré. 

De nombreux designers connus ont contribué, par leurs travaux, à la popularité de cette charte graphique. A telle point qu’elle ne peut finalement pas se réduire à une simple tendance du moment, très en vogue. S’inscrivant par là-même dans l’histoire du design graphique d’interface,dont elle puise ses principes et ses règles, voyons quelle est sa véritable origine ?

Qu’est-ce que le Flat design ?

Le design plat est un style graphique bidimensionnel (à 2 dimensions). 

Nous inspirons librement de la définition du Flat Design par Usabilis

Axé sur le minimalisme et par opposition à un design réaliste et détaillé, le flat design, quant à lui, porte davantage sur le contenu, les couleurs et la typographie. Plutôt que de se concentrer sur les dégradés, les ombres portées et les textures, ce design plat insiste davantage sur la fonctionnalité ou la manière la plus simple et la plus efficace possible de signifier l’utilité pratique de chaque élément de l’interface qui la compose.

A l’évidence, c’est au cours de ces trois quatre dernières années que le Web design, au travers de ces diverses conceptions graphiques, est devenu véritablement plat. Cette tendance a donc vu le jour par opposition au design plus riche et au skeuomorphisme, deux styles graphiques d’interfaces utilisés dès le début des années 2000 et principalement par IOS 6. Pionnier en la matière, ce dernier système d’exploitation dédié aux smartphones d’Apple consistait essentiellement en des conceptions réalistes reproduisant le monde réel.

 

Voici ce qu’on en disait en 2014 : une vidéo qui nous ramène bien loin en arrière !

Une interface flat avec Windows Phone de Microsoft (“Modern UI”)  et iOS 7 de Apple

L’interface du Windows Phone de Microsoft (“Modern UI”) est précurseur du flat design.

couleur interface metro

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

 

On associe souvent l’origine de la tendance flat design est à la sortie de iOS 7 d’Apple, en 2013. Il est vrai que la société Apple a créé la surprise en lançant une version flat de son OS, alors que ses utilisateurs étaient habitués au skeuomorphisme. Mais c’est bien l’interface Modern UI de Microsoft qui est à l’origine de cette tendance. 

04 flat design avec iOS 7 768x437 1

IOS 7 d’Apple, premier pas de la marque à la pomme vers le flat design.

icones smartphone flat design skeuomorphisme

Comparaison d’une interface de type skeuomorphique avec une interface de type flat design

 

Flat design mode ou tendance passagère 

https://www.slideshare.net/cabaroc/flat-design-mode-ou-tendance-passagere 

 

03 bauhaus precurseur flat design

À l’instar de cette école de design, le flat design s’efforce de rendre l’esthétique avant tout fonctionnelle afin de :

  • sublimer le contenu des interfaces 
  • leur redonner davantage de lisibilité, quel que soit le type de support

Sans compter que la renaissance du Bauhaus, de 1920 à 1960, a permis d’asseoir les principes et les règles élémentaires et pratiques du flat design. L’idée directrice de ce mouvement consistant à faire beaucoup avec peu : « Less is more » à contribué à l’évolution du design moderne. Ce dernier reprenant à son compte la conception d’un design graphique axé essentiellement sur l’intemporalité, le fonctionnalisme et l’intensité de la forme. De la sorte toute interface pouvant devenir pour le plus grand nombre, à la fois esthétique, fonctionnelle et simple d’utilisation. 

Quant à la typographie propre au flat design, il semblerait qu’elle tire également son origine du style suisse : Aka International Typographic Style – style dominant la scène du design dans les années 50 et très populaire avec la création de la célèbre police Helvetica.


Évolutions des logos vers le flat Design

2018 MA UX 014

Evolution du logo Google vers le flat design

11 evolution logo Apple flat design

Evolution du logo Apple vers le flat design 

12 evolution logo Instagram flat design 768x288 1

Evolution du logo Instagram vers le flat design 

13 evolution logo Twitter flat design 768x336 1

Evolution du logo Twitter vers le flat design 

14 evolution logo Starbuck flat design

Evolution du logo Starbuck Coffee vers le flat design 

15 evolution logo Pepsi flat design 768x462 1

Evolution du logo Pepsi vers le flat design 

Lire aussi :

Le Material Design, le Design selon Google

La typographie dans le flat design

La typographie est un travail artistique qui permet de diffuser un message sous la forme d’un style graphique personnalisé. Un design plat demande à ce que la typographie soit la plus simple et épurée possible. Pour cela, il faudra sélectionner votre police d’écriture en se basant sur sa lisibilité et sa simplicité.

La typographie est issue d’une composition de texte à partir de caractères mobiles et un procédé d’impression contenant des formes imprimantes en relief.

Les différentes formes de typographies sont caractérisées par des familles de polices d’écritures (symboles, caractères spéciaux, lettres avec empattements, etc…). Elles délivrent un ressenti différent, en fonction de leurs utilisations.

Il est indispensable de choisir la famille sans-serif si vous souhaitez afficher un mot ou le nom d’une marque le plus en accord avec le flat design.

Pour trouver votre police d’écriture, vous pouvez utiliser Google fonts qui permet de sélectionner les familles de polices (serif, sans-serif, scripts, etc..). Cela vous permettra de rechercher et visualiser le nom de votre marque avec une variété de styles différents.

Capture décran 2022 02 23 à 21.19.10

Si vous choisissez une police d’écriture pour une activité professionnelle, prenez quelques minutes pour vous informer sur les conditions relatives à son utilisation dans la publicité.

Dans l’univers du flat design, les polices d’écriture sans empattement (sans-serif) sont à prioriser. Elles permettent de distinguer naturellement les caractères et de lire facilement un texte.

Vous pouvez également faire le choix de dessiner une typographie personnalisée et sur-mesure. Dans ce cas-là, les outils à utiliser seront des logiciels de graphisme vectoriels comme Illustrator. Ils permettent de créer des logos vectoriels, et des illustrations poussées en flat design.

Voir la page de notre agence digitale

Voir création site à Lausanne