Ça n’est pas tous les ans que l’on peut parler de gros changements ! L’accumulation des avancées technologiques de ces dernières années va grandement impacter les tendances en webdesign que nous verrons en 2016.

Certaines textures vont se greffer au flat design, les « expériences cinématiques » seront de plus en plus usitées et les modèles JavaScript permettront de multiplier les expérimentations. La popularité grandissante du WebGL et de la réalité virtuelle vont transformer les sites internet tels que nous les connaissons, en apportant de nouvelles possibilités pour interagir avec les interfaces.

Dans cet article, nous aborderons 11 des plus grandes tendances en webdesign que nous nous attendons à voir en 2016. Installez-vous bien, il y a beaucoup à dire !

1. WebGL (Web Graphics Library)

Au rayon des nouveauté, voici un petit bijou : WebGL (Web Graphics Library). Cette technologie est dernière de nombreux sites web développés récemments. Pour résumer, WebGL permet d’intégrer des éléments interactifs en 2D et en 3D dans les navigateurs avec accélération matérielle, sans aucun plug-in.

Logiciel interactif tridimensionnel WebGL

Logiciel-interactif-tridimensionnel

Experience Curiosity de la NASA

WebGL a été la star de la conférence SIGGRAPH en 2015. La présentation d’une heure et demie sur l’infographie tridimensionnelle et WebGL peut être visionnée en entier sur YouTube, ici. On y présente notamment le logiciel « Experience Curiosity » de la NASA, qui marque le troisième anniversaire de l’atterrissage du robot Curiosity sur Mars. L’application permet aux visiteurs de manipuler un robot 3D de la NASA se déplaçant sur la planète rouge.

Blend4Web (visualisation interactive tridimensionnelle en ligne) et Blender (modélisation 3D et animation) ont été utilisés pour créer ce site.

Site-Beloola

Le site web de Beloola se sert d’un framework JavaScript three.js

Beloola est le premier site web entièrement basé sur les réseaux sociaux et entièrement réalisé en 3D. Cela nous rappelle Linden Lab’s Second Life, sauf que là, il suffit d’avoir un navigateur. Aucun logiciel spécifique n’est requis.

3D WEBGL “VIDEO”

3D-WEBGL

Angry Wife de Madeo

La promotion du jeu « Angry Wife » est un autre bon exemple de la 3D en WebGL. On croirait d’abord à une vidéo, mais ça n’en est pas une. Il s’agit en fait d’une scène tridimensionnelle transformée en page web grâce au framework JavaScript three.js.

The-Boat

The Boat de SBS TV (Australie)

La chaîne de télé australienne SBS a adapté l’histoire de Nam Le, « The Boat », et l’a transformée en une vidéo interactive grâce au WebGL. Le projet, qui a été primé, est composé de plusieurs chapitres contenant de superbes animations et illustrations réalisées à la main. Ici aussi, on a affaire au JavaScript three.js.

Because-Recollection

BecauseRecollection

Because Recollection est « un voyage à travers dix années de son ». Le site, réalisé avec PIXI, est une série de clips contenant des éléments interactifs (clics, glisser/déplacer) pour favoriser l’engagement des utilisateurs.

Visualisation des données avec WebGL

Histography-Matan-Sauber

Histography de Matan Stauber

Histography offre une représentation visuelle des évènements notés dans Wikipédia sur une ligne de temps interactive. Pas très palpitant à première vue, mais vous serez surpris de voir la quantité de données magnifiquement métamorphosée en une belle interface simple et adaptative. L’adaptabilité est présente autant au niveau de la taille que de la vitesse.

Museum-of-the-world

The Museum of the World, un partenariat entre le British Museum et le Google Cultural Institute, reprend le même concept, bien que l’implémentation soit très différente. Les pièces de la collection du musée y sont présentées dans le temps et dans l’espace, grâce à une interface tridimensionnelle WebGL.

Vous pouvez naviguer le temps sur les axes Z- ou Y- et l’espace sur l’axe X-. Le menu permet d’activer les tags pour regrouper les objets selon les thèmes auxquels ils se rapportent (par exemple, « commerce et conflit »)

Animation 2D WebGL

Animation-2D

Nouvelles-Ecritures de FranceTV

