MATERIAL DESIGN

Lancé par Google en 2014, le Material Design a d’abord été utilisé sur Android, puis desktop par les applications principales de la firme.

Qu’est-ce que le Material Design ? C’est un ensemble de règles de design proposées par Google et qui s'appliquent à l'interface graphique des logiciels et applications. C’est une manière de penser son application.

Plus loin que le responsive design, qu’il incorpore, l’intention derrière le Material Design est la mise en valeur de l’information, la simplicité. Le tout doit être intuitif pour l’utilisateur.

Google le décrit comme un langage visuel : direct, simple, hiérarchisé, graphique.

 

Visuellement ?

Les utilisateurs Google voient déjà à quoi le Material Design ressemble. Les développeurs Android l’utilisent par défaut sur leurs applications.

Fonds en dégradés de blanc ou noir (disons gris très clairs ou gris très foncés pour les puristes). 

Nuances d’une couleur primaire forte pour les éléments importants, parfois une couleur secondaire.

Grands espaces. L’information respire.

Quelques boutons ronds.

Une élévation des éléments selon l’importance (les jeux d’ombres font tout).

Le Material Design c’est bien plus, mais rien qu’avec ça on se fait une idée !

 

Et si on veut s’y mettre ?

La documentation est exhaustive et précise. Inconvénient, elle est longue à prendre en main.

De nombreux composants existent et chacun est décrit clairement avec, en bonus, les choses à faire et ne pas faire.

Exemple : Les cards, élément de base du Material Design, représentent un contenu et un seul. On ne doit pas y mettre sa liste de train et la météo en même temps, il faudrait deux cards pour ça.

Autre exemple : on aime tous les belles images, mais elles peuvent détourner l’attention de l’information importante. Sur la description d’un restaurant c’est parfait, sur le formulaire de réservation ça l’est moins.

 

“C’est juste des principes de bon design que tu décris !”

Oui et Google les a synthétisés en rajoutant sa touche graphique. D’où la facilité d’accès.

“C’est bien beau mais tu n’as pas encore parlé technique”

Une fois qu’on a la théorie, on a à disposition une librairie Lite pour commencer rapidement.

Juste ici: https://www.getmdl.io/

On y trouve également pictogrammes types, palettes couleurs prédéfinies, etc.

A l’utilisation, rien de bien méchant. On rajoute des classes à nos éléments HTML comme d’habitude. Et comme une documentation technique précise est fournie, on sait exactement quelle classe il faut utiliser et où la mettre pour l’effet voulu.

Exemple pour les cards: https://www.getmdl.io/components/index.html#cards-section

Si on veut du Material Design plus poussé, il faut quand même mettre la main dans le CSS. Les composants de base sont fournis mais appliquer les principes de bases est de votre ressort (cela vaut pour l’espacement, le positionnement, etc). Même Google utilise du Material Design custom (shocking !)

Lorsque l’équipe découvre le material Design, ça donne : 

 

Pour les utilisateurs de Polymer, le Material Design fait déjà partie du catalogue.

Et pour les appli Android ? C’est par défaut dans Android Studio, donc on se laisse porter.

“Tu vantes les mérites de la documentation du Material design mais on la trouve où ?”

Soit en demandant à Google, soit ici: https://www.google.com/design/spec/material-design/introduction.html

 

Léonore S.

Commentaires

Thomas Cholley
Pour les utilisateurs de React, il y a la lib Material-UI (http://www.material-ui.com) qui implémente le material design.

Ajouter un commentaire