le flat design
Post on 14-Jun-2015
5.071 Views
Preview:
DESCRIPTION
TRANSCRIPT
Le flat design version 1.0 2013 Philippe Boukobza
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 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
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
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é.
image : lorenzoverzini.com
Le flat design version 1.0 2013 Philippe Boukobza
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
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 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
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
Les pictogrammes de Facebook et le logo de Google sont passés au flat
design.
Le flat design version 1.0 2013 Philippe Boukobza
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
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
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
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
Les avantages du flat design
Élégance et clarté
Pas de superflu visuel et une ergonomie optimale
Adaptable facilement quelque soit la thématique
Conception graphique rapide. Pas besoin de se concentrer sur
des textures ou des effets
Image: http://flatcartoon.com/
Le flat design version 1.0 2013 Philippe Boukobza
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
Image: http://flatcartoon.com/
Le flat design version 1.0 2013 Philippe Boukobza
Conclusions
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é.
Image: http://www.microsoft.com/en-us/news/stories/design/
Le flat design version 1.0 2013 Philippe Boukobza
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
Contact
Philippe Boukobza
Consultant Formateur spécialisé en Innovation, Management et Visual
Mapping.
philippe@ibermapping.es
www.ibermapping.es
top related