Dans la première partie de cette série, nous avons abordé l'utilisation du style Metro pour présenter un site web de manière structurée, avec un style qui est très modulaire et qui accorde une grande importance à la typographie. Il est conseillé de lire la première partie, qui se trouve ici, si vous ne l’avez pas déjà fait.
Dans la seconde partie de cette série, nous aborderons l'inspiration du style Material de Google. Le style Material est semblable au style Metro avec l’utilisation des couleurs vives et unies, mais le style de Google rajoute des ombres portées afin de différencier la profondeur des éléments. Ce qui distingue ce style parmi les autres est l'utilisation d'animations et de transitions fluides afin de rendre le contenu d'une page web plus dynamique.
Google - Material
Historique
2012 - Now Google apporte un vent de fraîcheur sur leur plateforme mobile, Android, en présentant Google Now, une application qui présente un résumé contextualisé basé sur la localisation de l’utilisateur. Google Now est la première application qui adopte un nouveau style illuminé, présentant l’information sous forme de cartes, avec des couleurs très vives et une typographie élégante.
2014 - Lollipop Google présente la cinquième version de son système d’exploitation mobile, Android Lollipop, changeant complètement de direction graphique. Depuis le tout début d’Android, le design était entièrement foncé, avec seulement quelques légères démarcations bleues. En suivant le style de Google Now, le système entier est devenu illuminé, avec des blancs purs et des couleurs vives.
Avec Lollipop, Google a misé beaucoup sur la métaphore des cartes, en combinant des ombres portées avec un style très plat et minimaliste. Il y a aussi un énorme travail qui a été fait sur la fluidité des animations, ce qui donne l’impression que tout ce qui est à l’écran peut être manipulé facilement. Cela fait un contraste notable avec les premières versions d’Android: alors que les animations auparavant étaient délaissées et non-fluides à cause du manque de performance du système.
2014 - Android Wear Google a apporté son nouveau style, maintenant sous le nom de Material, sur une plateforme entièrement différente.
Le style
Forme:
- Cartes séparées entre niveaux avec ombrages
- Ombrages
- Pas de dégradés
- Couleurs vives
Typographie:
- Grandes typographies
- Police de choix: Roboto
Fonds:
- Sections séparées par différentes couleurs vives
- La typographie devant les couleurs est souvent blanche ou noire afin de rester visible.
Iĉones:
- Icônes contextuelles blanches
- Icônes d’applications multicolores avec profondeur
Exemples du web
Google I/O (https://events.google.com/io2015/) - Conférence officielle de Google
Angular (https://angular.io/) - Plateforme de développement d’applications web
AndroidTO (http://androidto.com/) - Conférence sur Android
Outils Material
Material Design Lite (http://www.getmdl.io/) - Librairie de développement simplifiée
Polymer Project (https://www.polymer-project.org/) - Framework web officiel
MaterialUp (http://www.materialup.com/) - Communauté web de Material
Finalement, si vous voulez un site web qui présente le contenu de manière dynamique, avec un style qui met l'emphase sur des animations et des transitions fluides, l'utilisation du style Material est conseillée. Dans la dernière partie de cette série, nous aborderons l'inspiration du style translucide d'iOS et d'OSX de la compagnie Apple afin de rendre le design de votre site web plus raffiné.