10 tendances du design Web pour 2022

Au programme

En temps normal, le web design tend à évoluer à un rythme lent et progressif. Mais nous ne vivons pas une époque normale et la pandémie mondiale a rebattu les cartes et provoqué d’énormes changements culturels et sociétaux qui se sont répercutés partout. Et le secteur du graphisme et du design web en fait partie. Et comme si cela ne suffisait pas, les concepteurs et les agences web subissent actuellement un autre changement sismique. En mai dernier, Google a lancé sa mise à jour « Page Experience », qui met davantage l’accent sur l’expérience des utilisateurs lorsqu’il s’agit de classer les sites Web dans ses listes.

L’importance de ce changement ne doit pas être sous-estimée. Cela signifie que les concepteurs de sites Web doivent désormais mettre davantage l’accent sur des éléments tels que la vitesse de chargement, l’interactivité, la sécurité de la navigation et la stabilité visuelle… sans quoi ils verront rapidement leurs sites disparaître de la première page de Google.

Vint Deux, agence de communication à Clermont, spécialisée entre autre dans la conception de sites internet, est à la pointe de tous ces développements. Nous partageons avec vous les nouvelles tendances qui devraient dominer en 2022.

Inspirer l’optimisme et être source de plaisir

Tout au long des années 2010, la conception de sites web et d’applications a été fortement dominée par des interfaces minimalistes et purement fonctionnelles. Et cela avait du sens à l’époque. L’iPhone n’étant apparu qu’en 2007, suivi du premier iPad en 2010, la plupart des gens ne connaissaient pas le web. La priorité était donc de rendre les services numériques faciles à comprendre, à utiliser et à naviguer.

Comme l’ont fait remarquer de nombreux créatifs, cela a eu pour effet secondaire d’atténuer le côté plus amusant et expérimental des débuts du web. Maintenant que la plupart des gens sont familiarisés avec les plateformes numériques, on peut penser qu’il est possible de revenir à une certaine forme d’expérimentation. Après tout, la pandémie a sévi pendant près de deux ans et nos vies ont été perturbées comme jamais auparavant. N’avons-nous pas droit à un peu d’amusement ?

À en juger par les derniers sites Web, les concepteurs sont d’accord. Nous voyons actuellement beaucoup d’optimisme visuel dans la conception de sites web : des couleurs vives, des fonctionnalités joyeuses, une typographie excentrique, beaucoup de messages positifs et une interactivité agréable. Cette approche légère et souvent inattendue est un moyen bienvenu de nous ramener à la vie « normale » et de nous faire oublier les problèmes plus sérieux pendant un moment.

L’exemple de Bernard forever, boutique spécialisée dans les tatouages éphémères, est un bon exemple de cette tendance. Un sentiment d’amusement imprègne cette expérience en ligne, du personnage de dessin animé excentrique aux éléments animés subtils, en passant par une typographie conviviale et des couleurs accueillantes.

Les sites web performants en 2022 et au-delà chercheront à créer des expériences qui aident l’utilisateur et génèrent des pensées positives et de la bonne volonté. Les thèmes du rétablissement et de la croissance sont favorisés par des messages clairs et une imagerie inspirante. Ces tendances visent à aider vos visiteurs plutôt qu’à les diriger, ce qui les aidera à penser positivement à votre site et à leur relation avec vous.

Concevoir des sites internes épurés et fluides

Nous constatons un retour à un design épuré avec une utilisation généreuse de l’espace blanc, permettant à nos yeux et au contenu de respirer. Ce type d’approche tient compte du fait que les internautes et mobinautes ne veulent pas être submergés par trop d’informations ou des graphismes trop chargés. Et cette tendance est particulièrement louable car elle est en adéquation avec les exigences de la récente mise à jour de l’algorithme de Google, selon laquelle la rapidité de chargement de votre site Web est un avantage dans le classement des moteurs de recherche. Après tout, plus la conception est simple, moins il y a d’éléments à charger, c’est donc une situation gagnant-gagnant.
Cette tendance s’inscrit également dans la logique de Google, qui exige que les sites soient adaptés aux mobiles. Dans un monde où il y a une pluralité d’appareils, d’ordinateurs, de tablettes, de smartphones avec différentes résolutions, il est de plus en plus difficile de faire en sorte que les sites web fonctionnent bien sur chacun d’eux. Mais là encore, plus la conception est simple, plus cette tâche s’avère facile à réaliser dans la pratique.

