Google-Material Design

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 de quoi s'agit 'il exactement ?

Material Design : un concept de Google

Les 25 et 26 juin 2014, la ville de San Francisco a accueillie 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.

Conférence de Google I/O, les 25 et 26 juin 2014 à San Francisco

Conférence de Google I/O, les 25 et 26 juin 2014 à San Francisco

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 ?

interface material design

Le choix de la pallette 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, toutes les deux sont  disponibles en téléchargement sur Google Font. 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é.

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

métamorphose du material design

La métaphore du matériel définit la relation entre l’espace et le mouvement, Google l’explique par l’inspiration du papier et de l’encre.

Graphisme vif material design

Graphisme vif

Le mouvement dans le material design

Le mouvement : les grilles, la typographie, les couleurs et la pictographie constituent la composition et oriente l’utilisateur car il est visuellement guidé.

 

 

 

 

 

 

 

Pour faciliter l’adoption du Material Design par les développeurs et pour 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.

do-dont-material-design-my-account-your-account

Préconisation de langage Google pour le material design

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 web.

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

Flat Design / Material Design

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Le Material Design

  • Il répond à une action de l’utilisateur par un mouvement,
  • Il uni le monde réel au monde digital,
  • Il 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

Material Design

Material Design

Notre avis,

Le Material Design se développe doucement mais surement. 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 ?

Sources :

Partager ce contenu