Le téléchargement de votre SlideShare est en cours. ×
0
Le flat design

Image : Dribble.com

Le flat design version 1.0

2013 Philippe Boukobza
Image : appartmenttherapy

Le flat design un style graphique qui est issu du design d'interfaces
utilisateur. Il est utili...
Un exemple de page web en flat design : Fondation Abbé Pierre
Le flat design version 1.0

2013 Philippe Boukobza
Les principes du flat design

image : lorenzoverzini.com

Le Flat Design se caractérise par une approche visuelle minimali...
Image : http://www.fhoke.com

La typographie s’impose comme un élément graphique à part entière. Les
caractères de polices...
Le flat design version 1.0

2013 Philippe Boukobza
Microsoft, Apple, Google et Facebook

Image : Microsoft Windows 8

Microsoft avait depuis plusieurs années lancé des reche...
Image : http://www.wired.com

Un des grands moments dans la montée en puissance du Flat Design a été
la sortie en 2013 d’ ...
Les pictogrammes de Facebook et le logo de Google sont passés au flat
design.
Le flat design version 1.0

2013 Philippe Bo...
Mind Mapping : XMind 3.4

Avec le lancement fin 2013 de la version 3.4 de son logiciel libre de mind
mapping, Xmind adopte...
Un style graphique qui cherche à favoriser la clarté, la lisibilité et l’impact
visuel à la fois est très intéressant pour...
Exemple 1 : mindmap

Logiciel utilisé : Mindjet 14 / Police d’écriture : Lato / Pictogrammes :Flat icons / Palette de coul...
Exemple 2 : carte conceptuelle

Logiciel utilisé : XMind 3.4 / Police d’écriture : Segoe WP Sembold / Pictogrammes :divers...
Les avantages du flat design

 Élégance et clarté
 Pas de superflu visuel et une ergonomie optimale
 Adaptable facileme...
Les inconvénients du flat design

 Le design peut sembler simpliste et non travaillé
 Risque d’un rendu criard (couleurs...
Conclusions

Image: http://www.microsoft.com/en-us/news/stories/design/

Le flat design n'est pas LA solution aux designs ...
Ressources gratuites
Palettes de couleurs
Le blog Betterment propose 24 palettes de couleurs Flat Design
http://www.dtelep...
Contact
Philippe Boukobza

Consultant Formateur spécialisé en Innovation, Management et Visual
Mapping.
philippe@ibermappi...
Prochain SlideShare
Chargement dans... 5
×

Le Flat Design

5,145

Published on

Un dossier sur le flat design et son utilisation pour le web design, le mind mapping et les cartes conceptuelles.

Published in: Design
0 commentaires
6 mentions J'aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Total des vues
5,145
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
5
Actions
Partages
0
Téléchargements
117
Commentaires
0
J'aime
6
Ajouts 0
No embeds

No notes for slide

Transcript of "Le Flat Design"

  1. 1. Le flat design Image : Dribble.com Le flat design version 1.0 2013 Philippe Boukobza
  2. 2. Image : appartmenttherapy Le flat design un style graphique qui est issu du design d'interfaces utilisateur. Il est utilisé aussi bien pour les téléphones portables que pour les tablettes, les consoles de jeux ou encore les pages web. Le flat design version 1.0 2013 Philippe Boukobza
  3. 3. Un exemple de page web en flat design : Fondation Abbé Pierre Le flat design version 1.0 2013 Philippe Boukobza
  4. 4. Les principes du flat design image : lorenzoverzini.com Le Flat Design se caractérise par une approche visuelle minimaliste. Les effets de dégradé, 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 et audacieuses sur fond contrasté. Le flat design version 1.0 2013 Philippe Boukobza
  5. 5. Image : http://www.fhoke.com 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. Le flat design version 1.0 2013 Philippe Boukobza
  6. 6. Le flat design version 1.0 2013 Philippe Boukobza
  7. 7. Microsoft, Apple, Google et Facebook Image : Microsoft Windows 8 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. Le flat design version 1.0 2013 Philippe Boukobza
  8. 8. Image : http://www.wired.com Un des grands moments dans la montée en puissance du Flat Design a été la sortie en 2013 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. Le flat design version 1.0 2013 Philippe Boukobza
  9. 9. Les pictogrammes de Facebook et le logo de Google sont passés au flat design. Le flat design version 1.0 2013 Philippe Boukobza
  10. 10. Mind Mapping : XMind 3.4 Avec le lancement fin 2013 de la version 3.4 de son logiciel libre de mind mapping, Xmind adopte un nouveau logo et de nouveaux pictogrammes dans le style flat design. Le flat design version 1.0 2013 Philippe Boukobza
  11. 11. 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 mind maps, de cartes conceptuelles et de différents supports de communication visuels Le flat design version 1.0 2013 Philippe Boukobza
  12. 12. Exemple 1 : mindmap Logiciel utilisé : Mindjet 14 / Police d’écriture : Lato / Pictogrammes :Flat icons / Palette de couleurs : Le flat design version 1.0 2013 Philippe Boukobza
  13. 13. Exemple 2 : carte conceptuelle Logiciel utilisé : XMind 3.4 / Police d’écriture : Segoe WP Sembold / Pictogrammes :divers / Palette de couleurs : Le flat design version 1.0 2013 Philippe Boukobza
  14. 14. Les avantages du flat design  Élégance et clarté  Pas de superflu visuel et une ergonomie optimale  Adaptable facilement quelque soit la thématique Image: http://flatcartoon.com/  Conception graphique rapide. Pas besoin de se concentrer sur des textures ou des effets Le flat design version 1.0 2013 Philippe Boukobza
  15. 15. Les inconvénients du flat design  Le design peut sembler simpliste et non travaillé  Risque d’un rendu criard (couleurs)  Risque de monotonie et de standardisation excessive de l’aspect visuel Le flat design version 1.0 2013 Philippe Boukobza Image: http://flatcartoon.com/
  16. 16. Conclusions Image: http://www.microsoft.com/en-us/news/stories/design/ Le flat design n'est pas LA solution aux designs de vos sites webs, maps ou présentations mais une solution parmi d'autres. 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é. Le flat design version 1.0 2013 Philippe Boukobza
  17. 17. Ressources gratuites Palettes de couleurs Le blog Betterment propose 24 palettes de couleurs Flat Design http://www.dtelepathy.com/blog/inspiration/24-flat-designs-with-compelling-color-palettes Polices d’écriture Le blog Honkiat.com propose 40 polices d’écriture flat design gratuites http://www.hongkiat.com/blog/flat-design-free-fonts/ Pictogrammes Un set gratuit de pictogrammes flat sur le site Iconshock http://www.iconshock.com/icon_sets/flat-icons/ Le flat design version 1.0 2013 Philippe Boukobza
  18. 18. Contact Philippe Boukobza Consultant Formateur spécialisé en Innovation, Management et Visual Mapping. philippe@ibermapping.es www.ibermapping.es Le flat design version 1.0 2013 Philippe Boukobza
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×