Le design web se situe à mi-chemin entre la forme et la fonctionnalité. Il est donc logique que les nouvelles tendances soient largement influencées par la technologie, qu’il s’agisse des appareils que l’on utilise, de leur système d’exploitation, des navigateurs ou des bibliothèques de programmes disponibles sur le marché. Mais les aspirations récentes des graphistes d’aujourd’hui vont encore plus loin, elles influencent également les principes et philosophies mêmes du design.

web design trends 2017

Ces dernières années sont marquées par les avancées technologiques sans précédent, dont :

  • La démocratisation des téléphones portables
  • L’apparition d’interface de 3D dynamique intégrée (via WebGL)
  • L’adoption du HTML5, CSS3 et la montée des frameworks JavaScript.
  • Ainsi que l’augmentation de la vitesse de téléchargement d’internet (sur ordinateur tout comme sur mobile).

À elles toutes, ces avancées technologiques ont créé un véritable tournant dans l’histoire du design web, notamment avec l’émergence des sites adaptatifs (« responsive » en anglais) et plus généralement, des designs orientés mobile.

Du côté de l’esthétique, on ne peut ignorer le règne suprême du flat design, il y a de ça trois ans. Ensuite, c’était au tour de Google d’introduire le Material design de nous pousser encore plus loin vers le design abstrait. En 2017, nous verrons que les tendances nous ramènent un tant soit peu vers la réalité : 2017 est l’année des hybrides, tant dans les formes que dans les couleurs ou dans la fonctionnalité, où la technologie et la réalité se réunissent pour créer une expérience jusque-là inégalée.

Sans plus attendre, voici les 9 tendances qui, selon nous, vont faire des ravages cette année :

1. Des menus qui défient tout paradigme de navigation

Depuis la naissance archaïque du web design (c’est-à-dire, il y a 20 ans), on a vu deux types de navigation : top (barre de menu en haut) et sidebar (barre de menu sur les côtés). C’est la venue du responsive design qui a entraîné l’arrivée du menu hamburger. Qu’est-ce donc que cela nous direz-vous ? C’est une solution adaptée aux mobiles. Elle n’est pas parfaite et ont l’accuse de :

  • Entraver l’engagement utilisateur
  • Réduire l’accessibilité au contenu
  • D’être moins efficace (tant du point de vue de l’utilisateur que de celui du développeur)
  • Et même, de manquer de « cachet »

Avec tout ce mélange de bons et de mauvais sentiments et le développement perpétuel de la navigation mobile, on peut s’attendre à voir du nouveau du côté des menus cette année. Voici quelques exemples de la tendance burger :

Créer un cadre avec son menu

framed navigation
 Hillsiderancho.com a opté pour un menu tout à fait unique qui encadre la page de toutes parts.

Supprimer tout simplement le menu

Plus besoin de dire aux utilisateurs comment naviguer sur un site internet. Ils connaissent le principe du défilement et s’en serviront instinctivement jusqu’à ce qu’ils trouvent l’information qu’ils cherchent. Certains graphistes ont donc choisi de supprimer presque entièrement les menus et de laisser les utilisateurs évoluer librement. Ce qui à son tour, donne plus d’importance au défilement vertical, mais aussi horizontal.

no menu web design trend
Le site de Anonymous Hamburger n’a pas de menu. Les utilisateurs accèdent au contenu grâce au défilement.

Adoptez le bouton hamburger et oubliez tout le reste

Au lieu de concevoir deux menus différents, l’un pour la version desktop et l’autre pour la version mobile, beaucoup de sites web optent pour une navigation « hamburger ». Et ce, depuis que les designers ont compris qu’il n’est plus nécessaire d’occuper de la place sur l’écran avec une barre de navigation. Bien sûr, vous n’êtes pas obligé de mettre une icône de hamburger…. On voit de plus en plus de graphistes jouer sur la typographie pour indiquer aux utilisateurs où cliquer pour accéder au menu.

Au lieu de créer deux menus différents, un pour la version desktop et l’autre pour la version mobile, beaucoup de sites web optent pour le menu hamburger.

dursun website
Le site de Dursun a été créé avec une navigation hamburger, qu’il s’agisse de la version desktop ou mobile.

Menus pop-up

Nous nous sommes tellement focalisés sur le paradigme du menu déroulant que peu d’alternatives ont été développées, un menu pop par exemple ! Dans l’exemple ci-dessous, le menu apparaît au milieu de l’écran. Pourquoi ne pas placer son menu ailleurs que dans les espaces si prévisibles ? Il y a beaucoup d’options à disposition sans pour autant perdre en visibilité ou en accessibilité !

pop up menu design trend
Le menu popover de navigation s’affiche en cliquant sur l’élégant bouton hamburger à gauche. Via circlesconference.com

Menu pop over

Variation du menu pop, le menu popover recouvre entièrement l’écran. C’est osé, mais toujours aussi intuitif. Cela nous rappelle un peu la table des matières des livres traditionnels.

