Embed Size (px)
Citation preview
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é 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… »
« 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
« 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’utilisation et le choix typographique mis en avant > Utilisation d’un gabarit/grille de mise en pages
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'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. »
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 utilisent le flat design depuis longtemps !
Si cette vision du design « flat » et minimale existe depuis longtemps dans le print, elle est relativement nouvelle dans le design numérique…
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 souvent dans le but de rendre son utilisation plus intuitive. »
In Blogerosum
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 »…) nous invitent à entrer…
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…
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
« 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
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 record du logo le moins cher de l’histoire du logotype)
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 platform that is simple, clear, and does one thing (and only one thing)
relatively easily. » Jacob Miller
Windows 8 designer
« 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
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 consommateurs de contenu
Modern UI s’adresse à la 2e catégorie (malgré ou à cause du choix du tactile)
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 !
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
« 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
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 !
« 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 international ».
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 +
« 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
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)
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 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
« 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
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
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 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…
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
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
Fontello
Foundation Icon
Par extension, on peut également inclure des « icons web font » et donc
directement créer de l’illustration par le code
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.
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)
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…
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 ? [email protected]
