Voici le support d'une présentation que nous avons fait pour le studio de BNP-Paris à Bruxelles. Bien sûr, ce n'est qu'un support mais on y trouve matière à réflexion. Ainsi qu'une question fondamentale : ce type de design par le code annonce-t-il une nouvelle génération de développeurs ?

1. Petite introduction
au flat design
(et autres platitudes)

2. « Hello ! Je m’appelle Marc-André
et je travaille depuis
Plus de 20 ans dans le monde
de la communication. J’ai débuté
comme directeur artistique
dans les grandes agences.
Parallèlement, j’ai été un des pionniers
de l’infographie en France et j’ai connu
les débuts du design numérique. J’ai
ouvert deux studios spécialisés dans
la création graphique « print » :
Bleu Petrol et Public Image Factory.
En 2000, je suis passé à côté
de la « bulle » internet.
Je suis actuellement (et depuis 10 ans)
à la tête du studio i-breed & associés
spécialisé dans le design
numérique… »

3. « Le Flat Design est un style de design web
excluant tous détails superflus de la création. Il se
caractérise par des aplats de couleurs sobres mais
actuelles et dont l’organisation de la typographie
créée la structure du contenu. Le Flat design est
un style minimaliste, extrêmement clair et épuré. »
In Olibop

4. « Less is more »
Ludwig Mies van der Rohe
Architecte Allemand 1886/1969

5. 4 composantes essentielles
> Pas d’ombres, d’arrondis, de matières
> Des couleurs « acidulées », contemporaines
> L’utilisation et le choix typographique mis en avant
> Utilisation d’un gabarit/grille de mise en pages

10. Le Flat design
annonce
la victoire
du vectoriel
(vs le bitmap)

12. 1 grosse tendance visuelle
(depuis quelques temps) :
le pictogramme

15. Mais d’où vient le
FLAT DESIGN ?

16. Cette approche n’est pas sans nous rappeler
le « style typographique international »

17. le « style typographique international »
a qui nous devons…

18. Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Joseph Brockmann Müller

21. Joseph
est l’auteur
du livre
de référence
sur le gabarit
de mise
en pages

22. Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Armin Hofmann

26. Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Paul Rand

29. D’après wikipedia : « Le style typographique
international met l'accent sur le
dépouillement, la lisibilité et l'objectivité.
(…) Bon nombre des premières créations du
style international utilisent la typographie, en
plus de son utilisation pour le texte, comme
élément principal et structurant du design. »

30. Plus près de nous
dans les 80’s, un certain
minimalisme était de bon ton !
(je m’en souviens)

31. Florence
Cestac
Futuropolis

32. 1998
BAA
Lloyd Northover

33. 1996 BP Chemicals Lloyd Northover

34. 1984
D&AD Annual
Lloyd Northover

35. 1980
Letraset
Lloyd Northover

36. L’explosion
de la micro
informatique
(et de la P.A.O)
A permis une
véritable
déflagration
graphique.
(loin du flat
design)

38. Pour des raisons évidentes
de lisibilité et de compréhension,
la signalétique, le design d’espace
et environnemental utilisent
le flat design depuis longtemps !

42. Si cette vision du design « flat »
et minimale existe depuis
longtemps dans le print,
elle est relativement nouvelle
dans le design numérique…

43. Depuis ses débuts, Apple a toujours joué sur le
« skeuomorphisme »

44. « il s’agit de donner l’apparence
d’un objet existant à un élément de
design ayant la même fonction que cet
objet, le plus souvent dans le but de
rendre son utilisation plus intuitive. »
In Blogerosum

45. In Blogerosum

46. In Blogerosum

47. In Blogerosum

50. De la même façon, dans l’ergonomie
des sites web, on parlera
« d’affordance »

51. L'affordance
est la capacité
d’un objet à suggérer
sa propre utilisation

52. Prenons l’exemple
d’une porte
Sa forme, ses gonds,
sa poignée, sa serrure,
sa matière, ses signes
explicites (« poussez »…)
nous invitent à entrer…

53. l’affordance nous dit :
« vous pouvez me cliquer »
ou plus simplement :
« vous pouvez interagir avec moi »
Grâce aux formes, couleurs, libellés, localisation dans
l’interface, adjonction d’éléments d’indice…

