11
Avr
2016

Material Design : La tendance Google en conception de sites Internet

Cogitime vous propose de décrypter les concepts du Material Design définis par Google et de plus en plus utilisés aujourd’hui dans la création de sites Internet.

Les origines du Material Design

Le concept de Material Design a été présenté pour la première fois par Google en 2014, et était au départ orienté Android. Nous pouvons considérer que c’est une évolution du flat design, première étape dans la simplification des interfaces web avec des couleurs vives et des formes schématiques très simplifiées, compréhensibles par tous.
Le Material Design est donc une normalisation des éléments visuels web, qui associe le design à la technologie, en intégrant l’expérience utilisateur. On parle de « langage visuel uniformisé ».

Les principes du Material Design

Le Material Design repose sur l’unification des interfaces pour les différents types d’appareils (smartphones, TV, téléphones, …). Il est parfaitement adapté aux nouvelles pratiques du web telles que le responsive (adaptabilité aux différentes tailles que peut prendre le navigateur). Il repose aussi sur la simplicité du visuel et des éléments graphiques qui deviennent faciles à interpréter. Le design est au service du contenu. La navigation devient donc explicite et simplifiée pour l’utilisateur. Chaque objet suggère sa propre utilisation ; on parle d’affordance, notion essentielle sur les sites internet.

Les 3 caractéristiques du Material Design définies par les designers Google

  • Représentation dans un espace 3D avec une notion d’élévation relative des différents éléments. Il y a superposition des éléments dans l’espace avec intégration des ombrages.

Material Design espace 3 D

  • Les représentations graphiques sont extrêmement fortes à la fois en terme de forme et en terme de couleurs. Elles créent une hiérarchie et donnent un sens aux éléments graphiques. Les fonctionnalités de base sont immédiatement apparentes et évidentes.

Material Design - Donner du sens

  • Les animations sont au service de l’interaction. Le mouvement fournit du sens.

 

Material Design - mouvement

Quelques règles concrètes du Material Design

Typographie :

Un travail important a été fait sur la typographie avec la définition de polices de caractères dessinées spécifiquement pour une très bonne lisibilité à l’écran et une normalisation de ses usages.

Exemple : la police Roboto

Material Design - Police Roboto

Espacement entre les éléments :

Les maquettes ont également été normées en terme d’espacement entre les éléments. Le contenu devient donc plus lisible pour l’internaute.

Exemple de maquette avec l’utilisation d’espaces pour délimiter clairement les zones (texte / images / …)

Material Design : espacement

Charte de couleurs :

Une charte de couleurs a été établie ainsi que leurs conditions d’application afin d’en garantir une utilisation harmonieuse.

Material Design : colors pink

Normalisation des objets et outils de navigation :

Les boutons, icônes, curseurs, … ont été définis graphiquement par des icônes spécifiques et la mise en place de charte graphique. La visualisation de l’interaction sur ces boutons a elle aussi été normalisée.

Exemples de Material icons :

material icons
L’ensemble des normes précises définies par Google ainsi que les règles de bonnes pratiques à l’attention des développeurs d’applications sont disponibles en ligne, sur le site de google :  guide Google

Si vous aussi vous souhaitez faire une refonte de votre site Internet basée sur les nouvelles tendances, Cogitime reste disponible pour répondre à vos questions et vous accompagner dans cette démarche.

Pour plus d’information, n’hésitez pas à nous contacter.
> Pour plus d’information sur Cogitime, nous contacter >

PartagerShare on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone