Webdesign tendance - dawid-zawila-unsplash
15 novembre 2021

Les tendances du Webdesign en 2022

Partager l'article

Les remous et bouleversements éthiques, sociaux, sanitaires et politiques de ces deux dernières années impactent les comportements et les objectifs des internautes. Ces changements se répercutent jusqu’aux designs et fonctionnalités des sites internet. Quelles nouvelles tendances émergent pour les conceptions de site en 2022 au niveau du webdesign ? Quelles fonctionnalités deviendront incontournables ?

 

Les réseaux sociaux en vogue tels qu’Instagram ou Tik-Tok montrent déjà la voie du webdesign à venir : des couleurs vives, des formes organiques simples, des typos sérif vintage, du minimalisme coloré. En plus de cela, de fortes attentes s’expriment pour des sites web plus inclusifs, avec des temps de chargement de page ultra-rapides, essentiellement consultés à partir de smartphones. Les sites internet de 2022 apportent un lot important de nouveautés !

 

De la couleur !

Les couleurs pastel ou les fonds blancs, crème et gris clairs laissent la place en 2022 aux couleurs vives. La tendance est à la sortie de la morosité, au retour du dynamisme et de l’énergie. On observe déjà le succès visuel des pages d’accueil sans images, avec un texte en grands et gros caractères sur fond de couleur vive. Ces couleurs dynamiques se déclinent sur l’ensemble du site, de manière complémentaire, et s’associent aux caractéristiques suivantes : un design minimaliste, de l’espace libre, et des formes organiques.

 

Un nouveau flat design

Le flat design, très tendance il y a quelques années, revient à la mode en 2022. Donnant à voir un graphisme minimaliste et plat, doté d’espaces libres entre les éléments de textes et d’images, son principe reposait sur un fond bien souvent blanc, crème, gris, voire pastel. Le site d’Apple en était l’exemple type.

 2022 signe le retour de cette conception visuelle, et, comme il l’a été dit précédemment, en utilisant des couleurs vives.

Flat Design standard

Flat Design coloré

 

Des formes organiques et simples

Ces couleurs se retrouvent également dans les formes simples telles que les ronds, rectangles, carrés, etc. Elles se déclinent dans l’habillage et dans les boutons des sites internet de 2022.

Le webdesign privilégiera les formes organiques, sans effet 3D, aux couleurs vives, dans la continuité des designs des applications sur les écrans d’accueil des smartphones. Une remise au goût du jour colorée en somme, qui s’applique également dans les typographies des sites web.


Le retour des typos sérif

La surprise de 2022 réside dans le retour à la mode des typographies avec sérif vintage. Comme le fait déjà le site etsy.com, ces typos seront utilisées dans les titres plutôt que dans les textes, voir dans un court texte de grande taille sur fond coloré sur la page d’accueil.

Un retour à la mode qui s’explique en partie par le succès des typos avec sérif proposées dans les applications des réseaux sociaux, même si pour les sites internet de 2022 il s’agit d’utiliser des typos sérif vintage, légèrement arrondies, plutôt que le bon vieux Times New Roman.

Typographie Serif
La typographie Serif fait son grand retour en 2022 !

 

Interactions et micro-animations

La tendance actuelle dans la conception de sites web s’appuie sur l’utilisation de micro-animations. Elles suscitent l’intérêt, captent l’attention, et peuvent diriger l’utilisateur vers du contenu cliquable par exemple. Le site smashmallow.com constitue un bon exemple de ces petites animations, très tendance en 2022.

 Dans le même esprit, les boutons au survol de la souris s’animent au lieu des habituels effets de soulignage ou de remplissage. Une micro-interaction qui amuse, et qui maintient le focus. En exemple, le site benjerry.fr dont certains boutons sont dotés de ces micros-interactions.

 

Le mode sombre

Connu depuis quelques années sur certains navigateurs et sites de streaming, le mode sombre (ou dark mode) des sites internet se répand de plus en plus, à la faveur de la prise de conscience écologique internationale. Outre le fait que cette fonction améliore la lisibilité, les contrastes et l’ergonomie pour l’utilisateur, elle permet une économie d’énergie puisque les pixels sombres consomment moins d’électricité. Une tendance qui va augmenter en 2022, notamment pour les sites soucieux d’afficher des valeurs de protection environnementale.

