petite introduction au flat design (et autres platitudes)

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