Après le tour d’horizon du web design pour 2015, un nouveau tour d’horizon pour la fin 2016 (j’ai loupé le début).
Web design : Confirmation des tendances 2015
Les tendances de 2015 se confirment : Material Design, la typographie, et l’utilisation des images.
Material Design
Je ne reviendrai pas sur le Flat Design : déjà évoquée dans le précédent article. Celui-ci est apparu en opposition au skeuomorphisme d’Apple : un excellent exemple est l’interface Windows Metro des tuiles du bureau de Windows 8.
Le bureau de Windows 8 : exemple de Flat Design
J’ai également évoqué le Material Design en 2015 : c’est un dérivé du Flat Design par Google. Le Material Design reprend les lignes principales du Flat Design avec des petits détails supplémentaires (les ombres sont autorisées etc) et surtout les règles sont énoncés clairement. En particulier, puisque Google propose des outils pour utiliser le Material Design pour les applications Android.
On trouve parfois aussi le terme de semi-flat design ou de flat design 2.0, pour indiquer cette tendance (le Material Design).
Les styles caractéristiques sont donc les couleurs vives et le design simplifié comme le flat design.
Mais le principe de Material Design est d’utiliser l’analogie de la feuille de papier … de fait, ce sont plusieurs feuilles de papier que l’on va superposer : d’où, les ombres portées.
Un point important du Material Design est les boutons ! Pour des pages web « classiques » avec des boutons Action call, on utilisera très certainement des boutons de type ghost (juste un contour). Mais pour des boutons d’applications, on utilisera des boutons avec des ombres : les raised butons. On pourra voir tout ceci dans l’article de SupInfo sur le Material Design et plus spécifiquement pour les boutons dans les spécifications de Google.
Une notion également importante dans un site web en Material Design est les animations qui vont ajouter du sens et agrémenter l’expérience utilisateur, qui pourrait être sans cela un peu pauvre.
Pour en savoir plus, sur le Material Design, on peut lire l’article et regarder les vidéos de zeste de savoir sur les applications Android avec Material Design.
Une confusion importante est que si on renonce au relief dans les icônes pour utiliser des icônes aplaties (flat) – comme celle de chrome, par exemple-, cela ne veut pas dire que tout le reste l’est. En particulier, vous aurez compris que la notion d’ombres est importante en Material Design.
Responsive
Comme précédemment, les sites sont responsives pour pouvoir être facilement lus sur tous les types d’appareil (écrans d’ordinateurs voire télé, tablettes, smartphones …).
Images et polices
Les images ont toujours un rôle important et les polices avec Google Font également. Les polices sans sérif et rondes ont la côte : elles s’harmonisent particulièrement bien avec le Material Design.
Web design : Tendances 2016
Gifographies
Vous connaissiez les infographies, qui vous présente des chiffres, et/ou un point de vue, par une image et/ou des schéma (en réalité on devrait parler de graphismes d’information ou d’infographies de presse). Voici les Gifographies : ce sont des infographies (très souvent axées sur le story telling) avec la technologie (assez ancienne) GIF qui permet d’animer les images. On se retrouve donc avec une infographie animée.
Un exemple de Gifographie
360° : le même design partout
On étend le concept de site responsive avec un design qui peut se décliner sur tout type d’appareils (montres connectés, voitures, domotique …). C’est la révolution de l’IoT (Internet of Things – internet des objets) qui va bientôt déferler !
Il faut donc que l’identité visuelle se décline sur tous les supports !
Example des GAFAM
Ce sont ces entreprises majeures en place depuis quelques temps, avec les nouvelles venus (les NATU) qui nous indiquent les nouvelles tendances. Le Material Design de Google, le 360° pour étendre le concept de Responsive etc
Un peu de lecture supplémentaire
- 4design : articles sur le web design.
- JS4design : des conseils pour du design en codant avec JQuery (JavaScript)
Bon web design !