Tendances en matière de conception de sites web-2021

Tendances du webdesign en 2021 : effets 3D, scrollytelling & plus d'interaction

Après une année comme celle que nous venons de vivre, se risquer à anticiper les tendances à venir prend des allures presque utopiques. Car qui aurait pu imaginer en 2020 à quelle vitesse le monde peut et va changer ? Et à quelle vitesse nous pouvons nous adapter aux changements. Osons ensemble un aperçu des tendances du webdesign en 2021 !

La nouvelle normalité nous a tous bien en main : la technologie a pris de l'importance pour nous et est plus fermement intégrée dans notre quotidien. De ce fait, notre technologie doit (devait) prendre une direction qui permette davantage de personnalisation, d'intégration et d'interaction. Et ce, pour nous tous. 

Le lockdown, le home-office et autres ont attiré notre attention sur le numérique. Mais cette tendance a également entraîné une croissance rapide des produits numériques. Il en va de même pour l'e-commerce. Tout cela exige plus d'individualité et d'habileté pour pouvoir se positionner face à un plus grand nombre de concurrents.

Il est important de se concentrer sur les utilisateurs finaux. Il s'agit de les étonner, de les intégrer et de personnaliser l'Internet. Et toujours en mettant l'accent sur une fonctionnalité maximale.

Entre dimension et interaction

Pour la nouvelle année, nous voyons donc plus de possibilités de personnalisation. Nous voyons plus souvent la possibilité de passer du mode sombre/lumineux ou même d'adapter soi-même les couleurs d'un design.

Nous voyons des designs plus audacieux et moins symétriques. La contre-tendance à l'intégration de couleurs et d'éléments organiques demeure. Nous obtenons plus de personnalité grâce aux collages, aux médias mixtes et à l'intégration d'effets d'animation. Voyons maintenant en détail les tendances en matière de conception de sites web pour 2021 !

Animations parallaxes et de défilement parallaxes

Nous utilisons le parallax, surtout avec des images simples, depuis plusieurs années déjà. Récemment, nous avons ajouté des animations complexes de parallax scroll. Utilisées correctement, elles transforment ton site web d'un arrière-plan plat en 2D en un monde numérique interactif - comparable à une scène de théâtre.

Qu'est-ce que l'effet parallaxe ?

Les effets de parallaxe apparaissent lorsque des éléments se trouvent à des distances différentes les uns des autres. Si ceux-ci se déplacent par défilement, nous percevons leur mouvement comme étant plus ou moins rapide.

Attention, s'il te plaît : Pour les utilisateurs qui souffrent de vertiges, trop de mouvement sur ton site peut entraîner un malaise.

Quelques conseils pour réussir l'intégration de l'effet parallaxe :

  • Veille à ce que les informations importantes soient toujours présentées de manière claire et ne soient pas éclipsées par l'effet.
  • Veille à ce que toutes les fonctionnalités de ton site soient conservées sur tous les appareils - même dans des conditions non optimales, comme une mauvaise réception Internet.
  • Minimiser l'utilisation des effets de parallaxe.
  • Envisage d'intégrer une option pour désactiver l'effet.
Tendances en matière de conception de sites web-2021

Le site web du jeu Firewatch utilise dans l'en-tête huit images PNG différentes qui, animées ensemble, donnent la sensation d'un paysage réel. Dans la version mobile, l'effet parallaxe est en revanche remplacé par une image statique.

Animations de défilement

Les animations à défilement extensif ne sont pas non plus tout à fait nouvelles, mais elles ont été moins remarquées jusqu'à présent, probablement parce que leur composition requiert une certaine habileté en matière de dessin. Comme toujours, moins on en fait, mieux c'est. Bien utilisées, les animations de défilement confèrent à ton site web un flux harmonieux. 

Tendances en matière de conception de sites web-2021

ToyFight est une agence créative de Manchester. Grâce à l'utilisation habile d'animations déclenchées par le défilement, l'agence confère à son site web vivacité et personnalité. Même sur les petits appareils, les animations font leur effet - même si le temps de chargement en pâtit quelque peu.

Tendances en matière de conception de sites web-2021