Le site web des « Nouvelles Ecritures » de FranceTV est un excellent exemple d’animation 2D WebGL réalisé dans un navigateur. Vous avez l’impression d’un défilement vertical illustré, créé grâce au JavaScript Pixi.js.

D’un point de vue technique, le site pourrait être décrit comme une animation 2D continue intégrée a un navigateur dans un pseudo espace tridimensionnel. Plutôt impressionnant !

2. Réalité virtuelle

La réalité virtuelle est une technologie en rapport avec WebGL. On ne serait pas étonné de la voir révolutionner le monde du gadget en 2016. Et ça n’est pas tout.

Avez-vous déjà entendu parler de Google Cardboard ? Avec un Android et un morceau de carton, vous pouvez créer votre propre expérience de réalité virtuelle. Google a ajouté Cardboard Camera à l’écosystème de « la réalité virtuelle DIY ». Il s’agit d’une application mobile pour Android qui vous permet de faire des photos en réalité virtuelle. L’application fait d’ailleurs partie des applications du mois nominées par The Guardian, en janvier 2016.

Si vous recherchez une expérience en réalité virtuelle un peu plus raffinée, vous pouvez précommander le set Rift VR d’Oculus, pour environ 530 €. Autrement, le Samsung VR GEAR est une bonne alternative entre le Google Carboard et Oculus, à environ 90 €.

Cela a-t-il une importance en ce qui concerne le webdesign ? Pas encore. Mais jetez un oeil au projet WebVR initiative (un JavaScript API qui fournit un accès aux appareils en réalité virtuelle) pour vous rendre compte de la direction que va prendre cette nouvelle technologie. Vous pouvez également voir des exemples déjà implémentés par l’équipe de Mozilla VR. Leur objectif est « de favoriser l’émergence de la réalité virtuelle de haute qualité sur internet ».

La vidéo en réalité virtuelle

Vidél-en-réalité-virtuelle

Catch the Dragon de Peugeot 

La vidéo promotionnelle de la Peugeot 208 est un bon exemple de l’arrivée de cette nouvelle technologie. On y trouve à la fois de la réalité virtuelle (pour Google Cardboard) et de la vidéo à 360 degrés, pour voir les options du véhicule, sur leur site. Les deux versions sont entièrement interactives et si vous avez un appareil équipé d’un gyroscope, vous devez physiquement tourner la tête pour en profiter.

3. Système de particules

Système-de-particules

Deutser

Les systèmes de particules sont utilisés en conception graphique tridimensionnelle pour imiter les phénomènes naturels irréguliers (brouillard, fumée, feu, eau, pelouse et nuages) depuis les années 80. Maintenant, grâce au WebGL, les particules commencent a être utilisées pour exprimer différents concepts visuels sur les sites web.

La page d’accueil de Deutser illustre bien ce principe. Les particules s’éparpillent et se rassemblent, en réaction aux mouvements de votre souris, pour former des symboles. Le résultat est à la fois plaisant et hypnotique.

4. panorama à 360 degrés comme site web

panorama-360-degrès

Le site Rainforest de Regnskogfondet n’est pas constitué d’un simple panorama : vous explorez la jungle de cette forêt humide, à 360 degrés. Ce qu’il y a de plus remarquable ici, ça n’est pas le panorama en plein écran ou les jolies scènes en 3D, mais bien la façon dont les éléments de navigation ont été intégrés à l’expérience à 360 degrés.

5. Vidéo en plein écran et scènes & éléments interactifs

video-plein-écran

Christmas Express de Milka est constitué d’une série de vidéos, séparées de scènes interactives.

Le site Christmas Express de Milka est également basé sur le concept de la vidéo en plein écran pour raconter une histoire, mais, autant que nous sachions, cela n’a rien à voir avec WebGL.

Sur ce site, vous envoyez une lettre de Noël. Il faut environ 10 minutes pour rédiger un simple email et 24 heures pour qu’il soit distribué. Vous êtes obligé de prendre votre temps pour écrire votre courrier puisque vous devez vous acquitter de cette tâche en utilisant un stylo animé. Ceci invite l’utilisateur à s’engager et à s’imprégner de l’ambiance des fêtes de fin d’année. Tout a été pensé jusque dans les détails : même le stylo animé suit précisément la forme des lettres.

6. Storytelling animé

