SlideShare une entreprise Scribd logo
1  sur  132
Télécharger pour lire hors ligne
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 ?
maf@i-breed.fr

Contenu connexe

Tendances

Whitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERPWhitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERPSouheil Ladjimi
 
L’Approche MéCaniste
L’Approche MéCanisteL’Approche MéCaniste
L’Approche MéCanisteSignlighter
 
Design social bason_2012_08_fr
Design social bason_2012_08_frDesign social bason_2012_08_fr
Design social bason_2012_08_frStéphane VINCENT
 
La bibliothèque, un espace de participation
La bibliothèque, un espace de participationLa bibliothèque, un espace de participation
La bibliothèque, un espace de participationDujol Lionel
 
La relation client/designer graphique
La relation client/designer graphiqueLa relation client/designer graphique
La relation client/designer graphiqueMarion Phelebon
 
Le cubisme
Le cubismeLe cubisme
Le cubismejennycol
 
AC12 Bien accueillir les nouveaux agents
AC12 Bien accueillir les nouveaux agentsAC12 Bien accueillir les nouveaux agents
AC12 Bien accueillir les nouveaux agentsCap'Com
 
Lécole du Bauhaus.ppt
Lécole du Bauhaus.pptLécole du Bauhaus.ppt
Lécole du Bauhaus.pptIsmahaneMerad
 
systèmes d'évacuation des fumées
systèmes d'évacuation des fumées systèmes d'évacuation des fumées
systèmes d'évacuation des fumées Sarra Achoura
 
Cours l'art nouveau
Cours l'art nouveauCours l'art nouveau
Cours l'art nouveauArchi Guelma
 
Cours HCA: Revolution industrielle
Cours HCA: Revolution industrielleCours HCA: Revolution industrielle
Cours HCA: Revolution industrielleArchi Guelma
 

Tendances (20)

Whitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERPWhitecape - Odoo - Offre ERP
Whitecape - Odoo - Offre ERP
 
L’Approche MéCaniste
L’Approche MéCanisteL’Approche MéCaniste
L’Approche MéCaniste
 
Le corbusier
Le corbusierLe corbusier
Le corbusier
 
Design social bason_2012_08_fr
Design social bason_2012_08_frDesign social bason_2012_08_fr
Design social bason_2012_08_fr
 
La bibliothèque, un espace de participation
La bibliothèque, un espace de participationLa bibliothèque, un espace de participation
La bibliothèque, un espace de participation
 
Bauhaauss
BauhaaussBauhaauss
Bauhaauss
 
De Stijl
De StijlDe Stijl
De Stijl
 
La relation client/designer graphique
La relation client/designer graphiqueLa relation client/designer graphique
La relation client/designer graphique
 
L'art nouveau
L'art nouveauL'art nouveau
L'art nouveau
 
Le cubisme
Le cubismeLe cubisme
Le cubisme
 
AC12 Bien accueillir les nouveaux agents
AC12 Bien accueillir les nouveaux agentsAC12 Bien accueillir les nouveaux agents
AC12 Bien accueillir les nouveaux agents
 
portfolio
portfolioportfolio
portfolio
 
Lécole du Bauhaus.ppt
Lécole du Bauhaus.pptLécole du Bauhaus.ppt
Lécole du Bauhaus.ppt
 
systèmes d'évacuation des fumées
systèmes d'évacuation des fumées systèmes d'évacuation des fumées
systèmes d'évacuation des fumées
 
Corbusier et ces principe
Corbusier et ces principe Corbusier et ces principe
Corbusier et ces principe
 
D'un savoir en design
D'un savoir en designD'un savoir en design
D'un savoir en design
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
 
Bauhaus de dessau
Bauhaus de dessauBauhaus de dessau
Bauhaus de dessau
 
Cours l'art nouveau
Cours l'art nouveauCours l'art nouveau
Cours l'art nouveau
 
Cours HCA: Revolution industrielle
Cours HCA: Revolution industrielleCours HCA: Revolution industrielle
Cours HCA: Revolution industrielle
 

En vedette

i-breed & associés, la présentation officielle !
i-breed & associés, la présentation officielle !i-breed & associés, la présentation officielle !
i-breed & associés, la présentation officielle !i-breed et associés
 
Petite sélection de travaux réalisés par i-breed & associés
Petite sélection de travaux réalisés par i-breed & associésPetite sélection de travaux réalisés par i-breed & associés
Petite sélection de travaux réalisés par i-breed & associési-breed et associés
 
F m-modulation-and-demodulation
F m-modulation-and-demodulationF m-modulation-and-demodulation
F m-modulation-and-demodulationSovan Paul
 
Touch Screen Technology
Touch Screen TechnologyTouch Screen Technology
Touch Screen TechnologySovan Paul
 
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemple
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemplePrésentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemple
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exempleMax Benana
 
Cloud computing ppt
Cloud computing pptCloud computing ppt
Cloud computing pptkusum sharma
 
SignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersSignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersShivanand Arur
 
I want to learn english but .........
I want to learn english  but .........I want to learn english  but .........
I want to learn english but .........Ursula Cabrera
 
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?De l'IPv4 à l'IPv6, Que ce passe t-il réellement?
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?Max Benana
 
Material Design Done Right
Material Design Done RightMaterial Design Done Right
Material Design Done RightDigital Vidya
 
Algorithme de chiffrement RC4, A5/1 & A5/2
Algorithme de chiffrement RC4, A5/1 & A5/2Algorithme de chiffrement RC4, A5/1 & A5/2
Algorithme de chiffrement RC4, A5/1 & A5/2Max Benana
 
AM modulation and Demodulation with Circuit and Output
AM modulation and Demodulation with Circuit and OutputAM modulation and Demodulation with Circuit and Output
AM modulation and Demodulation with Circuit and OutputSovan Paul
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designInVision App
 

En vedette (20)

i-breed & associés, la présentation officielle !
i-breed & associés, la présentation officielle !i-breed & associés, la présentation officielle !
i-breed & associés, la présentation officielle !
 
Petite sélection de travaux réalisés par i-breed & associés
Petite sélection de travaux réalisés par i-breed & associésPetite sélection de travaux réalisés par i-breed & associés
Petite sélection de travaux réalisés par i-breed & associés
 
Material Design
Material DesignMaterial Design
Material Design
 
F m-modulation-and-demodulation
F m-modulation-and-demodulationF m-modulation-and-demodulation
F m-modulation-and-demodulation
 
Dancing L8
Dancing L8Dancing L8
Dancing L8
 
Myths about learning to speak english
Myths about learning to speak englishMyths about learning to speak english
Myths about learning to speak english
 
Touch Screen Technology
Touch Screen TechnologyTouch Screen Technology
Touch Screen Technology
 
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemple
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemplePrésentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemple
Présentation Cdma, Multiplexage CDMA, principes de Code et cas d'exemple
 
RC 4
RC 4 RC 4
RC 4
 
Rc6 algorithm
Rc6 algorithmRc6 algorithm
Rc6 algorithm
 
Cloud computing ppt
Cloud computing pptCloud computing ppt
Cloud computing ppt
 
SignalR for ASP.NET Developers
SignalR for ASP.NET DevelopersSignalR for ASP.NET Developers
SignalR for ASP.NET Developers
 
I want to learn english but .........
I want to learn english  but .........I want to learn english  but .........
I want to learn english but .........
 
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?De l'IPv4 à l'IPv6, Que ce passe t-il réellement?
De l'IPv4 à l'IPv6, Que ce passe t-il réellement?
 
Material Design Done Right
Material Design Done RightMaterial Design Done Right
Material Design Done Right
 
Algorithme de chiffrement RC4, A5/1 & A5/2
Algorithme de chiffrement RC4, A5/1 & A5/2Algorithme de chiffrement RC4, A5/1 & A5/2
Algorithme de chiffrement RC4, A5/1 & A5/2
 
