Qu’est-ce que le Material Design ?
Introduites en 2014, les directives Material Design sont devenues la signature des sites Web et des services basés sur des applications de Google. Ils sont immédiatement reconnaissables comme étant affiliés à Google, ce qui est un atout pour l’image de marque de l’entreprise. Le Material Design a également été adopté par la communauté des designers au sens large et on le retrouve désormais sur des sites Web et des applications bien au-delà des plateformes natives de Google. Simplenote, par exemple, utilise une esthétique Material Design dans ses applications pour ordinateurs de bureau et plateformes mobiles. Dans cet article, nous allons définir précisément ce qu’est le « Material Design » et voir de quelle manière il est utilisé.
Qu’est-ce que Material Design ?
Material Design a été créé par Google en 2014, en s’inspirant notamment de la mise en page utilisée dans Google Now.
Comme la plupart des systèmes de conception, le Material Design a été créé pour offrir une expérience utilisateur unifiée sur divers appareils, plateformes et méthodes de saisie. De la même manière qu’Apple a fait des principes de conception plate sa norme, Google a utilisé Material Design pour s’assurer que, quel que soit le mode d’accès à ses produits, les utilisateurs bénéficient d’une expérience cohérente.
Material Design a des directives pour absolument tout : la typographie, les grilles, l’espace, l’échelle, la couleur et l’imagerie. Mais le Material Design ne se contente pas de dire aux designers à quoi doivent ressembler leurs sites. Il leur permet de créer des conceptions avec une hiérarchie, un sens et un objectif à retrouver absolument dans le résultat final.
Différenciation de votre marque dans le cadre du Material Design
Aujourd’hui, les internautes comprennent parfaitement de quelle manière naviguer dans une application ou un système d’exploitation. Ils n’ont pas besoin que chaque application offre la même expérience. Ils peuvent, même inconsciemment, s’éloigner des marques qui sont « ennuyeuses » lors de leur navigation.
Pour que votre site web ou votre application mobile reste visuellement attrayant, essayez d’utiliser ces quelques directives :
Choisissez des concepts : Rien ne dit que vous devez suivre mot pour mot les directives de Material Design. Trouvez les éléments de convivialité qui ont un sens sur les appareils modernes et associez ces concepts de conception à une expérience d’interface unique qui sort des sentiers battus. Assurez-vous que chaque page destinée à l’utilisateur reflète votre marque.
Ne négligez pas la fonctionnalité au profit de la forme : Un piège courant du Material Design est de choisir la forme au détriment de la fonctionnalité. Cela signifie que certains designers utilisent les directives esthétiques du Material Design et ignorent les recommandations d’utilisabilité. Ils veulent donner l’apparence d’un site web moderne sans réellement modifier l’expérience utilisateur pour correspondre à l’impression visuelle. Dans le monde de la conception numérique, si un site Web parait convivial, il doit l’être !<
Faites confiance à votre expérience en matière de conception : Google a très souvent de bonnes idées concernant l’UX et l’UI, il est donc toujours bon d’utiliser leur design comme point de référence. Cependant, c’est vous qui connaissez le mieux les caractéristiques de vos utilisateurs et de votre marque. Faites confiance à ces connaissances pour guider votre approche globale du design. Par exemple, le Material Design utilise parfois des boutons plats pour rationaliser la page, mais cela peut prêter à confusion en matière d’interactivité. Laissez de côté les éléments susceptibles de prêter à confusion et les animations complexes si vous pensez qu’ils peuvent nuire à la convivialité.
Allez au cœur du Material Design : La prochaine fois que vous examinerez la philosophie du Material Design, éliminez tous les détails superflus. Au fond, il s’agit de mélanger le meilleur du monde réel et le meilleur du monde numérique dans une interface transparente. Reprenez les idées essentielles, mais établissez vos propres règles de conception, en fonction de votre public.
Consultez les sites de vos concurrents : Vos sites se ressemblent-ils ou les éléments sont-ils suffisamment contrastés pour créer une expérience de marque différente ? Vous devez inclure des informations qui correspondent au niveau de détail fourni par votre concurrent, mais l’aspect général du site ne doit pas être similaire.
Trouvez une raison valable : N’utilisez des éléments de Material Design que si vous avez une bonne raison de le faire. Avez-vous vraiment besoin d’ajouter de la profondeur ou d’utiliser un call to action flottant ? Si l’élément en plus n’améliore pas l’expérience de l’utilisateur ou l’interface, passez à un élément statique ou plat qui répondra aux besoins réels de votre utilisateur.
Continuez à investir dans votre propre apprentissage : Assistez à des séminaires, suivez des cours et continuez à lire sur les concepts plus larges de l’UI et de l’UX au lieu de compter uniquement sur le Material Design. Bien qu’il s’agisse d’une philosophie extrêmement populaire, le Material Design tel que nous le connaissons finira par évoluer. Il est donc essentiel que vous ne preniez pas de retard par rapport à la philosophie de base, à savoir la création d’une expérience utilisateur de qualité.
Écoutez les commentaires des utilisateurs : Si vous n’êtes pas constamment dans l’environnement de l’utilisateur final, vous ne remarquerez pas toujours les petites incohérences qui affectent négativement leur expérience globale. Vos utilisateurs, en revanche, peuvent vous donner des indications importantes sur ce qui fonctionne et ce qui ne fonctionne pas. Demandez et écoutez les expériences réelles des utilisateurs au fur et à mesure que vous avancez pour vous assurer que vous êtes sur le bon chemin.
Quelques exemples de Material Design
Think With Google
Il n’est pas surprenant qu’un site Web géré par Google figure parmi les exemples présentés ici. Il y a un certain nombre d’éléments que Think With Google utilise à partir de son système de conception :
- Une conception basée sur une grille pour un flux de contenu régulier et prévisible.
- Des ombres qui créent un contraste entre les couches et aident les visiteurs à identifier les différentes parties de la page à consulter.
- Une conception minimale avec des contrastes de couleurs vives pour attirer l’attention sur les appels à l’action.
Elementor
Si vous ne l’aviez pas remarqué, le site Web d’Elementor est basé sur un grand nombre de principes du Material Design :
- Les boutons les plus importants de la page sont conçus pour ressembler à des éléments cliquables et se transforment pour fournir aux visiteurs la confirmation que « Oui, vous pouvez cliquer ici. »
- D’autres éléments notables (comme les cases Layout, Typography et Colors) sont placés sur une couche supérieure afin que les visiteurs les remarquent avant de passer à autre chose.
- L’animation est réaliste, de sorte que les visiteurs ne voient que des graphiques qui bougent d’une manière attendue. Ils attirent toujours l’attention, mais ne détournent pas l’attention du reste du contenu.
-
-
Hotels.com
Bien que le site Web sur bureau de Hotels.com n’adhère pas exactement aux principes du Material Design, son site mobile le fait :
- Des lignes de démarcation claires séparent chaque élément de la page de résultats de recherche, ce qui permet aux visiteurs de visualiser facilement les hôtels correspondants, un par un.
- La transition de la vue Liste à la vue Carte montre comment le Material Design aide les concepteurs de sites Web à créer des expériences plus conviviales pour les visiteurs.
- Dans la vue Plan, les boutons « Voir plus de propriétés », « Liste » et les boutons de zoom sont faciles à distinguer car ils sont placés sur une couche au-dessus de la carte.
