Le flat design, popularisé par iOS 7 et Windows 8, est un style de conception minimaliste sans textures ni profondeur, visant à faciliter l'usage sur divers appareils. Ce mouvement représente un retour aux sources du design web et s'oppose au skeuomorphisme en se concentrant sur une interface épurée et fonctionnelle. Bien qu'il n'élimine pas le skeuomorphisme, le flat design favorise une meilleure expérience utilisateur et l'accessibilité web sur plusieurs plateformes.

1. FLAT
DESIGN
Par Romanick GOBY
romanickg@yahoo.fr
www.romanickg.free.fr

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

4. Définition (1)
FLAT
PLAT
DESIGN
CONCEPTION
DESIGN MINIMALISTE
4

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