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 pensé en 2020 à quelle vitesse le monde peut et va changer ? Et à quelle vitesse nous pouvons nous adapter aux changements. Faisons ensemble un tour d'horizon des tendances du webdesign en 2021 !
La nouvelle normalité nous touche tous de près : la technologie a pris de l'importance pour nous et est plus intégrée dans notre quotidien. De ce fait, notre technologie doit aller dans une direction qui permet plus de personnalisation, d'intégration et d'interaction. Et ce, pour nous tous.
Lockdown, Homeoffice et autres ont mis l'accent sur le numérique. Mais cette tendance entraîne aussi 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.
En ce moment, 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 cette nouvelle année, nous voyons donc plus de possibilités de personnalisation. Nous voyons plus souvent la possibilité d'alterner entre le 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 design web 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 défilement Parallax. 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 ?
Fais 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 à intégrer l'effet parallaxe :
- Veille à ce que les informations importantes soient toujours présentées clairement et ne soient pas écrasées par l'effet.
- Veille à ce que toutes les fonctionnalités de ton site soient maintenues sur tous les appareils - même dans des conditions non optimales, comme une mauvaise réception Internet.
- Minimise 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 l'impression d'un paysage réel. En revanche, dans la version mobile, l'effet parallaxe est 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 exige des compétences en dessin. Comme toujours, le moins est le mieux. Bien utilisées, les animations de défilement donnent à ton site web un flux harmonieux.
ToyFight est une agence créative de Manchester. En utilisant habilement des animations déclenchées par le défilement, l'agence donne de la vivacité et de la personnalité à son site web. Même sur les petits appareils, les animations sont efficaces - même si le temps de chargement est un peu affecté.
L'entreprise Prevint propose un concept global contre la violence sexualisée. 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 défilement 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 sujet concerné.
Les flèches de navigation en bas de l'écran servent d'orientation supplémentaire. Sur le site mobile, la navigation se fait uniquement en tapant sur les boutons.
Défilement horizontal
Même si dans le passé, les avis sur le défilement horizontal étaient très partagés, nous voyons de plus en plus souvent des sites web qui l'utilisent. Jusqu'à présent, leur utilisation était plutôt douteuse, surtout du point de vue de l'expérience utilisateur.
Le site web de Home Société, construit comme un One Pager, fonctionne de manière complètement horizontale. La navigation par sticky, 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 pour un One Pager orienté verticalement. Sur le téléphone portable, la page s'affiche verticalement.
Le site de Kwok Yin Mak est un portfolio de design qui défile horizontalement à travers toutes les pages intégrées. La différence avec Home Société est ici l'utilisation de l'infinite scrolling: si tu arrives à la fin d'une page, tu seras ramené au début sans t'en rendre compte. Ce site renonce également au scrolling horizontal.
Quelques conseils pour réussir l'intégration du défilement horizontal :
- Donne à tes utilisateurs un plan B, comme des flèches ou un menu collant, pour naviguer sur ton site.
- Réfléchis aux contenus de ton site qui bénéficieraient d'un défilement horizontal.
- Essaie de t'en tenir le plus possible à une seule direction. Changer trop souvent de direction embrouille tes utilisateurs.
- Fais attention au mélange de textes longs et de défilement horizontal. Il se peut que tes textes deviennent moins lisibles avec cette mise en page.
Quelle est la police qui convient à mon site web ?
Scrollytelling
Le scrollytelling désigne le storytelling visuel par le biais d'un défilement animé. Cela donne de la personnalité au site 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 de beaucoup de texte. Celui-ci est emballé dans des paragraphes clairs et est soutenu visuellement par des sections parallaxes de style BD.
Meilleures pratiques, conseils & lignes directrices en matière de webdesign
Un exemple intéressant est en outre Webflow. Le site invite à un voyage à travers l'histoire de l'art à la recherche des tendances du webdesign du futur.
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 Scrollytelling.
Cartes à défilement
Par cartes de défilement, nous entendons un défilement vertical ou horizontal qui s'enclenche dans la fenêtre suivante avant de continuer à naviguer. Tu peux le mettre en évidence visuellement, par exemple en utilisant des séparations de couleur qui renforcent la sensation de carte, comme dans l'exemple de Green Meadow.
Les autres particularités ici sont les animations de texte qui se rechargent sans cesse, ainsi que l'Infinite Scrolling qui nous donne l'impression d'un site web infini.
Tendances du design web en 2021 : des mises en page passionnantes
Intégration des caractéristiques physiques du produit à vendre
Ora London commercialise entre autres du vernis à ongles. Pour la mise en page du design de leur site web, ils utilisent la texture de leur produit.
Sur le site web de Main Squeeze Juice, il y a 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 gamme.
Neomorphisme
Le neumorphism ou néomorphisme a été déclaré tendance depuis un certain temps déjà. Mais la raison pour laquelle les designs minimalistes ont été traités jusqu'à présent avec plutôt de l'aversion dans la scène créative est principalement due à ces deux raisons :
- Neumorphism est difficile à reproduire. S'il n'est pas généré 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 son envol. Le template Nouvelle vision montre une intégration de Neumorphism facile à vivre au quotidien.
Tutoriel : Comment créer des éléments de neumorphisme
Compositions abstraites, collage & mixed media
Comme mentionné précédemment, les sites web peuvent montrer plus de personnalité. Une façon d'y parvenir est de créer 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. Cet effet 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 webdesign 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 longtemps et resteront un thème 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 qui résulte de l'absence de tons de couleurs agréables par l'utilisation d'illustrations.
UX design & ergonomie web
Tendances 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 VR jouent un rôle plus important à partir de maintenant. On prévoit la même chose 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 les produits et comme éléments de design géométriques.
Nous verrons aussi la 3D comme un élément interactif du site, comme pour 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 d'e-commerce.
Diesel, quant à lui, mise davantage sur la version 3D interactive.
Les deux approches ont un sens pour le produit en question. Pouvoir tester virtuellement les meubles dans son futur chez-soi ne réduit pas seulement les chances d'un mauvais achat. L'application est également amusante et incite à décorer et à acheter.
Diesel, quant à lui, essaie 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.
Voici deux exemples :
Tendances du webdesign 2021 : Contenu
Le web devient plus personnel, plus interactif et s'adapte à nous
Google offre 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 offre ses services.
Webdesign for Causes
De plus, 2020 vient de montrer que nous pouvons tous nous connecter les uns aux autres 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 qui s'engagent pour nous et nos semblables (pour ne citer que quelques thèmes) ont pris de l'importance l'année dernière. Nous pouvons nous attendre à ce que cette tendance se poursuive fortement au moins en 2021.
"*" indique les champs requis
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é le sujet de manière plutôt traditionnelle : 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 bien 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 une rencontre personnelle importante. 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 dans le passé. Avec le nouvel accent mis sur l'isolement et le bureau à 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
Dis-nous tes questions et 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.
