Webdesign : <b>6 <span>tendances</span> graphiques</b> à suivre en <b><span>2022</span></b>

Webdesign : 6 tendances graphiques à suivre en 2022

15 minutes de lecture
Webdesign : 6 tendances graphiques à suivre en 2022
Publié le 13 février 2022 par acrv
Dans la catégorie : Explications

Le webdesign est un secteur en perpétuel changement, qui évolue au gré des innovations et des habitudes des utilisateurs. Chaque année apporte son lot de tendances, qui émergent ou se renforcent, qui se complètent ou s’opposent.

Dans cet article, découvrez 6 tendances webdesign attendues sur nos écrans en 2022, exemples à l’appui.

Des illustrations faites main


Alors que le digital ne cesse d’explorer des techniques toujours plus innovantes, la tendance des illustrations faites main prend le contre-pied. Les petites imperfections apportent du charme, les collages approximatifs de l’authenticité. On retrouve également des textures analogiques, où l’on distingue les coups de pinceau ou les traits de crayon. Autant de détails qui participent à ramener les internautes à la “vraie” vie.

Notons que les patchworks et les superpositions de photos et d’images ont toujours autant le vent en poupe, offrant une touche ludique et créative aux sites web.

House At Khlebny

Inapsquare

Hendricks Gin

Vanta

Hudson Gavin Martin

Sheep Inc

Flowmigo

Benett Tea

Des compositions encadrées


En phase de conception, les designers ont recours à des grilles verticales et horizontales afin de structurer les interfaces web. Sur la plupart des sites web, ces bordures finissent par être gommées, pour laisser toute la place aux éléments, qui semblent flotter en harmonie sur la page.

Mais les sites sont de plus en plus nombreux à conserver et jouer avec ces cadres, qui ont une vocation aussi bien esthétique que fonctionnelle. Ces grilles géométriques soulignent la disposition des éléments et participent à valoriser chaque section. Un parti pris qui confère au design un style à la fois rétro et audacieux.

Des polices interactives


Composante essentielle dans la conception des sites web, la typographie ne se contente pas de transmettre une information : elle contribue à enrichir visuellement l’interface, à plonger l’internaute dans l’univers de l’annonceur, au même titre que les visuels.

Depuis quelques années, les polices gagnent en créativité, et désormais en interactivité. Les typographies prennent vie, des micro-animations ponctuent le parcours utilisateur au gré des mouvements de la souris. Un moyen simple de rendre le texte interactif consiste à appliquer un changement de style (couleur, graisse, taille…) au survol, comme on le voit déjà sur les boutons.

Cette tendance apporte dynamisme et originalité aux sites web qui l’emploient. Cependant, attention à l’utiliser avec parcimonie, afin de ne pas brouiller la lisibilité du texte, qui n’est jamais que décoratif.

Sur le site de Dillinger, la police change de poids au survol de la souris.

Inclinaison, graisse, contraste, empattement… La typographie dynamique Laika offre de nombreuses possibilités d’animation.

L’éco-conception


Même s’il est immatériel, un site web laisse une empreinte derrière lui, plus ou moins importante selon la manière dont il a été conçu. Aujourd’hui, la part du numérique dans les émissions de gaz à effet de serre représente 3,7 % du total des émissions mondiales¹.

À une époque où les initiatives durables et écoresponsables se multiplient dans tous les domaines, les webdesigners sont de plus en plus nombreux à s’engager dans une démarche d’éco-conception.

L’objectif étant de créer des sites web moins énergivores, plus respectueux de l’environnement, avec des performances et une expérience utilisateur similaires – voire meilleures – qu’avec les méthodes traditionnelles.

Voici quelques actions à mettre en place pour réduire l’impact d’un site internet :

  • Souscrire à un hébergeur web écologique, dont les centres de données sont alimentés avec des énergies renouvelables et/ou vertes
  • Proposer un design épuré et frugal, par exemple en privilégiant les polices standards et les illustrations vectorielles, moins gourmandes en ressources
  • De même, fluidifier le parcours utilisateur pour réduire le temps passé sur le site web, et donc son empreinte carbone

Certains sites comme ecoindex.fr et websitecarbon.com permettent de mesurer l’impact environnemental de votre site web.

Le site web de Low-tech Lab porte bien son nom et fait figure d’exemple en termes d’écoconception. Le design minimaliste sert avant tout le message, ce qui n’empêche pas la direction artistique de concilier l’utile à l’agréable. Par exemple, les images en basse résolution au rendu ultra-pixelisé sont légères tout en apportant au site une apparence singulière. Chaque visite sur la page d’accueil génère 0,03g de CO2, contre une moyenne de 1,76g.

¹ https://theshiftproject.org/article/pour-une-sobriete-numerique-rapport-shift

Low-tech Lab

Le retour de l’Art Déco


Chaque année connaît son lot de tendances rétro, mettant un courant artistique passé à l’honneur. En 2022, c’est l’Art Déco qui se retrouve sous le feu des projecteurs, tout juste un siècle après son apogée.

Le style Art Déco combine harmonieusement des lignes organiques, faisant écho à la nature, avec des formes géométriques et symétriques, en référence au progrès et à l’industrialisation qui battait alors son plein.

Les sites web s’inspirant de l’Art Déco offrent ainsi des courbes épurées, des compositions minimalistes, des palettes dorées, des typographies imposantes et des motifs ornementaux. Il s’agit donc d’une tendance dans l’air du temps, reprenant nombre de codes déjà convoités par les designers, ce qui facilite son intégration dans des interfaces modernes.

The New Yorker

BBC StoryWorks

De nombreuses typographies proposent un style Art Déco (Envato Elements).

Le design inclusif


La fin des années 2010 a vu naître plusieurs mouvements prônant égalité et diversité. Le design inclusif s’inscrit dans cette continuité, avec pour mantra “résoudre pour un, étendre à tous”.


Via son menu déroulant, le site sustainablewebdesign.org permet d’ajuster plusieurs paramètres d’accessibilité : taille de la typographie, dark mode, contraste élevé…

Pour illustrer son formulaire d’inscription, Lemonade joue la carte de l’abstraction.

Il s’agit d’un processus dans lequel les UI et UX designers intègrent une variété de situations et points de vue dans le but de créer un site convivial et utilisable par tous les utilisateurs, sans exception, quelles que soient leurs caractéristiques physiques, mentales ou sociales.

Afin de créer des interfaces qui touchent un large spectre d’internautes et favoriser l’identification auprès du plus grand nombre, le design inclusif implique chaque aspect de la conception web, sur le fond comme sur la forme.

Côté visuels, plutôt que de chercher à représenter l’utilisateur neutre “par défaut”, les images gagnent en abstraction, pour s’éloigner d’une représentation trop réaliste, ou en diversification, pour refléter les différences de chacun. Concernant le texte, priviligiez un vocabulaire simple, des phrases courtes tournées à l’affirmatif, compréhensibles de tous. Quant aux éléments multimédias, adoptez des formats qui s’adaptent à toutes les situations, par exemple en associant un texte explicatif aux illustrations via la balise Alt Text, ou en proposant une transcription audio de vos articles de blog.