Material theming, qu’est-ce qui change ?

Le mois dernier s’est déroulée la traditionnelle Google I/O, conférence annuelle de Google pour présenter ses innovations. Cette année parmi les nombreuses annonces, Google a présenté l’évolution du Material Design en une nouvelle version dénommée Material Theming. Après 4 ans de bons et loyaux services, souvenez vous, on vous en avez parlé à l’époque, c’est donc tout naturellement qu’une nouvelle version pointe le bout de son nez et vient apporter des changements, certes mineurs, mais intéressants.

 

Le Material Theming : une expérience d’interface plus flexible

Tout comme l’était le Material Design, le Material Theming (Material design v2) est avant tout un ensemble de règles dédiées aux designers et développeurs pour créer des interfaces cohérentes entre toutes les plateformes (Web, mobile, objets connectés, tv connectées, …). Un des principaux défauts du Material Design était sa rigidité, vous aviez une liste de composants estampillés Material Design et la personnalisation n’en était qu’extrêmement ponctuelle. C’est ainsi que cette philosophie de composants et d’interaction n’a pas vraiment eu la raisonnance que Google souhaitait, notamment sur iOS.

Ces guidelines étaient ainsi essentiellement réservées sur Android et il n’était pas forcement aisé de faire coïncider les guidelines Material Design et celles d’iOS. Google a donc souhaité cette année faire de son Material Theming un ensemble de règles plus flexibles, donnant la possibilité à chacun de s’approprier cet univers tout en respectant les contraintes propres à chacun : univers techno différent d’Android, charte de l’entreprise, interactions personnalisées etc…

 

Un univers graphique personnalisable

Fini la palette de couleur imposée, les tailles de polices de caractères précises et l’utilisation exclusive de Roboto. C’est pour cette raison précise que Google a transformé la terminologie Design en Theming. Le Material Theming ne vous propose plus un design exclusif, mais bien un thème qui doit être adapté, transformé pour correspondre au mieux à vos attentes.

Des formes adaptées

Fini les formes carrées avec des coins arrondis, vous êtes libres d’utiliser la forme que vous souhaitez.

 

Une évolution des composants

Un floating button plus si flottant que ça

Une des évolutions les plus notables est celle du floating button. Vous avez maintenant la possibilité de l’intégrer à l’endroit qui convient le mieux et plus seulement en bas à droite de votre écran.

 

 

Vous pouvez également l’appliquer de manière différentes en fonction de vos pages.

 

Appréciez la différence lorsque vous appliquez un thème spécifique à ce nouveau bouton. Vous pouvez maintenant arriver à des interfaces ressemblant à celle ci :

 

Top bar

Quelques petits changements sur la barre d’action supérieure avec notamment la possibilité de changer le fond par une image, ou encore l’arrivée d’une barre d’action contextuelle.

Backdrop

Un tout nouveau composant fait son entrée, le backdrop.

Ce composant vous permettra de créer des nouvelles interactions pour des menus, des filtres etc…

 

Banner

Des bannières font également leur entrée.

 

Le navigation drawer n’est pas mort !

Ce fameux composant, aussi appelé hamburger menu, tant décrié, continue de rester dans les guidelines. Pour rappel, le navigation drawer s’utilise dans un cas bien précis : des applications avec plus de 5 clés d’entrées, des applications avec deux (et plus) niveaux de navigation, de la navigation rapide entre des clés d’entrées sans relation.

Alors qu’est-ce qui change cette année ? Vous avez maintenant la possibilité de l’utiliser de deux manières : sur le côté gauche ou sur le bas.

 

Tooltips sur mobile

Les tooltips font également leur entrée sur mobile via un appui long ou via le focus (Android seulement).

Les champs textes

Vous avez dorénavant deux possibilités pour vos champs textes.

Les Sheets

Les sheets font leur apparition avec deux possibilités:  sur le côté (droit) ou sur le bas.

 

Bref, plein de nouveautés assez intéressantes permettant de créer des interfaces de plus en plus cohérentes entre les différents univers (iOS, Android, tv connectées, …) et surtout beaucoup plus ouvertes pour les chartes et directions artistiques de nos clients !

 

Découvrez toutes les guidelines sur le site Material.io