Récemment nous avons abordé le thème du flat design, en expliquant de quoi il s’agit, quelles sont ses caractéristiques et les contextes dans lesquels il est employé. C’est sans aucun doute la tendance qui a connu le plus de succès ces 5 ou 6 dernières années, surtout dans le domaine du Web Design. Mais vu que l’on parle d’un secteur, le numérique mais aussi celui du design, qui est en constante évolution, où les nouveautés apparaissent et disparaissent en un clin d’oeil, se chevauchent, s’alternent à toute allure, évidemment il y a une nouvelle tendance qui guette. Son promoteur : le groupe Google qui a forgé le mot « material desiogn » pour décrire la conception graphique innovante qu’il a adoptée pour plusieurs de ses produits et services numériques. Le dernier en date – l’info est tombée ces jours-ci -, Google Analytics.
Mais de quoi s’agit-il exactement ? Qu’est-ce qui le distingue des autres courants du design ? Pour quoi l’utiliser ? Pour répondre à toutes ces interrogations, Stampaprint, votre imprimerie en ligne de confiance, a réalisé ce guide, bref mais exhaustif. Bonne lecture !
Qu’est-ce que le material design
En simplifiant à l’extrême, on pourrait dire que le material design représente une synthèse harmonieuse et fonctionnelle de ce qui l’a précédé : le flat design et, avant, le skeuomorphisme.
Comme nous l’avons expliqué dans notre article consacré au flat design, celui-ci se fonde sur l’idée d’un design plat, bidimensionnel, sans détails ou éléments superflus, sans perspective. Au contraire, le skeuomorphisme vise à rapprocher le plus possible l’interface numérique à la réalité tridimensionnelle, donc il exploite les ombres, les effets de clair-obscur etc. A mi-chemin entre ces deux voies, le material design empruntent des éléments propres à l’une ou à l’autre et les mélange en vue d’une plus grande fonctionnalité du l’interface. Au flat design, il emprunte le langage sobre, linéaire, essentiel, les formes géométriques et les couleurs vives, au skéuomorphisme, il emprunte les effets de profondeur et perspective, les animations en responsive web design, et surtout, pour citer le créateur du material design, « une matière capable de s’étendre et de se reformer de façon intelligente ». Le but principal du material design est de pouvoir s’adapter aisément à n’importe quel contexte, d’être souple et polyvalent.
Les principes sur lequel repose ce type de design inventé par le célèbre moteur de recherche sont :
des interfaces nettes
des mouvements fluides
des surfaces tactiles
Pourquoi le material design est-il à la mode ?
La réponse est assez évidente et concerne la puissance et la renommée de son créateur, Google, un des géants américain du web, les dits GAFA (Google, Amazon, Facebook, Apple). Au début, en 2013, le lancement du material design a coïncidé avec celui de Google Now. Puis ça a été au tour de Gmail, le service de messagerie de Google. Avec le temps, ce langage graphique s’est imposé dans un nombre de plus en plus élevé de produits et services de Google mais pas que : le dernier en date est – on l’a évoqué tout à l’heure – Google Analytics, le service d’analyse d’audience d’un site du grand G. Qui plus est, Google a publié une série de lignes guides périodiquement mises à jour afin d’aider les designers qui envisagent de s’approprier ce langage.
En tout cas, que l’on en soit conscients ou pas, nous sommes déjà habitués au material design. En regardant cette vidéo réalisée par Google, vous vous apercevrez immédiatement du fait que le material design a déjà envahi la Toile :
Les caractéristiques du material design
Voici une autre vidéo explicative qui illustre les traits distinctifs du material design, déjà mentionnés plus haut :
Mais rentrons davantage dans les détails !
Les animations
L’élément le plus marquant, celui qui saute aux yeux tout de suite est représenté par les animations qui offrent aux usagers une expérience d’un niveau supérieur. Non seulement les interfaces graphiques bougent, mais elles le font conformément aux mouvements effectués par l’usager avec sa souris sur l’écran. Il y a partant une cohérence parfaite entre l’action de l’usager du dispositif et la façon dont l’interface réagit et se transforme.
Les surfaces tactiles
Les surfaces tactiles sont aussi une prérogative du web design. Elles sont composées par des éléments graphiques hiérarchisés, qui créent l’effet de perspective et de profondeur. Cela est dû au fait que toute surface présente sur l’écran a une épaisseur d’un dpi (acronyme anglais pour « dot per inch », en français, PPP, points par pouce), l’unité la plus petite et indivisible du graphisme numérique. Les éléments paraissent hiérarchisés et tangibles grâce aux ombres que les objets, les boutons et les icônes projettent sur l’arrière-plan.
Adaptibilité de l’affichage propre au Responsive Web Design
La troisième caractéristique fondamentale du material design consiste en son adaptabilité aux différents dispositifs (ordinateurs, tablette, spartphone, etc.) N’importe quelle interface doit être en mesure de se conformer à l’écran de tout dispositif sans perdre sa fonctionnalité et sa lisibilité.
Pour conclure
Vous l’aurez compris, le but du material design est d’améliorer l’expérience de navigation des internautes. D’un point de vue graphique, il s’approprie l’essentialité, la stylisation et la vivacité du flat design, en y ajoutant des éléments plus réalistes propres au skeuomorphisme (animations, surfaces tactiles). En outre, s’inscrivant dans le Responsive Web Design, il se prête à s’adapter à l’écran de n’importe quel dispositif, mobile ou pas (tablette, smartphone, ordinateur) sans que la lisibilité et la fonctionnalité de son interface soient amoindries.
