Click here to load reader

Le Flat Design

  • View
    5.051

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Text of Le Flat Design

  • 1. Le flat designImage : Dribble.comLe flat design version 1.02013 Philippe Boukobza

2. Image : appartmenttherapyLe flat design un style graphique qui est issu du design d'interfaces utilisateur. Il est utilis aussi bien pour les tlphones portables que pour les tablettes, les consoles de jeux ou encore les pages web. Le flat design version 1.02013 Philippe Boukobza 3. Un exemple de page web en flat design : Fondation Abb Pierre Le flat design version 1.02013 Philippe Boukobza 4. Les principes du flat designimage : lorenzoverzini.comLe Flat Design se caractrise par une approche visuelle minimaliste. Les effets de dgrad, motif, texture ou volume sont carts. Les formes simples (lments graphiques, pictogrammes) sont prfres, avec des espaces vides. Les couleurs sont, le plus souvent, vives et audacieuses sur fond contrast. Le flat design version 1.02013 Philippe Boukobza 5. Image : http://www.fhoke.comLa typographie simpose comme un lment graphique part entire. Les caractres de polices sans serif sont prfrs. Le texte lui-mme tant galement rduit lessentiel avec des caractres de grande taille. Le flat design version 1.02013 Philippe Boukobza 6. Le flat design version 1.02013 Philippe Boukobza 7. Microsoft, Apple, Google et FacebookImage : Microsoft Windows 8Microsoft avait depuis plusieurs annes lanc des recherches pour crer un langage nouveau en design. C'est ainsi qu'est n Metro, prcurseur du flat design. Le but tait de faciliter la lecture et l'utilisation de son systme d'exploitation sur des crans de petite taille.Le flat design version 1.02013 Philippe Boukobza 8. Image : http://www.wired.comUn des grands moments dans la monte en puissance du Flat Design a t la sortie en 2013 d iOS7, le nouveau systme d'exploitation mobile dApple, qui quipe les iPhone, iPad et iPod touch. La palette de couleur et les icnes ont chang, dans le plus pur style flat design. Le flat design version 1.02013 Philippe Boukobza 9. Les pictogrammes de Facebook et le logo de Google sont passs au flat design. Le flat design version 1.02013 Philippe Boukobza 10. Mind Mapping : XMind 3.4Avec 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.02013 Philippe Boukobza 11. Un style graphique qui cherche favoriser la clart, la lisibilit et limpact visuel la fois est trs intressant pour les crateurs de mind maps, de cartes conceptuelles et de diffrents supports de communication visuelsLe flat design version 1.02013 Philippe Boukobza 12. Exemple 1 : mindmapLogiciel utilis : Mindjet 14 / Police dcriture : Lato / Pictogrammes :Flat icons / Palette de couleurs :Le flat design version 1.02013 Philippe Boukobza 13. Exemple 2 : carte conceptuelleLogiciel utilis : XMind 3.4 / Police dcriture : Segoe WP Sembold / Pictogrammes :divers / Palette de couleurs :Le flat design version 1.02013 Philippe Boukobza 14. Les avantages du flat design lgance et clart Pas de superflu visuel et une ergonomie optimale Adaptable facilement quelque soit la thmatiqueImage: http://flatcartoon.com/ Conception graphique rapide. Pas besoin de se concentrer sur des textures ou des effetsLe flat design version 1.02013 Philippe Boukobza 15. Les inconvnients du flat design Le design peut sembler simpliste et non travaill Risque dun rendu criard (couleurs) Risque de monotonie et de standardisation excessive de laspect visuelLe flat design version 1.02013 Philippe BoukobzaImage: http://flatcartoon.com/ 16. ConclusionsImage: 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 prsentations mais une solution parmi d'autres. En visual mapping, je le recommanderais particulirement 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.02013 Philippe Boukobza 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-palettesPolices dcriture Le blog Honkiat.com propose 40 polices dcriture 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.02013 Philippe Boukobza 18. Contact Philippe BoukobzaConsultant Formateur spcialis en Innovation, Management et Visual Mapping. [email protected] www.ibermapping.esLe flat design version 1.02013 Philippe Boukobza