L’idée d’exprimer un concept à l’aide d’une animation n’est pas nouvelle. Pourtant, c’est une tendance qui continue d’évoluer avec le temps. Ce qui est intéressant ici c’est que ces évolutions ne concernent pas seulement les aspects visuels et techniques.

Pour créer une animation, il ne suffit pas d’avoir un graphiste et un « développeur web » sous la main. Il vous faudra également du courage pour aller au-delà des stéréotypes et des différents copyrights. Les animations ne sont pas courantes, c’est pourquoi les entreprises qui parviennent à en intégrer sur leurs sites web brillent de mille feux dans ce monde de « design costard-cravate ».

Tendance web 2016

Le rapport annuel 2014/15 de Danish Crown, producteur international, est tout sauf une compilation ennuyeuse à mourir de chiffres et de tableaux. Pour rendre compte a leurs investisseurs, ils ont osé faire appel à l’humour et au kitch avec ces illustrations décalées.

Le ton du contenu est également franc et naturel. L’entreprise explique qu’« il ne s’agit pas d’avoir l’air malin. Ça n’est pas une vision ou une mission ou quelque chose de la sorte. Ça n’a rien à voir avec les valeurs au cœur de l’entreprise : se montrer respectueux et innovateur. Parce que bien sûr nous adhérons déjà à ces valeurs ».

worlds-easiest-decision

On notera également le mariage réussi entre flat design et les textures.

7. Navigation linéaire

Il a y plusieurs années de ça, les graphistes et les développeurs faisaient tout ce qu’ils pouvaient pour éviter la navigation linéaire. La mode était aux clics et aux menus. Puis on s’est mis à « la page unique », qui est définitivement restée. Aujourd’hui, il est pratiquement inimaginable de penser que les sites web à défilement eurent été un jour vus comme la peste (oui, c’est bien ce que pensaient un bon nombre de graphistes, clients et développeurs. On entend d’ailleurs toujours parler du mythe de « la ligne de flottaison »).

Il ne s’agit pourtant pas ici d’élire le meilleur site « à page unique » de l’année. Essayons plutôt de voir comment les graphistes utilisent la navigation linéaire de manière innovatrice pour créer des sites web.

navigation-linéaire

Le site web de Julien Belmonte ne parle que de cinéma. Il était donc intelligent de construire le site sur le même concept. Les différents films du réalisateur sont mis en avant les uns après les autres, au fur et à mesure qu’une fine ligne rouge se déplace horizontalement de gauche à droite, pour rappeler l’univers du cinéma.

Mis à part cela, il n’y a pratiquement pas de navigation possible. On ne peut pas faire défiler la section « à propos » et le texte est présenté à la façon d’un générique de fin.

CV-en-ligne

L’approche qu’a prise Francesco Bertelli pour son CV en ligne est innovatrice. Le calendrier interactif est un moyen esthétiquement beau et efficace de présenter son expérience professionnelle.

La navigation pousse les visiteurs à se focaliser sur un seul élément à la fois en occupant tous l’espace disponible sur l’écran pour chacun d’eux. Le site reste malgré tout rapide et simple à naviguer. Les dates déjà consultées sont automatiquement barrées pour que le visiteur s’y retrouve facilement.

8. Navigation écran après écran

Ce type de navigation n’est pas récent. Dans notre article sur les tendances webdesign de 2013, Bagigia était un exemple de la navigation « écran après écran » (encore appelle « navigation avant/après »). Les livres nous ont habitués à une approche de la navigation « page par page ». Il est donc logique de voir de plus en plus de sites web réutiliser ce concept.

manufacturer-of-masterpiece

Le site « Manufacturer of Masterpieces » d’Imperiali Geneve est basé sur une approche similaire a celle de Francesco Bertelli en ce qu’elle oblige les visiteurs à se focaliser sur un écran à la fois. La page est linéaire, mais le défilement n’est pas libre. On passe d’un écran à l’autre sans entre-deux.
Au lieu d’utiliser le défilement, le début et la fin de chaque écran sont marqués par un glissement, ce qui rappelle les transitions cinématographiques.

musée-van-gogh-amsterdam

Le musée Van Gogh d’Amsterdam

