Mais qu’est-ce le Flat design, material design, design thinking

Comment s’y retrouver dans ces différents concepts qu’est le Flat Design, Material Design, Design Thinking.

Explications :

Le web design est vivant. Il s’imprègne des tendances et des modes qu’il inspire en retour, influencées par les supports, les technologies, les start-ups, les designers, les modes… en n’oubliant pas les grands acteurs Apple, Google ou Microsoft. Il est courant de voir une affiche ou une publicité avec un style très web !

 

say flat

Petit clin d’œil à Say Fat, une boutique de tee-shirts appétissants…

Le flat design et le style minimal

Plus plat, plus graphique, plus géométrique, plus minimal… Plus coloré aussi, ou pas du tout. Avec une petite révolution Google nommée Material design, qui redessine les bases du flat, essentiellement sur mobile : fluidité, animations responsive, grilles, effets de profondeur, ombres, effets papier découpé, typographie épurée et lisible (grands caractères)… iOS suivra-t-il ? Je constate que le flat design est suffisamment riche pour se décliner dans différents styles.

Popularisé par Apple dès 2012, il s’agit d’une véritable philosophie de conception graphique pour les interfaces numériques, basé sur l’épure et le refus du SKEUmorphisme qui prévalait jusqu’alors. Le SKUMorphisme, c’est l’imitation des objets de la vie réelle sur un écran (effets de carnet à spirale, de cuir,…) que l’on a vu pendant longtemps dans les interfaces Apple, et qui a totalement disparu à présent que Jony Ive est à la tête à la fois du Design Materiel et logiciel d’Apple

Le Flat Design a également signé le grand retour de la typographie, qui avait été jusqu’alors absente des interfaces web, principalement à cause de limitations techniques. A présent on peut « embarquer » à peu près n’importe quelle police sur un support web, ce qui a permis à de nouvelles envies graphiques de se faire jour.

Les principales caractéristiques de ces interfaces sont : les effets de transparence, les filtres sur les photos, des couleurs douces et/ou très travaillées et surtout une absence totale de relief et d’effet de profondeur. Dans sa forme la plus radicale : tout effet de dégradé, biseau, motif, texture ou volume sont définitivement écartés.
Si volume ou ombre il y a, ceux-ci sont représentés, selon ces mêmes spécificités : par de l’aplat.

Les couleurs sont, le plus souvent, vives sur fond contrasté ; les couleurs primaires et secondaires étant largement privilégiées (teintes de bleus vifs, verts, jaunes, oranges, violets, notamment). La palettes de couleurs est également plus étendues dans approche graphique (six à huit couleurs au lieu de trois dans la conception « classique »)

Pourquoi un tel « raz de marée » autour du Flat Design ? Geoffrey Dorne, designer et créateur de Design & human l’explique ainsi :

« A l’époque où l’on découvrait les écrans tactiles, il fallait sur-signifier les boutons, montrer qu’ils sont cliquables… Aujourd’hui un bouton avec un rectangle avec un pictogramme, on sait que c’est cliquable. Aujourd’hui, il suffit de signifier seulement. »

Les limites du Flat Design sont toutefois d’ordre ergonomiques : si l’on va trop loin dans l’épure, l’interface peut devenir incomprehensible, et on peut perdre complètement l’affordance.

Une partie des inconvénients du Flat Design sont en fait résolus avec Material Design, qui passe à l’étape de la mise en oeuvre maitrisée.

 

flat design 2

flat

 

Pour aller plus loin, la documentation officielle de Google

 

La typographie

Le web redonne ses lettres de noblesse à la typo ! En grand et sous toutes ses formes. Cependant, les polices de caractère simples sont privilégiées, avec des ruptures marquées dans la taille des caractères. La typo contribue à mettre en scène l’image, elle se conjugue avec les icônes et s’adapte à la mise en page.

 

Le Material Design

Contrairement au Flat Design, il ne s’agit pas d’une philosophie, mais de guidelines de conception fonctionnelle et graphiques extrêmement détaillés et qui ne laissent aucune place à l’imagination : le moindre filet, le moindre message d’erreur est ainsi spécifié ! Les premiers exemples d’interfaces Material Design sont des applis pour Androïd et Chrome. L’exemple le plus parlant est sans doute l’application Google Maps. Flat et Material Design ne sont pas fondamentalement opposés mais cependant très différents. Ainsi, le principe fondateur du material design est que le mouvement, les transitions et les effets visuels doivent être les plus proches possibles de ce dont on peut avoir l’expérience dans la vie réelle.

« Our material is grounded in tactile reality, inspired by our study of paper and ink, yet open to imagination and magic » – Matias Duarte, VP of Design at Google

La base du material design sont l’encre et le papier pour aboutir à une sorte de « matière numérique » qui va réagir comme une feuille ou un tissu : toucher, feuilletage, navigation par cartes que l’on pose dessus ou dessous, qu’on empile ou qu’on met en accordéon. Il y a aussi les marges, les blancs, les grandes typo,… Bref, tout ce qui a fait les grandes heures de la presse papier depuis 60 ans.

Un des autres grands principes, ce sont les aplats de couleur vive. Mais pas n’importe lesquelles. La palette de couleurs a déjà été définie très précisément par Google, là encore, peu de place à l’improvisation.

On peut résumer le Material Design en 4 mots clés : Pas de transparence, couleurs vives, animations et relief – contrairement au Flat Design : couleurs plus douces, transparence, pas de relief.

 

Le Design Thinking

Contre toute attente, avec le Design Thinking, on change assez radicalement de sujet. Le terme souffre en effet de beaucoup d’incompréhension à cause de la présence du mot « design », qui vient du fait que ce sont des agences de design qui ont commencé à le populariser. Mais il s’agit d’un concept bien plus large que le principe créatif, plutôt une méthode de conception produit. Le design Thinking, c’est penser un produit en partant de la problématique de l’utilisateur. A partir de cette problématique, la méthode vise à rassembler plusieurs compétences dans l’entreprise afin de trouver diverses solutions possibles et surtout envisageables en fonction de la structure et des moyens à disposition.

Une fois une solution choisie, le cœur de la méthode passe par le prototypage, suivi d’un test utilisateur puis de plusieurs itérations avant de valider ce qu’on mettra réellement en oeuvre. Derrière un terme à la mode, cela reste une méthode de conception itérative, basée sur l’étude de l’utilisateur…

Les plus

On délivre des produits qui correspondent vraiment au besoin utilisateur, on remet l’internaute au centre des préoccupations des concepteurs, on évite ce qu’on nomme couramment l’OPGS (l’Opinion du Plus Gros Salaire). On réduit les risques d’échec : le projet sans fin, le projet qui ne va plaire qu’à ses concepteurs, des couts démesurés pour des fonctionnalités jamais utilisées, etc.

 

Les moins

Etant donné qu’on réagit à ce que demande l’utilisateur, on risque d’être paradoxalement moins innovant ou en tout cas beaucoup moins disruptif que si l’on adopte une méthode de conception « Out of the Box ». Difficile d’inventer les usages de demain dont les utilisateurs d’aujourd’hui n’ont même pas idée…

Pour en savoir plus sur le Design Thinking, lire cette excellente synthèse

 

 

Source : Café numérique