25 juin 2014, Google présente le material design : un nouvel ensemble de règles de design qui donnent du relief au flat design tout en restant, à première vue, du flat design… Après avoir conquis les smartphones, ces nouvelles règles s’invitent sur le web et deviennent plus incontournables chaque jour.

Du flat design sans en être ? Si vous n’êtes pas totalement à l’aise avec le concept, commencez par lire cette présentation du flat design en 5 points afin de bien saisir les nuances qui vont suivre car quand une société qui a conquis le monde (ou presque) avec 6 lettres colorées, une barre de recherche et deux boutons sur une page totalement blanche parle de design, forcément on joue dans la nuance.

Les principes du material design

Le material design est un ensemble de 3 principes qui mis en commun permettent de donner vie à une interface que le flat design rendait parfois trop impersonnelle.

1. Franc, graphique et intentionnel

A ce niveau le material design reprend les codes du flat design en utilisant les espaces, les tailles, les contrastes pour donner du sens aux objets et créer une véritable hiérarchie dans l’interface. Ainsi dans la capture ci-dessous, vous savez du premier coup d’œil dans quel dossier vous vous trouvez et le bouton qui permet de rédiger un email est bien visible.

Exemple de material design : capture d’écran de l’application gmail pour Android

2. la métaphore de la matière

Dans la capture que nous venons d’utiliser comme exemple, nous pouvons imaginer que le bouton est constitué d’une matière différente de celle du fond de page, comme si quelqu’un avait superposé un objet rouge sur une feuille de papier blanc. Les contours du cercle permettent de créer les limites de la matière, tandis que l’ombre portée lui donne son épaisseur.

Contrairement au skeuomorphisme qui s’attache à reproduire le plus fidèlement possible les objets et les matières, le material design les suggère. Et contrairement au flat design qui met tous les éléments au même niveau, on a un bel effet de superposition qui vient donner un peu de relief au design.

Bien sûr il y a une contrepartie : si un objet est un matériau solide, il est impossible de le traverser (il ne peut pas y avoir d’action sur un bouton qui est recouvert d’une image par exemple), deux objets ne peuvent pas être au même endroit (coordonnées x, y, et z)…

3. Le mouvement donne du sens

Puisque c’est l’utilisateur qui initie le mouvement, le mouvement est légitime et peut donc donner du sens à une interface. Regardez les deux captures ci-dessous : sur l’appli Google Play Film pour Android Lollipop, quand on clique sur l’image représentant l’affiche d’un film, celle-ci rétrécie et se déplace pour devenir une simple illustration de la page de détails de ce film. Le mouvement a un sens puisque c’est une action de l’utilisateur qui l’a initié et ce sens est “transmis” à la page suivante : je suis ici parce que l’affiche du film m’y a amené.

Je ne sais pas vous mais ça me rappelle l’animation prévue par Prestashop lorsque l’on ajoute un produit au panier : celui-ci se “déplace” jusqu’à l’endroit où est affiché le récapitulatif du panier. Si comme moi vous avez désactivé cette animation sur toutes les boutiques que vous avez mises en place, ça doit vous donner à réfléchir… en tout cas moi ça me fait sourire.

 Des exemples de material design

Pourquoi tenter de refaire ce qui est déjà excellent ? Je ne vais pas tenter de m’attribuer un travail qui n’est pas le mien, alors je vous invite à consulter des exemples de material design sur le site graphism.fr.

Des ressources pour se lancer dans le material design

C’est bon pour la théorie ? Place à la pratique maintenant. Si vous souhaitez vous lancer, commencez par lire les spécifications publiées par Google ici, vous y retrouverez par exemple la palette de couleur utilisée, ou la façon d’utiliser les boutons. Ce site devrait vous permettre de gérer sans problème les problématiques de typographie, couleurs, et métaphore de la matière. Vous pouvez également y télécharger une belle quantité de ressources : police de caractères, icônes

Mais pour ce qui est du mouvement, il va falloir passer par du script… rassurez-vous ici aussi Google a prévu le coup et propose en téléchargement une librairie de scripts et templates en css, html et javascript : que vous pouvez retrouver sur www.getmdl.io. Tout est aussi simple d’utilisation que Bootstrap et la documentation est efficace. Vous pouvez même copier/coller des snippets pour commencer à utiliser cette librairie avec des composants prêt à l’emploi. Si vous préférez coder “from scratch”, libre à vous : il s’agit de design et de principes, pas d’une syntaxe et d’une grammaire gravées dans la pierre.

Cet article est volontairement court, en opposition au gros dossier proposé par Google, mais j’espère avoir réussi à vous transmettre l’essentiel des principes de ce langage visuel avec lequel vous serez un jour ou l’autre amené(e)s à composer.

Comme toujours, si vous avez des questions ou commentaires (autres que ceux en rapport avec mes goûts en matière de films) n’hésitez pas à vous exprimer !

Sources :

Présentation de la librairie Material Design Lite sur NextInpact: http://www.nextinpact.com/news/95716-google-propose-kit-ressources-material-design-lite-pour-sites-web.htm
Bibliothèque d'icônes: https://materialdesignicons.com/
Un peu de théorie sur le WebDesign: http://www.grafikart.fr/blog/webdesign-inspiration-developpeur