8 tendances en matière de webdesign en 2022

Le paysage du design n'est jamais ennuyeux, de nouvelles tendances émergent chaque année. À l'aube de 2022, nous avons demandé à notre designer Janne et à notre stagiaire en design Diana de jeter un coup d'œil à ce que vous verrez sur le web !

Tendance 1 : moins de hero images

Au lieu d'utiliser une photographie ou une illustration dans une hero image ou une page de destination, essayez d'utiliser la mise en page, la typographie, la couleur et la forme pour communiquer une identité de marque forte et unique. Le fait de renoncer aux images crée également un peu de mystère, incitant les visiteurs à découvrir ce qui se trouve au-delà de la section du héros.

Exemples ci-dessous : Humain, SVZ Design

Humain
SVZ Design

Tendance 2 : les polices interactives

En poussant l'utilisation du texte encore plus loin, certains concepteurs ont trouvé des moyens créatifs de faire bouger leur texte et de jouer avec la souris de l'utilisateur. Une façon simple de rendre le texte interactif est d'appliquer un changement d'état de survol comme vous le feriez avec un bouton. Lorsque vous utilisez l'interactivité sur des polices, il est important de garder à l'esprit la lisibilité, car certaines personnes sont distraites par des caractères en mouvement.

Une belle addition à la tendance précédente est la typographie cinétique qui évolue rapidement avec de nouvelles techniques en main. Aujourd'hui, cette pratique est largement utilisée par les concepteurs de sites Web sous diverses formes. Si l'animation de personnages était autrefois le premier moyen de raconter une histoire, la typographie est aujourd'hui un tout nouveau jeu de balle.

Le texte en mouvement peut capter l'attention, donner le ton, mettre en évidence des segments importants et guider le regard de l'utilisateur sur une page.

Dans les années à venir, nous verrons davantage d'exploration de la typographie cinétique qui sert de fonction plutôt que de simple décoration.

Exemples ci-dessous : Dillinger, Stellar, Markus

Dillinger
Stellar
Markus

Tendance 3 : typographie surdimensionnée

Un élément qui va de pair avec la tendance évoquée ci-dessus est la typographie de taille inhabituelle. À une certaine taille, les mots deviennent davantage un élément graphique qu'une simple partie du texte. Il s'agit d'une technique polyvalente qui peut être utilisée dans des conceptions minimalistes ou maximalistes tout aussi efficacement et qui peut convenir à de nombreux styles différents.

Exemple ci-dessous : Kieran Baybutt

Kieran Baybutt

Tendance 4 : gradients (& grain)

Les dégradés sont populaires depuis un certain temps déjà, mais en y ajoutant du grain, ils créent un effet totalement différent. Un dégradé parfait est lisse et moderne, donnant aux objets un éclat futuriste ou une sensation de brillance et de technologie. Le grain donne de la profondeur à un dessin, lui donne de la texture et le fait paraître plus naturel.

Une autre utilisation créative des dégradés cette année consiste à les faire figurer en bordure des boutons et d'autres types d'éléments.

En raison de l'utilisation émergente du motion design dans les sites Web, les dégradés peuvent désormais être mis en œuvre et utilisés de manière plus complexe. En 2022, ils vont être utilisés comme arrière-plan ou comme partie d'éléments plus petits. Ils peuvent être utilisés pour exprimer visuellement votre message, comme le fait le site Web ci-dessous.

Exemples ci-dessous : Zeus Jones, Conférence Webflow No Code

Zeus Jones
Webflow No Code Conference

Tendance 5 : rétro (lignes, cercles et arcs)

Le travail à la ligne 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 de la page Web. Pour aller encore plus loin dans ce style, ajoutez des illustrations au trait. Avec ce type de conception, le poids des lignes aura le plus grand impact sur l'effet final.

Cet effet rétro peut être obtenu non seulement avec des lignes mais aussi avec des images découpées en forme de cercle ou d'arc. Bien utilisé, ce style peut être chic et élégant.

Exemples ci-dessous : esenin-esenin.tilda.ws, Shaleen Cheah, GCI

esenin-esenin.tilda.ws
Shaleen Cheah
GCI

Tendance 6 : plus de glassmorphisme et de graphiques 3D

Une superbe tendance qui a en fait déjà commencé l'année dernière est le glassmorphisme. Une combinaison de transparence, de flou et de mouvement peut faire en sorte que les éléments des pages se comportent visuellement comme du verre. Vous pouvez utiliser cette technique pour des logos, des illustrations ou même des sections entières.

La clé de ce style est la diffusion, la réflexion et l'ombre, qui créent l'illusion d'optique. Combiné à un mouvement subtil, l'effet de verre peut donner à un site une impression de 3D. La diffusion du "verre dépoli" dans l'image vous permet d'intégrer la transparence dans votre conception sans que cela ne soit trop désordonné visuellement.

En ce qui concerne la 3D, il ne s'agit pas d'une nouvelle tendance, mais d'une tendance tellement cool qu'elle va continuer à se développer. Les grands graphiques 3D sont une façon propre et très audacieuse d'exprimer le message de votre marque.

Exemples ci-dessous : Chaîne décimale, Pluton

Decimail Chain
Pluto

Tendance 7 : les multicouches d'imagerie

Ces dernières années, au cours du processus de conception, l'accent a été mis sur les conceptions propres, parfaites au pixel près et minimalistes. À tel point que de nombreux concepteurs sont découragés d'aborder des conceptions visuellement plus complexes.

Les multicouches de contenu sont un moyen de remettre en question les éléments conventionnels auxquels nos yeux sont habitués - comme les galeries de photos et les éléments typographiques qui créent une expérience immersive pour raconter l'histoire du site Web. Les utilisateurs passent ainsi plus de temps à explorer un site Web.

Si l'on prend l'exemple de General Condition, le thème commun des photos, l'animation élégante et l'arrière-plan noir permettent de lier le tout et d'offrir une expérience visuellement cohérente.

Un autre avantage de cette technique est qu'elle permet de mettre plus facilement beaucoup de contenu dans une seule section ou dans un espace limité, comme sur les écrans mobiles.

General condition

Tendance 8 : mode sombre

Les sites Web en mode sombre sont de plus en plus populaires. Ils ne sont pas seulement agréables d'un point de vue esthétique, mais constituent également une excellente caractéristique mettant en valeur l'accessibilité des sites Web. Le contraste important entre les éléments et la plus grande lisibilité en sont des exemples. Il rend également le site Web plus facile à percevoir pour nous. Cela est dû à la réduction de l'exposition à la lumière bleue. En outre, elle permet d'économiser la batterie de la technologie utilisée, ce qui en fait une méthode de conception plus durable.

Exemples ci-dessous : Mocs Media, Apple AirdPods Pro

Mocs Media
Apple AirdPods Pro

Une chose est sûre : 2022 sera une année intéressante et encore plus créative pour le webdesign. L'équipe de conception de Radikal est très impatiente de commencer à jouer avec tous ces nouveaux éléments !

Sources : webflow

Par Janne Degryse & Diana Zamfirova

Prenez contact avec nous

Vous avez un projet en tête ? Racontez-nous tout