Publié par Alexandra
5 Mins

Les 10 tendances du design web à surveiller en 2020

2020 est déjà à nos portes! Et avec la nouvelle année, de nouvelles tendances numériques font leur entrée. Bien que 2020 misera beaucoup sur le minimalisme, certaines tendances de l’an dernier sont encore très présentes. Le concept de «split-screen» est toujours présent, les menus cachés sont de plus en plus utilisés et l’asymétrie est encore à l’honneur. Pour en savoir plus sur ces tendances, je vous invite à consulter notre article de l’an dernier sur les tendances du design web de 2019.

Mais à quoi pouvez-vous vous attendre au cours de la prochaine année?

01Les couleurs atténuées prennent le relais sur les couleurs vives

Au cours des dernières années, nous avons assisté à la montée en puissance des couleurs vives, les marques ayant pour objectif de se différencier de leurs concurrents. Mais en 2020, nous allons observer un recul par rapport à ces couleurs vives et adopter des palettes de couleurs plus douces.

Les couleurs atténuées ont été légèrement désaturées avec du noir, du blanc ou une couleur complémentaire. Elles sont fondamentalement à l’opposé des couleurs vives. Ne vous inquiétez pas, le monde du design ne sera pas moins coloré cette année. Les couleurs seront simplement moins abrasives.

Comme vous pouvez le voir ci-dessous, l’agence Norvégienne Gyro utilise différentes variations de couleurs atténuées en rotation aléatoire sur leur page d’accueil:

Le site The Collective utilise également les couleurs atténuées dans une composition asymétrique aux accents géométriques:

Les tendances font souvent leur apparition quand les géants de l’industrie en font usage. Il est donc intéressant de noter que même Apple a amorcé un changement dans la palette de couleur de ses produits. Vous l’aurez deviné, les couleurs atténuées sont mises de l’avant:

Par conséquent, si vous souhaitez mettre à jour le design de votre site à la saveur 2020, nous vous recommandons de commencer par une palette de couleurs plus subtile, voir un peu rétro. Utilisez simplement les couleurs de votre marque comme point de départ afin de créer une palette de couleurs secondaires complète en ajoutant du noir ou du blanc.

02Textes et images masqués

Le masquage d’images et de texte n’est pas une technique nouvelle dans le monde du design, mais il a toujours l’air assez moderne en 2020. Comme il laisse une grande partie de l’image cachée, il permet d’obtenir un aspect mystérieux et minimaliste. En 2020, les concepteurs continueront à créer des compositions avec masquage d’images et de texte, s’appuyant bien entendu sur la maxi typographie pour obtenir cette dernière.

L’agence Australienne Another Colour utilise le masque de manière simple mais efficace au défilement de la page, en plus de mettre de l’avant une grande variété de couleurs en dégradés:

Vous pourrez observer dans le second exemple une utilisation plus originale conçue par l’agence Suisse Castor & Pollux. Le masque en forme de cercle attirera l’attention de l’utilisateur en permettant un aperçu de l’image de fond au déplacement du curseur, en plus de l’inciter à faire défiler la page à l’aide d’une flèche positionnée au centre du cercle:

03Nouvelle vague de dégradés

Au cours des dernières années, les dégradés se sont développés plus activement. Certaines années, les couleurs solides semblent prendre le dessus, mais les dégradés restent tout de même toujours omniprésents.

Cette année, les dégradés traversent une phase expérimentale. Par conséquent, nous pouvons maintenant voir de nombreuses manières de les utiliser. Il peut s’agir d’une simple transition fixe entre deux couleurs ou d’une transition animée en douceur d’une couleur à l’autre.

Le site Digital Design Days est un bon exemple de l’utilisation du dégradés en combinaison avec des couleurs atténuées et une typographie surdimensionnée:

La compagnie Rload se distingue également avec L’utilisation du dégradé de rose à mauve comme seul accent de couleur:

gradient

04L’utilisation du 3D

L’importance des graphiques 3D a déjà été reconnue dans l’industrie du jeu et du cinéma, et le design web ne fera pas exception! L’utilisation de la conception 3D est plus attrayante et renforcera l’intérêt pour votre marque.

Ce qui a freiné cette tendance, c’est la technologie et le prix (auparavant) élevé. La technologie permet maintenant de concevoir en 3D sans équipement de haut niveau, ouvrant ainsi les portes à de plus en plus de concepteurs.

Le site Fishing the Feed utilise des Illustrations 3D à la saveur géométrique afin de fournir une expérience immersive à ses utilisateurs:

La compagnie I-Jump fait également bon usage des objets 3D animés, en plus d’utiliser une palette dégradées de couleurs atténuées:

De son côté, la compagnie Binary Blocks s’est également lancée dans l’animation d’illustrations personnalisées en 3D à différents endroits dans leur site web:

