Si vous souhaitez rester à la pointe et démarrer l’année prochaine du bon pied, cet article vous présente les grandes tendances du webdesign pour 2020 : Canvas, 3D, typographies XXL, contrastes, intelligence artificielle, machine learning, reconnaissance vocale, et bien plus encore.
[superfeatured]7076[/superfeatured]
Comme chaque année, nous sommes de retour pour préparer la suivante. À l’approche de novembre, nous voulons être prêts pour l’année à venir, et nous souhaitons que nos visiteurs le soient aussi. Fidèles à notre habitude, nous avons donc rédigé un article pour décrypter ce qui va marquer l’univers du webdesign en 2020.
On suit l’évolution → les tendances du webdesign 2026 misent sur le minimalisme, l’IA et des expériences plus humaines.
Ce type d’article fait partie des piliers de notre blog : il attire chaque année de nombreux visiteurs et de nombreuses demandes de devis de la part de professionnels ou de curieux en quête des dernières tendances en design web, graphique et marketing. C’est pourquoi nous y consacrons chaque année plus d’attention, d’efforts et de soin. Notre objectif : proposer du contenu de qualité à nos lecteurs, qu’ils soient designers ou futurs clients à la recherche d’inspiration pour leur prochain site. Et puis, produire du contenu pertinent nous aide à rester bien positionnés dans les moteurs de recherche. Vous connaissez la chanson : Content is king !
WOWWW MEC ! On a déjà publié le nouvel article sur les tendances webdesign 2021 !!!
Articles des années précédentes qui pourraient vous intéresser : Tendances webdesign 2019 – Tendances webdesign 2018 – Tendances webdesign 2016
Tendances webdesign 2020 : prenez une longueur d’avance
Des typographies encore plus imposantes
L’une des tendances phares du webdesign en 2020 sera sans conteste l’utilisation de typographies surdimensionnées. Pas seulement pour les titres, mais aussi dans le corps du texte.
Avec la généralisation des écrans larges et haute résolution, et la baisse de leur coût, la taille des textes sur le web s’est nettement éloignée des 12 ou 14 pixels des années 2010. Aujourd’hui, il n’est pas rare d’utiliser du 20 pixels et plus, selon le projet et le site.
Pour les titres, il n’y a plus vraiment de limite, si ce n’est le bon goût et le sens de l’équilibre. Osez les tailles XXL pour créer un contraste fort. Des titres géants, bien rédigés, donneront une vraie personnalité à tout site web qui souhaite sortir du lot, en 2020 comme dans les années à venir.
Comment et quand l’adopter
Adoptez cette tendance sur des sites qui :
- ont besoin d’un design très visuel et percutant
- manquent d’images et nécessitent un renfort graphique fort. Des typos massives, assumées, donneront le punch visuel recherché
- ne s’adressent pas à un public trop conservateur
- visent une audience équipée de matériel moderne, notamment de grands écrans
À garder en tête :
- Pensez à adapter les tailles selon les résolutions d’écran. Prévoyez des exceptions responsive, du 2560px (grand écran) jusqu’aux 1330px (portable) les plus courants
- Veillez à la cohérence des tailles sur mobile, car la majorité des internautes naviguent désormais sur smartphone
Sites qui illustrent la tendance
Rogue Studio
Ici, l’utilisation de typographies n’est pas seulement grande… elle est EXTRÊMEMENT grande. Et le résultat est bluffant.
Je suis certain que ce site figurera parmi les candidats de notre sélection annuelle des meilleurs webdesigns.
Granyon Summer Party
Encore un excellent exemple d’application de cette tendance. Non seulement les titres sont énormes, mais le corps du texte l’est aussi.
Team Elite Kickboxing
Dernier exemple pour illustrer cette tendance. On remarque aussi que ce site exploite parfaitement la tendance suivante, que nous allons aborder.
Contrastes, couleurs inversées et teintes flashy
L’utilisation de contrastes forts et de couleurs inversées s’est largement répandue ces dernières années dans le webdesign. En 2020, la tendance se confirme : on verra des sites percutants, qui assument pleinement ce parti pris.
Lâchez-vous avec des contrastes marqués et des couleurs vives. Appliquez des filtres sur vos images, que ce soit en amont (Photoshop, etc.) ou via des outils web plus récents comme les modes de fusion CSS ou même le canvas.
Comment et quand l’adopter
À privilégier sur des sites qui :
- ont besoin d’un design très visuel et impactant
- ne s’adressent pas à un public trop conservateur
- cherchent à attirer l’attention et à ne laisser personne indifférent
À garder en tête :
- Pour les sites corporate à destination d’entreprises traditionnelles, utilisez cette approche avec parcimonie
- Veillez à la cohérence avec l’identité visuelle et les couleurs de la marque
- Même avec du contraste, gardez une harmonie visuelle en créant une palette cohérente
Sites qui illustrent la tendance
Ninja guru
Ici, les contrastes sont poussés à l’extrême : couleurs inversées (noir/blanc), associations flashy (bleu/orange).
Festa da Francofonia 2019
Couleurs éclatantes, contrastes, éléments géométriques animés… Un site qui ne laisse pas indifférent et illustre parfaitement cette tendance clé du webdesign 2020.
Kombu
Ici, le contraste est utilisé pour différencier les packagings de chaque boisson, en lien direct avec leur saveur. L’effet « wavy » sur les lignes diagonales, parfaitement synchronisé avec le packaging, est une vraie réussite. Un bel exemple d’utilisation intelligente des contrastes et d’effets JS, tout en conservant une communication adaptée au produit.
L’expérience mobile, plus cruciale que jamais
Aujourd’hui, tout le monde connaît le responsive design. Ce n’est plus vraiment une tendance, du moins si l’on parle du responsive « classique ».
Avec la majorité des internautes naviguant sur mobile, il est essentiel de penser à ces utilisateurs et de leur offrir une expérience réellement adaptée à leur appareil et à leurs usages. Il s’agit d’aller plus loin que le simple responsive, et de s’inspirer des applications mobiles.
Il ne suffit plus d’avoir un site « qui s’adapte ». Il faut désormais penser l’expérience comme une app : si la navigation sur votre site se rapproche de celle d’une application, vous serez en phase avec les attentes des utilisateurs.
Autre point crucial pour les mobinautes : optimiser au maximum les temps de chargement.
Quelques conseils
- Évitez le lancement automatique des vidéos, pour ne pas consommer la data de l’utilisateur (surtout hors wifi)
- Optimisez les images en servant des versions adaptées à la largeur de l’appareil, pour accélérer le chargement
- Adoptez le menu « burger » pour compacter la navigation façon app
Sites qui illustrent la tendance
Nicholas Munt
Ce site utilise l’ajax pour charger chaque page, ce qui le rend très mobile friendly, avec une navigation proche de celle d’une application.
Salmoon & Sons
Sur la version mobile de ce site, on remarque un slider parfaitement adapté au swipe, avec une image qui suit le doigt à la perfection. Le menu burger, qui glisse depuis le côté, est également très réussi.
Volia
Ici, les typos sont très grandes, mais parfaitement gérées même sur mobile. Le menu burger est également très bien conçu, avec une transition fluide et originale.
WOWWW MEC ! On a déjà publié le nouvel article sur les meilleurs webdesigns 2019-2020 !!!! Cliquez vite !
Curseurs et scrollbars personnalisés
Une tendance qui prend de l’ampleur : remplacer le curseur par défaut du navigateur par un curseur personnalisé.
Ces curseurs interagissent souvent avec les éléments du site, en changeant de taille, de couleur, etc. C’est une tendance récente, qui va clairement s’accentuer en 2020.
Même chose pour les scrollbars : de plus en plus de sites adoptent des barres de défilement sur-mesure, avec un effet de « smooth scrolling ».
On voit aussi de plus en plus de sites qui n’affichent plus du tout la scrollbar, même si le contenu dépasse. Cette tendance minimaliste va s’imposer : les utilisateurs sont désormais tellement habitués à scroller qu’on peut se permettre de supprimer la barre, voire de la remplacer par un simple pictogramme « scroll down » pour guider l’utilisateur.
Comment et quand l’adopter
À privilégier sur des sites qui :
- souhaitent affirmer leur personnalité
- s’adressent à un public averti, habitué au web
À garder en tête :
- Testez le scroll sur tous les navigateurs pour garantir la compatibilité
- Sur mobile, le scroll peut réagir de façon imprévisible : mieux vaut alors le masquer complètement
Sites qui illustrent la tendance
Aluxion
Ici, le scroll personnalisé se compose de deux cercles, un grand et un petit, qui suivent le curseur avec un léger décalage et proposent un effet hover très visuel. La scrollbar personnalisée s’intègre parfaitement au design global.
Joseph Berry
Ce curseur, similaire au précédent, se distingue par sa circonférence extérieure typographique. Ici, pas de scrollbar du tout : une tendance qui va s’accentuer, car les utilisateurs sont désormais conditionnés à scroller instinctivement.
Matt VBRG
Ici, le curseur interagit avec tout le contenu du site, modifiant les couleurs et appliquant des effets visuels spectaculaires, comme l’effet chromé sur les images.
Canvas et éléments 3D avec Three.js
L’intégration du Canvas dans le webdesign a pris une place de plus en plus importante ces dernières années, et en 2020, c’est LA tendance incontournable pour créer des sites nouvelle génération.
Grâce au canvas, on peut exploiter OpenGL pour créer des expériences qui repoussent largement les
