Découvrez le flat design!

Pictogrammes dans le style flat design. Image: Dribble
Le thème du Design sur ce blog n’est pas encore fréquent, mais c'est un sujet que nous traitons dans le niveau 2 des ateliers de Visual Mapping et qui faisait l’objet d’un billet assez récent intitulé « Design Thinking et Carte Heurisitique » . 

Aujourd'hui, nous parlons du "Flat Design", un style graphique qui est issu du design d'interfaces utilisateur et qui concerne aussi bien les téléphones portables que les tablettes, les consoles de jeux, les pages web... 


Un des grands moments dans la montée en puissance du Flat Design a été la sortie cette année d’ iOS7, le nouveau système d'exploitation mobile d’Apple, qui équipe les iPhone, iPad et iPod touch. La palette de couleur et les icônes ont changé, dans le plus pur style flat design. Apple emboitait ainsi le pas à Microsoft, qui, avec Windows 8, faisait figure de porte drapeau de ce mouvement. 



Microsoft avait depuis plusieurs années lancé des recherches pour créer un langage nouveau en design. C'est ainsi qu'est né Metro, précurseur du flat design. Le but était de faciliter la lecture et l'utilisation de son système d'exploitation sur des écrans de petite taille.


Image: Microsoft Design

Les principes du Flat Design

Le Flat Design se caractérise par une approche visuelle minimaliste. Il est aussi un héritier de la fameuse école du Bauhaus et du design suisse. Les effets de dégradé, biseau, motif, texture ou volume sont écartés. 

Les formes simples (éléments graphiques, pictogrammes) sont préférées, avec des espaces vides. Les couleurs sont, le plus souvent, vives sur fond contrasté.

La typographie s’impose comme un élément graphique à part entière. Les caractères de polices« sans serif » sont préférés. Le texte lui-même étant également réduit à l’essentiel avec des caractères de grande taille.

Et le visual mapping ? 

Avec le lancement d'XMind 3.4 en novembre dernier on a pu constater que le nouveau logo d'XMind ainsi que les nouveaux marqueurs relevaient également du Flat Design. 

Un style graphique qui cherche à favoriser la clarté, la lisibilité et l’impact visuelà la fois est très intéressant pour les créateurs de cartes heuristiques, de cartes conceptuelles et de différents supports de communication visuels. 

Dans les exemples ci-dessous, j’ai essayé d’appliquer les principes du flat design avec une carte heuristique puis avec une carte conceptuelle. Enfin nous découvrirons  un extrait de présentation dans le style flat design. 


Le flat design
 Carte heuristique réalisée avec Mindjet MindManager 14 (cliquer pour agrandir)
synesthesie_flat_design
Une carte conceptuelle réalisée avec XMind 3.4 (cliquer pour agrandir) 

 Page d’une présentation élaborée dans le style flat design. Image: Prabhakar Jampa

Le flat design n'est pas LA solution aux designs de vos sites webs, cartes ou présentations mais une solution parmi d'autre. En visual mapping, je le recommanderais particulièrement pour des cartes professionnelles de communication ou de travail quotidien où la clarté et la lisibilité vont primer sur l'originalité. Cela ne veut pas dire que l'on ne peut pas faire preuve de créativité en utilisant le style flat design mais que la priorité va être la facilité de lecture du contenu. 

La démarche qui anime le flat design a pour but de simplifier et clarifier l'information pour une meilleure lisibilité et une compréhension rapide. C’est une raison de choix pour s’en inspirer pour la conception de maps et de présentations.


Aller plus loin

Si vous voulez en savoir davantage  sur le flat design, vous trouverez sur Slideshare un dossier que j’ai préparé pour vous avec plus d’exemples et des ressources: polices de caractère flat design, palettes de couleurs et divers exemples. Cliquer ici.

Commentaires