Une présentation et des ressources pour bien démarrer avec le material design

Le material design est le dernier concept à la mode dans l'univers du Webdesign. Mais d'ou vient-il et en quoi consiste-il?

Material design, by Google

Tout comme la vague de skeuomorphisme des débuts de l'iOS et du flat design de windows 8, le material design vient des appareils mobiles. Ses origines sont le système de cartes utilisé par Google now sur Android 4.1

Cette interface semble avoir beaucoup plu à Google, qui a donc décidé de l'étendre à tout Android. C'est au cours de son salon IO 2014 que Google révéla Android 5 lollipop et son interface, officialisant au passage le nom material design, et publiant une charte graphique très détaillée.

Charte graphique du Material Design

Google I/O 2014

 

Pour accélérer et encourager l'adoption de leur bébé par les web designers et lui permettre de devenir le look standard des applications web, Google décida de publier un framework CSS permettant de bootstraper une application en material design aussi simplement que d'utiliser Twitter Bootstrap (liste complete en bas de l'article).

Concrètement, le material design c'est quoi? 

Il serait aisé de confondre de loin le material design avec le flat design, tous deux utilisent de grands aplats de couleurs vives non texturées. Pourtant une différence majeur le sépare : la 3D et l'utilisation de differents plans. 

Le material design a en effet décidé d'encrer son design dans le monde réel grâce a un jeu d'ombres et de plans permettant de saisir d'un seul coup d'oeil les différents niveau de hiérarchie des informations proposées.

Un autre axe sur lequel joue le material design est animation : dans le monde réel rien n'apparaît spontanément, et le but est de mimer le monde réel. Chaque changement de notre page/vue doit donc être accompagné d'un mouvement symbolisant d'où vient ces nouvelles informations, et comment revenir à la page d'origine.

Mon avis

Mon avis est évidemment subjectif, mais je trouve qu'e material design est un bon compromis entre la simplicité d'utilisation/comprehension/creation et le plaisir des yeux.

Les animations et ombres ne sont pas les techniques les plus complexes à mettre en place et demandent assez peu de travail de graphisme, mais permettent une très bonne compréhension des applications et aide l'ergonomie.

Pour vous permettre d'essayer dès maintenant de travailler avec le material design, je vous propose ces quelques ressources pour démarrer sans plus attendre !

Style Guide pour le Material Design

Material design pour Angular

Material design pour React

Framework Material design agnostique

 

Framework material design pour Android