Les années se succèdent, et les différents designs du web aussi. Skeuomorphisme, Flat Design ou matérial design sont des exemples de l’évolution des designs et des nouveaux styles. Depuis quelque temps, c’est le material design qui se démarque énormément.
Qu’est-ce que le material design ?
Le concept du material design est une innovation apportée par Google en termes de conception graphique et design. Google a apporté différentes marches à suivre ou règles afin de permettre une meilleure interface graphique sur des blog, des sites, des applications mobiles, framework etc… La firme américaine a officialisé son implémentation lors de sa conférence Google I / O de 2014. Le but principal était d’unifier l’expérience utilisateur sur Android, mais en vue d’une large diffusion, ce design s’est étendu à tous les services Google. Quelles sont les lignes directrices du material design ? Si nous devions résumer dans un but de facilité la compréhension, nous pouvons vous présenter plusieurs tâches fondamentales à respecter :
- Navigation
- Densité
- Couleur
- Typographie
- Son
- Iconographie
- Forme
- Mouvement
- Interaction
L’objectif est clair, c’est un design qui sert à faciliter au maximum la compréhension de l’utilisateur en utilisant les meilleures pratiques de l’expérience utilisateur ainsi que les habitudes de navigation
Comment fonctionne le material design ?
Le matérial design fonctionne grâce au regroupement des meilleures techniques et bonnes pratiques des designers afin de permettre de créer un design centré sur l’utilisateur, agréable et simple d’utilisation.
Il faut prendre en compte de nombreux paramètres pour qu’il puisse fonctionner correctement. Google développeur propose de nombreux points de vigilances pour avoir une cohérence globale du graphisme :
Surface et ombrages
Pour réussir son material design, il faut commencer par la base, la surface (ou le fond). Le but est de faire ressortir certaines couches grâces aux effets d’ombres afin d’ancrer dans l’esprit de l’internaute une certaine hiérarchie de la structure.
Images
Les photos, pictogrammes ou images que vous choisirez doivent impérativement représenter votre produit ou service. Il doit être le plus clair et représentatif dans l’esprit de l’internaute. Inconsciemment, il doit comprendre le site, la page, l’image et l’importance accordé aux éléments notamment grâce à ces effets visuelles. Lorsque c’est possible, réduisez les marges des photos dans l’écran afin que l’utilisateur se sente en immersion totale.
Couleurs
Les couleurs que vous choisirez vont être très cruciales. Elles définiront aussi la hiérarchisation de la page. En effet, s’il ne faut pas hésiter à utiliser des couleurs (3 maximum) elles doivent être placé à des endroits stratégiques pour séparer un fond de couleur d’un bouton d’action par exemple.
Lignes de repères
Google préconise de respecter une grille de référence de 8 DP (Design pressure ou pression de référence) afin de faciliter la compréhension des visuels. Cependant, pour le texte, vous pouvez être bien plus précis en allant jusqu’à l’utilisation d’une grille de 4 DP. Vous l’aurez compris, ces lignes de repères vont être utiles afin d’aligner vos éléments et garder une harmonisation.
Mouvements de transition
Que serait le material design sans ses transitions exceptionnelles. La pertinence de vos choix en termes de transitions d’une page à une autre doit être logique et agréable pour l’utilisateur. Les transitions doivent être compréhensibles en gardant une totale logique avec les habitudes d’utilisation pour permettre un confort de navigation.
Interactions réactives
Les interactions sont différentes des mouvements de transition. Pour le coup, elles sont utilisées pour focaliser le regard sur une action à réaliser. L’interaction peut se modéliser par un bouton d’action pour ouvrir un contenu, pour mettre en avant les relations entre les contenus ( slider / carousel), ou encore un effet pour mettre en avant l’action de l’utilisateur (bouton qui réalise une animation après le clic). La navigation se trouve être bien plus agréable, logique et possède un certain effet d’accompagnement de l’utilisateur dans son expérience.
Quand peut-on utiliser le material design ?
Si ce design si particulier était d’abord et avant tout utilisé pour la création d’applications, certains sites réalisent des prouesses graphiques étonnantes. Si vous avez pour but premier de créer une application en material design, alors vous avez tout compris ! Les applications réalisées avec ce style graphique sont extrêmement appréciées des internautes car, l’expérience utilisateur est au centre de la démarche de création. Si vous pensez donc qu’il ne doit être utilisé uniquement pour des applications.. Et bien vous allez être surpris. En effet, Google utilise aussi bien le material design sur ses applications que sur ses différents sites.
N’hésitez pas à créer des sites avec ce design, mais n’oubliez pas qu’ils doivent quand même être représentatifs de votre cible et de votre marque. En effet, si vous avez un site en material design, il faut que tous vos contenus s’y prêtent. Utiliser un design particulier uniquement pour faire « jolie » ou donner un effet « waouh » s’avère être une grave erreur. Le site web de Waaark par exemple est une réussite totale de la maîtrise du material design. Je vous invite à le découvrir pour comprendre toutes les possibilités sur un site web et faire une comparaison face aux nombreuses applications qui utilisent déjà ce design. Waaark à une connaissance complète du sujet et nous le remarquons dans les animations, les transitions, les couleurs, etc.. Mais tout le monde n’est pas encore bien habitué aux sites créés comme cela. Concrètement, vous pouvez appliquer les principes du material design sur tous vos projets web, mais il faut réaliser un lourd travail d’étude des cibles et de recherche design afin de satisfaire les besoins de sa cible pour permettre une navigation optimale.
Comment utiliser le material design de façon optimale ?
Google est très fier de son travail : « Nous nous sommes surpassés pour créer un langage visuel pour nos utilisateurs qui allie les principes reconnu d’un bon design avec l’innovation et le potentiel de la technologie et de la science. Voici le Material Design » Pour utiliser ce design de façon optimale, il est nécessaire de prêter attention à 2 grands axes :
L’apprentissage du material design et sa compréhension
Dans un premier temps, si vous débutez, vous avez besoin d’approfondir vos connaissances du sujet avec de nombreuses ressources et notamment grâce à l’application de Google « material.io » qui permet d’apprendre, de tester et de créer. Via l’application material.io, vous aurez accès à de nombreuses ressources pour débuter, des exemples comme des boutons material design déjà créés. Retrouvez aussi des ressources pour développer sois même. En complément, vous pouvez lire des articles, des livres et analyser au maximum le travail des autres. Et oui, de nombreux designers proposent de découvrir leurs travaux gratuitement ce qui permet d’apprendre, mais aussi d’ouvrir son esprit aux différentes possibilités et utilisations. Découvrez les ressources sélectionnées en fin d’article.
L’adaptation du material design pour vos internautes
Dans un second temps, est-ce que vos visiteurs sont assez matures pour que vous changiez complètement votre site avec une refonte design ? Certaines cibles sont extrêmement réfractaires au changement. Ce changement nécessite d’adapter ses refontes, ses maquettes aux besoins et surtout à la compréhension de son audience. La cible des 15 – 29 ans et la cible des 30 – 40 n’aura pas le même degré d’adaptation à ce changement malgré que ça soient les cibles que l’ont retrouve le plus dans le web. A vous de définir les premiers changements possibles afin de garder une compréhension simple pour vos utilisateurs les plus fidèles. Si vous pensez que votre cible est prête, vous pourrez utiliser de façon optimale le material design sur tous vos supports web. En revanche, si vous identifiez de nombreux points bloquants à son implémentation. Alors, commencez à ajouter des éléments au fur et à mesure. Le but n’est pas de se précipiter, mais de réaliser les meilleurs changements qui amélioreront progressivement l’expérience utilisateur jusqu’au point de rupture qui vous fera passer le cap définitivement.
Quels sont les objectifs principaux du material design ?
Nous pouvons identifier 3 grands axes principaux auxquels ce design doit répondre :
L’un des buts premiers est d’être toujours plus intuitif à son utilisation. La navigation sur un site web ou une application représente l’un des grands enjeux du monde numérique d’aujourd’hui. En effet, simplifier au maximum la navigation en proposant une expérience unique et agréable permet de fidéliser au maximum l’audience. Le material design répond donc à ce besoin d’utilisation instinctive qui permet de mieux convertir et de se différencier positivement dans l’esprit des internautes
Responsive entre tous les supports
Le responsive en 2019 est incontournable ! Et c’est encore plus le cas pour le material design. En effet, les proportions doivent être respectées et rester compréhensible. La navigation entre un ordinateur, un téléphone ou une tablette doit être identique dans les transitions, les boutons d’interaction, les chemins de navigation, etc… C’est pour cela qu’il est important de respecter les bonnes largeurs. Pour rappel lors de la création :
- Smartphone : 360 DP
- Tablette : 600 DP
L’un des objectifs est bien d’être responsive sur tous les supports afin de garder une cohérence globale.
Mouvements, animations et interactions
Pour impliquer vos utilisateurs et profiter d’une UX de qualité, les mouvements, animations et interactions sont particulièrement efficace. En effet, l’un des grands axes de ce design est la capacité à offrir des micros interactions sur les différentes parties de votre navigation web. Plus qu’un simple effet « stylé » il apporte une touche interactive qui permet d’accroître la satisfaction sur le web. Le sentiment d’implication dans l’utilisation est beaucoup plus fort et cela peut aussi vous permettre de convertir plus facilement.
Le design thinking et le material design sont-ils liés ?
Le design thinking est grossièrement plus un concept d’innovation qui permet de partir des problématiques humaines sur beaucoup de thématiques et pas seulement digitales. Si nous partons de ce principe, alors le material design peut se passer du design thinking, mais sera-t-il aussi efficace ? Je n’en suis pas si sûr, cela dépendra surtout de votre besoin, de vos objectifs et encore une fois de vos cibles.
La démarche du design thinking peut être déterminante dans le succès d’un projet, c’est pourquoi, lier l’innovation créatrice qui part d’un besoin utilisateur et le design UX semble être un mélange plus qu’intéressant. Cela peut être l’un des éléments qui sera différenciant dans votre écosystème concurrentiel. Finalement, ces deux concepts ne sont pas obligatoirement liés, car les besoins varient et ne sont pas forcément propices au mélange des deux. Cependant, si vous avez la possibilité de les mélanger, vous garantissez la création d’un service utile que les utilisateurs recherchent via un besoin (exprimé ou caché) pour les fidéliser avec un design de qualité UI-UX friendly.
Le material design est-il présent sur Android ?
Et oui ! Sur Android depuis la version 5.0, le material design est bel est bien présent ! Disponible depuis le 3 novembre 2014, il succède fièrement à l’Holo design. Le Holo design était très intéressant en termes d’expérience utilisateur, mais il était clair que certaines règles de navigation nécessitaient une mise à jour. Cependant entre le material design et le Holo design, les changements semblent parfois insignifiants, mais changent énormément notre manière de naviguer sur Android. La navigation a toujours été un point que Google prend au sérieux, donc plus qu’une refonte globale, c’est plutôt une amélioration de l’existant ce qui donna sur Android le material design. Maintenant, si vous vous demandez si les applications présentes dans le play store sont obligatoirement en material design… Et bien non ! Il suffit d’en télécharger plusieurs au hasard pour comprendre que la majorité des applications Android fonctionnent sans material design. Pourtant, Google propose d’innombrables ressources pour faciliter les développeurs d’application à instaurer ce design au cœur de leur produit ou service.
Material design ou material ui ?
Une question que de nombreux d’internautes recherchent, qu’est-ce que le material UI ? En cherchant un peu, on se rend compte que le material UI est très souvent associé au material design. L’interface utilisateur en tant que tel est souvent réduit à l’apparence des éléments graphiques mais aussi descriptif avec les éléments de textes. Or le material design prend en compte très au sérieux ces éléments. Le material UI représente les meilleures règles à respecter pour créer de l’UI pour un site ou une application par exemple. Si vous n’êtes pas très familier vous pouvez toujours prendre le temps de lire notre article sur l’UI design Finalement le material UI et le material design ne sont pas vraiment comparable étant donné que l’un est le prolongement de l’autre. En effet, l’un regroupe les best practices d’UI tandis que l’autre regroupe les best practices UI. Forcément, les deux se rejoignent, donc autant apprendre directement le material design afin de mieux comprendre l’écosystème design global.
Material design vs flat design ?
Quand on pense au flat design, on a tendance à penser directement à Apple qui avait transformer le design de son IOS en mode flat design (la révolution lors de l’IOS 7 en 2013).
Le flat design permet de retirer le superflu pour se concentrer sur l’important. Du coup, vous ne trouverez pas d’éléments 3D, pas de jeux d’ombres, pas de volume… Bref, ce design plat a été longuement critiqué pour son manque d’ergonomie. Pourtant lors de la transition d’Apple vers le flat design, les utilisateurs ont rapidement pris en main ce nouveau design et la façon de naviguer dessus. Pour cause, le flat design à pris en compte les besoins utilisateurs, une première à l’époque. L’utilité du flat design :
- Prise en compte du design web,
- Style graphique homogène,
- Priorité aux icônes plus qu’aux images,
- Utilisation des couleurs pour la mise en avant d’éléments
- Typographie simple et claire
- Vitesse de chargement optimisé,
- Facilité de navigation globale.
Ce design est simple et efficace pour le développeur, mais aussi pour l’utilisateur. Alors ? Qui devrait gagner ? Et bien cela dépend un peu des goûts, mais le material design semble avoir été pensé bien plus en profondeur. Il est évident que des principes ont été récupérés puis améliorés pour évoluer vers une expérience utilisateur toujours plus pertinente. Si nous analysons un peut et que nous comparons les deux designs, nous repérons rapidement des points identiques. Le material Design va donc bien plus loin que le flat design.
Comment trouver des ressources material design ?
Si le material design vous inspire, alors voici quelques astuces pour accéder à des ressources visuelles, des exemples iconographiques, des propositions de transition, mais aussi quelques ouvrages et exemple de sites extrêmement intéressants.
Trouver les meilleurs exemples de material design
Pour trouver de bons exemples, il y a d’innombrables ressources sur le web, je vous ai sélectionné les outils qui me semblent les plus intéressants pour avoir beaucoup de ressources rapidement.
Instagram : vous pouvez suivre le #materialdesign et définir par la suite les comptes qui propose les ressources que vous jugerez les plus pertinentes.
- Uplabs : j’ai pré-filté « material design », vous avez donc accès à de nombreuses templates, parfois gratuites, parfois payantes, mais ce qui est sûre c’est la qualité des créations disponibles. Vous pouvez vous inspirer pour créer vos propres Template ou framework.
- Tumblr : même sans inscription, vous pouvez regarder en détails toutes les créations disponibles. Vous trouverez certains professionnels qui mettent en ligne leurs créations.
- Reddit : rejoignez les groupes Reddit pour participer aux échanges de professionnels et accéder aux tips et astuces de terrains.
Les ressources les plus utiles pour la réalisation du material design
Pour bien gérer votre création, par exemple si vous ne savez pas quel fond de couleur utiliser, Oxygenna propose 30 fonds différents pour s’inspirer. Invision, propose aussi des exemples de templates vraiment intéressantes qui méritent qu’on y prête attention. Pour finir, si vous cherchez un template psd ou sous sketch, Psdrepo propose un kit d’interface utilisateur lui aussi très intéressant.
Apprendre davantage sur le material design, l’UI et UX
Si cet article vous donne envie d’en apprendre encore plus, et bien vous pouvez consulter la référence de Google Material.io qui permet d’apprendre comment bien réaliser son material design. Si cela ne vous suffit pas, vous pouvez retrouver quelques cours sur Openclassroom notamment : « Composez des interfaces utilisateurs en material design » qui semble être réellement intéressantes. Pour terminer, si vous êtes plus littéraire, j’ai repéré 2 livres qui peuvent vous être utiles :
- Android User Interface Design : Implementing Material Design for Developers (Usability) (English Edition)
- UI-UX : les bases du prototypage web et apps – Concevoir pour et avec les utilisateur