L'entreprise Prevint propose un concept global de lutte contre les violences sexuelles. L'utilisation minimale d'animations de défilement permet de visualiser les trois principales précautions à prendre en matière de prévention. L'utilisation du scrolling vertical et horizontal est ici particulière : La navigation principale se trouve au niveau vertical, tandis que le défilement horizontal permet d'aller plus loin dans le thème concerné.

Les flèches de navigation en bas de l'écran servent d'orientation supplémentaire. Sur le site mobile, la navigation s'effectue uniquement en tapant sur les boutons.

Défilement horizontal

Même si, par le passé, les avis sur le défilement horizontal étaient très partagés, nous voyons de plus en plus souvent des sites Web l'utiliser. Jusqu'à présent, leur utilisation était plutôt douteuse, notamment du point de vue de l'expérience utilisateur.

Tendances en matière de conception de sites web-2021

Le site web de Home Société, conçu comme un one pager, fonctionne de manière entièrement horizontale. La sticky navigation, que nous trouvons habituellement en haut, se trouve sur le côté gauche. Elle fonctionne de la même manière avec des liens d'ancrage que dans un One Pager orienté verticalement. Sur le téléphone portable, la page s'affiche verticalement.

Tendances en matière de conception de sites web-2021

Le site web de Kwok Yin Mak est un portefeuille de designs qui défile horizontalement sur toutes les pages intégrées. La différence avec Home Société est ici l'utilisation de l'Infinite Scrolling: si l'on arrive à la fin d'une page, on est ramené au début sans s'en apercevoir. Ce site renonce également au défilement horizontal.

Quelques conseils pour réussir l'intégration du scrolling horizontal :

  • Donne à tes utilisateurs un plan B, comme par exemple des flèches ou un sticky menu, pour naviguer sur ta page.
  • Réfléchis aux contenus de ta page qui profitent du scrolling horizontal.
  • Essayez de vous concentrer le plus possible sur une seule direction. Le fait de changer trop souvent de direction perturbe tes utilisateurs.
  • Fais attention au mélange de textes longs et de défilement horizontal. Il se peut que tes textes soient moins lisibles avec cette mise en page.

Quelle police de caractères convient à mon site web ?

Une police de caractères appropriée rend ton site web beaucoup plus intéressant, et pas seulement visuellement. Les polices ont une influence décisive sur le fait que des sections de texte soient ignorées ou lues. Dans ce Contribution je te montre comment trouver la police de caractères parfaite pour ton site web !

Scrollytelling

Le scrollytelling désigne le storytelling visuel par le biais d'un défilement animé. Cela confère au site web une personnalité et un sentiment d'interactivité. Les contenus longs sont présentés de manière plus digeste. Les histoires sont construites de manière plus intéressante et communiquées de manière plus attrayante. Internet est de plus en plus utilisé comme média pour le storytelling interactif. 

Tendances en matière de conception de sites web-2021

The New York Times utilise ici une approche relativement minimaliste. L'image d'en-tête se compose d'un effet de parallaxe, suivi d'une grande quantité de texte. Celui-ci est emballé dans des paragraphes clairs et est soutenu visuellement par des sections en parallaxe dans le style BD.

Meilleures pratiques, conseils & lignes directrices en matière de webdesign

Qu'est-ce qu'un bon design web ? Et qu'est-ce que nous définissons comme standard de design ? Tu trouveras les conseils les plus importants pour des sites web réussis dans mon article sur les meilleures pratiques en matière de design web.
Tendances en matière de conception de sites web-2021

Webflow est également un exemple intéressant. Ce site invite à un voyage à travers l'histoire de l'art, à la recherche des tendances du webdesign de demain.

canals-amsterdam.nl combine le scrollytelling avec la navigation horizontale, l'animation et le parallaxe. Un détail particulier : le Sticky Menu change de couleur de fond en fonction de la couleur de la position actuelle. Tu trouveras plus d'informations sur le sujet dans le guide du scrollytelling.

Cartes à défilement

Par "scrolling cards", nous entendons un défilement vertical ou horizontal qui s'enclenche dans la fenêtre suivante avant que nous ne poursuivions la navigation. Tu peux mettre cela en évidence visuellement, par exemple en utilisant des séparations de couleur qui donnent davantage l'impression de cartes, comme dans l'exemple de Green Meadow.

