Tendances webdesign 2022

Si on vous parle de néo-brutalisme, candy 3D, scrollytelling ça vous parle ? Non ? Alors il est grand temps de vous mettre à la page. Tour d’horizon de ce que vous allez sûrement voir défiler sur vos écrans cette année !

Scrollytelling

Les meilleures histoires sont les plus courtes. C’est aussi et surtout celles qu’on a plaisir à lire. Sur le net, on peut tout à fait raconter une histoire longue sans ennuyer le visiteur, notamment grâce à la méthode du Scrollyteling (entendez storytelling au scroll). Le Scrollytelling a pour objectif de transformer une histoire longue en une expérience interactive mémorable.

Ici, l’oeil est guidé par un déroulé d’éléments, textuels ou visuels, construits autour d’animations fluides et bien rythmées. La méthode du scroll se démocratisant toujours plus chez les utilisateurs, les concepteurs se permettent d’imaginer des récits qui se “déroulent” sans efforts (et donc sans clics) grâce à une architecture et des micro-animations astucieuses. Les sites faisant appel à cette méthode — si elle est bien utilisée — vous laisse une expérience mémorable, comme en témoigne ce tour de force de Ferrumpipe :

Ferrumpipe | Kalso | JUST Egg

Micro-interactions

Rendre un site vivant grâce aux micro-interactions devient peu à peu une norme, notamment dans les domaines créatifs. Pour faire jouer l’utilisateur et rendre la lecture plus dynamique et ludique, quoi de mieux que des interactions cachées dans les lettres ou dans le curseur ?

Par exemple, citons le cercle qui suit la souris avec un temps de décalage, les previews de visuels montrées au survol d’une police, ou encore des animations déclenchées par la proximité du curseur. À l’heure de la gamification des produits numériques, chaque petite interaction peut inciter le visiteur à s’amuser et donc à garder une image positive du produit. Un exemple réussie de curseur interactif par ici :

Plastic. | Philippe Neveu | Monopo

Retro vibes

C’est bien connu, la mode est un éternel recommencement. Certains diront que tous les 20 ans, on reprend les idées d’il y a… 20 ans. Comme nous sommes en 2022, on se donne le droit d’utiliser des éléments graphiques propres aux années 90, et ça marche. Madeleine de Proust pour la génération Y ou visuels vieillots pour d’autres, les couleurs flashy, symboles simples et références culturelles (coucou les Tamagoshis et Gameboys 👋) à cette décennie deviennent nombreuses.

Que ce soit dans la composition visuelle, dans les illustrations ou même dans la fabrication de composants avec lignes apparentes et ombres projetées solides, beaucoup d’amoureux du vintage se lâchent pour nous faire voyager dans le passé et amener un grain de folie. Le rebranding récent de Figma est une belle référence à ces années :

Figma | Craftwork | Budapest Park

Maxi typographie

Rassurez-vous, ce n’est pas un test de vue, mais bien du pur esthétisme. Certains concepteurs ont décidé de faire la part belle au texte ! Exit les belles et grandes images faites place aux textes surdimensionnés, pour mieux voir, mais surtout pour mieux rythmer.

La place conséquente (voire totale) prise par ces textes nous pousse à oublier le reste. Ici, on utilise rarement les images et on minimise la taille d’autres éléments textuels ou visuels pour que le visiteur lise — vraiment — le titre. Si l’exercice est bien fait, l’alliage d’espaces vides autour de cette typo géante et un alignement volontairement décalé du texte peut créer une véritable tension focalisant l’attention. Attention toutefois à ne pas brûler la rétine de vos utilisateurs !

Dragon Rouge | Pertinens | The Shift

Outlined fonts

Dans l’utilisation des polices, la hiérarchie est reine. Le problème ? Quand vous avez utilisé une graisse en bold pour votre titre et une regular pour vos corps de texte, il ne vous reste plus grand-chose. Ah, si ! En fait, vous pourrez toujours utiliser les contours de vos polices, ou des polices spécialement conçues pour cela appelées Outlined Fonts.

Ces exemples montrent que la variation entre lettres creuses et pleines met toujours l’accent sur les secondes, sans dénaturer les premières, une méthode habile pour contraster vos textes et concentrer l’attention.

Brand_ palette | Super super | Blue marine foundation

Néobrutalisme

Mouvement architectural des années 50 à 70 évoquant l’utilisation de formes massives en béton, ce style est parfois utilisé en webdesign pour trancher avec des styles épurés et minimalistes.

La composition brutaliste, bien que souvent peu lisible, casse les codes des espaces vides pour charger l’espace de caractères saillants, de blocs imposants et de lignes de démarcation des blocs apparentes. Les couleurs y sont peu présentes, les tons noirs et blancs prédominent. Enfin, les formes arrondies sont bannies et la grille semble avoir éclaté au profit de guides plus artistiques et moins conformistes. Un exemple probant avec le site de Daniel Flynn, et vous, vous aimez ?

Daniel Flynn | Layo | Citadium

Glassmorphism

Sans surprises, la tendance du glassmorphism s’installe dans la durée. Fraîche et laissant la part belle aux fonds d’écran, cette méthode consiste à appliquer un effet de verre poli sur des cartes ou des fenêtres modales via les outils de blur et d’opacité de blanc/noir. Tout est à utiliser avec modération, il faudra veiller à ne pas abuser de cet effet qui pourrait gêner la lisibilité globale, notamment quand les fonds d’écrans sont monochromes et ternes.

Tyler Galpin | Varun Kumar Microsoft Design

Candy 3D

Amateurs de Candy Crush, cette tendance est pour vous. Si vous aimez les couleurs acidulées et les reflets avec effets plastifiés. On penserait pouvoir toucher les produits, le réalisme est bien là, apportant du volume à des illustrations trop flat depuis trop longtemps. 

Peu d’artistes sont maîtres dans l’art du 3D Candy, mais les sites qui présentent ces objets semblant sortir tout droit d’une chambre d’enfant en mettent plein la vue. Allez, avouez que vous aimeriez vous promener dans les scènes de Peter Tarka !

Peter Tarka | Maze | Rastovicfilip

Split screen

Diviser pour mieux guider ! Pour casser la monotonie du sujet unique, certains sites prennent le pari de diviser verticalement leur trame. Comme un livre ouvert, vous pourrez trouver dans ce type de structures deux informations, celle de gauche, et celle de…droite.

En rééquilibrant le contenu sur des sections divisés en part égales, les concepteurs apportent une tension visuelle qui pourra ravir les uns comme gêner les autres. Seul reproche, la hiérarchie de l’information y est plus difficilement lisible que dans une structure dites “classique”.

Straight from yard | Stan YakusevichSvetlana Radenkovic

Complex gradients

Plus seulement relégués au rang d’arrière-plans, les dégradés de couleurs sont utilisés pour les textes, les illustrations, les icônes voire même les logos.
De plus en plus complexes —3 à 4 couleurs dans un même dégradé ils sont aussi combinés à d’autres techniques ! De nombreuses combinaisons voient le jour, avec notamment l’effet de grain qui apporte de la profondeur ou le glassmorphism pour les jeux de transparence, donnant ainsi naissance à des motifs audacieux et inhabituels. 

Kuro | Webflow |Swile

Articles similaires

Parlons de votre projet