FLAT
DESIGN
Par Romanick GOBY
romanickg@yahoo.fr
www.romanickg.free.fr
Vous avez dit “Flat Design” ?

F

L

A

T

Avec l’arrivée d’iOS 7 et de Windows 8, tout le monde en parle. Le
flat design ...
Le(s) précurseur(s)
Dans son souci de faciliter la lecture et l’utilisation de son système d’exploitation sur des
écrans d...
Définition (1)

FLAT

PLAT

DESIGN

CONCEPTION
DESIGN MINIMALISTE
4
Définition (2)
C’était la tendance graphique en 2013 qui va se répertorier en 2014 et pourquoi
pas au delà et devenir un p...
Exemple (1)
Comment illustrer au mieux le Flat Design ?
Les meilleurs exemples à nos jours sont les interfaces
de Windows ...
Exemple (2)
Du bouton avec effet(s) au bouton simplifié.

Les éléments graphiques sont de plus en plus simplifiés : sans o...
Exemple (3)
Passage du logo Google au Flat Design.

ANCIEN

NOUVEAU
8
Exemple (4)
Passage du logo Facebook au Flat Design.

Icônes Facebook en Flat Design
ANCIEN

NOUVEAU

9
Pourquoi maintenant ?
Pourquoi le design minimaliste est-il à la mode ?
L'hypothèse la plus crédible est que dans le conte...
Que devient le “Skeuomorphisme” ?
Le terme n'existe pas dans la langue française (c'est un néologisme), mais il est notamm...
Et le Responsive ?
Responsive web design
Conçu pour offrir aux visiteurs une expérience de
consultation optimale facilitan...
Le Flat et le Responsive Design
Comment concilier les deux ?
Fondamentalement, ces 2 techniques sont faites pour s’entendr...
Mettre en place le Flat Design
A. Des éléments épurés

1/5

Consistant à faire l’inverse du “Skeuomorphisme”.

Dans le Fla...
Mettre en place le Flat Design
B. Le choix de la police

2/5

Elle vient jouer un rôle central dans la mise en forme.

Il ...
Mettre en place le Flat Design
C. Le choix des couleurs

3/5

Autre élément de différenciation.

Les sites en Flat Design ...
Mettre en place le Flat Design
D. Interface simpliste

4/5

L’interface doit être simple et épurée.

L’interface et le con...
Mettre en place le Flat Design
E. Les icônes et les illustrations

5/5

Utiliser des icônes et des illustrations avec parc...
Le Flat Design n'est pas la solution aux
designs de vos interfaces, pages, ou
présentations mais une solution parmi
d'autr...
Exemples de sites en Flat Design(1)

20
Exemples de sites en Flat Design(2)

21
Les inconvénients
Le caractère minimaliste du Flat Design fait qu’il est
parfois facile d’arriver à un même traitement gra...
GLOSSAIRE

F

L

A

T

FONDS CONTRASTÉS

SIMPLICITÉ

ERGONOMIE OPTIMALE

COULEURS PRIMAIRES

ÉPURATION GRAPHIQUE

LOOK RÉT...
Upcoming SlideShare
Loading in...5
×

Flat Design

1,624

Published on

Design minimaliste.
Avec l’arrivée d’iOS 7 et de Windows 8, tout le monde en parle. Le design minimaliste (Flat Design) concerne aussi bien les smartphones que les tablettes, les consoles de jeux, les interfaces de gestion, et les pages web ...

Published in: Design

