Après une année comme celle que nous venons de vivre, il est presque utopique d'oser jeter un œil sur sur les tendances à venir. Après tout, qui aurait pensé en 2020 à quelle vitesse le monde pouvait et allait changer ? Et à quelle vitesse nous pouvions nous adapter aux changements ? Examinons ensemble les tendances du graphisme en 2021 !
La nouvelle normalité nous tient tou·te·s fermement en main : la technologie nous est devenue plus importante et s'est intégrée plus profondément dans notre vie quotidienne. Par conséquent, notre technologie doit évoluer dans une direction qui permette davantage de personnalisation, d'intégration et d'interaction, pour nous tou·te·s.
Le confinement et le télétravail, entre autres, ont fait que nous nous sommes davantage tourné·e·s vers le numérique. Toutefois, cette tendance a également entraîné (et entraîne encore) un développement rapide des produits numériques. Il en va de même pour le secteur de l'e-commerce. Tout cela exige plus d'individualité et de compétences pour pouvoir se positionner face à un plus grand nombre de concurrent·e·s.
Pour l'instant, il est important de se concentrer sur les utilisateur·rice·s finaux·ales. Il s'agit de les étonner, de les intégrer et de personnaliser la toile, tout en se concentrant toujours sur une fonctionnalité maximale.
Tendances du webdesign en 2021 : entre dimension et interaction
Ainsi, en cette nouvelle année, nous observons davantage de possibilités de personnalisation. On voit plus souvent la possibilité de passer du mode sombre au mode clair ou même de personnaliser les couleurs d'un design lui-même.
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 !
1. Le scrolling
Parallaxe & animations en défilement parallaxe
La parallaxe, surtout pour les images simples, est une technique que nous utilisons depuis plusieurs années. Récemment, nous avons ajouté des animations complexes en défilement de parallaxe. Utilisées correctement, elles transforment ton site web d'un fond plat de type 2D en un monde numérique interactif, comparable à une scène de théâtre.
Qu'est-ce que l'effet parallaxe ?
Les effets parallaxe se produisent lorsque les éléments sont situés à des distances différentes les uns des autres. Si ceux-ci se déplacent en défilant, nous percevons leur mouvement à des vitesses différentes.
À noter : pour les utilisateur·rice·s qui souffrent de vertiges, trop de mouvement sur ton site web peut provoquer 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 clairement et ne soient pas éclipsé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 sous-optimales telles qu'une mauvaise connexion Internet.
- Minimise l'utilisation des effets de parallaxe.
- Envisage d'inclure une option permettant de désactiver l'effet.
Le site web du jeu Firewatch utilise huit images PNG différentes dans l'en-tête qui sont animées ensemble pour donner l'impression d'un vrai paysage. Dans la version mobile, cependant, l'effet parallaxe est remplacé par une image statique.
Animations en défilement
Les animations défilantes étendues ne sont pas non plus une nouveauté, mais elles ont jusqu'à présent reçu moins d'attention, probablement parce que leur composition exige des compétences en dessin. Comme toujours, moins c'est plus. Bien utilisées, les animations défilantes donnent à ton site web un flux harmonieux.
ToyFight est une agence de création basée à Manchester. Grâce à l'utilisation intelligente d'animations en défilement, l'agence ajoute de la vitalité et de la personnalité à son site web. Même sur des appareils plus petits, les animations fonctionnent, même si le temps de chargement est quelque peu affecté.
La société Prevint propose un concept global contre la violence sexualisée. Grâce à l'utilisation minimale d'animations défilantes, les trois mesures de prévention les plus importantes sont visualisées. L'utilisation du défilement vertical et horizontal est singulière : la navigation principale se fait sur un niveau vertical, tandis que le défilement horizontal permet d'approfondir le sujet respectif.
Les flèches de navigation au bas de l'écran fournissent une orientation supplémentaire. Côté téléphone portable, la navigation se fait en appuyant uniquement sur des boutons.
Défilement horizontal
Même si les opinions sur le défilement horizontal ont énormément varié dans le passé, nous voyons des sites web l'utiliser de plus en plus souvent. Leur utilisation était auparavant considérée comme plutôt douteuse, surtout du point de vue de l'expérience utilisateur.
Le site web de Home Société, construit comme un site "One Pager" à une seule page, fonctionne de manière totalement horizontale. La barre de navigation collante, que l'on trouve généralement en haut, se trouve ici sur le côté gauche. Elle fonctionne de la même manière avec les ancres de lien que dans un One Pager orienté verticalement. Sur téléphone portable, on obtient la page affichée verticalement.
Le site web 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 l'utilisation du défilement infini : si tu arrives à la fin d'une page, tu es ramené·e au début de façon inaperçue. Cette page se passe elle aussi de défilement horizontal dans la version mobile.
Quelques conseils pour réussir l'intégration du défilement horizontal :
- Propose un plan B à tes utilisateur·rice·s, tel que des flèches ou un menu collant, pour naviguer sur ton site.
- Réfléchis au contenu de ta page qui bénéficiera du défilement horizontal.
- Essaie de t'en tenir à une seule direction autant que possible. Passer d'une direction à l'autre trop souvent sème la confusion chez tes utilisateur·rice·s.
- Fais attention au mélange de textes longs et de défilement horizontal. Cette mise en page peut rendre tes textes moins lisibles.
Quelle est la police qui convient à mon site web ?
Une police de caractères adaptée rend ton site web non seulement visuellement beaucoup plus intéressant, mais influence de façon décisive le fait que des parties de texte soient ignorées ou lues. Dans cet article, je te montre comment trouver la police parfaite pour ton site web !
Le scrollytelling
Le scrollytelling est une accroche narrative visuelle par le biais d'un défilement animé. Cela donne au site web une personnalité et un sens de l'interactivité. Le contenu long est présenté de manière à être facilement digérable. Les histoires sont construites de manière plus intéressante et communiquées de façon plus attrayante. Internet est de plus en plus utilisé comme un moyen de raconter des histoires de manière interactive.
Le New York Times utilise ici une approche relativement minimaliste. L'image d'en-tête consiste en un effet de parallaxe suivi de beaucoup de texte. Il est présenté sous forme de paragraphes clairs et est soutenu visuellement par des sections de parallaxe en style de bande dessinée.
Meilleures pratiques, conseils & lignes directrices en matière de webdesign
Qu'est-ce qui fait un bon webdesign ? 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 graphisme.
Un exemple intéressant est également Webflow. Le site t'invite à un voyage à travers l'histoire de l'art à la recherche des tendances du graphisme de demain.
L'effet ne perd pas non plus de son attrait dans la version mobile.
canals-amsterdam.nl combine le scrollytelling avec la navigation horizontale, l'animation et la parallaxe. Un détail particulier est que le menu collant change de couleur de fond en fonction de la couleur de la position actuelle. Tu trouveras de plus amples informations à ce sujet dans le guide de scrollytelling.
Cartes défilantes
Par cartes défilantes, nous entendons le défilement vertical ou horizontal qui s'enclenche dans la fenêtre suivante avant que nous ne poursuivions notre navigation. Tu peux le souligner visuellement en utilisant par exemple des séparations colorées qui donnent l'impression de cartes, comme dans l'exemple de Green Meadow.
Les autres particularités sont les animations de texte qui se chargent à nouveau sans cesse ainsi que le défilement infini qui nous donne l'impression d'un site web sans fin.
2. Les compositions et la mise en page du design
Intégration des caractéristiques physiques du produit à vendre
Ora London vend entre autres du vernis à ongles. Pour la mise en page de leur site web, iels 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 version délavée de leurs jus de fruits. Cet effet est également utilisé pour certains en-têtes.
Ora The Floral Agency a mis en valeur son site web visuellement avec des fleurs de sa gamme.
Néomorphisme
Le néomorphisme ou neumorphisme est perçu comme une tendance depuis un certain temps. Toutefois, si les designs minimalistes ont été traités avec aversion dans le milieu de la création, c'est principalement pour les deux raisons suivantes :
- Le néomorphisme est difficile à reproduire. S'il n'est pas créé correctement, le design a rapidement l'air peu professionnel.
- En raison de la douceur des ombres et du faible contraste, les éléments du néomorphisme peuvent poser problème à l'utilisateur·rice final·e.
En 2021, la tendance du néomorphisme devrait prendre un peu plus d'ampleur. Le modèle Neu Vision montre une intégration du néomorphisme facile à utiliser au quotidien.
Tutoriel : voici comment créer des éléments de néomorphisme
Avec l'outil Neumorphism.io, tu peux t'essayer au néomorphisme. Le code CSS correspondant est inclus dans le forfait. Tu trouveras plus d'informations à ce sujet dans cet article.
Compositions abstraites, collage & médias mixtes
Comme mentionné précédemment, les sites web peuvent désormais montrer plus de personnalité. L'une des façons d'y parvenir est de recourir à des compositions abstraites ou à des collages. Le mélange de différents supports - qu'il s'agisse d'illustrations dessinées à la main associées à des formes géométriques parfaites - est également autorisé.
City Circus utilise des collages sur tout son site web.
Effet de flou et de verre dépoli
L'effet de verre dépoli est idéal pour rendre le texte des images lisible. Il peut également être utilisé comme effet de rollover. Tu trouveras un tutoriel sur la façon d'implémenter l'effet Frosted Glass dans CSS ici.
3. Les couleurs
Naturelles et discrètes
Le site web pureorganix.ca a tendance à utiliser peu de couleurs, et celles-ci sont naturelles et claires. Les teintes organiques existent depuis un certain temps et resteront un thème en 2021.
Noir et blanc
L'absence totale de couleurs donne à ton site web un aspect minimaliste, épuré et propre. La touche de sérieux créée par l'omission des teintes amicales a été bien équilibrée par l'utilisation d'illustrations de la base de données UX.
Design de l'expérience utilisateur et facilité d'utilisation du Web
Pourquoi devrais-tu, en tant que webdesigner·euse, t'intéresser à la facilité d'utilisation et à l'expérience utilisateur ? Comment obtenir une réelle valeur ajoutée pour tes utilisateur·rice·s grâce à une bonne expérience utilisateur ? Je t'en dis plus dans cet article.
4. 3D
Icônes et images
Comme pour la réalité virtuelle (RV), nous attendons depuis un certain temps déjà que les objets 3D fassent enfin leur grande percée. Comme au début de chaque année, on espère que les éléments 3D et la RV joueront à partir de là un rôle plus important. Cela ne changera pas en 2021.
Les éléments 3D seront de plus en plus utilisés en 2021 : ils remplaceront par exemple des icônes et des illustrations 2D, seront utilisés pour représenter les produits ainsi que comme éléments de design géométrique.
Nous verrons également la 3D comme une partie interactive du site web, comme c'est déjà le cas sur le site de l'agence Dogstudio...
... ou comme élément statique ou animé, comme le montre l'exemple suivant.
E-commerce.
La réalité augmentée a déjà été utilisée sporadiquement pour l'e-commerce dans le passé, comme sur l'application IKEA.
Diesel, en revanche, s'appuie davantage sur la variante interactive de la 3D.
Les deux approches sont judicieuses pour le produit respectif. Pouvoir tester virtuellement des meubles dans ta future maison ne réduit pas seulement les chances de faire un mauvais achat, l'application est également amusante et incite à la décoration et à l'achat.
Diesel, à l'inverse, tente de créer une sorte de sensation 3D en permettant aux utilisateur·rice·s finaux·ales 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 à ces nouveaux outils, l'intégration de la réalité augmentée (RA) est désormais possible pour les petites entreprises.
Voici deux exemples :
5. 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 également être enregistrées et donc partagées avec tout le monde.
Sur la page de contact de Madwell, chaque élément graphique est interactif.
Sennep propose ses services avec beaucoup de personnalité.
Webdesign pour de grandes causes
De plus, 2020 vient de montrer que nous pouvons tou·te·s nous mettre en réseau et que nous devons même le faire, en partie. La toile est devenue plus humaine. La conception de sites web pour des causes devient de plus en plus pertinente. Les sites web éthiques, les sites web écologiques, les sites web qui défendent nos intérêts et ceux de nos semblables (pour ne citer que quelques sujets) ont pris beaucoup d'importance l'année dernière. Nous pouvons nous attendre à ce que cette tendance persiste et se renforce, au moins encore en 2021.
Conclusion
Rester en contact avec des ami·e·s dans le monde entier, travailler à distance, commercialiser des produits et des services en ligne - tout cela n'a rien de nouveau. Et pourtant, jusqu'à présent, ce fut plutôt une réalité pour une minorité de la population.
De nombreuses entreprises et personnes ici abordaient jusqu'à présent le sujet de manière plutôt traditionnelle : nous avons les possibilités d'établir une présence sur le web et de nous mettre en réseau, mais nous n'y recourons que de manière secondaire. Le contact personnel était au premier plan.
C'est pourquoi la fonctionnalité de nos produits en ligne est particulièrement importante, aussi parce que la concurrence est beaucoup plus grande. À l'avenir, nous ne pouvons plus nous permettre d'ignorer des sujets tels que l'accessibilité.
Bien entendu, un appel vidéo ne peut pas remplacer une réunion importante en face à face. Cependant, peut-être apprendrons-nous à travers la situation actuelle à distinguer les réunions vraiment importantes de ce qui peut éventuellement être réglé par un coup de téléphone. Cette approche se reflète souvent dans la qualité de la présence numérique.
J'ai souvent entendu dans le passé des phrases comme "Si quelqu'un veut savoir, il nous appellera ou nous demandera" lors de la planification de projets en ligne. Avec l'accent mis sur l'isolement et le télétravail, nous n'avons plus ce luxe.
C'est pourquoi le design, les performances et la facilité d'utilisation, entre autres, de la version mobile restent des facteurs importants dans la création de ton site web en 2021.
En chargeant le tweet, vous acceptez la politique de confidentialité de Twitter.
En savoir plus
Commentaires sur cet article