edelson_com
www.edelson.com utilise le même concept, sauf que la navigation popover est composée de 6 éléments. Lorsque l’on passe son curseur sur l’un d’eux, l’image qui lui correspond apparaît.

2. Écrans séparés

Soit, diviser clairement l’écran en deux parties égales. C’est quelque chose que nous nous attendons à voir de plus en plus en 2017. Très visuelle, cette tendance rappelle les livres traditionnels et donne un côté très naturel au design. C’est également une tendance très flexible : on peut par exemple imaginer deux blocs côte à côte en version desktop et l’un sur l’autre en version mobile.

split screen web design trend
via ParadisePad
split screen web design trend
Website réalisé par duskoskoko
www-texasbeardcompany2-com
The Texas Beard Company a divisé son site web en deux écrans : d’un côté on y trouve de magnifiques exemples de barbes, de l’autre, les produits de l’entreprise.

3. Couleurs vintages

Depuis quelques années, le web est dominé par le gris : fond d’écran gris clair au lieu de blanc, textes en gris foncé à la place du noir et, en Material design, de légères ombres grises pour donner de la profondeur aux objets. Après ce temps d’absence, la couleur est enfin de retour en 2017 ! Et qui plus est, elle revient forte de tons vintages vifs et lumineux.

Il n’est pas toujours facile de choisir les couleurs de son site web et ce choix peut être influencé par plusieurs choses, dont les couleurs existantes de votre marque, le marché dans lequel vous évoluez, la psychologie des couleurs et vos goûts personnels. Quelle que soit la couleur que vous préférez, pensez aux filtres proposés par Instagram pour créer un effet vintage et chaleureux.

www-wolfandson-net
Wolf and Son a choisi des couleurs délavées dans les tons sépia, pour rappeler les vieilles photos et accentuer l’aspect familial de leur entreprise, ainsi que la qualité de leur artisanat.
audiograph
Audiograph a joué la carte 60’s avec ce motif psychédélique coloré.

4. Défilement personnalisé

De plus en plus de sites abandonnent la traditionnelle barre de défilement et optent pour une expérience personnalisée. Par exemple, on voit émerger le « défilement virtuel », qui permet aux utilisateurs de faire défiler le contenu à l’intérieur de l’application et non pas avec le navigateur. Cela permet de mettre en place différents types de défilement, comme on peut le voir sur le site de Build in Amsterdam où le contenu défile horizontalement tout en en étant contrôlé par une souris classique qui fonctionne de haut en bas. La transition au téléphone portable n’est que plus évidente.

virtual scroll
Dess abandonne la barre de défilement du navigateur et crée une barre virtuelle directement sur son site.
Side scroll web trend
via Build in Amsterdam

D’autres ont complètement abandonné le défilement au profit du « click-drag-et-explore ». C’est le cas de Grim London et Magic in New York qui vous proposent de cliquer sur leurs cartes et de la déplacer comme bon vous semble pour explorer le contenu. L’utilisateur clique ensuite sur le contenu placé sur la carte en question pour en savoir plus.

La plupart de ces sites utilisent une sorte d’application WebGL pour créer et présenter leur contenu. Grim London s’est montré particulièrement inventif avec l’implémentation d’un moteur de cartographie personnalisé réalisé à partir de PixiJS (un moteur 2D JavaScript WebGL).

via Grim London
via Fantastic Beasts Magical Maps

5. Mélanger le tactile au numérique

Il y a trois ans, le flat design laisser la place au material design. On assiste alors au retour des ombres et des dégradés de couleurs sur des icônes toujours « flat », ce qui avait pour effet de créer l’illusion d’un espace tridimensionnel tout en restant sur un écran pourtant bien plat. Cette année, nous revenons un peu plus près du « réalisme ». Cela dit, nous ne reviendrons quand même pas jusqu’au skeuomorphisme (qui représente l’objet réel de manière numérique). En 2017, le concept phare est de mélanger le physique, le concret, le tactile au monde numérique.

Au lieu de placer les éléments photographiques dans des boîtes rectangulaires distinctes (pour créer une fenêtre sur le monde « réel » à partir d’un écran), les objets sont sortis de leur contexte et placés dans un paysage numérique complètement différent. On leur laisse leurs zones d’ombre et de lumière originelles (et donc, leur nature tridimensionnelle), mais ils ne sont plus tenus aux lois de la nature. Ils ne sont pas tenus d’être réalistes (un livre peut être aussi gros qu’un camion) et ils peuvent interagir avec des éléments numériques. Regardez par exemple les écouteurs géants de Beoplay qui interagissent ensuite avec les courbes de sons numériques proposées sur le site.

En intégrant des objets réels dans un paysage digital, on floute la ligne de séparation des deux mondes. Ce qui a son tour, crée une connexion émotionnelle à l’image que l’on voit sur notre écran,

