SlideShare une entreprise Scribd logo
1  sur  23
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 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
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
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 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
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
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
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 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
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
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
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
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
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
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
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
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
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
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 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
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

Contenu connexe

En vedette

Esp chap 4 materials design (finished)
Esp chap 4   materials design (finished)Esp chap 4   materials design (finished)
Esp chap 4 materials design (finished)Nik Nor Nabillah Anis
 
Google Material design
Google Material designGoogle Material design
Google Material designDan Vitoriano
 
Présentation du Material Design
Présentation du Material DesignPrésentation du Material Design
Présentation du Material DesignDavid Dadon
 
Material Design: Google's New Design Language
Material Design: Google's New Design LanguageMaterial Design: Google's New Design Language
Material Design: Google's New Design LanguageRaveesh Bhalla
 

En vedette (7)

Material design
Material designMaterial design
Material design
 
Esp chap 4 materials design (finished)
Esp chap 4   materials design (finished)Esp chap 4   materials design (finished)
Esp chap 4 materials design (finished)
 
Google Material design
Google Material designGoogle Material design
Google Material design
 
Présentation du Material Design
Présentation du Material DesignPrésentation du Material Design
Présentation du Material Design
 
Material design
Material designMaterial design
Material design
 
Material Design: Google's New Design Language
Material Design: Google's New Design LanguageMaterial Design: Google's New Design Language
Material Design: Google's New Design Language
 
Materials design
Materials designMaterials design
Materials design
 

Similaire à Flat Design

Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Idean France
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesConcept Image
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Julien Dereumaux
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Ametys
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignLoïc Vanderschooten
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Actency
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Inaativ
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Idean France
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...Microsoft
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchéstablettetactile
 
Conception centrée utilisateur en 14 étapes - NUI Day 2015
Conception centrée utilisateur en 14 étapes - NUI Day 2015Conception centrée utilisateur en 14 étapes - NUI Day 2015
Conception centrée utilisateur en 14 étapes - NUI Day 2015NUI Day
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochureZélia Sakhi
 
Cahier Windows Phone 7 par Programmez
Cahier Windows Phone 7 par ProgrammezCahier Windows Phone 7 par Programmez
Cahier Windows Phone 7 par Programmezaemond
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirConcept Image
 
Projet1 mastermind 2010-2011
Projet1 mastermind 2010-2011Projet1 mastermind 2010-2011
Projet1 mastermind 2010-2011nadi noura
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Idean France
 

Similaire à Flat Design (20)

Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016Les 10 Tendances du Design d'interface en 2016
Les 10 Tendances du Design d'interface en 2016
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
Les tendances graphiques pour avoir un site agréable et moderne - Agence Pilo...
 
telmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UXtelmedia* : tendances webdesign 2015, l'année de l'UX
telmedia* : tendances webdesign 2015, l'année de l'UX
 
Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018Livre blanc : Les tendances du web design 2018
Livre blanc : Les tendances du web design 2018
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
Human Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic DesignHuman Talk - Faire du design par composant avec l'Atomic Design
Human Talk - Faire du design par composant avec l'Atomic Design
 
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
Graphisme et ergonomie des projets… horribles - Kiwi Party 2014
 
Site internet : les tendances pour 2014
Site internet : les tendances pour 2014Site internet : les tendances pour 2014
Site internet : les tendances pour 2014
 
Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017Tendances du Design d'Interface 2017
Tendances du Design d'Interface 2017
 
Event windows 8
Event windows 8Event windows 8
Event windows 8
 
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...Branding et ModernUI : Des ressources et des conseils  pour passer d'un templ...
Branding et ModernUI : Des ressources et des conseils pour passer d'un templ...
 
Le web design - fullCONTENT
Le web design - fullCONTENTLe web design - fullCONTENT
Le web design - fullCONTENT
 
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchésC2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
C2E Poitiers - Tablettes tactiles : terminaux, usages et marchés
 
Conception centrée utilisateur en 14 étapes - NUI Day 2015
Conception centrée utilisateur en 14 étapes - NUI Day 2015Conception centrée utilisateur en 14 étapes - NUI Day 2015
Conception centrée utilisateur en 14 étapes - NUI Day 2015
 
2012 folio brochure
2012 folio brochure2012 folio brochure
2012 folio brochure
 
Cahier Windows Phone 7 par Programmez
Cahier Windows Phone 7 par ProgrammezCahier Windows Phone 7 par Programmez
Cahier Windows Phone 7 par Programmez
 
Les tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenirLes tendances du webdesign 2019 à retenir
Les tendances du webdesign 2019 à retenir
 
Projet1 mastermind 2010-2011
Projet1 mastermind 2010-2011Projet1 mastermind 2010-2011
Projet1 mastermind 2010-2011
 
Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016Les 10 Tendances de l’Expérience Utilisateur en 2016
Les 10 Tendances de l’Expérience Utilisateur en 2016
 

Flat Design

  • 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. 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
  • 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. 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. 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. Exemple (3) Passage du logo Google au Flat Design. ANCIEN NOUVEAU 8
  • 9. Exemple (4) Passage du logo Facebook au Flat Design. Icônes Facebook en Flat Design ANCIEN NOUVEAU 9
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Exemples de sites en Flat Design(1) 20
  • 21. Exemples de sites en Flat Design(2) 21
  • 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. 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