54. Le skeuomorphisme d’Apple a rencontré des critiques,
au fil du temps :
«C’est comme si les designers gonflaient leurs
muscles pour montrer à quel point ils sont
doués pour créer une image d’un objet
physique. Qui ça intéresse ?»
Austin Care
Ancien designer de chez Apple

55. « Les designers contemporains pensent que
l’excès de visuels élaborés viendrait en
réalité cacher une interface mal conçue,
mal pensée et peu clair. Ils viendraient donc
masquer les failles en sursignifiant la
fonction de l’application. »
In Design Party

56. Parallèlement, certains « services » au look minimal ont fait école !

57. La première version du logo a été réalisé (avec The Gimp) par Sergueï Brin,
un des confondateurs de Google
(il détient le record du logo le moins cher de l’histoire du logotype)

58. La version 2 du logo Google
a été re-dessinné par Ruth Kedar,
une designer brésilienne (en utilisant de la Catull)

59. « Google, c’est beau… ça marche bien ! »
Un utilisateur qui souhaite
rester anonyme

60. Un autre pionnier plutôt « innattendu »,
Microsoft et son « modern UI »
(ainsi que Windows 8 apparu en 2012)
« it is a platform that is simple, clear, and does
one thing (and only one thing)
relatively easily. »
Jacob Miller
Windows 8 designer

61. « Windows 8 utilise une toute nouvelle interface graphique
(longtemps appelée Metro) nommée Modern UI (modern
user interface). Cet environnement s'articule sur un tout
nouvel écran de démarrage composé de tuiles dynamiques,
similaires à celles qui se trouvent sur le système
d’exploitation windows phone. Chaque tuile représente
une application, et peut présenter des informations
pratiques sans qu'on entre dans l'application. »
In Wikipedia

62. Le « slide » horizontal est une vraie rupture !

63. A l’origine du « style » modern UI…

64. A l’origine du « style » modern UI…

65. Selon Jacob Miller,
les internautes/utilisateurs
se divisent en 2 « clans » :
> Les créateurs de contenu
> Les consommateurs de contenu
Modern UI s’adresse à la 2e catégorie
(malgré ou à cause du choix du tactile)

66. Selon Nikita Lukianets, UX designer
chez Microsoft
> Modern UI n’est pas une marque
> Modern UI n’est pas un « style guide »
> Modern UI n’est pas une boite à outil
> Modern UI n’est pas un aplat
> Modern UI n’est pas un empilement de tuiles
Modern UI est un principe de design
s’appuyant sur les « classiques »
intemporels du genre !

67. Modern UI =
(modernuaille)
> Le Style typographique international
> Le design d’information /signalétique
> Le Bauhaus (!!!)
> Le motion design
Selon Nikita Lukianets, UX designer
chez Microsoft

68. « Le « Bauhaus » désigne un courant artistique concernant, notamment, l’architecture et
le design, mais également la photographie, le costume et la danse. Ce mouvement
posera les bases de la réflexion sur l’’architecture moderne, et notamment du style
international. En 1933, le Bauhaus (installé à Berlin) est fermé par les nazis, et sa
dissolution est prononcée par ses responsables. »
In Wikipedia

69. Le « Bauhaus » est un des pionniers
de « la forme s’adapte à la fonction ».
Cette philosophie est revendiquée
par les créateurs de la Modern UI !

70. « Form (ever) follows
fonction »
Louis Sullivan
Architecte américain (1856/1924)
« père » des gratte-ciels modernes

71. Modern UI et son look « flat »
est définitivement « user centric »
(centré sur l’utilisateur quoi !)

72. Dans ses guide-lines de Modern UI,
on retrouve 3 Composants essentiels du flat design
La couleur
La typographie
(la Segoe)

73. La grille modulaire de mise en page
Dans ses guide-lines de Modern UI,
on retrouve 3 Composants essentiels du flat design

74. Cette grille de
mise en pages
s’inspire
directement du
nombre d’or,
de la suite de
fibonacci,
et du « style
typographique
international ».

75. En s’appuyant sur ces fondamentaux du design,
Microsoft ne peux pas se « tromper » !
Le modern UI facilite l’interaction « tactile »
avec son look plat et carré…
De +

