Petit précis du material design

Le 25 juin 2014, Google présentait au monde entier le material design lors de sa conférence Google I/O. Sensé signifier la relève du flat design dont il reprend les codes, le Material Design fut destiné dans un premier temps aux applications mobiles, puis étendu à l’ensemble des services de la galaxie Google. Un objectif en vue : rendre ceux-ci plus intuitifs tout en mettant en avant les fonctionnalités techniques. Mais le material design va plus loin, il se revendique telle une réponse aux contraintes actuelles du web. Pensé cross-supports, auto adaptatif, interactif et intuitif ; il est devenu notre quotidien en 2016.

Mais comment réalise-t-on un site selon les codes du material design ? Et bien l’ami Google a prévu 3 grandes lignes directrices pour ce faire. Si les concepts sont un peu nébuleux sur le papier, le rendu visuel permettra au profane de comprendre. Premièrement, ce design se veut telle une « métaphore du réel ». Les éléments graphiques sont pensés dans l’espace. Les surfaces et les bords des composantes fournissent des repères visuels simplifiés. Enfin, les principes d’ombres, de lumière et de mouvement éclairent les utilisateurs sur la place de ceux-ci dans l’espace de l’interface utilisateur. Google via la métaphore du réel rend l’interface compréhensible et accessible à tous

shadows

crédit : Google

Deuxièmement, le material design se veut « audacieux, visuel et affirmé ». Nous n’en attendions pas moins. Les éléments de base du design web tels la typographie, l’espace, l’échelle, la couleur et l’utilisation de l’imagerie doivent permettre de traiter facilement l’information. Ils créent de la hiérarchie et du sens, et permettent à l’utilisateur de savoir où se concentrer. Dans la prolongation du Flat design, le material design repose sur l’utilisation de couleurs fortes, d’images bord à bord, de typographies grossies et d’espaces blancs lisibles pour créer une interface audacieuse et graphique. Ce code de conduite esthétique met ainsi l’accent sur les fonctionnalités de bases mega-visuelles et facilement repérables pour l’utilisateur.

material design color

crédit : Materialui.co

Troisièmement, le matériel design repose sur l’idée que « le mouvement est porteur de sens ». Soit, mais concrètement ? Et bien concrètement, le mouvement découle de l’action de l’utilisateur. Il en est le moteur et ses actions, tels le scroll ou le swipe, sont des points d’inflexion qui vont transformer l’espace dans lequel il interagit. Le mouvement des éléments doit se faire dans la continuité pour permettre à l’utilisateur de comprendre ses évolutions. Dans le cas d’une action de retour en arrière, les éléments se devront ainsi de reprendre leurs places originelles. A la base de l’action, l’utilisateur est remis au centre du design.

movement material design

google-material-design-movement

movement material designmovement material designmovement material design

crédit : Google

Le material design est devenu une norme. Initialement destiné aux applications Google, il a su conquérir le web par sa réintégration de l’espace, sa simplicité visuelle et la place centrale de l’utilisateur. Et pour ceux qui n’aurait pas encore compris, ce qu’est le material design, je vous laisse sur une petite vidéo de Google qui saura vous éclairer.

crédit photo de couverture : Google

Par : William B.

Abonnez-vous à Make it digital

Recevez par email chaque lundi matin l'ensemble des articles publiés sur le blog Make it Digital. La garantie de suivre les dernières évolutions du digital !

Garantie sans spam.

Leave a Comment