Tendance Webdesign 2016

Quand on travaille dans le web, qu'on soit graphiste, web-designer, ou développeur front-end, il est indispensable de suivre l'évolution des tendances webdesign.

Vu lors des formations sur les  templates Joomla!, le choix de la maquette graphique, le choix de la Typographie, le choix des animations ... tous les différents éléments propres à la construction d'un site web, sont soumis à la tendance de la toile !

J'ai donc voulu faire un récapitulatif de ce que sont les tendances du webdesign en 2016.

Les tendances générales du Webdesign en 2016

Où en sont les tendances du web en 2016 ? Quelles sont les éléments toujours d'actualité, quelles sont les nouveautés ? 
Il est évident que ces tendances sont influencées, je dirais même orientées par les géants du web, pour n'en citer que quelques uns  : Microsoft, Apple, Google. Certaines tendances ne font que continuer, et évoluer, d'autres sont nouvelles.

Le Flat Design

Le Flat Design n'est pas nouveau, il continu. Son style épuré et léger est plus que jamais de tendance, et perdure.

Le choix des couleurs : des couleurs rassurantes, positives , optimistes 

Les internautes ont besoin, pour faire face à l'actualité pas toujours gai, de retrouver sur la toile des couleurs apaisantes, rassurantes. Que le thème de votre site soit plutôt fun, ou plutôt tempéré, optez pour des couleurs optimistes !

Le Responsive Web design

Ce n'est pas nouveau, mais çà ne fait que continuer ,à une vitesse vertigineuse, le nombre d'utilisateurs sur mobiles ne fait que s’accroître.

Ce n'est donc plus une option, c'est indispensable de penser et d'adapter votre web design pour mobiles.

Le Long Scrolling

Toujours dans la même idée que le smartphone prend le pas sur l'ordinateur, les sites s'allongent de plus en plus ! Le Long Scrolling est né !

Le Long Scrolling ? C'est en fait le scroll des smartphones adapté aux ordinateurs.

Le Slideout, menu réduit, ou menu hamburger

Qu' est-ce que le Slideout ? C'est tout simplement le menu version Smartphone qui s’approprie la version ordinateur. Vous savez, la petite icone de menu, sur laquelle on clique, pour faire apparaître le menu. Et bien maintenant ce n'est plus restreint aux smartphones, c'est adaptables aux ordinateurs, et surtout fortement conseillé.

Le Parallax Scrolling ou l'effet Parallaxe

Cette technique consiste à faire défiler des éléments sur des couches différentes , à des vitesses différentes, lorsque l'on scrolle  la page, ce qui donne un effet de profondeur.

C'est pas très clair ? Bon, rassurez-vous, vous avez obligatoirement rencontré cet effet sur de nombreux sites .
Démonstration en images :
http://laser.nyc/
http://porschevolution.com/

C'est plus clair maintenant. Vous pouvez aller plus loin avec cette page explicative et complète sur l'effet Parallaxe :
http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html

Les Animations

Les animations sont toujours d'actualité. Un site sans animations va manquer de dynamisme. Ajouter quelques animations légères sur un site apporte une note attractive. Attention cependant à ne pas mettre des animations juste  pour mettre des animations. Une animation sur un texte, un bouton, une image doit être là pour attirer l'attention de l'internaute, et doit avoir un objectif précis. Faire des animations sans but précis, risque très vite d'obtenir un site où tout bouge sans raison, et perd toute sa valeur. 

Le Split Screen ou Ecran divisé

Arrivée dernièrement, cette technique consiste à diviser l'écran en 2 parties, pas forcément symétriques, de manière à mettre en contraste la partie textuelle et la partie visuelle. Ainsi accolés l'un à l'autre, par forcément alignés, ils contribuent mutuellement à se mettre en évidence.
Démonstration par l'exemple :
http://www.studiometa.fr/

La Vidéo fait sa vedette !

La vidéo, ce n'est pas nouveau, a le vent en poupe depuis déjà un bon moment. Mais ce n'est pas fini, çà ne fait que continuer de plus belle ! La vidéo est fortement apprécié des internautes. Elle est de plus en plus utilisée comme outil principal de communication : présenter l'activité principale d'une entreprise, mettre en avant une offre, visite virtuelle  ...

Images oui, mais  personnalisées !

Les images n'ont rien perdu de leur attrait ! Une image attire toujours forcément l'attention. Mais attention, les internautes sont blasés des images "vues partout", sorties tout droit des banques d'images de la toile ! A l'inverse, ce sont les photos personnalisées et authentiques qui retiennent l'attention des visiteurs. Alors n'hésitez pas à investir un peu de temps, pour prendre (ou faire prendre par un professionnel) des photos de vos locaux, de l'équipe ... de manière à présenter un site personnel.

La Typographie : le grand retour !

C'est l'élément design incontournable du moment ! La typographie prend une place importante dans le design, et fait concurrence aux images. Personnaliser son site grâce à une typo bien choisi et bien travaillée est de toute dernière tendance !

Le Story Telling

Accaparer l'attention de l'internaute en lui racontant  une histoire : le must ? Créer une interaction avec l'internaute en le faisant acteur .

Sélection de sites très tendances en 2016

 Comme rien ne vaut une explication par des exemples, voici une démonstration en images des grandes tendances webdesign en 2016.

Sélection de sites très tendances en Avril 2016

Retrouvez dans cette page, une sélection de 11 sites très tendances en avril 2016, répondant aux derniers critères de la toile, en 2016.

Sélection de sites très tendances en Août 2016

Retrouvez dans cette page 11 sites très tendances en Août 2016, fidèles aux points forts énumérés plus haut.

j'ai pris soin, pour chacun de ces sites, de souligner ses principaux atouts, qui le poussent au top de la tendance web.

Vous avez aimé cet article ? N'hésitez pas à le partager sur vos Réseaux sociaux et à laisser un commentaire :)

Agathe Fert

 Ressources:

http://www.pic.digital/le-blog/378-tendances-web-design-2016

http://www.jebossedansleweb.com/tendances-web-design-2016/

http://fr.wix.com/blog/2016/01/12/les-grandes-tendances-du-web-design-2016/