Material theming, qu’est-ce qui change ?
Axel Johnston 9 juillet 2018

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.

"<yoastmark

"<yoastmark

 

"<yoastmark

 

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

 

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

Bottom bar de l'application Posivibe
Bottom bar de l’application Posivibe

 

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.

Top bar avec image
Top bar avec image

Backdrop

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

Nouveau composant : le backdrop
Nouveau composant : le backdrop

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

 

Banner

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

Les bannières
Les bannières

 

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 application 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ère : sur le côté gauche ou sur le bas.

Modal Drawer
Modal Drawer
Modal Bottom

 

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.

Modal sheet
Modal Sheet
Bottom sheet
Bottom sheet

 

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

 

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

Axel Johnston
Axel Johnston

Diplômé de l'Ecole Nationale Supérieure de Cognitique, Axel apporte son expertise en design d'experience utilisateur (UX design, UX research) à nos clients pour les aider à concevoir des produits toujours plus innovants en mettant au centre de la conception les usages futurs.

Votre commentaire

Your email address will not be published. Required fields are marked *