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 !
Tendances du webdesign en 2021 : le défilement
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 ?
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.
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.
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.
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.
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.
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 ?
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.
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
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.
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.
Tendances du webdesign en 2021 : des mises en page captivantes
Intégration des caractéristiques physiques du produit à vendre
Ora London commercialise entre autres des vernis à ongles. Pour la mise en page de leur site web, ils utilisent la texture de leur produit.
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.
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 :
- Le neumorphisme est difficile à reproduire. S'il n'est pas créé correctement, le design paraît rapidement assez peu professionnel.
- 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.
Tutoriel : Comment créer des éléments de neumorphisme
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é.
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 du webdesign en 2021 : les couleurs
Organique et discret
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
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
Tendances du webdesign 2021 : effets 3D
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.
Ou comme élément statique, ou plus précisément animé, comme le montre l'exemple suivant.
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.
Diesel, quant à lui, mise davantage sur la version 3D interactive.
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 :
Tendances du webdesign en 2021 : le contenu
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.
Sur la page de contact de Madwell, chaque élément graphique est interactif.
C'est avec beaucoup de personnalité que Sennep propose ses services.
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.
Conclusion sur les tendances du webdesign en 2021
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.
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.