AM modulation and Demodulation with Circuit and Output
AM modulation and Demodulation with Circuit and OutputAM modulation and Demodulation with Circuit and Output
AM modulation and Demodulation with Circuit and Output
 
RC4&RC5
RC4&RC5RC4&RC5
RC4&RC5
 
Mobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX designMobile first: A future friendly approach to UX design
Mobile first: A future friendly approach to UX design
 
True Love
True LoveTrue Love
True Love
 

Similaire à Petite introduction au flat design (et autres platitudes)

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
What is Called Design ?
What is Called Design ?What is Called Design ?
What is Called Design ?Stéphane Vial
 
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
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...i-breed et associés
 
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019CandiceLenglart
 
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2Stéphane Vial
 
From design to digital design : a few theoretical concerns
From design to digital design : a few theoretical concernsFrom design to digital design : a few theoretical concerns
From design to digital design : a few theoretical concernsStéphane Vial
 
Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010IntuiLab
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3bduverneuil
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009France
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesignVersusmind
 
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
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !David Koss
 
Présentation c2i impression 3 d
Présentation c2i impression 3 dPrésentation c2i impression 3 d
Présentation c2i impression 3 dMathis Hervé
 
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
 
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 métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)designers interactifs
 

Similaire à Petite introduction au flat design (et autres platitudes) (20)

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
What is Called Design ?
What is Called Design ?What is Called Design ?
What is Called 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
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
Flat Design
Flat DesignFlat Design
Flat Design
 
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019
Masterclass - La Transformation Numérique du Design - MBA DMB - Septembre 2019
 
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2
Du design au design numérique, v.2 : petites inquiétudes théoriques #didn2
 
From design to digital design : a few theoretical concerns
From design to digital design : a few theoretical concernsFrom design to digital design : a few theoretical concerns
From design to digital design : a few theoretical concerns
 
Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010Présentation Intuilab aux Microsoft Techdays 2010
Présentation Intuilab aux Microsoft Techdays 2010
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009Présentation des métiers du design numérique à l'ESSEC - mai 2009
Présentation des métiers du design numérique à l'ESSEC - mai 2009
 
Symposium uxdesign
Symposium uxdesignSymposium uxdesign
Symposium uxdesign
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
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...
 
Designers, prenez le pouvoir !
Designers, prenez le pouvoir !Designers, prenez le pouvoir !
Designers, prenez le pouvoir !
 
Présentation c2i impression 3 d
Présentation c2i impression 3 dPrésentation c2i impression 3 d
Présentation c2i impression 3 d
 
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
 
Nouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notesNouvelles tendances ui ux avec notes
Nouvelles tendances ui ux avec notes
 
Les métiers du design interactif (2011)
Les métiers du design interactif (2011)Les métiers du design interactif (2011)
Les métiers du design interactif (2011)
 

Petite introduction au flat design (et autres platitudes)

  • 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
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. Le Flat design annonce la victoire du vectoriel (vs le bitmap)
  • 11.
  • 12. 1 grosse tendance visuelle (depuis quelques temps) : le pictogramme
  • 13.
  • 14.
  • 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
  • 19.
  • 20.
  • 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
  • 23.
  • 24.
  • 25.
  • 26. Cette approche n’est pas sans rappeler le « style typographique international » et, par exemple, Paul Rand
  • 27.
  • 28.
  • 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)
  • 33. 1996 BP Chemicals 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)
  • 37.
  • 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 !
  • 39.
  • 40.
  • 41.
  • 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
  • 48.
  • 49.
  • 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
  • 82.
  • 83.
  • 84.
  • 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…
  • 87.
  • 88.
  • 89.
  • 90.
  • 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)
  • 94.
  • 95.
  • 96.
  • 97.
  • 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…
  • 103.
  • 104.
  • 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 ?)
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114. Ou par exemple, le design géométrique, un peu moins « flat »…
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122. Le flat design influence aussi Le PRINT… (et la com).
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 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