La Material Design par Google

Avec le lancement du Material Design, Google standardise progressivement son identité visuelle. Présenté pour la première fois en 2014, il commence à se répandre et fait désormais figure d’une référence solide dans le monde du webdesign. Conçu en premier lieu pour les applications mobiles, le Material Design s’étend aux multiples services proposés par le géant californien dans un souci d’unification et d’homogénéisation. Google a ainsi prévu d’adapter petit à petit ses différents services, Chrome, YouTube et Google Adwords étant d’ores et déjà sur la liste des prochains logiciels ou applications à connaître ce lifting. Mais quelles en sont les principales caractéristiques et inspirations ?

 

Les principes du Material Design

 

Le Material Design s’inspire du monde physique, du réel, mais joue sur la technologie pour le bousculer. Son objectif est d’assurer une facilité d’utilisation des applications et services concernés pour les simplifier, les épurer et les rendre le plus intuitif possible. D’après la présentation faite par Google de ce nouveau langage de design en 2014, celui-ci se base sur le papier et l’encre. Ses principes accordent une importance particulière à une mise en page reposant sur une grille, des effets d’animation et de transition ainsi que l’utilisation de la profondeur, à l’origine de jeux d’ombres sur l’écran.

 

 

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, Vice-président du design chez Google

 

Le choix des couleurs et de la typographie occupe une place capitale au sein du Material Design. Celles-ci doivent guider l’utilisateur visuellement et d’une façon naturelle dans son expérience avec la technologie afin de mettre en avant les actions proposées. Google a ainsi choisi deux polices de caractères principales : la Roboto et la Noto Sans, issues du catalogue libre Google Fonts et optimisées pour un usage Web.

 

Les mouvements des éléments, quand à eux, donnent du sens et une certaine continuité aux actions de l’utilisateur. Ce ne sont donc pas les détails en eux-mêmes qui comptent, mais la façon dont ils se combinent pour créer une expérience cohérente. Chaque action a lieu dans un seul environnement et les éléments sont affichés de manière fluide, sans aucune rupture, à l’aide de transitions et d’une réorganisation de l’espace. Ces mouvements permettent d’attirer l’attention de l’utilisateur tout en le maintenant dans un univers bien défini.

 

Mouvements et animations dans le Material Design de Google - IC-Webconcept

L’importance des animations dans le Material Design – source : thomas.vanhoutte.be

Le Material Design ne crée pas seulement de l’ordre, mais plutôt un ordre qui fait sens dans un but précis. Le tout (couleurs, typographie, mouvement, agencement des éléments) crée un ensemble harmonieux, une hiérarchie de l’information, un cadre instaurant des repères mentaux et facilitant la compréhension de l’interface. En ce sens, il reflète bien l’esprit pragmatique de Google.

 

Le processus de création

 

Contrairement à ce que l’on pourrait croire, le Material Design n’a pas été crée ex nihilo. Il est le fruit d’une évolution dans la manière d’approcher le design par Google depuis plusieurs années. Ainsi, en 2011, Gmail avait connu un lifting introduisant notamment des boutons plus “plats” et une meilleure utilisation des marges et des espaces vides. En 2012, Google Now lançait le principe des cartes avec encore plus d’espace et une hiérarchie typographique bien définie. D’autres mises à jour plus discrètes rentrent également dans ce processus mis en marche par Google, qui a bien compris qu’il pouvait optimiser l’utilisation de ses services par le biais du design.

 

Les cartes présentes sur Google Now - IC-Webconcept

Google Now, précurseur du Material Design

Si les principes du design mobile ont joué un rôle fondamental dans l’élaboration du Material Design, Google a aussi décidé d’intégrer la souris, le clavier et la voix comme intermédiaires d’interaction. Il s’agit avant tout d’une tentative d’unifier les produits de l’entreprise à travers les plateformes et les appareils. Ce design modulaire est conçu pour s’ajuster non seulement aux smartphones et aux tablettes, mais aussi aux smartwatches voire aux futures surprises que Google nous réserve pour les prochaines années.

 

Les trois dimensions du Material Design - IC-Webconcept

Exemple de la profondeur sur une page en Material Design – source : thomas.vanhoutte.be

Le Material Design est une nouvelle façon d’aborder l’interface utilisateur au sein de laquelle les éléments s’empilent à la manière d’objets physiques dans un univers tridimensionnel. Pour Matias Duarte, gourou du design pour les appareils Android et père de la philosophie du Material Design, ce dernier “n’est pas juste un style mais une façon de penser le design d’interface”. Sa volonté, affichée, est que les personnes commencent à intégrer ce mode de pensée dans la conception de leur produit numérique. En abordant les pixels comme un élément tangible, le Material Design donne aux écrans tactiles un visage familier en rapprochant le monde virtuel du monde naturel dans lequel nos cerveaux ont évolué. Un monde qu’ils ont été entraînés à comprendre. Cette tendance se rapproche finalement de la montée en puissance de la réalité virtuelle au cours des derniers mois.

 

Le Material Design, c’est du flat design ?

 

Oui et non. Si Google a bel et bien emboîté le pas à des entreprises comme Apple ou Microsoft en reprenant le concept de flat design, la firme de Mountain View se l’est réapproprié pour lui donner plus de profondeur.

En effet, si le Material Design s’inspire fortement du flat design, il s’en différencie par le mouvement des éléments et par l’existence d’une troisième dimension le démarquant réellement du design plat. En répondant aux actions de l’utilisateur, il n’est pas seulement intuitif mais intègre l’expérience à un niveau plus poussé, redessinant les frontières entre le design d’interface (UI) et l’expérience utilisateur (UX), dont le credo est “Ne me faites pas réfléchir” (“Don’t make me think”, titre du livre de Steve Krug). Ce qui peut être considéré comme du flat “à la Google” se rapproche aussi, d’une certaine manière, du skeuomorphisme en s’inspirant du réel. On peut donc dire que le Material Design est une évolution naturelle du flat design.

 

Le Material Design présenté par Google en vidéo :

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+Print this pageEmail this to someone