Jusqu’à ce que la réalité virtuelle devienne plus abordable, la 3D hyper réaliste constitue le meilleur moyen de créer une expérience immersive sur votre site. Ce n’est pas seulement un avantage au niveau visuel, mais également pour l’expérience utilisateur: la conception 3D interactive encourage les utilisateurs à rester plus longtemps.

05Minimalisme

La plupart des autres tendances de cet article sont des suites logiques aux tendances qui étaient populaires par le passé. Par exemple, les couleurs atténuées prennent la place des couleurs vives et les illustrations abstraites remplacent les icônes réalistes.

Cependant, le virage qui s’amorce vers le design minimaliste a certainement été motivé par la nécessité d’obtenir de meilleurs temps de chargement. La meilleure façon d’y arriver? Réduire le poids des pages. Il n’est donc pas surprenant d’observer une simplification significative dans les conceptions de sites web cette année.

Si vous ne le saviez pas, Google récompense les pages à chargement rapide avec de meilleurs emplacements dans les classements de recherche. Cela est d’une importance primordiale pour beaucoup d’entreprises axées sur le référencement.

L’agence Italienne Andstudio a conçu une page d’accueil très minimaliste et monochrome avec pour seul accent une typographie surdimensionnée qui attire le regard au premier coup d’oeil:

minimalism

Jakub Cech utilise une stratégie similaire, en plus d’inclure une couleur atténuée dans leur conception:

minimalism

Un fond de couleur uni et une conception modulaire faciliteront l’adaptation de ces pages d’accueil aux différents formats de plateformes des utilisateurs. Parfois, quand une entreprise utilise une photo, une vidéo ou une illustration de grande taille, l’adaptation aux formats d’écrans mobile ne se fait pas aussi facilement qu’elle le devrait.

C’est un autre aspect positif de ces pages minimalistes: leur navigation est beaucoup plus simple. Au lieu d’éléments distrayants, les messages ou les informations ressortent instantanément.
Ceci étant dit, il n’est pas interdit d’utiliser des images dans vos conceptions. Assurez-vous seulement que le reste de la page est facilement navigable et que vos images sont optimisées. Une image ne vaut pas toujours mille mots, surtout si celle-ci ralentit le chargement de votre site.

06Typographie surdimensionnée et audacieuse

Les stratégies et les techniques de la conception web ont considérablement évolué au fil des ans. Certaines tendances qui étaient populaires il y a seulement un an ne le sont plus. Les compagnies s’efforcent de créer et de mettre en œuvre des conceptions innovatrices et uniques pour leurs sites web afin de se démarquer des nombreux concurrents et de répondre aux attentes des utilisateurs.

La typographie en tant que visuel n’est pas entièrement une nouvelle tendance. Cependant, alors qu’avant 2020, les polices typographiques utilisées étaient plutôt traditionnelles, la nouvelle génération de polices est sur le point d’être plus audacieuse.

La site de la compagnie Binary Blocks est un bon exemple d’une combinaison réussie entre le minimalisme et la typographie surdimentionnée et audacieuse afin d’attirer l’attention de l’utilisateur sans surcharger la page:

typography

Pioneer Square Labs et Spatzek Studio ont quand a eux opté pour des polices plus traditionnelles, mais avec beaucoup d’impact:

typography

typography

Étant un site promotionnel temporaire, les concepteurs du site du film Knives Out ont pu se permettre l’usage d’une police plus audacieuse:

typography

Le lettrage surdimensionné gagne en popularité, les compagnies s’efforçant de simplifier au maximum la conception de leurs sites web. Une typographie hors norme présente des avantages évidents. D’une part, vous pouvez attirer l’attention sur votre marque ou votre objectif commercial en le mettant en gros caractères sur la page d’accueil de votre site web. Les visiteurs se souviendront de ce qui était écrit en gras et seront plus susceptibles de revenir sur votre plateforme.

Et, bien sûr, la typographie vous permettra de tirer parti de la puissance de l’optimisation des moteurs de recherche en utilisant des mots clés ciblés de qualité.

Néanmoins, il est important de ne pas négliger la base: la simplicité et la lisibilité. Porter les choses à l’extrême avec des polices illisibles dans une vaine tentative de créativité peut être contre-productif. Ensuite, il est important de penser à comment ces textes seront adaptés aux écrans mobiles. Le problème est que la typographie utilisée sur un grand écran risque de ne pas convenir aussi bien à un petit écran. Ne négligez pas vos utilisateurs mobiles au profit du trafic sur ordinateur de bureau.

07Les animations en remplacement des vidéos

L’animation d’illustration a tendance à prendre moins de temps à charger que les images animées telles que les vidéos haute résolution. Non seulement ces graphiques animés ajoutent du caractère et de la personnalité à votre marque lorsqu’ils sont bien exécutés, mais les animations intégrées, les GIFs et les illustrations personnalisées peuvent vous aider à illustrer ce que vous représentez et à raconter votre histoire, de manière originale, claire et confiante. L’animation de différents éléments sur votre site attirera l’oeil des utilisateurs et cela suscitera beaucoup plus d’intérêt pour votre produit ou votre service.

