le flat design

18
Le flat design version 1.0 2013 Philippe Boukobza Le flat design Image : Dribble.com

Upload: philippe-boukobza

Post on 14-Jun-2015

5.059 views

Category:

Design


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Le Flat Design

Le flat design version 1.0 2013 Philippe Boukobza

Le flat design

Image : Dribble.com

Page 2: Le Flat Design

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.

Page 3: Le Flat Design

Le flat design version 1.0 2013 Philippe Boukobza

Un exemple de page web en flat design : Fondation Abbé Pierre

Page 4: Le Flat Design

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

Page 5: Le Flat Design

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.

Page 6: Le Flat Design

Le flat design version 1.0 2013 Philippe Boukobza

Page 7: Le Flat Design

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.

Page 8: Le Flat Design

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.

Page 9: Le 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.

Page 10: Le 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.

Page 11: Le 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

Page 12: Le Flat Design

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 :

Page 13: Le Flat Design

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 :

Page 14: Le Flat Design

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/

Page 15: Le Flat Design

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/

Page 16: Le Flat Design

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/

Page 17: Le Flat 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/

Page 18: Le Flat Design

Le flat design version 1.0 2013 Philippe Boukobza

Contact

Philippe Boukobza

Consultant Formateur spécialisé en Innovation, Management et Visual

Mapping.

[email protected]

www.ibermapping.es