Deprecated: mysql_escape_string(): This function is deprecated; use mysql_real_escape_string() instead. in /home/cholitoo/www/blog/wp-content/themes/Activello-master/functions.php on line 60
Les grandes tendances graphiques du webdesign en 2016 – Le blog du Cholito

Les grandes tendances graphiques du webdesign en 2016

Afin d’inaugurer ce tout nouveau blog, j’ai décidé de mettre le pied à l’étrier en abordant un grand classique. Chaque année nous autres graphistes slash blogueurs (oui ! je n’ai qu’un article à mon actif mais je suis déjà un blogueur !) vous présentons les tendances graphiques qui vont marquer les prochains mois. Des conclusions que nous tirons de nos veilles quotidiennes & chronophages.
Je préfère vous dire tout de suite que nous n’avons pas de boule de cristal, ça évitera bien des malentendus. Entrons donc sans plus attendre dans le vif du sujet.

To scroll or not to scroll

Takeit.co

Depuis plusieurs années vous avez pu remarquer les efforts faits par les acteurs du web pour redorer le blason du scroll. Tout à été mis en oeuvre pour mettre à mort la ligne de flottaison qui devient un vilain mythe barbare. D’aucun diront qu’elle n’a jamais existé, mais ne prêtons pas nos voix à la polémique.

Galvanisé par la hausse perpétuelle des consultations de sites sur les smartphones et autres tablettes, beaucoup ont dû s’affranchir de l’obsession de faire tenir tout le contenu d’un site dans les limites de l’écran.

Cette année, cette tendance tend à se poursuivre. Le scroll est toujours plus ludique et interactif comme sur Takeitapp.co

On notera cependant un retour des sites sans ou avec peu de scroll. Une tendance intimement liée à la vulgarisation de la technologie WebGl utilisant la 3D dynamique. Une autre tendance que nous aborderons plus loin dans ce post.

La suprématie du flat design

Flat design

 

J’entends déjà au loin le chant des trolls ! Ceux qui disent que puisqu’on nous rabat les oreilles avec le flat design depuis plusieurs années, il ne peut s’agir d’une tendance 2016. Seulement, les anciennes habitudes ont la peau dure. Si le flat design s’est imposé comme une évidence chez de nombreuses grandes marques toujours à la pointe de la mode et chez des marques hype moins connues mais tout aussi soucieuses de leur image, l’annonceur régulier peinait grandement à se retrouver dans ces aplats de couleurs que beaucoup jugeaient fades et sans relief (même si c’est un peu le principe).
En 2016, la tendance à l’acceptation observée l’année dernière tend à se confirmer. Gageons que les dernières versions d’IOS, Android et autre Windows qui ont remisé le skeuomorphisme au placard y sont pour quelque chose.
Les codes du flat design sont également mieux respecté : on épure au maximum, on fait la part belle au contenu et/ou au produit, on privilégie les typographies simples et lisibles, on améliore l’ergonomie, facilitant ainsi la lecture des pages. La perle de site de la marque ETQ. en est un excellent exemple.

HD

post01_03

Plus on avance dans le temps et plus nos terminaux sont performants ( à 1000€ le smartphone, c’est un moindre mal ). Les écrans très haute définition, les connexions via fibre optiques à la maison et 4G sur nos smartphones, les systèmes des cache navigateur de plus en plus performants, la banalisation du protocole http/2. Tous ces éléments rendent possible des prouesses visuelles toujours plus intéressantes avec un impact moindre sur le temps de chargement des pages. Cette année nous promet encore des images et vidéos en plein écran d’excellente qualité comme sur le site de la marque Rest.

L’art de dire les choses

Peugeot Hybrid 4

Cette année, vous risquez fort de tomber sur des sites web qui n’attendent pas grand chose de vous, si ce n’est croiser les bras et regarder (certains vous proposeront de scroller, mais uniquement dans le but de simuler une interaction). Les storyboard websites, ces sites ultra graphiques qui racontent une histoire, auront la côte.
Le mini site du nouveau HYbrid4 de Peugeot en est un bel exemple. Des dessins en 2D style comics, une animation 3D légère. Nous sommes plongés entre la bande-dessinée et le dessin animé.

