Les tendances Web & Motion en 2018

Article qui a servi de base pour la conférence « Les Tendances du Webdesign 2018 & Alternatives à Adobe » de Simon Kern lors de la Winter Creative Party 2018.

Comme tout Art qui se respecte, le webdesign a ses tendances. Non seulement pour l’aspect graphique mais également concernant expérience utilisateur. Plus communément on distingue l’UI et l’UX design. Pour résumer, l’UI concerne la partie émergée de l’IceBerg avec la partie graphique et l’UX représente tout le travail en amont (mettre au centre l’expérience utilisateur pour faciliter la vie de ce dernier). Vous l’aurez compris, une belle UI se base sur une bonne UX : elles sont indissociables.

Difficile de faire un tour d’horizon détaillé et de prendre le risque d’annoncer les futures orientations UX ou UI pour les mois à venir. Néanmoins certains facteurs permettent d’avoir une vue globale des dernières recommandations en terme de Design et d’Ergonomie. Commençons, dans un ordre totalement arbitraire, par l’évolution du Flat Design.

Le Sommaire :

1. Slides & Conférence
2. Le Material Design
3. Les Transitions et les Animations
4. Les Micros-Interactions et UI Motion
5. Les exhausteurs de (bon) goût
6. Qualité du contenu : textes, vidéos & photos
7. Typographie, Couleurs & Dégradés
8. Story Telling et Web Immersif
9. Synthèse

I. Slides & Conférence

 

Simon Kern a donné une conférence sur les tendances du Webdesign en 2018 lors de la Winter Creative Party 2018. Voici les slides de sa présentation. Une petite partie était également dédiée aux alternatives à Adobe. Cette dernière partie est développée dans cet article : OUTILS : GRAPHISME, UI, UX, MOTION 2D, VIDÉO & PHOTO.

 

II. Le Material Design

Après que le “Flat Design” (formes épurées & couleurs aplaties) a réussi à détrôner le “Realism Design” (appelé aussi “Fat Design” ou “skeuomorphisme”) c’est au tour du “Material Design” de venir s’installer. Le “Flat” et le “Fat” possèdent chacun des atouts et déchaînent toujours les passions : le “Material Design” serait il le juge de paix ? Pas vraiment… Mais Google a fait évoluer le “Flat design” en y apportant un peu plus de perspectives de volume et de profondeur en gardant toujours des formes géométriques et des couleurs vives.

Réduire la “Conception Matérielle” – sa traduction française – à un style graphique particulier serait incomplet. C’est un concept plus global : google y dédie un site (material.io) qui concerne les guidelines et la philosophie de ce mouvement pour unifier et homogénéiser l’ensemble des services de Google. On y parle forcément de style mais aussi de typographie, de layout, d’images, de mouvements… Choses que l’on va retrouver dans les autres tendances, plus globales.

III. Les Transitions et les Animations

Voici surement le plus important. A l’instar du “Responsive Design” qui est devenu doucement un acquis incontournable, 2018 signera le début de la norme pour des sites qui vont être “smooth” (fluide & lisse) dans leurs transitions, déroulement et chargement de page. Cela apporte un confort de navigation en optimisant l’expérience utilisateur et donne l’illusion que le site n’a aucune latence. La plus value de cette mécanique est d’éliminer la rigidité entre les rubriques ou les sections d’une même page. La séquence d’animation est réfléchie comme une narration : l’animation fait partie intégrante de la création du site et non pas comme un gadget qu’on implanterait ici et là..

IV. Les Micros-Interactions et UI Motion

 

Nous venons de parler de la grande machinerie, mais les “Micros-Interactions” sont tout aussi importantes afin de renforcer le lien avec l’internaute. On peut en trouver sous toutes les formes : des bordures légèrement élastiques (voir le gif du site Waaark ci-avant) au passage de la souris, des menus « burger » qui se métamorphosent pour inciter à cliquer, un bouton “valider” qui se transforme en “check”, une illustration qui se dessine, un lien “plus d’infos” qui change la structure de la page pour afficher le texte complet etc…

Toutes ces animations et interactions doivent rester discrètes, subtiles et centrées sur l’utilisateur : chaque détail compte pour créer des interfaces plus “friendly”. “L’UI Motion” permet de développer des effets de transition et d’animation sur ces éléments spécifiques. Avec l’augmentation de la puissance des smartphones, il est dommage de ne pas en profiter en sublimant l’expérience de votre interface : elle n’en sera que plus intuitive. Avec les micro-interactions, on satisfait les besoins des utilisateurs tout en permettant aux designers d’être créatif. Ces derniers peuvent compter sur les animations SVG, CSS, jQuery, Canvas et d’autres framework qui font parler d’eux (GreenSock, ScrollMagic, three.js…)

V. Les exhausteurs de (bon) goût

Comme en cuisine il y a des ingrédients qui permettent à coup sûr de raffiner votre plat pour qu’il soit au goût de la majorité de vos invités, à condition de les utiliser sciemment… Nous allons commencer avec le “SplitScreen”. Comprenez littéralement “écrans splittés”. Cet effet consiste à diviser l’écran en plusieurs parties pour y présenter des images ou du contenu différent. Les animer d’une certaine façon est toujours bienvenue : apparition successive au chargement, apparition d’une vidéo de fond au survol, déstructuration lors du scroll (l’un monte, l’autre descend..).

