Accéder au contenu principal

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

Posts les plus consultés de ce blog

S’appuyer sur l’IA pour structurer une carte mentale

L’irruption aujourd'hui de l’intelligence artificielle dans de nombreux domaines surprend, inquiète et pose diverses questions. Nous allons découvrir dans cet article comment s’aider de l’intelligence artificielle pour structurer le plan d’une carte mentale par logiciel tout en étant conscient des risques que cela suppose pour notre capacité à penser par nous-mêmes! La montée spectaculaire de l’IA Depuis l’automne dernier, les intelligences artificielles génératives suscitent l’attention et les débats. Celles-ci utilisent des contenus existants pour apprendre à en créer de nouveaux.  Ces contenus peuvent être des images, du texte mais aussi du son ou même des vidéos. La plus connue aujourd’hui est Chat GPT. Google annonce déjà pour cette année le lancement d’une offre concurrente . Qu’est-ce que Chat GPT? Développé par l’entreprise OpenAI, ChatGPT est un “outil conversationnel basé sur une intelligence artificielle”. C’est à dire qu’il est capable d’échanger avec vous sous forme d...

Pourquoi ChatGPT devient aussi un outil visuel

ChatGPT , initialement conçu comme un outil purement textuel, évolue à présent pour devenir un outil visuel polyvalent. Grâce à des intégrations récentes et de nouvelles fonctionnalités, ChatGPT est désormais capable de voir, d'analyser et même de créer des images! L'intégration de Dall-E pour la génération d'images En octobre 2023, OpenAI a franchi une étape majeure en lançant la version bêta ouverte de ChatGPT DALL-E 3. Cette mise à jour permet aux utilisateurs de transformer des textes en images sans quitter l'interface de ChatGPT . Par exemple, l'image qui illustre ce billet de blog, en haut de cette page, a été générée en demandant à ChatGPT de "dessiner une sketchnote sur ChatGPT comme outil visuel". ChatGPT a désormais des yeux! OpenAI a ajouté une fonction qui permet aux utilisateurs de télécharger des images et de poser des questions basées sur celles-ci. Cette fonction a des applications surprenantes, allant de la génération de recettes...

Carte conceptuelle et carte heuristique

Cliquer sur la carte pour accéder à une version haute définition Au moment où la carte conceptuelle refait de plus en plus parler d'elle, comme en témoigne la prochaine parution du CD Cartes mentales et conceptuelles à l’école primaire et au collège , j'aimerais partager une réflexion sur les différences et les points communs entre la carte heuristique et la carte conceptuelle. La carte conceptuelle apparaît sur le devant de la scène dans les années 1970, pratiquement en même temps que le mind mapping.  Elle a comme théoricien principal le chercheur Joseph Novak . La carte heuristique, quant à elle, s'appuie sur les travaux de l'auteur, formateur et entrepreneur britannique Tony Buzan . Ces deux techniques, comme nous pouvons le voir ci-dessus, partagent de nombreux points communs mais il ne faut pas les confondre. Personnellement, j'utilise la carte conceptuelle lorsque je veux formaliser des connaissances, remettre les concepts en ordre afin d'êt...