Transcript of "Flat Design"

  1. 1. FLAT DESIGN Par Romanick GOBY romanickg@yahoo.fr www.romanickg.free.fr
  2. 2. Vous avez dit “Flat Design” ? F L A T Avec l’arrivée d’iOS 7 et de Windows 8, tout le monde en parle. Le flat design par-ci le flat design par-là. Il concerne aussi bien les téléphones portables que les tablettes, les consoles de jeux, les interfaces de gestion, et les pages web. Voici le résultat d’une petite recherche sur le Net et des quelques connaissances que j’ai sur le sujet. C’est une forme de retour aux sources du Web. DE SI GN 2
  3. 3. Le(s) précurseur(s) Dans son souci de faciliter la lecture et l’utilisation de son système d’exploitation sur des écrans de petites tailles, Metro (design language) lance son interface en Flat Design. Ensuite, les géants ont suivi : 3
  4. 4. Définition (1) FLAT PLAT DESIGN CONCEPTION DESIGN MINIMALISTE 4
  5. 5. Définition (2) C’était la tendance graphique en 2013 qui va se répertorier en 2014 et pourquoi pas au delà et devenir un phénomène incontournable. Littéralement, le terme Flat Design va désigner une “conception Web plate”. La traduction est certes approximative, mais vous allez vous faire une opinion de ce qu’est ce nouveau phénomène par la suite. DESIGN MINIMALISTE ET SIMPLISTE 5
  6. 6. Exemple (1) Comment illustrer au mieux le Flat Design ? Les meilleurs exemples à nos jours sont les interfaces de Windows 8, du Nokia Lumia et de l’iOS7 d’Apple. 6
  7. 7. Exemple (2) Du bouton avec effet(s) au bouton simplifié. Les éléments graphiques sont de plus en plus simplifiés : sans ombres, absence d’effet de profondeur, de texture, etc. D’une manière générale, dépourvu de tous les éléments purement «décoratif». 7
  8. 8. Exemple (3) Passage du logo Google au Flat Design. ANCIEN NOUVEAU 8
  9. 9. Exemple (4) Passage du logo Facebook au Flat Design. Icônes Facebook en Flat Design ANCIEN NOUVEAU 9
  10. 10. Pourquoi maintenant ? Pourquoi le design minimaliste est-il à la mode ? L'hypothèse la plus crédible est que dans le contexte où l'on doit créer un design adaptatif, le minimalisme s'harmonise mieux avec les différents systèmes d'exploitations (iOS, Android, Windows 8, etc) qui existent sur le marché. Chacun veut donc “être à la page” et essayer de ne pas être le dernier dans ce monde en perpétuelle évolution. A contrario des années passées où les designers appliquaient à profusion le style « Web 2.0», style caractérisé par des effets graphiques : des ombres portées, des bizotages, estampages et autres effets Photoshop voués à montrer les capacités techniques des créatifs. Source : http://www.adviso.ca/blog/2013/11/28/flat-design/ 10
  11. 11. Que devient le “Skeuomorphisme” ? Le terme n'existe pas dans la langue française (c'est un néologisme), mais il est notamment utilisé comme traduction du terme anglais “skeuomorphic” pour désigner des éléments d'interface informatique reproduisant des objets physiques (par exemple des textures : cuir, papier, bois) dans le but de donner des repères facilement accessibles à l'utilisateur. Apple utilise notamment plusieurs “skeuomorphismes” dans son système d'exploitation mobile iOS, comme sa plateforme de jeux Game Center, son calepin Notes et sa Boussole. On ne peut pas dire que le Flat détrône le “Skeuomorphisme”, c’est clairement un parti pris et chacun trouvera son compte dans l’ une ou l’autre des configurations selon sa convenance. 11
  12. 12. Et le Responsive ? Responsive web design Conçu pour offrir aux visiteurs une expérience de consultation optimale facilitant la lecture et la navigation. L'utilisateur peut ainsi consulter le même site Web à travers plusieurs gammes d'appareils (ordinateurs, smartphones et tablettes) avec le même confort visuel et sans avoir recours au défilement horizontal ou au zoom avant-arrière sur les appareils tactiles, manipulations qui dégradent considérablement l'expérience utilisateur. Source : http://fr.wikipedia.org/wiki/Site_web_adaptatif 12
  13. 13. Le Flat et le Responsive Design Comment concilier les deux ? Fondamentalement, ces 2 techniques sont faites pour s’entendre. Et surtout le Flat Design est totalement orienté navigation tablette. La conséquence directe de ce phénomène “Flat Design” est que le travail d’ergonomie doit à tous les coups se concentrer sur la hiérarchisation des éléments entre eux et leur standardisation par rapport à leur fonction. Les 2 techniques ne sont pas du tout liées. On peut avoir l’une sans l’autre et viceversa sans aucun problème. L’arrivée massive du Flat design permet aux webdesigners de réfléchir à l’accessibilité web, à l’expérience utilisateur et à l’ ergonomie. Que cela soit sur smartphones ou sur des ordinateurs de bureau ou encore des tablettes car l’utilisateur est de plus en plus mobile et utilise plusieurs moyens pour se connecter à Internet. 13
  14. 14. Mettre en place le Flat Design A. Des éléments épurés 1/5 Consistant à faire l’inverse du “Skeuomorphisme”. Dans le Flat Design, il n’y a pas de texture, pas d’ombre portée, ni de dégradé, rien qui puisse donner de la profondeur aux objets ou une illusion de relief. Par contre vous n’êtes pas limité(e) aux rectangles et pouvez opter pour des triangles ou toutes autres formes permettant de créer une identité graphique propre à votre site, votre application, etc. Il faut savoir qu’il n’est pas du tout proscrit de faire cohabiter le “skeuomorphisme” et le Flat Design. Le tout est de trouver le bon équilibre visuel. 14
  15. 15. Mettre en place le Flat Design B. Le choix de la police 2/5 Elle vient jouer un rôle central dans la mise en forme. Il va falloir miser sur votre culture typographique pour différencier vos éléments et susciter l’admiration des visiteurs. Deux ou trois familles de polices peuvent cohabiter, il faut aussi songer à jouer avec les variantes de chaque police (gras, italiques), et ne pas hésiter à multiplier les tailles de texte pour bien faire ressortir vos idées principales. Je vous conseille donc des polices soft, sans-sérifs et sans empâtements car elles se présentent mieux sur les formes du Flat, dans un souci d’ épuration et de légèreté visuelle. 15
  16. 16. Mettre en place le Flat Design C. Le choix des couleurs 3/5 Autre élément de différenciation. Les sites en Flat Design utilisent des couleurs vives et des fonds très contrastés (du texte blanc sur un bouton rouge). Les couleurs primaires (rouge, bleu, jaune) et secondaires (orange, vert, violet) sont largement privilégiées par rapport aux autres. En somme, veillez à choisir des couleurs relativement délavées, des couleurs un peu vieillottes et pales pour donner un look rétro à votre interface. N’ayez pas peur d’ accumuler les couleurs (entre 6 et 8) car dans le Flat, “l’unique” ne fait pas du tout joli. 16
  17. 17. Mettre en place le Flat Design D. Interface simpliste 4/5 L’interface doit être simple et épurée. L’interface et le contenu sont les deux principaux éléments à épurer dans la mise en place du Flat. Mettez l’accent sur les formes simples telles que des ronds, des rectangles, des losanges, des triangles, etc et faites confiance à votre créativité pour trouver une cohérence dans la disposition des éléments sur votre interface. Priorité à des contenus concis avec une mise en page sur toute la largeur du site (Ex : interface Windows 8). 17
  18. 18. Mettre en place le Flat Design E. Les icônes et les illustrations 5/5 Utiliser des icônes et des illustrations avec parcimonie bien sûr. Pour les icônes, on les préférera vectorielles, parce que le Flat Design est totalement compatible avec le Responsive Design. Elles ne sont plus ici pour “créer du contenu” mais simplement pour guider l’utilisateur et lui donner quelques repères visuels, lui permettre de comprendre comment sont associées les fonctionnalités et les éléments graphiques. Si vous souhaitez illustrer vos contenus, réduisez au minimum le nombre de photos et/ou de graphiques et laissez respirer vos éléments en créant des espaces entre eux. 18
  19. 19. Le Flat Design n'est pas la solution aux designs de vos interfaces, pages, ou présentations mais une solution parmi d'autre. Une utilisation adéquate est donc à prioriser. Et voilà, vous êtres prêt à passer au Flat. À vous de jouer ! 19
  20. 20. Exemples de sites en Flat Design(1) 20
  21. 21. Exemples de sites en Flat Design(2) 21
  22. 22. Les inconvénients Le caractère minimaliste du Flat Design fait qu’il est parfois facile d’arriver à un même traitement graphique pour certaines choses, en particulier les petits éléments tels que les boutons, les champs de formulaire, etc. Il faut donc veiller à être assez créatif et original pour se différencier au maximum sur le Web. Je pense qu'il est tout à fait possible de créer et d'être unique tout en faisant du Flat. Le Flat design n’est pas un frein à la créativité, c'est un style qui permet d’exprimer sa créativité. 22
  23. 23. GLOSSAIRE F L A T FONDS CONTRASTÉS SIMPLICITÉ ERGONOMIE OPTIMALE COULEURS PRIMAIRES ÉPURATION GRAPHIQUE LOOK RÉTRO LÉGÈRETÉ VISUELLE RESPONSIVE DESIGN DESIGN MINIMALISTE IDENTITÉ GRAPHIQUE SKEUOMORPHISME ÉLÉMENTS ÉPURÉS ÉLÉGANCE SMARTPHONES CLARTÉ WEB COULEURS SECONDAIRES CONFORT VISUEL TABLETTES MOBILES DE SI GN

×