Le site web de Savour Design, artiste céramique, fait figure d’exemple en la matière. Tout en intégrant toutes les astuces de scrolling dont nous avons désormais l’habitude, il y a une légèreté contrôlée dans les mises en page et les animations qui rendent la navigation fluide et agréable.

Le ScrollyTelling

On reproche souvent aux réseaux sociaux d’édulcorer les informations, les connaissances et les idées, en les transformant en contenus consommables (les snackables content) tels les clips vidéos soignés qui n’engagent guère le cerveau et, au pire, conduisent à la désinformation et aux théories du complot. Cela dit, ailleurs sur le web, il est facile de trouver des lectures informatives, équilibrées et réfléchies, mais souvent la mise en page de ces longs articles n’est guère engageante et peu adapté aux supports ordinateurs et téléphones. Mais comment faire pour que les gens les lisent vraiment ?

Une tendance de la conception web qui gagne actuellement en popularité est le ScrollyTelling, également connu sous le nom de « visualisation narrative ». Avec ce type de conception, lorsque vous faites défiler et lisez un article de longue durée, vous bénéficiez de petits plaisirs visuels amusants, qu’il s’agisse de colonnes élégamment composées, d’images décalées, d’animations subtiles, etc.

C’est un peu comme lire un magazine imprimé (en terme de direction artistique belle et inspirante), mais avec l’interactivité du web et la nature accrocheuse des images en mouvement.

La meilleure façon de se familiariser avec cette tendance est, bien entendu, de visiter des sites et de l’essayer directement. Un bon point de départ est le site d’Apple, qui met en lumière les fonctionnalités de ces produits. C’est par exemple le cas avec les AirPods Pro, qui met en œuvre cette tendance avec style et subtilité. En faisant défiler le site, l’image des produits passe de l’obscurité à la lumière : c’est un effet simple mais d’un effet dramatique dévastateur.

Le scrollytelling est le plus souvent utilisé dans le journalisme en ligne. On en trouve un bon exemple en scrolling verticalement l’article du New York Times sur l’explosion qui a lieu à Beirut en août 2020, mêlant à la perfection animation et information.

On adore cet exemple immersif du New York Times qui décortique une actualité en menant animation et narration.

On trouve également un autre exemple interessant avec à la fois un scrolling vertical et horizontal sur le site des canaux d’Amsterdam, en particulier sur ordinateur. L’effet produit ici ressemble beaucoup à celui d’un livre d’images, mais sous une forme accessible et numérique.

Partager, plutôt que raconter

S’agit-il d’une tendance, ou simplement d’un conseil intemporel ? En 2022, vous verrez davantage de vidéos et d’animations d’arrière-plan qui stimulent l’esprit de vos visiteurs et ajoutent un léger mouvement à votre page, réduisent le taux de rebond et aident les visiteurs à s’intéresser aux mots et au message.

Dans la continuité du point évoqué précédemment sur le scrollytelling, les micro-interactions et les micro-animations sont également des moyens d’animer efficacement les pages d’un site internet. En les rendant subtiles, mais perceptibles, vous ajoutez un niveau de détail que vos visiteurs ne sont peut-être pas en mesure d’exprimer, mais qui vous aide à vous démarquer.

Qu’est-ce qu’une micro-interaction ? Il s’agit de petites animations qui sont déclenchées par le passage du curseur ou par le défilement d’une partie particulière de la page. Lorsque vous passez la souris sur un bouton ou une section du site et que quelque chose change de couleur, ou qu’une icône bouge légèrement, cela vous engage visuellement et donne à la page une sensation tactile.

Les animations du type Lottie sont particulièrement utiles pour illustrer des concepts et des processus complexes de manière simple et digeste. Les animations simples et raffinées illustrent votre message d’une manière que les mots ne pourront jamais exprimés pleinement.

La page Local Guides de Google donne un aperçu efficace de son fonctionnement par le biais de simples défilements et animations.

Opter pour la simplicité

La simplicité est la sophistication suprême

Léonard de Vinci

