Tour d'horizon des tendances web design 2022 : images multicouches, couleurs audacieuses, typographie cinétique, scrollytelling, défilement horizontal, vidéo, avec astuces Webflow.
Mise à jour, octobre 2026 : les choses ont évolué depuis que j'ai écrit cet article. L'approche plus récente se trouve dans The Top Web Design Trends for 2023. Le reste de cet article reste valable comme témoignage de notre façon de travailler à l'époque.
Chaque année, une poignée de tendances de web design se met à apparaître dans nos briefs de projet. Voici celles que nous voyions et construisions dans Webflow en 2022, des images superposées et des couleurs audacieuses aux textes animés, au scrollytelling et au défilement latéral.
Images multicouches
Nous l'avons expérimenté sur certains des propres sites de Milk Moon Studio, par exemple Swellendam Heritage Society, et nous avons constaté que les visiteurs passent plus de temps à explorer le site. Pour la Heritage Society, nous avons utilisé des modes de fusion CSS avec une combo class dans Webflow. Nous avons écrit un court article sur la façon de procéder avec les modes de fusion CSS et les combo classes. Webflow prend désormais en charge les modes de fusion lorsque vous superposez des éléments, mais cette prise en charge reste un peu limitée. Nous avons constaté que, si la fonctionnalité native suffit pour l'instant, certains experts Webflow préfèrent encore la liberté de notre méthode par combo class.
Des couleurs contrastées et ludiques
Des millennials dans la salle ? Celle-ci est pour vous !
La couleur est un outil de base qui aide à capter l'attention de l'utilisateur et à susciter l'émotion.
Souvent destiné à un public précis, ce style est devenu une esthétique web vibrante et percutante, pleine de formes acidulées issues de la contre-culture, de néons sur fond noir, de contrastes vifs et de dégradés. Nous allons là encore mettre en avant les excellentes fonctionnalités de Webflow. Le CMS propose un champ Color avec sélecteur de couleur, code hexadécimal, etc., et autant de champs Color que vous pouvez en loger dans un élément de CMS. Vous pouvez ainsi ajouter en quelques clics de superbes couleurs assorties ou contrastées à vos articles de blog, à vos pages d'équipe ou à vos produits e-commerce. Pour les plus audacieux, il existe des scripts qui récupèrent la couleur d'une image et l'appliquent à un élément. Vous pouvez trouver des exemples ici ou aller les chercher sur stackoverflow.com.
Esprit ludique et nostalgie
Cette approche invite à ralentir le rythme et à donner une impression plus analogique grâce à la typographie et à l'imagerie : filtres d'image classiques, polices rétro, flou, grain, textures, lumière douce et palettes de couleurs pastel. Ce ne sont là que quelques exemples des pratiques que les web designers utilisent pour créer des expériences auxquelles on s'identifie.
Animation typographique / typographie cinétique
Un texte en mouvement peut capter l'attention, donner le ton, mettre en valeur les passages importants et guider le regard de l'utilisateur sur la page. Si vous animez du texte dans Webflow, notre guide visuel des fonctions d'accélération dans Webflow vous aide à choisir la bonne courbe de mouvement. Cette tendance existe en réalité depuis les années 1950, lorsque les longs métrages ont commencé à utiliser des génériques animés plutôt que du texte statique.
Un design pour tous
Le design inclusif touche chaque étape de la conception d'un site web, des décisions stratégiques sur le public cible au ton employé, en passant par la personnalisation, ainsi que la définition du langage graphique de votre marque afin qu'il s'adapte à tous les genres, points de vue, expériences et situations. Regarder le design inclusif sous d'autres angles, c'est aussi tenir compte de multiples handicaps en rendant votre site plus accessible, ce que tout studio Webflow devrait s'efforcer de faire.
Encore un coup de chapeau à Webflow : la plateforme a fait de grands progrès en matière de design inclusif. Vous pouvez prévisualiser votre projet selon différents types de daltonisme, recevoir des avertissements lorsque le contraste des éléments est insuffisant ou lorsque vous avez sauté un niveau de titre, ce qui complique la tâche des lecteurs d'écran, ou encore en cas de texte alternatif manquant, de liens pas assez descriptifs, etc.
Pour en savoir plus sur le ton, l'imagerie, etc., consultez le court article de Webflow sur le contenu inclusif et rendez-vous sur Webflow University pour des conseils afin de rendre votre site plus accessible.
Scrollytelling
Une manière de plus en plus populaire de tirer le meilleur parti d'une interface numérique et de raconter une histoire complexe.
Il s'agit d'effets visuels qui cherchent à captiver le public en lui servant un contenu attrayant sur un plateau d'argent. Le scrollytelling est aussi appelé « visualisation narrative » : une série d'éléments visuels enchaînés et organisés chronologiquement pour transmettre un message précis aux visiteurs.
Défilement horizontal
Une mise en page à défilement latéral peut créer des interactions surprenantes entre textes et images.
C'est particulièrement vrai pour les sites de portfolio, les catalogues, les cartes et autres. Découvrir des projets, explorer des villes et visiter des galeries en ligne est bien plus captivant avec une navigation latérale. Bien réalisé, le défilement horizontal peut rendre un site plus attrayant, plus amusant et plus mémorable, comme l'illustre magnifiquement l'exemple de NOVA+ ci-dessous.
Il faut reconnaître ici que Webflow peut être un vrai casse-tête, car la plateforme n'aime pas le défilement latéral. Mais qui dit qu'on ne peut pas la détourner un peu ? Nous l'avons fait pour NOVA+, donc c'est tout à fait faisable avec le design Webflow si le besoin existe. Jetez un œil au projet NOVA+, où nous avons employé deux méthodes différentes. La première repose sur la position de la souris : le défilement va à gauche ou à droite selon l'endroit où vous survolez la section. La seconde vous oblige à parcourir la section en défilant, à mesure que vous descendez dans la page.
Vidéo d'arrière-plan
Comment ne pas aimer ? Avec les progrès du haut débit et le déploiement de la 4G et de la 5G pratiquement partout, une belle vidéo en boucle derrière votre contenu est tout simplement logique. Nous avons même écrit un tutoriel sur l'ajout de vidéos d'arrière-plan aux éléments de CMS dans Webflow, ce qui n'est pas pris en charge nativement. Rendez-vous donc sur notre tutoriel sur les vidéos d'arrière-plan pilotées par le CMS dans les collection lists, si cela vous intéresse. Il existe aussi une méthode plus récente qui utilise le Custom Element, que nous présentons dans notre article sur les vidéos d'arrière-plan pilotées par le CMS avec le Custom Element.
