Les 4 tendances majeures du Web Design en 2020
Une application web ou mobile est en perpétuelle évolution, c’est pourquoi elle se doit d’être revue et ajustée non seulement au vu des dernières technologies mais aussi de son design.
Chaque année offre son lot de nouveaux concepts, d’idées et de changements qui dessinent les tendances de demain. Voyons donc en 4 grandes lignes, ce que l’année 2020 nous a réservé !
1. LES COULEURS
Tout d’abord, parlons couleurs.
Pantone (roi dans le monde de la couleur), a sorti début 2020 LA couleur de l’année : Classic Blue. Le bleu est une couleur rassurante et donne un sentiment de protection. Celui-ci a la particularité d’être “brumeux” et donne un air de cocooning enveloppant.
Pantone publie aussi des couleurs complémentaires.
D’où viennent ces 3 couleurs ? Et bien elles font suite à la couleur 2019 publiée par Pantone : “Living Corail”, un corail très lumineux. Cette couleur ayant suscité de nombreuses réactions parodiques (dues au fait que les coraux sont en train de blanchir à cause du réchauffement climatique), Pantone a sorti cette palette « Glowing Glowing Gone » en partenariat avec Adobe et “The Ocean Agency” (dont je vous recommande le reportage “Chasing Coral” sur Netflix). Celle-ci est inspirée des couleurs créées justement par les coraux qui agissent en écrans solaires pour lutter contre ces vagues de chaleurs.
D’ailleurs en parlant couleurs qui nous entourent, si vous voulez “capter” celles autour de vous, Pantone a sorti un outil incroyable !
2. LA STRUCTURE DE LA PAGE
Via les couleurs, l’identité des applications va commencer à prendre forme. Maintenant on peut donc aborder la structure des pages afin de leur donner un style, une lisibilité ou un caractère différent, selon l’envie ou le besoin.
Espaces blancs
Les espaces blancs se retrouvent sur les sites web en 2020. Ce mouvement fait suite à la tendance du minimalisme toujours bien présente cette année.
Un style toujours plus épuré va permettre de mettre en évidence les messages ou bien les produits du site, l’œil de l’utilisateur se focalisant sur l’information qui est agrandie et centrée automatiquement.
Effet maquette
Que ce soit un tableau, un calendrier, tout ce qui est “classé”, “rangé” permet d’organiser nos idées. Pour le design d’un site web c’est la même chose. L’effet maquette va faire en sorte de placer le regard sur des éléments spécifiques.
Il existe différentes sortes de “classification de l’information” répandues sur les sites en 2020 mais quelles sont celles qui se démarquent le plus ? Voyons voir le top 3 !
Block layouts
Il s’agit ici du calque avec effet “Block”, c’est un classique. Son avantage réside dans l’affichage d’un niveau important d’informations, tout en hiérarchisant chaque partie pour une lisibilité optimale.
Il peut organiser et séparer les éléments afin de mieux pouvoir délimiter et analyser la page. On peut ainsi lire rapidement son contenu.
L’effet “Block” peut fonctionner aussi avec la symétrie, mais la tendance asymétrique est toujours bien implantée sur les sites. Plus encore aujourd’hui, car les écrans ont des tailles de plus en plus diverses et larges.
Asymétrie
Au cours des dernières années, l’utilisation de l’asymétrie s’est développée exponentiellement, en opposition aux “templates” classiques qui sont moins employés aujourd’hui et tendent à se raréfier.
2020 va continuer sur cette lancée. Les multiplications de calques asymétriques apportent ainsi du caractère, du dynamisme et de la personnalité à un design.
Superposition d’éléments
Ici, il s’agit de placer des images les unes sur les autres. La superposition d’images (mais aussi de vidéos) permet de donner de la profondeur aux designs. Une image fixe (immobile au scroll) en premier plan va permettre au scroll de donner de la profondeur à un design ; ceci est appelé effet “parallaxe”. Cette tendance n’est pas incompatible avec le style épuré car il est possible d’y placer des espaces neutres.
Oversize — Design XXL
La difficulté des sites aujourd’hui (avec le nombre incalculable de sites existants) est de se faire comprendre en un instant par leurs utilisateurs. Pour cela, les sites vont privilégier les éléments de grande taille, que ce soit au niveau des typographies, des images, ou même des icônes et menus.
Un design XXL va attirer le regard instantanément et permettre de transmettre rapidement une information. Il conviendra de limiter la quantité des éléments à l’écran pour ne pas submerger l’utilisateur d’informations.
Les typographies notamment, se font de plus en plus grandes et grasses, pouvant même aller jusqu’à occuper 100% de l’espace.
3. L‘ ANIMATION ET L’INTERACTIVITE
Ce phénomène n’est pas nouveau mais il perdure plus que jamais en 2020. L’animation est un moyen extrêmement efficace pour séduire tous types de publics. Elle est de plus en plus utilisée en raison de la réduction du poids des fichiers vidéo, qui tend à se réduire, car elle engendre des problèmes de lenteur et est donc sévèrement sanctionnée au niveau du référencement. Cet allègement des fichiers rend l’animation plus accessible…
Nous allons aborder différents moyens d’amener du mouvement sur un site pour le rendre plus “attractif”.
Micro-interactions
Elles sont partout ! Nous les voyons sans arrêt, si bien que nous n’y faisons même plus attention parfois. Facebook en possède énormément, son “like” en est une notamment. Elles deviennent naturelles et s’intègrent parfaitement à nos interfaces.
On peut dire qu’une animation simple et subtile, même sur un composant secondaire, peut avoir un grand effet. Il est indéniable aujourd’hui que les micro-interactions peuvent augmenter l’attractivité de l’expérience utilisateur. Tous les ans, des efforts pour en trouver de nouvelles, de meilleures, sont faits. 2020 ne sera pas donc une exception à ce sujet.
Les micro-interactions procurent une sensation de légèreté, de facilité au cours de l’utilisation d’une application. Mais elles peuvent aussi aider à la navigation ou même créer une émotion.
Graphisme animé en 3D
Dans le monde du web design et au-delà, la 3D va s’imposer globalement grâce à de nombreux outils et technologies qui sont élaborés en ce sens. Il est donc désormais plus simple de créer des modèles en 3D, pour des usages divers et variés.
On la retrouve sur des sites internet avec des éléments interactifs qui vont permettre à l’internaute d’agir en modifiant lui-même des éléments, sur un visuel plus que réaliste, présent depuis de nombreuses années dans l’industrie textile et désormais étendue à tous les domaines.
Réalité Virtuelle (VR) & Réalité Augmentée (RA)
Les designers font face à de nouveaux défis en 2020, il est vrai que la tendances tri-dimensionnelles les soumets à de nombreux efforts ! En effet il doivent redoubler de talents pour pouvoir repenser leurs interactions, mais aussi adapter leur matériel à la puissance nécessaire requise ces nouvelles technologies. Bien que difficile d’accès pour le moment, on peut dire que les VR et RA n’en sont encore qu’à leur balbutiement, il n’ y a qu’à voir l’application “Pokemon Go” et son franc succès.
VR : en 2019 déjà, la réalité virtuelle était bien implantée. De grands progrès ont été fait en quelques années seulement ; la plupart dans l’industrie du jeu vidéo, ce domaine étant souvent leader dans le monde des produits digitaux. Mais le secteur vidéoludique est loin d’être le seul !
En effet, la VR est désormais présente dans beaucoup de domaines. Elle se révèle pleinement dans les secteurs d’activités qui l’exploitent dans un but industriel, militaire, de santé, d’éducation… La santé notamment avec un “flight simulator” pour permettre à de jeunes étudiants en chirurgie de s’entraîner. Ou encore le domaine du bâtiment, le tourisme et la culture (visites virtuelles)…
RA : la réalité augmentée quant à elle, a aussi bien évolué ces dernières années. Elle a suscité beaucoup d’engouement, d’excitation et d’améliorations. Les plus grandes entreprises de la tech ont ainsi investi des millions dans la réalité augmentée en 2020. Apple a introduit son propre outil pour en faire : ARKIT 3 pour aider les designers et développeurs à construire leur propre RA. Et si vous voulez en voir encore plus, vous pouvez télécharger cette application (gratuite) de réalité augmentée pour vous croire dans Jurassic Park à la maison. De nouvelles intéractions sont desormais possibles grâce à la conception en 3D de la réalité augmentée, c est donc un nouveau challenge pour tous les designers (entre autres).
4. LA PERSONNALISATION DES INTERFACES
Dark mode ou design sombre
Cette “dark” tendance n’a rien de négatif, pas d’inquiétude. Le design sombre est le fait de changer son application en couleur foncée. Elle permet une utilisation plus douce les yeux, moins agressive, notamment la nuit ou dans toute pièce sombre. C’est une tendance moderne qui vient du web et qui est désormais commune sur mobile. Aussi, on peut noter qu’elle met davantage en valeur les éléments colorés et améliore l’ergonomie visuelle.
Ce courant est également pratique car il est adapté aux écrans OLED, plus brillants et il est moins consommateur d’énergie que les écrans LCD.
Storytelling
C’est un outil commercial qui est présent sur les sites (en écran d’accueil le plus souvent) car c’est un moyen de promotion redoutable.
Le storytelling est le fait de se mettre dans la peau d’un utilisateur, le représenter (physiquement ou graphiquement) et raconter une histoire autour du produit et de son utilisation. Cela aide à créer une relation entre la marque et ses utilisateurs. Il permet de se visualiser plus facilement déjà en possession du produit, une technique de communication particulièrement efficace qui continue à se développer en 2020. Le storytelling est présent sur la plupart des sites “marchands”, vous l’aurez deviné.
Varying UX
A chacun son caractère, et à présent, à chacun son comportement en ligne !
Depuis longtemps, pour élaborer la navigation des applications, on utilise un temps moyen, sur un utilisateur moyen, et cela permet de calculer un temps de lecture ou de scroll (entres autres) commun.
Mais nous sommes désormais capables selon l’utilisateur, d’adapter l’expérience pour que son application réponde au mieux à ce qu’il en fait.
Selon le temps passé sur un écran ou en vitesse de scroll d’un individu, un site web peut se comporter différemment. Le site d’Apple montre l’iPhone 11 pro avec une vitesse de défilement basée sur nos différentes manières de scroller.
Les 4 grandes tendances du Web Design en 2020 sont marquées par l’évolution de nos technologies et de concepts qui se sont démocratisés progressivement au fil des années. En résumé, il est essentiel de :
- Choisir judicieusement sa colorimétrie en fonction de sa marque mais aussi, des messages à faire passer, s’avère primordial
- Opter pour une mise en page minimaliste et/ou déstructurée selon l’effet escompté, du volume d’informations, des cibles visées et du ton global donné à la plateforme
- Agrémenter l’ensemble de micro-interactions et de touches d’animations, pour dynamiser l’application et faciliter son utilisation
- Adapter la navigation au profil de l’utilisateur, pour personnaliser son expérience et qu’il puisse disposer de sa propre application, différente de celle de son voisin mais surtout qui lui convienne à 100%.
Outre les tendances liées à la 3D, la Réalité Virtuelle et la Réalité Augmentée qui continuent de s’affirmer dans le paysage numérique, on peut imaginer qu’un côté plus “humanisé” va ressortir en 2021 via les illustrations, des typographies plus “manuscrites” et des designs plus “imparfaits”. La suite au prochain épisode !