Les entreprises sont confrontées à de sérieux défis à l’approche de 2022. Créer des obstacles à l’engagement des clients n’est tout simplement pas une stratégie envisageable si votre entreprise cherche à se développer. Comment cela se traduit-il dans la conception de sites internet ?

Moins de mots, des couleurs apaisantes, des images vives et des appels à l’action très clairs devraient faire fureur en 2022. La conception des pages va tendre vers des expériences plus légères qui encouragent l’utilisateur à explorer plus en profondeur, plutôt que de tout mettre en avant sur une seule page. Il s’agira de messages simplifiés qui implorent le visiteur de vouloir en savoir plus, plutôt que de conversations complexes qui laissent aux visiteurs un sentiment de surcharge d’informations.

Alors qu’il y a quelques années, la tendance était aux infographies (design serré, typographie, espace condensé), le design de 2022 comprendra plus d’espace et un mouvement léger. Cela vous permet toujours de transmettre des informations, mais d’une manière qui les révèle et les élargit, au lieu d’être aussi condensée et (trop) pesante.

Dans le même temps, les formulaires de contact seront probablement plus simples et plus légers pour éviter de perdre un prospect à cause d’une série complexe de questions. Vouloir qualifier le plus possible un contact est certes louable, mais le mieux est souvent l’ennemi du bien. Quelques questions réparties sur plusieurs interactions s’avèrent être une méthode plus efficace pour attirer de nouveaux clients potentiels que la mise en place d’un grand formulaire – et c’est également plus facile à utiliser sur les appareils mobiles.

Le site menurable.ca utilise une approche colorée avec une iconographie douce.

La sécurité avant tout

Tandis que tout le monde cherche à savoir comment s’engager dans le nouveau monde après la pandémie, les tendances en matière de design évoluent pour aider les clients et consommateurs à se sentir à la fois en sécurité et prêts à s’engager à nouveau. Tout comme les bureaux et les espaces intérieurs sont restructurés pour inciter les gens à revenir au travail en présentiel, les sites internet s’adaptent pour donner de l’espace aux personnes, réduire les différents niveaux de stress et les faire se sentir à l’aise et en sécurité.

Myforet : une réponse optimiste à une situation globale alarmante

Les pages web intègrent davantage d’images qui évoquent des espaces extérieurs et un design inspiré de la décoration intérieure. L’intégration de formes naturelles et organiques aide la page à se sentir unique, inspirante et vivante. Nous voulons que nos visiteurs aient l’impression d’être dans un nouvel espace, mais qu’ils soient tout aussi en sécurité que chez eux.

C’est une question d’esthétique et de sentiments : nous voulons être loin de chez nous, mais en même temps, nous voulons la sécurité de nos maisons. Un design spacieux, accueillant et accommodant renforcera le sentiment de sécurité et de sûreté de vos visiteurs.

Polygon Design donne une impression de plein air et de grands espaces

Le design interactif poussé dans ses retranchements

En matière de design, quelle est la meilleure expérience que l’on puisse offrir à un utilisateur ? D’aucuns diront que c’est de laisser l’utilisateur choisir lui-même le design. C’est pourquoi, aujourd’hui, de nombreux sites Web s’inspirent du concept d’interactivité et ne se contentent pas de se déplacer de haut en bas sur la page. Au lieu de cela, l’utilisateur peut personnaliser des éléments entiers du design.

En faisant défiler et en cliquant, il peut déplacer des éléments de conception entiers sur la page, choisir des couleurs d’arrière-plan, opter pour le dark mode, ou décider du moment où les éléments se transforment. Telles sont les tendances que nous observons actuellement et qui devraient se poursuivre en 2022.

Un bon exemple est ce mini-site éducatif de l’agence Obys, qui vous enseigne l’utilisation des grilles dans la conception. La navigation certes déroutante mais la conception du site démontre visuellement les principes qu’il expose, et l’utilisateur a le choix d’activer ou de désactiver ce « mode grille », ainsi que le « mode fou » explicite.

SIte un peu fou fou mais qui a le mérite de démontrer son concept via une personnalisation (trop) poussée

Dessin au trait