Autre concept dans la même lignée, les storytelling websites. Il s’agit toujours de raconter une histoire, mais l’interaction avec le visiteur est au centre même du site. L’internaute a généralement le choix entre plusieurs options qui détermineront sa navigation sur le site.
Ce principe est particulièrement adapté aux actions promotionnelles menées autour de la sortie d’un nouveau poduit, d’un film, etc … Mais il est de plus en plus utilisé par des sites reconnus d’utilité publiques dans le cadre d’action de prévention ou de sensibilisation. Le site Words can save par exemple, tend à sensibiliser les internautes au problème du cyber harcèlement, notamment chez les jeunes.

Interactive backgrounds

Interactive backgrounds

 

Toujours dans l’idée de rendre le web plus fun et amusant et se distinguer ainsi de ses petits concurrents, certaines marques optent pour le background interactif. On assiste en quelque sorte à un revival des méthodes très prisées par les sites en flash dans les années 2000. Des techniques qui s’étaient peu à peu perdues puisque les technologies flash ne sont pas compatibles avec nos chers smartphones et autres tablettes. Les possibilités qu’apportent le combo HTML5/CSS3 tendent à se vulgariser d’avantage cette année. Ainsi naquit le site de Giampiero Bodino … entre autres.

La patience sera un vilain défaut

http/2

 

http/2. Les sentinelles parmi vous qui ne relâchent jamais la veille savent de quoi je parle. Les autres auront besoin de quelques éclaircissements. http/2 est le nouveau protocole prévu pour remplacer http en service depuis 1990. Le protocole http, c’est le système qui permet à votre navigateur d’effectuer une commande au serveur, c’est à dire d’accomplir une action comme envoyer un formulaire, se connecter à son compte Facebook ou simplement afficher une page web.
En 2015, un nouveau protocole baptisé http/2 a vu le jour. Il est basé sur SPDY, le protocole expérimental de Google qui permet de réduire le temps de chargement de vos pages web depuis 2009.
Aujourd’hui, tous les principaux navigateurs du marché supporte ce nouveau protocole dont l’une des avancées est la réduction des temps de chargement de pages et une meilleure gestion des caches.
Naturellement, la banalisation du protocole http/2 n’est pas une tendance graphique. Certains doivent même se demander pourquoi j’en parle. Tout simplement parce qu’il permet de débrider un peu plus la créativité des webdesigner, jusque là trop souvent contraints par la notion de performance des site web. Si l’avènement annoncé de http/2 a bien lieu, nous verrons fleurir sur internet des designs plus audacieux qu’alors. Voyez par vous même !

Pump that web

Panic

Lorsque la tendance flat design s’est installé voilà quelques années, elle s’accompagnait de couleurs criardes. Un moyen comme une autre d’assurer une transition douce après des années des skeuomorphisme outrancier. 2014 avait inversé la tendance et 2015 s’est fait l’écho d’un retour à des couleurs plus douces, des tons pastels et des teintes légères.
L’accalmie aura donc été de courte durée et il y a fort à parier que 2016 signe le retour d’audacieuses couleurs acidulées, nous garantissant des designs gourmands à l’image du site Panic.lv qui avait déjà pris de l’avance en fin d’année dernière.

WebGl (Web Graphics Library)

NASA

Nous en parlions plus haut dans ce post, la popularisation de WebGl est un des points marquants de l’année passée, en terme de graphisme du moins.
WebGl (Web Graphics Library)  permet d’afficher, de créer et de gérer dynamiquement des éléments graphiques complexes en 3D dans la fenêtre de nos navigateurs. Cette technologie s’appuie sur OpenGl ES, lui principalement dévolu aux applications.

En fait, lorsqu’un élément de type WebGL est introduit sur une page web, le navigateur lance un programme en JS utilisant l’interface WebGL. Puis la bibliothèque appelle le pilote OpenGL ES du système d’exploitation qui se chargera de faire les calculs nécessaires à l’affichage sur l’écran, en exploitant si possible l’accélération matérielle du processeur graphique de votre terminal.

Si cette technologie date de 2009, son implémentation sur nos navigateurs est assez récente ce qui explique que son utilisation soit si peu répandue. Cette année, de nombreux acteurs du web devraient suivre cette tendance tant dans le domaine du divertissement que dans celui de l’information et de l’apprentissage à l’instar de la plateforme Experience curiosity développée par la NASA qui permet de simuler la prise de contrôle du rover Curiosity sur la planète Mars.

En conclusion, 2016 devrait être flat, rapide & interactif.

 

Laisser un commentaire