Un autre ingrédient incontournable : le “Menu Burger” ou plutôt “Fullscreen Menu”. Solution pour le design mobile, elle s’adapte très bien au grand écran : la navigation est cachée de la composition grâce à un élément placé sur un côté de la page : l’icône “Burger” masque ou affiche le menu instantanément en plein page. Cela permet de laisser la place aux visuels et au contenu. Le design par algorithme est à prendre aussi en considération. C’est l’art de jouer avec les possibilités qu’offre aujourd’hui le “creative coding” en s’amusant, par exemple, à modéliser les datas / données clefs d’un produit ou d’une entreprise. Pour finir, le retour des motifs (“patterns”) qui se répètent refont un retour discret…

VI. Qualité du contenu : textes, vidéos & photos

Les classiques ne manquent pas à l’appel ! Le contenu textuel prend plus en plus de place dans tous les sens du terme : sa taille et sa pertinence augmente. Les internautes visitent d’abord un site pour son contenu. Les vidéos et les photos, déjà bien présentes en 2017, mettent maintenant l’accent sur le DIY (Do It Yourself) : elles doivent être authentiques et représenter une réalité… le tout en Full HD.

Pour les vidéos, elles sont l’avenir du référencement. Les GIFs animés (ou vidéo en boucle) cartonnent également, mais à ne pas confondre avec ceux de nos films préférés. Les Gifs apportent une forte impression pour imager un mode d’emploi, le loader d’un site ou d’une action, les étapes d’une illustration etc…

VII. Typographie, Couleurs & Dégradés

Les années 80 / 90 sont de retour : au revoir les couleurs pastels et peu saturées ! Le “Less is More” ayant imposé son Diktat avec le “Flat Design”, on utilise aujourd’hui des couleurs vives, vibrantes et flashy issu de “l’art Edgy” afin d’infuser plus de personnalité. Cela s’accompagne également du grand retour des dégradés. Ces derniers seront notamment présents comme filtre semi-opaque sur une photo ou en fond d’écran, à l’instar du logo d’instagram qui avait enflammé les foules. L’objectif est de se démarquer dans cette immensité d’identités et de sites web rendus trop normés par le responsive et le flat design. Bref, plus de couleurs et plus de lumières en 2018 ! Mixer les typographies (par exemple très grosse et avec sérifs pour les titres et très fine et plus petite pour le contenu) fonctionne toujours aussi bien pour attirer l’attention.

VIII. Story Telling et Web Immersif

Le Story Telling c’est l’art de raconter une histoire pour vendre. Mais c’est à prendre, dans le bon sens du terme quand on parle de Webdesign. Tout comme les animations, certains sites animent désormais leur interface d’une narration interactive pour faire vivre leurs contenus : Le Story Telling devient donc la clef de voûte du design et ne se cantonne plus qu’au contenu. Le procédé assure une expérience unique pour l’internaute qui se retrouve VIP dans l’animation. Un très bon exemple est le site Joho’s (johos.at) construit en storytelling : on découvre une journée chez le producteur de café J. Hornig basé au Brésil avec une présentation de film et une navigation (sous forme de timeline) entre les chapitres. Un autre site magnifique autant dans la forme que dans le fond : evert45.com. La navigation se fait à travers une carte temporelle où nous suivons des histoires vraies à travers 2 frères en 39-45.

Dans un domaine très proche, le web immersif nous surprend toujours plus. Là où le storytelling vous raconte une histoire ici vous en faites partie intégrante. Ce tour de maître mêle tous les médias classiques (photos, vidéos, illustration, bande son) mais ils peuvent être amplifiés par les dernières technologies avec le WebGL, la Réalité Augmentée, les vidéos en 360°… Le Web Immersif peut être utilisé avec parcimonie – comme sur le site des masques Wed’ze (goggles.wedze.com) qui propose un simulateur – ou en faire un site complet qui ressemblera plus à une expérience qu’une simple visite (au risque d’un effort d’engagement trop élevé de la part des internautes.)

IX. Synthèse

Contrairement aux années passées, il est difficile de lister des tendances graphiques précises. A une certaine époque, avoir un slideshow ou une page d’accueil avec un large header suffisait à être dans le mouv.

Le minimalisme semble faire ressortir de nombreuses frustrations. Impérial depuis quelques années, il devient (enfin ?) plus compliqué et plus détaillé. C’est une bonne nouvelle pour les designers qui souhaitent s ‘exprimer avec autre chose que du Flat Design. Avant le Flat (jusque 2013) un site faisait parti intégrante de l’univers d’une marque ou d’une entreprise : sans lire le texte ou voir les images, le design d’un site permettait à lui seul de créer un univers. Aujourd’hui c’est l’inverse : les images et le contenu sont mis en avant, le design d’un site est en second plan tel un simple support. Ce qui peut expliquer l’explosion des templates (nul besoin d’originalité) et des frustrations (uniformisation) que cela engendre.

Aujourd’hui il semble que l’exécution graphique (concevoir une charte graphique ainsi qu’un site) est un acquis et que seule l’expérience utilisateur va compter. On peut sentir alors un net passage d’un « design graphique » à un « design d’expérience » prouvant ainsi qu’un tournant important a été négocié : designer et développeur front-end ne font plus qu’un.

Vous voilà avec quelques cartes en main pour créer ou reconnaître un site tendance en 2018, mais comme disait Albert Einstein : “une personne qui n’a jamais commis d’erreur n’a jamais tenté d’innover” : soyez libre !