Tendances en matière de conception de sites web-2021

D'autres particularités ici sont les animations de texte qui sont toujours rechargées, ainsi que l'Infinite Scrolling, qui nous donne l'impression d'un site web infini.

Intégration des caractéristiques physiques du produit à vendre

Tendances en matière de conception de sites web-2021

Ora London commercialise entre autres des vernis à ongles. Pour la mise en page de leur site web, ils utilisent la texture de leur produit.

Tendances en matière de conception de sites web-2021

Sur le site web de Main Squeeze Juice, on trouve des taches de couleur qui pourraient ressembler à une variante délavée de leurs jus de fruits. Cet effet est également utilisé pour certains titres.

Tendances en matière de conception de sites web-2021

Ora The Floral Agency a souligné visuellement son site web avec des fleurs de leur assortiment. 

Néomorphisme

Le neumorphism ou néomorphisme a été déclaré tendance depuis longtemps. Mais si les designs minimalistes ont été traités jusqu'à présent avec une certaine réticence sur la scène créative, c'est surtout pour ces deux raisons :

  1. Le neumorphisme est difficile à reproduire. S'il n'est pas créé correctement, le design paraît rapidement assez peu professionnel.
  2. En raison des ombres douces et du faible contraste, les éléments du design néomorphique peuvent poser des problèmes aux utilisateurs finaux. 

En 2021, la tendance Neumorphism devrait maintenant prendre un peu plus d'ampleur. Le template Nouvelle vision montre une intégration du Neumorphism facile à vivre au quotidien.

Tendances en matière de conception de sites web-2021

Tutoriel : Comment créer des éléments de neumorphisme

Avec l'outil Neumorphism.io, tu peux t'essayer au Neumorphism. Le code CSS correspondant est fourni directement avec l'outil. Tu trouveras plus d'informations sur le sujet dans cet article.

Compositions abstraites, collage & mixed media

Comme nous l'avons déjà mentionné, les sites web peuvent montrer plus de personnalité. Une manière d'y parvenir est d'utiliser des compositions abstraites ou des collages. Le mélange de différents médias - que ce soit des illustrations dessinées à la main associées à des formes géométriques parfaites - est également autorisé.

Tendances en matière de conception de sites web-2021

City Circus utilise des collages partout sur son propre site web.

Flou et effet de verre givré

L'effet de verre givré est idéal pour rendre le texte lisible sur les images. Il peut également être utilisé comme effet de survol. Tu trouveras ici des instructions sur la manière de mettre en œuvre l'effet de verre givré en CSS.

Tendances en matière de conception de sites web-2021
Source : Codepen.io

Organique et discret

Tendances en matière de conception de sites web-2021

Le site pureorganix.ca utilise plutôt peu de couleurs et des couleurs claires et naturelles. Les teintes organiques sont en vogue depuis un certain temps déjà et resteront à l'ordre du jour en 2021.

Noir Blanc

Tendances en matière de conception de sites web-2021
le site web : Base de données UX

L'absence totale de couleurs donne à ton site web un aspect minimaliste, ordonné et clair. UX Database a bien compensé la touche sérieuse apportée par l'absence de tons sympathiques par l'utilisation d'illustrations.

UX Design & ergonomie web

Pourquoi l'utilisabilité et l'expérience utilisateur devraient-elles t'intéresser particulièrement en tant que webdesigner ? Et comment obtenir une réelle valeur ajoutée pour tes utilisateurs grâce à une bonne UX ? C'est ce que je te dis et bien plus encore dans cet article.

Icônes et images

Comme pour la réalité virtuelle (VR), nous attendons depuis longtemps que les objets 3D fassent enfin leur grande percée. Comme au début de chaque année, on s'attend à ce que les éléments 3D et la RV jouent un rôle plus important à partir de maintenant. Il en va de même pour 2021.

Les éléments 3D seront de plus en plus utilisés en 2021 : par exemple pour remplacer les icônes et les illustrations 2D, pour présenter des produits et comme éléments de design géométriques.