Le site du musée Van Gogh d’Amsterdam illustre encore mieux cette approche de la navigation. Le nombre total de pages et de flèches additionne aux transitions « glissantes » entre les pages donne l’impression de lire un livre.

Le désir des graphistes d’exercer un certain contrôle sur la mise en page (comme c’était le cas avec les supports traditionnels tels que livres et journaux) est de plus en plus visible. Que peut-on s’attendre à voir apparaître ensuite ? Une marge fixe sur mesure ou un cadre autour de la page. Ce sont des concepts vieux de plusieurs siècles que l’on peut être sûr de voir réapparaître bientôt.

09. Page encadrée

Nos recherches montrent clairement que cette tendance est plus populaire que ce que l’on avait anticipé. Des concepts similaires en wedesign se développent depuis quelque temps, mais jamais de manière aussi perfectionniste et avec autant de goût que ce que l’on observe ici.

ginger-bread

Le site web Ginger Bread Branch de PNC est entièrement dédié à une banque, à échelle humaine, faite de pain d’épice. Il a également servi d’outil éducationnel pour enseigner les principes de l’économie. Non seulement cette page est insérée dans un cadre à l’intérieur de la fenêtre du navigateur, mais elle est également basée sur un modèle de navigation « écran après écran ».

wloks

wloks

Le site web de Wloks a une façon unique de vendre ses atouts graphiques. Au lieu d’une interface commerciale classique composée de photos-stock, le style du site de Wolks évoque le raffinement, le papier glace des magazines et les peintures trompe-l’œil. La page est encadrée et les éléments du menu sont placés au coin de l’écran.

Capture-d’écran-2016-02-18-à-16.18.44

Beer 34 a trouvé sa propre façon de contrôler la mise en page de l’écran en s’inspirant des infographies et du storytelling. L’aspect vintage est néanmoins préservé. Conçu avec un budget relativement serré, c’est l’un des sites web les plus charmants de cet article !

10. Exploration des transformations CSS

exploration-des-transformations

Stand4humanrights

Stand4HumanRights vous demande de rejoindre le mouvement en ajoutant votre image à un « mur social » qui ressemble à une immense surface courbe. Vous devez ensuite le partager via les réseaux sociaux. Conçu grâce aux transformations CSS, ce mur « transportable » est unique en son genre. Il nécessite cependant beaucoup d’effort en terme de traitement et il n’est pas aussi adaptatif que ce à quoi l’on pourrait s’attendre.

animation CSS tendance 2016

Species in Pieces a été réalisé grâce à des animations CSS, pour créer une exposition interactive en ligne de 30 espèces en voie de disparition dans le monde. Le concept est basé sur un jeu de mots avec pieces (« morceaux ») : les animations éclatent en mille morceaux pour reformer ensuite chacune des espèces en danger.

11. Animation SVG

holohalo

holohalo

Il est étonnant que si peu de sites web utilisent les graphiques vectoriels adaptables (ou SVG) de manière innovante et intéressante. Holo Halo est l’exception qui confirme la règle. Les web designers de par le monde peuvent désormais admirer ce que l’on peut faire avec des SVG.

Conclusion

Aucun doute sur le fait que les plus grandes tendances webdesign de 2016 tournent autour du WebGL sous toutes ses formes (vidéo interactive, animation et visualisation de données). On s’attend également à voir la réalité virtuelle devenir très populaire. Cependant, cela repose énormément sur la compatibilité des appareils.

La mise en avant des techniques traditionnelles est une autre des grandes tendances générales à noter pour cette année. On pense aux éléments dessines ou peints à la main, puis scannés et parfois même, accompagnés d’autres éléments très techniques, comme dans The Boat, par exemple. Mais cette technique a également tendance à donner un aspect traditionnel (type livres, magazines, étiquettes, affiches et bande dessinée) aux sites web. Ceci est le résultat de la navigation « page après page », l’utilisation de cadre et, de manière générale, d’une tentative de comprendre un écran d’ordinateur comme une page de livre plutôt que comme une fenêtre.

Si vous êtes parvenu à la fin de ce long article, voici un petit bonus. Conduisez une Delahaye 165 pour la sauver de l’oubli :

timeshift

Lisez nos autres articles sur les tendances webdesign d’année en année :

Vous avez d’autres tendances en webdesign pour 2016 à ajouter ? Partagez-les avec nous en commentaire !