DarkMode
Déjà à la mode depuis quelques années, le Dark Mode se généralisera d'autant plus en 2022 avec la possibilité de switcher par un bouton entre l'affichage classique et le mode sombre.
 

 

Des pages qui chargent ultra-rapidement

Le temps de chargement des pages d’un site constitue l’un des éléments le plus important du webdesign en 2022, si ce n’est le plus important : 60 % des internautes quittent un site dont le temps de chargement est supérieur à 3 secondes ! Un temps de chargement très rapide assure également un meilleur référencement. Du côté webdesign, différentes solutions peuvent aider à atteindre cet objectif. En utilisant par exemple une pagination : au lieu d’avoir une page lourde de contenus, le site offre –comme pour les sites de vente en ligne- une navigation vers la suite des contenus, selon des pages numérotées. Une autre solution consiste à charger le contenu de la page en fonction du scroll. Un principe inspiré par le « scroll infini » de Facebook. Un bouton « charger plus » ou « en voir plus » compose une alternative au chargement des contenus en fonction du scroll : les contenus de la page apparaissent au clic sur le bouton.

 

Des sites pensés pour smartphone

La navigation sur appareils mobiles dépasse largement celle sur ordinateurs : plus de 55 % du trafic web se fait à partir de smartphones ! Il apparaît comme primordial en 2022 de penser un webdesign propre aux smartphones et tablettes, avec des icônes plutôt que des images, des menus repensés, et une ergonomie « thumb-friendly » - qui facilite l’utilisation du pouce.
Dans la façon d’utiliser un smartphone, le pouce a un rôle primordial : le téléphone est quasiment toujours tenu par quatre doigts et le pouce assure la navigation et les clics. Certaines zones sont inaccessibles au pouce dans cette position, et ces zones changent selon que l’utilisateur soit droitier ou gaucher. Une réalité pragmatique à prendre en compte dans le design responsives des sites !

 

Des sites encore plus inclusifs

Le dernier point à prendre en compte dans la conception du webdesign pour 2022 repose dans la prise en compte des handicaps des utilisateurs. Concevoir un site accessible au plus grand nombre relève plus du bon sens et de la qualité de service que de la tendance. Cela améliore aussi le référencement des sites. Dans cette optique, le design d’un site web peut s’appuyer sur le recours à des couleurs contrastées entre le fond et le texte, sur des bordures rectangulaires autour des liens cliquables pour les signaler lors d’une navigation par clavier, sur l’utilisation de labels et d’instructions au lieu de placeholder dans les formulaires en ligne, sur l’attribution de balises alt tag aux images du site, ou en offrant la possibilité d’utiliser le micro pour effectuer une recherche dans le site ou remplir les champs d’un formulaire. 

Pour résumer l’ensemble des éléments abordés ci-dessus, le site web dans la tendance de 2022 proposera un design minimaliste, plat, aux couleurs vives, laissant de la place à des images animées, affichant de gros titres en typographie sérif vintage, et comportant des boutons interactifs aux formes simples. Son temps de chargement sera ultra-rapide, et il offrira des aménagements qui impacteront son design : un mode sombre, un design pensé avant tout pour les smartphones, et des éléments facilitateurs pour les publics handicapés.

 

Nos dernières formations WebDesign

  • Atelier Figma - Design d'application
    Découvrir
    A l'issue de cette formation vous serez en mesure de designer et vos propres interfaces, créer des composants réutilisables, créer des styles de couleurs et de texte, créer des prototypes, et utiliser les ressources de la communauté Figma. Vous serez autonome dans la création de vos projets d'interfaces sur Figma !
    3h08 42 leçons 5 / 5
  • Apprendre Adobe XD - Les fondamentaux
    Découvrir
    Maîtriser Adobe XD pour le design et le prototypage d'interfaces intéractives.
    3h42 56 leçons 5 / 5
  • Apprendre les tendances graphiques en Webdesign
    Découvrir
    Apprendre et comprendre les principales tendances graphiques en Webdesign
    1h55 21 leçons 4 / 5
  • Atelier Sketch 3
    Découvrir
    Atelier de création d'une maquette web avec le logiciel Sketch 3
    1h48 13 leçons
  • Apprendre Sketch 3
    Découvrir
    Débuter sur Sketch 3, l'outil de dessin vectoriel
    0h53 18 leçons
  • Apprendre le Responsive Design
    Découvrir
    Apprendre à réaliser un site Responsive
    4h28 35 leçons
Partager l'article