Material Design : le Webdesign selon Google
Material Design est un terme pensé et expliqué par le géant Google, lors de sa conférence Google I/O du 25 juin 2014.
Mais qu’est-ce que le Materiel Design ?
Material Design : un concept Google
Les 25 et 26 juin 2014, la ville de San Francisco a accueilli la grande conférence de Google I/O. Le 25 juin, Google a présenté le portage du système d’exploitation Android sur les mobiles, les télévisions, les montres, les objets connectés.
Google a également profité de cette occasion pour introduire le Material Design, un design destiné dans un premier temps aux applications mobiles avant d’être étendu à l’ensemble de ses applications.
En 2023, le Material Design est toujours d’actualité. Il reste une approche solide et populaire pour la conception d’interfaces utilisateur.
Qu’est ce que le Material design ?
Le Material Design est un ensemble de règles s’appliquant à l’interface graphique des logiciels et des applications. Il est notamment utilisé dans la version 5,0 du système d’exploitation Android.
Ce nouveau langage de design est, d’après Google, basé sur le papier et l’encre. Sources : Wikipedia
This is material design. (Google)
« Contrairement au vrai papier, le matériau digital peut s’étirer et se modifier de manière intelligente. Le matériau contextuel a une surface physique et des bords. Les superpositions et les ombres donnent des informations sur ce que vous pouvez toucher ». Matias Duarte, Designer et concepteur d’interface Google.
Pourquoi le Material Design ?
Ce concept créé par Google a pour objectif de garantir la facilité d’utilisation des applications Android afin de les rendre plus simples, plus épurées et plus intuitives (user friendly).
Le respect des préconisations du Material Design garanti une interface tellement intuitive qu’il devient évident de représenter un bouton par un simple rond rouge. Cette norme combine les principes d’un design réussi avec l’innovation technologique en plus.
Le Material Design est aussi la réponse de Google aux problématiques posées par le design contemporain :
- un design efficace sur tous supports,
- un webdesign auto adaptatif, interactif et intuitif pour tous les utilisateurs.
L’adoption du material design (conception matérielle) vise à unifier avec un design unique et homogène l’ensemble des services et matériels de Google.
« Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. » – source : Google
Quelles sont les lignes directrices du Material Design ?
Le choix de la palette ainsi que de la typographie sont très importants dans le Material Design, cet aspect ne doit pas être sous estimé. De plus, le géant américain a adopté deux typographies. La première est la Roboto puis la seconde est la Noto Sans.
La petite particularité de la Noto Sans, c’est qu’elle s’adapte a 256 régions/langues. Pourquoi ce choix ? Tout simplement parce qu’elles sont optimisées pour le web pour une bonne lisibilité.
💡Les deux typographies sont disponibles en téléchargement sur Google Font.
L’agencement de l’espace est prépondérant car ce dernier s’inspire de la feuille et de l’encre. C’est à dire que cette « feuille » peut s’adapter comme on le souhaite. N’est ce pas magique ?
De plus, il vient s’ajouter l’apparition d’animations pour capter l’attention de l’utilisateur (micro-interactions).
Les grilles, la typographie, les couleurs et la pictographie constituent la composition et orientent l’utilisateur, celui-ci est donc visuellement guidé.
Le mouvement est le moteur des actions, il part du point d’interaction sans rupture de la continuité de l’expérience utilisateur (ux design). Il donne du sens, assure la cohérence et la continuité, tout en donnant des informations subconscientes sur les objets et leurs transformations.
Quelques exemples en image du material design
Pour faciliter l’adoption du Material Design par les développeurs et faciliter sa diffusion, Google a créé un site internet où sont regroupées de nombreuses ressources et toutes les spécifications du Material Design : Material design – Google design guidelines.
Le material ? Un Flat Design à la sauce Google ?
Mais que fait la firme de la Mountain View ? Elle s’aligne tout simplement sur ses concurrents Microsoft et Apple en reprenant un concept : Le Flat Design.
Google désire une démocratisation de son ‘style‘ avec un framework appelé Material Design Lite. Google a son framework maison nommé AngularJs sur lequel il est possible de greffer un thème Material Design.
Rappelons de façon brève l’intérêt d’un Framework (cadre de développement). En gros, le Framework est une boite à outil basée sur une grille CSS avec un système de classes avec des composants Jquery pour assurer l’interactivité de votre site internet.
Exemple, un autre framework CSS fait beaucoup parler de lui, il s’agit de MaterializeCSS. Ce dernier s’appuie sur les guidelines de Google. C’est un framework à suivre…
Material vs Flat Design, deux solutions web distinctes
Le Material Design
- Il répond à une action de l’utilisateur par un mouvement,
- Il uni le monde réel au monde digital,
- Le material design est pensé de manière plus académique que le Flat Design,
- Il s’appuie sur le réalisme et la physique.
Le Flat Design
- Il s’inscrit dans la continuité du skeuomorphisme,
- C’est une solution au responsive design,
- Il permet la rapidité et la légèreté,
- Il permet la simplification et la lisibilité.
Sources : Siècle Digital
Notre avis,
Le Material Design se développe doucement mais sûrement.
D’ailleurs, les services Google ont mis un certain temps avant de se mettre au Material, ce qui peu paraître gênant tout de même…
L’un des principaux atouts du material réside dans sa vision novatrice, avec un design qui allie le responsive design avec le mouvement et la matière. Nous le voyons ainsi dans les tendances web pour l’année 2016.
Nous avons ici une volonté d’uniformiser le web mais ne serait pas sa grande faiblesse ? Peut être qu’on respirera uniquement grâce à Google ? Venez partager votre avis sur notre blog !
- Mise à jour 01 septembre 2015 : Google adopte un nouveau logo, un lien avec le Material Design ?
- Mise à jour 09 février 2019 : 5 tendances 2019 du web design
- Mise à jour 08 janvier 2023 : des mises à jour régulières garantissent sa pertinence dans le paysage changeant du design numérique.
Sources :