Nous verrons également la 3D comme un élément interactif du site, à l'instar de l'agence Dogstudio.

Tendances en matière de conception de sites web-2021

Ou comme élément statique, ou plus précisément animé, comme le montre l'exemple suivant.

Tendances en matière de conception de sites web-2021
Site web : https://www.yaya.co/

E-commerce

La réalité augmentée a déjà été utilisée de manière isolée dans le passé à des fins de commerce électronique. 

Tendances en matière de conception de sites web-2021

Diesel, quant à lui, mise davantage sur la version 3D interactive.

Tendances en matière de conception de sites web-2021

Les deux approches ont un sens pour le produit en question. Pouvoir tester virtuellement des meubles dans son futur chez-soi ne réduit pas seulement les chances d'un mauvais achat. L'application est également amusante et incite à la décoration et à l'achat.

Diesel, quant à lui, tente de créer une sorte de sensation 3D en permettant aux utilisateurs finaux d'examiner et de sentir virtuellement le produit avant de l'acheter.

Dans le passé, l'intégration d'éléments de réalité augmentée/virtuelle et d'éléments 3D était souvent très coûteuse et donc réservée aux grandes entreprises. Grâce aux nouveaux outils, l'intégration de la réalité augmentée (AR) est désormais possible pour les petites entreprises.

En voici deux exemples :

Le web devient plus personnel, plus interactif et s'adapte à nous

Google propose un exemple d'interactivité avec son Blob Opera. Les créations personnelles peuvent en outre être enregistrées et donc partagées avec tous.

Tendances en matière de conception de sites web-2021

Sur la page de contact de Madwell, chaque élément graphique est interactif.

Tendances en matière de conception de sites web-2021

C'est avec beaucoup de personnalité que Sennep propose ses services.

Tendances en matière de conception de sites web-2021

Webdesign for Causes

De plus, 2020 vient de montrer que nous pouvons tous nous mettre en réseau et que nous devons même parfois le faire. Le web est devenu plus humain. Le Webdesign for Causes devient de plus en plus pertinent. Les sites éthiques, les sites verts, les sites pour s'engager pour nous et nos semblables (pour ne citer que quelques thèmes) ont pris beaucoup d'importance l'année dernière. Nous pouvons nous attendre à ce que cette tendance se poursuive fortement en 2021 au moins.

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Rester en contact avec des amis du monde entier, travailler à distance, commercialiser des produits et des services en ligne - ce ne sont pas des nouveautés. Et pourtant, jusqu'à présent, cela représentait plutôt une réalité pour une minorité de la population. 

Jusqu'à présent, de nombreuses entreprises et personnes ont abordé ce thème de manière plutôt traditionnelle dans notre pays : Nous avons certes les possibilités de présence sur le web et de mise en réseau, mais nous ne les utilisons qu'en second lieu. Le contact personnel était au premier plan. 

La fonctionnalité de nos produits en ligne est donc particulièrement importante - notamment parce que la concurrence est beaucoup plus grande. Et nous ne pouvons plus nous permettre à l'avenir de laisser de côté des thèmes comme l'accessibilité.

Bien sûr, un appel vidéo ne peut pas remplacer un rendez-vous personnel important. Mais peut-être que la situation actuelle nous apprend à distinguer ce qui est vraiment important et ce qui peut être fait par un appel téléphonique. Cette approche s'est souvent répercutée sur la qualité de la présence numérique. 

J'ai souvent entendu des phrases comme "Si quelqu'un veut savoir, il nous appellera ou nous demandera" lors de la planification de projets en ligne par le passé. Avec le nouvel accent mis sur l'isolement et le travail à domicile, nous n'avons plus ce luxe.

C'est pourquoi, en 2021, le design mobile, la performance, l'utilisabilité et autres resteront des facteurs importants lors de la création de ton site web.

Tendances en matière de conception de sites web-2021

Tes questions sur les tendances du webdesign en 2021

Pose-nous tes questions et fais-nous part de tes prévisions sur les tendances du webdesign en 2021 dans les commentaires ci-dessous - nous sommes impatients. Tu veux être informé des nouveaux articles sur WordPress ? Alors suis Raidboxes sur Twitter, Facebook et via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.