Le travail au trait est une tendance qui, d’une certaine manière, est à la fois moderne et rétroactive. Les concepteurs peuvent utiliser des lignes pour délimiter les sections, les en-têtes, les paragraphes et les galeries de produits, ou créer une grille dynamique pour l’ensemble d’une page web. Pour aller encore plus loin dans ce style, ajoutez des illustrations au trait (abstraites ou représentatives). Avec ce type de conception, le poids des lignes aura le plus grand impact sur l’effet final.

Le site de CPGD utilise des lignes noires audacieuses pour un effet fantastiquement graphique. Cette conception a plutôt un aspect jeune et amusant. Chaque section de la grille est d’une couleur différente, ce qui permet de différencier le contenu, et le changement de couleur au passage de la souris oriente également l’utilisateur.

Illustration par collage

Les graphiques de style collage peuvent donner aux illustrations de sites une sensation tactile, ouvrir plus d’espace blanc dans un design et vous permettre d’incorporer des images sans concentrer tout le design autour d’une photographie. Veillez à mélanger les formes, les motifs et les couleurs dans un collage. Vous pouvez ajouter un effet monochrome, une teinte ou un filtre aux photos pour les aider à se fondre dans le design global.

Le site de Vanta utilise des illustrations de style collage sur la page d’accueil et dans tout le site. La modification de ses photographies pour leur donner un aspect de collage lui permet de placer les graphiques de manière irrégulière et désaxée, ce qui brise la grille du site.

One-landing-page : site internet à une seule page

Parfois, le site le plus efficace est le moins complexe. Force est de constater la popularité croissante des sites internet d’une page qui renoncent aux menus et à la navigation au profit d’une simple navigation par défilement. Les sites d’une page fonctionnent mieux lorsque leur sujet est plus restreint, comme un portfolio ou la présentation d’une seule idée.

Refonte du site internet Les Halles du Brézet pour un one-landing-page : simple et efficace

Ces sites évoquent le sentiment de tenir un prospectus ou de lire une affiche. Toutes les informations dont vous avez besoin sont réunies au même endroit, sans qu’il soit nécessaire de naviguer ou de chercher sur plusieurs pages.
De plus, pour le client, ce format implique une économie de coût pour le déploiement de son site internet.

Conclusion

Dans cet article, nous vous avons présenté quelques-unes des plus grandes tendances en matière de conception de sites internet qui affectent actuellement le secteur et qui, selon nous, devraient étendre leur influence en 2022 et dans les années à venir. Ces tendances découlent en partie de deux grands événements :

  • Le premier est lié à la situation sanitaire qui a entraîné de nombreux changements économiques, sociétaux et culturels.
  • Le second est l’important changement d’algorithme de Google qui contraint fortement les professionnels du web à proposer des sites internet qui chargent plus rapidement et s’adaptent mieux à la gamme d’appareils mobiles disponibles aujourd’hui.

Bien sûr, ce n’est pas tout, loin s’en faut. Il y a la mission permanente de veiller à ce que la conception web soit inclusive, afin que le web soit accessible à tous. Et c’est bien évidemment ce que nous nous efforçons de faire chaque jour au sein de l’agence Vingt Deux. Il y a le lancement constant de nouvelles plateformes et de nouveaux concepts comme la réalité virtuelle ou le métavers.

Bien sûr, personne ne peut prédire l’avenir avec certitude. La seule chose que l’on puisse faire, c’est d’être conscient des tendances actuelles et de ce qui les sous-tend, et de faire des suppositions éclairées sur ce qui nous attend. Personne n’a jamais dit que la conception web était prévisible, et c’est exactement ce qui en fait un domaine passionnant à travailler !

Partager

Articles similaires

Tendances créatives 2022
Deux entreprises expertes et références, Adobe et Shutterstock, prédisent les tendances créatives de 2022. Découvrez-les dans cet article.
Graphisme : qu’est-ce qui retient l’attention de la génération Z ?
Que doivent savoir les marques pour capter l’attention des jeunes consommateurs ? Nous examinons ici les tendances visuelles que les attitudes, comportements et habitudes de la génération Z façonnnent
Tendances graphisme et design 2022
Avec tant de changements ces derniers temps, les marques n’ont pas pu prendre beaucoup de risques en matière de design cette année. Et elles doivent souvent faire plus avec moins … Quelles tendances Graphique & design domineront 2022 ? Découvrez les plus grandes tendances en matière de design graphique.