Petite introduction
au flat design
(et autres platitudes)
« Hello ! Je m’appelle Marc-André
et je travaille depuis
Plus de 20 ans dans le monde
de la communication. J’ai débuté
com...
« Le Flat Design est un style de design web
excluant tous détails superflus de la création. Il se
caractérise par des apla...
« Less is more »
Ludwig Mies van der Rohe
Architecte Allemand 1886/1969
4 composantes essentielles
> Pas d’ombres, d’arrondis, de matières
> Des couleurs « acidulées », contemporaines
> L’utilis...
Le Flat design
annonce
la victoire
du vectoriel
(vs le bitmap)
1 grosse tendance visuelle
(depuis quelques temps) :
le pictogramme
Mais d’où vient le
FLAT DESIGN ?
Cette approche n’est pas sans nous rappeler
le « style typographique international »
le « style typographique international »
a qui nous devons…
Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Joseph Brockmann Müller
Joseph
est l’auteur
du livre
de référence
sur le gabarit
de mise
en pages
Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Armin Hofmann
Cette approche n’est pas sans rappeler
le « style typographique international »
et, par exemple,
Paul Rand
D’après wikipedia : « Le style typographique
international met l'accent sur le
dépouillement, la lisibilité et l'objectivi...
Plus près de nous
dans les 80’s, un certain
minimalisme était de bon ton !
(je m’en souviens)
Florence
Cestac
Futuropolis
1998
BAA
Lloyd Northover
1996 BP Chemicals Lloyd Northover
1984
D&AD Annual
Lloyd Northover
1980
Letraset
Lloyd Northover
L’explosion
de la micro
informatique
(et de la P.A.O)
A permis une
véritable
déflagration
graphique.
(loin du flat
design)
Pour des raisons évidentes
de lisibilité et de compréhension,
la signalétique, le design d’espace
et environnemental utili...
Si cette vision du design « flat »
et minimale existe depuis
longtemps dans le print,
elle est relativement nouvelle
dans ...
Depuis ses débuts, Apple a toujours joué sur le
« skeuomorphisme »
« 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...
In Blogerosum
In Blogerosum
In Blogerosum
De la même façon, dans l’ergonomie
des sites web, on parlera
«  d’affordance »
L'affordance
est la capacité
d’un objet à suggérer
sa propre utilisation
Prenons l’exemple
d’une porte
Sa forme, ses gonds,
sa poignée, sa serrure,
sa matière, ses signes
explicites (« poussez »…...
l’affordance nous dit :
« vous pouvez me cliquer »
ou plus simplement :
« vous pouvez interagir avec moi »
Grâce aux forme...
Le skeuomorphisme d’Apple a rencontré des critiques,
au fil du temps :
«C’est comme si les designers gonflaient leurs
musc...
«  Les designers contemporains pensent que
l’excès de visuels élaborés viendrait en
réalité cacher une interface mal conçu...
Parallèlement, certains « services » au look minimal ont fait école !
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 ...
La version 2 du logo Google
a été re-dessinné par Ruth Kedar,
une designer brésilienne (en utilisant de la Catull)
« Google, c’est beau… ça marche bien ! »
Un utilisateur qui souhaite
rester anonyme
Un autre pionnier plutôt « innattendu »,
Microsoft et son « modern UI »
(ainsi que Windows 8 apparu en 2012)
« it is a pla...
« Windows 8 utilise une toute nouvelle interface graphique
(longtemps appelée Metro) nommée Modern UI (modern
user interfa...
Le « slide » horizontal est une vraie rupture !
A l’origine du « style » modern UI…
A l’origine du « style » modern UI…
Selon Jacob Miller,
les internautes/utilisateurs
se divisent en 2 « clans » :
> Les créateurs de contenu
> Les consommateu...
Selon Nikita Lukianets, UX designer
chez Microsoft
> Modern UI n’est pas une marque
> Modern UI n’est pas un « style guide...
Modern UI =
(modernuaille)
> Le Style typographique international
> Le design d’information /signalétique
> Le Bauhaus (!!...
« Le « Bauhaus » désigne un courant artistique concernant, notamment, l’architecture et
le design, mais également la photo...
Le « Bauhaus » est un des pionniers
de « la forme s’adapte à la fonction  ».
Cette philosophie est revendiquée
par les cré...
« Form (ever) follows
fonction »
Louis Sullivan
Architecte américain (1856/1924)
« père » des gratte-ciels modernes
Modern UI et son look « flat »
est définitivement « user centric »
(centré sur l’utilisateur quoi !)
Dans ses guide-lines de Modern UI,
on retrouve 3 Composants essentiels du flat design
La couleur
La typographie
(la Segoe)
La grille modulaire de mise en page
Dans ses guide-lines de Modern UI,
on retrouve 3 Composants essentiels du flat design
Cette grille de
mise en pages
s’inspire
directement du
nombre d’or,
de la suite de
fibonacci,
et du « style
typographique
...
En s’appuyant sur ces fondamentaux du design,
Microsoft ne peux pas se « tromper » !
Le modern UI facilite l’interaction «...
« J'ai aussi adopté le style ModernUI,
c'est vrai que c'est top pour combler
l'absence de graphiste ! »
Clsk78
Développeur...
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
(fe...
Cette simplification accompagne parfaitement
trois tendances « lourdes » du web d’aujourd’hui.
3
1 > Le « responsive » design
« Un site web adaptatif est une notion de conception de
sites web qui regroupe différents pri...
« La spécification CSS3 Media Queries
définit les techniques pour l'application de feuilles de
styles en fonction des péri...
A ne pas confondre avec la « fluidité »
« Depuis les années 2000, la création Web
s'appuyait sur des grilles fixes, mais e...
Des outils comme le framework « bootstrap »
facilitent la création de sites « responsives »
2 > Les « single page
applications  »
Ce sont des sites web ne comportant qu’une seule longue page
découpée en plusieurs s...
3 > La typographie
(merci HTML5)
Le HTML5 permet (notamment) une
simplification du code,
l’utilisation de la géolocalisati...
Soit en « appelant » des polices à la lecture du site
soit en les incluant dans le code (fontface)
Soit en « appelant » des polices à la lecture du site
soit en les incluant dans le code (fontface)
Par extension, on peut également
inclure des « icons web font » et donc
directement créer de l’illustration par le code
Fo...
Foundation Icon
Par extension, on peut également
inclure des « icons web font » et donc
directement créer de l’illustratio...
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 ?)
L...
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 templa...
Bien sûr, le flat design n’est qu’une tendance.
Mais c’est une tendance forte !
Ainsi,
Apple en retard avec son « skeuomor...
Cette tendance
forte évolue déjà !
(et engendre d’autres tendances)
Par exemple,
le design minimal
se mélange à de
grandes…
images
(est-ce le retour du bitmap ?)
Ou par exemple,
le design
géométrique,
un peu moins
« flat »…
Le flat design
influence aussi
Le PRINT…
(et la com).
Quelques références
Gizmodo/what is flat design ?
Pinterest / flat UI design
Flat UI colors
Quelques références
Flat inspire
Design RAZZI / 225+ Best Flat Web Design
Examples Inspiration
Design at Microsoft
MERCI !
Des questions ?
Des réactions ?
maf@i-breed.fr
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
Prochain SlideShare
Chargement dans…5
×

Petite introduction au flat design (et autres platitudes)

1 307 vues

Publié le

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 ?

Publié dans : Design
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 307
Sur SlideShare
0
Issues des intégrations
0
Intégrations
18
Actions
Partages
0
Téléchargements
40
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Petite introduction au flat design (et autres platitudes)

  1. 1. Petite introduction au flat design (et autres platitudes)
  2. 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. 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. 4. « Less is more » Ludwig Mies van der Rohe Architecte Allemand 1886/1969
  5. 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
  6. 6. Le Flat design annonce la victoire du vectoriel (vs le bitmap)
  7. 7. 1 grosse tendance visuelle (depuis quelques temps) : le pictogramme
  8. 8. Mais d’où vient le FLAT DESIGN ?
  9. 9. Cette approche n’est pas sans nous rappeler le « style typographique international »
  10. 10. le « style typographique international » a qui nous devons…
  11. 11. Cette approche n’est pas sans rappeler le « style typographique international » et, par exemple, Joseph Brockmann Müller
  12. 12. Joseph est l’auteur du livre de référence sur le gabarit de mise en pages
  13. 13. Cette approche n’est pas sans rappeler le « style typographique international » et, par exemple, Armin Hofmann
  14. 14. Cette approche n’est pas sans rappeler le « style typographique international » et, par exemple, Paul Rand
  15. 15. 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. »
  16. 16. Plus près de nous dans les 80’s, un certain minimalisme était de bon ton ! (je m’en souviens)
  17. 17. Florence Cestac Futuropolis
  18. 18. 1998 BAA Lloyd Northover
  19. 19. 1996 BP Chemicals Lloyd Northover
  20. 20. 1984 D&AD Annual Lloyd Northover
  21. 21. 1980 Letraset Lloyd Northover
  22. 22. L’explosion de la micro informatique (et de la P.A.O) A permis une véritable déflagration graphique. (loin du flat design)
  23. 23. 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 !
  24. 24. Si cette vision du design « flat » et minimale existe depuis longtemps dans le print, elle est relativement nouvelle dans le design numérique…
  25. 25. Depuis ses débuts, Apple a toujours joué sur le « skeuomorphisme »
  26. 26. « 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
  27. 27. In Blogerosum
  28. 28. In Blogerosum
  29. 29. In Blogerosum
  30. 30. De la même façon, dans l’ergonomie des sites web, on parlera «  d’affordance »
  31. 31. L'affordance est la capacité d’un objet à suggérer sa propre utilisation
  32. 32. 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…
  33. 33. 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…
  34. 34. 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
  35. 35. «  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
  36. 36. Parallèlement, certains « services » au look minimal ont fait école !
  37. 37. 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)
  38. 38. La version 2 du logo Google a été re-dessinné par Ruth Kedar, une designer brésilienne (en utilisant de la Catull)
  39. 39. « Google, c’est beau… ça marche bien ! » Un utilisateur qui souhaite rester anonyme
  40. 40. 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
  41. 41. « 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
  42. 42. Le « slide » horizontal est une vraie rupture !
  43. 43. A l’origine du « style » modern UI…
  44. 44. A l’origine du « style » modern UI…
  45. 45. 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)
  46. 46. 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 !
  47. 47. 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
  48. 48. « 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
  49. 49. 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 !
  50. 50. « Form (ever) follows fonction » Louis Sullivan Architecte américain (1856/1924) « père » des gratte-ciels modernes
  51. 51. Modern UI et son look « flat » est définitivement « user centric » (centré sur l’utilisateur quoi !)
  52. 52. Dans ses guide-lines de Modern UI, on retrouve 3 Composants essentiels du flat design La couleur La typographie (la Segoe)
  53. 53. La grille modulaire de mise en page Dans ses guide-lines de Modern UI, on retrouve 3 Composants essentiels du flat design
  54. 54. Cette grille de mise en pages s’inspire directement du nombre d’or, de la suite de fibonacci, et du « style typographique international ».
  55. 55. 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 +
  56. 56. « 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
  57. 57. 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)
  58. 58. Cette simplification accompagne parfaitement trois tendances « lourdes » du web d’aujourd’hui. 3
  59. 59. 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
  60. 60. « 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
  61. 61. 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
  62. 62. Des outils comme le framework « bootstrap » facilitent la création de sites « responsives »
  63. 63. 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…
  64. 64. 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
  65. 65. Soit en « appelant » des polices à la lecture du site soit en les incluant dans le code (fontface)
  66. 66. Soit en « appelant » des polices à la lecture du site soit en les incluant dans le code (fontface)
  67. 67. Par extension, on peut également inclure des « icons web font » et donc directement créer de l’illustration par le code Fontello
  68. 68. Foundation Icon Par extension, on peut également inclure des « icons web font » et donc directement créer de l’illustration par le code
  69. 69. 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.
  70. 70. 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)
  71. 71. 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…
  72. 72. Cette tendance forte évolue déjà ! (et engendre d’autres tendances)
  73. 73. Par exemple, le design minimal se mélange à de grandes…
  74. 74. images (est-ce le retour du bitmap ?)
  75. 75. Ou par exemple, le design géométrique, un peu moins « flat »…
  76. 76. Le flat design influence aussi Le PRINT… (et la com).
  77. 77. Quelques références Gizmodo/what is flat design ? Pinterest / flat UI design Flat UI colors
  78. 78. Quelques références Flat inspire Design RAZZI / 225+ Best Flat Web Design Examples Inspiration Design at Microsoft
  79. 79. MERCI ! Des questions ? Des réactions ? maf@i-breed.fr

×