76. « J'ai aussi adopté le style ModernUI,
c'est vrai que c'est top pour combler
l'absence de graphiste ! »
Clsk78
Développeur
sur le forum
developpez.net

77. Parlons justement du flat design du côté
développement
Ce type de design est généré directement
par le code et les CSS
(feuille de style en cascades)
> Intégration et développement simplifié
> Temps de chargement réduit
> Simplification du design (et donc
du process amont qui va avec)

78. Cette simplification accompagne parfaitement
trois tendances « lourdes » du web d’aujourd’hui.
3

79. 1 > Le « responsive » design
« Un site web adaptatif est une notion de conception de
sites web qui regroupe différents principes et technologies
(…) L'utilisateur peut ainsi consulter le même site web à
travers une large gamme d'appareils (moniteurs
d'ordinateur, smartphones, tablettes, TV, etc.) avec le
même confort visuel et sans avoir recours au défilement
horizontal ou au zoom avant/arrière sur les appareils
tactiles notamment, manipulations qui dégradent
considérablement l'expérience utilisateur. »
In Wikipedia

80. « La spécification CSS3 Media Queries
définit les techniques pour l'application de feuilles de
styles en fonction des périphériques de consultation
utilisés pour du HTML. On nomme également cette
pratique Responsive Web Design, pour dénoter qu'il s'agit
d'adapter dynamiquement le design à l'aide de CSS. »
In Alsa Créations

81. A ne pas confondre avec la « fluidité »
« Depuis les années 2000, la création Web
s'appuyait sur des grilles fixes, mais en 2009 un
moyen fut proposé pour mettre en œuvre la
fluidité du Web et en profiter. Il s'agissait
essentiellement de passer de la grille fixe (en
pixels) à une grille fluide (en %). Cela permet,
simplement, d'adapter le contenu à son
contenant. »
In DBM web design

85. Des outils comme le framework « bootstrap »
facilitent la création de sites « responsives »

86. 2 > Les « single page
applications »
Ce sont des sites web ne comportant qu’une seule longue page
découpée en plusieurs segments (on peut passer de l’une à
l’autre via un javascript).
Un seul chargement du code et de la CSS est nécessaire.
L’utilisateur n’est pas perdu dans une arborescence complexe.
Mais… ce type de sites rend le référencement
plus difficile…

91. 3 > La typographie
(merci HTML5)
Le HTML5 permet (notamment) une
simplification du code,
l’utilisation de la géolocalisation,
et un vrai enrichissement medias…
Notamment en « ouvrant » des possibilités
typographiques

92. Soit en « appelant » des polices à la lecture du site
soit en les incluant dans le code (fontface)

93. Soit en « appelant » des polices à la lecture du site
soit en les incluant dans le code (fontface)

98. Par extension, on peut également
inclure des « icons web font » et donc
directement créer de l’illustration par le code
Fontello

99. Foundation Icon
Par extension, on peut également
inclure des « icons web font » et donc
directement créer de l’illustration par le code

100. Pour résumer (et c’est ma théorie)
Le flat design annonce
un design par le code…
(un design fait par les développeurs ?)
Le flat design est constitué d’une série de composants
pré-designés qui vont pouvoir se marier sans efforts et sans
réelle expertise graphique.

101. Mais Le flat design
force le designer
à se dépasser
Pour aller plus loin que ce qui est
du domaine de la mode ou du template standard
(achetable sur certains sites)

102. Bien sûr, le flat design n’est qu’une tendance.
Mais c’est une tendance forte !
Ainsi,
Apple en retard avec son « skeuomorphisme »
a essayé de rectifier le tir avec ios9 et
(un petit peu) avec OS X Mavericks…

105. Cette tendance
forte évolue déjà !
(et engendre d’autres tendances)

106. Par exemple,
le design minimal
se mélange à de
grandes…

107. images
(est-ce le retour du bitmap ?)

114. Ou par exemple,
le design
géométrique,
un peu moins
« flat »…

122. Le flat design
influence aussi
Le PRINT…
(et la com).

130. Quelques références
Gizmodo/what is flat design ?
Pinterest / flat UI design
Flat UI colors

131. Quelques références
Flat inspire
Design RAZZI / 225+ Best Flat Web Design
Examples Inspiration
Design at Microsoft

132. MERCI !
Des questions ?
Des réactions ?
maf@i-breed.fr