Différentes manières de les intégrer à votre site:

  • Transition entre les pages
  • Effets de survol
  • Animation du logo au chargement du site
  • Illustrations animées (Motion Design)

Castor & Pollux est également un bon exemple pour cette tendance-ci, puisque l’agence a ajouté une touche colorée à son site minimaliste en intégrant une transition de page colorée:

Le site web de l’hôtel St-Régis à Venice démontre beaucoup de raffinement avec une simple animation de logo au chargement et plusieurs micro-animations qui rend la navigation plus intéressante et fluide pour l’utilisateur:

 

08Interfaces vocales

Avec des millions d’appareils hébergeant des assistants virtuels intelligents tels que Siri, Google Now et Cortana, de plus en plus de gens adoptent la voix en remplacement du texte. Principalement pour la commodité de parler directement dans un appareil, plutôt que de prendre le temps de saisir une demande manuellement. Les développeurs web peuvent exploiter et simplifier la navigation pour ces utilisateurs en intégrant des commandes vocales dans vos plateformes.

Les choses ont peut-être démarré lentement, mais la popularité du contrôle et de la saisie vocale a enfin atteint son rythme de croisière. Les statistiques suivantes illustrent pourquoi et comment la voix est l’une des tendances les plus importantes en matière de conception web pour les années à venir:

  • À l’échelle mondiale, les livraisons de haut-parleurs intelligents ont augmenté de près de 200% en 2018
  • 55% des ménages devraient posséder des haut-parleurs intelligents d’ici 2022
  • 65% des 25-49 ans parlent à leurs appareils vocaux au moins une fois par jour
  • 61% des 25-64 ans déclarent utiliser davantage leurs appareils vocaux à l’avenir

L’introduction d’interfaces vocales par les grandes entreprises reste relativement lente. Néanmoins, les preuves suggèrent que ce n’est qu’une question de temps avant que la voix ne devienne l’option principale ou exclusive d’entrée / de contrôle pour les utilisateurs.

09Intelligence artificielle

La page d’accueil traditionnelle telle qu’on la connaît actuellement est sur le point d’être remplacée par des pages d’atterrissage plus ciblées, personnalisées et adaptées aux besoins des utilisateurs.

L’apprentissage automatique avancé aidera les développeurs web et les concepteurs UX/UI à capturer les informations des utilisateurs en fonction de l’historique de leur navigateur et de leur emplacement, par exemple.

À leur tour, ces informations nous aideront à créer des pages web pertinentes permettant aux utilisateurs d’atteindre le type d’information, de produit ou de service qu’ils recherchent (par exemple, dans un site web de commerce électronique).

L’intelligence artificielle n’est pas un nouveau joueur dans l’univers de la conception et du développement web. Tout système automatisé offrant une expérience personnalisée basée sur les préférences de l’utilisateur et les comportements de celui-ci est associé à une IA.

C’est une question de temps avant que l’utilisateur web moyen commence à s’attendre – et à exiger – une personnalisation beaucoup plus multidimensionnelle de ses expériences en ligne. Il prendra rapidement l’habitude que les sites web qu’il visite et avec lesquels il interagit savent ce qu’il veut avant même qu’il en ait conscience.

10Défilement horizontal

Nous avons remarqué que de plus en plus de sites web utilisent différentes techniques de défilement pour offrir une expérience utilisateur unique. Une expérience de défilement typique est, bien sûr, verticale. Le défilement horizontal, est une tendance de la conception UX qui perturbe le fonctionnement de manière satisfaisante, attirant l’attention des utilisateurs tout en restant simple et fonctionnel.

Le site web Prevint combine ci-dessous plusieurs tendances de la nouvelle année: défilement horizontal, typographie surdimensionnée et couleurs atténuées. Vous pouvez même y observer un subtil usage du dégradé dans la transition d’une couleur à l’autre.

Dans l’exemple suivant, le photographe Damian Kujawa fait également appel à plusieurs des tendances actuelles: minimalisme, typographie surdimensionnée et évidemment, le défilement horizontal.

En conclusion

Les tendances actuelles suivent la progression des appareils de consommation web et des technologies. Pour le moment, tout est concentré autour du mobile. Les progrès rapides et la sophistication de la technologie mobile ont transformé la manière dont le monde accède aux sites web et interagit avec eux.

Cependant, l’avenir des tendances populaires en matière de conception web continuera d’être déterminé par une seule chose: les préférences de l’utilisateur. Théoriquement, il est possible que les goûts, les préférences et les attentes de l’internaute typique changent radicalement à tout moment. Si les consommateurs commencent soudainement à réagir négativement à une mise en page asymétrique, par exemple, il est inévitable que cette tendance disparaîtra.

Vous prévoyez revoir votre site cette année? N’hésitez pas à consulter nos réalisations et à contacter notre équipe pour une soumission gratuite!