beoplay
via Beoplay
99designs homepage
On peut également voir cette technique sur la page d’accueil de 99designs : des objets réels sont juxtaposés aux boutons animés.
fork website
Design web réalisé par trumpdesign

6. Petites animations et micro-interactions

Les mouvements attirent l’attention. C’est le résultat de l’évolution de l’homme. Les grands mouvements soudains, surtout, nous préviennent d’un danger. En revanche, les petits mouvements fluides sont synonymes de vie. Souvenez-vous de ça lorsque vous aurez envie d’ajouter du mouvement à votre site web. Quelque chose de trop brusque pourrait distraire les utilisateurs, tandis qu’un mouvement plus subtil pourrait donner une touche de naturel à votre design.

Pendant des années, les animations ont servi à récompenser l’utilisateur pour une action donnée. Par exemple, un objet s’anime lorsqu’on passe la souris ou clique dessus. Mais récemment, on voit apparaître l’intégration de petites animations en tant qu’élément de design, simplement là pour attirer l’attention des visiteurs.

On voit tout particulièrement beaucoup de waypoints, c’est-à-dire d’événements qui se déclenchent lorsque l’utilisateur fait défiler la page. Ce qui signifie que l’on peut inciter les gens à regarder exactement ce que l’on souhaite qu’ils regardent.

Qu’elles soient implémentées en JavaScript ou en CSS, les micro-interactions améliorent non seulement l’expérience utilisateur, mais elles donnent également de la personnalité à votre site web.

hover

 

waypoints micro animation trend
via Project Sunday
text waypoints trend
via Kekselias

7. Abandon des formats d’images en faveur de la direction artistique

Ce qui peut avoir bonne allure sur un grand écran Retina n’a pas forcément grand intérêt à la verticale sur un smartphone. La composition est l’un des aspects fondamentaux du design. Mais comment, à l’heure du « design responsive », créer un contenu avec un nombre infini de combinaisons pour s’adapter à la fois aux différents écrans et aux différents navigateurs ? Pas le choix : crop. Mais comment couper du contenu tout en conservant l’intégrité esthétique ? Trois mots magiques : direction artistique numérique.

On a récemment vu émerger un certain nombre d’outils popup qui nous permettent de contrôler intelligemment la composition des designs tout en abandonnant les inconvénients habituels liés à l’auto-cropping. Ces nouveaux outils ont ainsi changé la manière de concevoir : au lieu de penser au contenu en tant qu’images statiques, nous devons y penser comme étant la matière première. Quelle est l’histoire que vous allez raconter avec vos images ? Mettez l’accent là-dessus et laissez ensuite les utilisateurs contrôler l’affichage.

smart photo cropping
via smartcrop.js

Certains sites internet ont choisi d’ignorer entièrement le ratio image et de donner le pouvoir de la composition aux utilisateurs. The Hidden World of the National Parks se sert d’une vidéo de fond (qui est également le contenu principal du site) qui s’étend aux quatre coins de votre navigateur quelque soit la taille de votre fenêtre.

responsive video no aspect ratios
via Google Arts & Culture

8. Expériences cinématiques

Déjà en 2015 on voyait de très larges vidéos occuper la totalité du fond d’écran des sites web. Cette tendance devient de plus en plus populaire, mais, avec les avancées technologiques, les temps de chargement sont de plus en plus courts. Le WebGL a également permis de rendre ces vidéos interactives de sorte à créer une expérience cinématique immersive sur le net.

visit-humboldt
via visithumboldt.com
audiograph short
via audiograph.xyz

Parallèlement, les expériences cinématographiques ont diminué en taille. Les vidéos que l’on retrouve sur les sites web sont courtes et intégrées aux pages pour les rendre plus vivantes et engager les utilisateurs de manière plus subtile.

9. Gamification

Gamifier signifie « appliquer les principes et éléments de design de jeux vidéo dans un autre contexte que celui des jeux vidéo ». L’objectif ici est d’accroître l’engagement utilisateur. En d’autres termes : avez-vous envie que les gens se souviennent de votre site ? Comment faire ? Rendez-le amusant !

Le site web du film Swiss Army Man, crée avec la technologie WebGL est un très bon exemple de gamification. Les éléments 3D sur cette page ne sont pas là au hasard. Un personnage fictif est mis à votre disposition pour que vous puissiez le faire valser dans l’espace conçu dans le respect des lois de la physique, dont la gravité et même, la mécanique des fluides. (Et d’autres surprises qu’on vous laisse découvrir.)
On voit également la gamification émerger sur les sites d’apprentissage en ligne, pour les langues étrangères ou sur l’histoire.

swiss army man gamification website
via Swiss Army Man
lingo
via sbs.com
inspace

2017 promet de belles surprises en web design, avec des tendances encore plus tactiles et réalistes.

Quelle est votre tendance préférée du moment ? Dites-le-nous en commentaire !