Les tendances en design web changent constamment. En 2020, les avancées technologiques donnent aux graphistes tout le loisir d’expérimenter. On voit ainsi de nombreux designers jouer sur les extrêmes ou encore réinventer d’anciens courants. Cela dit, certaines tendances très prisées ne semblent pas près de s’en aller, comme le minimalisme toujours plus présent, ou encore la tendance aux illustrations « flat » colorées.

Quels sont donc les nouveaux styles à la mode ? Quelles seront les nouvelles tendances de 2020 ? Personne n’est plus à même de vous renseigner que les designers eux-mêmes.

C’est pourquoi nous avons demandé aux meilleurs graphistes sur 99designs de nous parler des tendances qu’ils voient apparaître pour 2020. Voici ce qu’ils nous ont livré :

Voici les tendances en design web les plus importantes de 2020 :

  1. Dark mode (ou « mode sombre »)
  2. Imperfections qui donnent du caractère
  3. Éléments 3D immersifs
  4. Ombres, profondeur et éléments flottants
  5. Photos et designs mélangés
  6. Cadres blancs
  7. Couleurs lumineuses et éclatantes
  8. Navigation ultra minimaliste

1. Dark mode

Example of 2020 web design trend dark mode
Design réalisé par DarkDesign Studio
Example of 2020 web design trend dark mode
Design réalisé par akorn.creative
Example of 2020 web design trend dark mode
Design réalisé par kukuhaldy
Example of 2020 web design trend dark mode
Design réalisé par 7plus7
Web design trends 2020 example: dark mode
Design réalisé par Ananya Roy
Je pense que les designs sombres, concentrés sur l’UI (interface utilisateur), constitueront l’une des tendances les plus importantes de 2020. Les fonds noirs font davantage ressortir les éléments du design, créant ainsi un plus grand contraste entre les couleurs, tout en améliorant l’ergonomie visuelle et en réduisant le stress subi par les yeux.

Les designs sombres sont à la fois très modernes et plus doux pour les yeux. Ils font également davantage ressortir les couleurs et les éléments graphiques de la composition.

Il arrive parfois que les tendances les plus importantes naissent d’un besoin on ne peut plus pratique. Les modes sombres sont plus adaptés pour les écrans OLED (car ça économise de l’énergie tout en préservant la longévité des écrans eux-mêmes), et n’empêchent pas de profiter pleinement de leur qualité. Les fonds noirs ou sombres améliorent la visibilité des autres couleurs pour créer des designs véritablement dynamiques.

Les dark modes sont très prisés en ce moment.
- Sam Chang, Product Designer at 99designs

Par ailleurs, la tendance au dark mode coincide parfaitement avec d’autres tendances en design importantes en 2020 : palettes de couleurs sombres et dramatiques associées à des couleurs néons éclatantes, des styles futuristes, cyberpunk et dystopiques, etc.

2. Imperfections qui donnent du caractère

Example of 2020 web design trend hand-drawn icons and elements
Design réalisé par jpalmeralexander
Example of 2020 web design trend hand-drawn icons and elements
Design réalisé par SixDesign

Les éléments de design imparfaits ou dessinés à la main ajoutent de l’émotion et donnent une certaine humanité aux sites web. Deux choses qui semblent être en grande demande de la part des utilisateurs qui ont vu bon nombre de sites « parfaits » en tous points dominer le web depuis des années. En 2020, les sites web s’attacheront à donner une âme à leur design en intégrant des éléments faits main.

Le grand truc l’année prochaine sera les icônes réalisées à la main. Elles communiquent davantage d’émotions positives. Cette tendance est liée au fait que nous avons de plus en plus besoin de voir des choses positives, de sorte à illuminer davantage notre quotidien.
Example of 2020 web design trend hand-drawn icons and elements
Design réalisé par Elisabetta Calabritto

Il est qu’un peu de positivisme ne fait pas de mal, de nos jours  ! Les icônes et autres éléments réalisés à la main sont uniques et stylisés, et permettent de donner du caractère aux marques, tout en leur permettant de se démarquer face à leurs concurrents. D’ailleurs, on pourrait presque voir cette tendance rebelle comme un contre-mouvement à la tendance aux designs « flats ». Donc en 2020, ne cherchez plus à cacher vos petits défauts et faites étalage de toute votre humanité.

Qu’il s’agisse d’icônes ou d’illustrations, en 2020 nous verrons de plus en plus de designs intentionnellement imparfaits.

3. Éléments 3D immersifs

Example of 2020 web design trend of 3D elements
Via GG Marmont Gucci
Example of 2020 web design trend of 3D elements
Design réalisé par Pinch Studio
Example of 2020 web design trend of 3D elements
Via Ueno
 Web design trends 2020 example: 3d website
Via A-0 Design
Je m’attends à voir de plus en plus d’éléments interactifs en 3D dans les designs. Les technologies poussent les designs à évoluer, et vice versa. Les graphistes ont un arsenal d’options pour jouer sur la 3D dans leurs designs. Ils sont capables de créer une expérience prenant en compte tous nos sens.

Les visuels tridimensionnels ont toujours plu. C’est la technologie (et son prix) qui a retardé l’implémentation d’éléments 3D dans les designs. Mais, comme l’explique Pinch Studio, ce n’est plus le cas, et la 3D n’est plus réservée à la NASA. Cette technologie est désormais accessible à de nombreux designers.

Tant que la réalité virtuelle (VR) ne s’est pas démocratisée, tant par son utilisation que par son coût, les designs hyperréalistes en 3D qui prennent tout l’espace sont ce qu’il y a de mieux pour créer une expérience immersive sur son site web. C’est non seulement avantageux pour l’esthétique, mais aussi pour l’UX (expérience utilisateur) : la 3D interactive encourage les utilisateurs à passer plus de temps sur les sites qui en contiennent. On peut s’attendre à voir de plus en plus de designs 3D immersifs au cours de l’année 2020, repoussant ainsi la limite entre espace numérique et réalité.

4. Ombres, profondeur et éléments flottants

Example of 2020 web design trend of soft shadows and floating elements
Design réalisé par Gilles Tossoukpé (via Dribbble)
web design with floating elements and shadows
Design réalisé par JPSDesign
Example of 2020 web design trend of soft shadows and floating elements
Design réalisé par Mike Barnes
Example of 2020 web design trend of soft shadows and floating elements
Design réalisé par Alex Ivanov
Example of 2020 web design trend of soft shadows and floating elements
Design réalisé par Realysys
Les ombres et les éléments flottants créent un effet 3D et donnent davantage de profondeur et d’intérêt aux designs.

Cette tendance consiste à donner de la profondeur aux designs. Vous aimez la 3D, mais vous trouvez que c’est un peu « too much » pour vous ? Optez pour des ombres douces et des éléments flottants pour ajouter de la profondeur et de l’intérêt à votre site. Vous pouvez même utiliser cette technique sur du texte et des images.

En poussant les principes du « material design » à l’extrême, les graphistes pourront ajouter un peu de fantaisie aux mises en pages 2D avec des ombres légères et des éléments flottants juxtaposés les uns sur les autres pour donner de la profondeur à leurs compositions. Ces effets donnent de la légèreté aux designs, et cette tendance crée un fort contraste avec le design flat où tous les éléments sont « à plat » et sur le même plan.

5. Photos et designs mélangés

Example of 2020 web design trend of mixing real photographs with graphics
Via Zhenya Rynzhuk
Example of 2020 web design trend of bold duotone
Design réalisé par Ashish Rai (via Dribbble)
Example of 2020 web design trend of mixing real photographs with graphics
Via Planit
Example of 2020 web design trend of mixing real photographs with graphics
Design réalisé par Rosee Byrne (via Dribbble)
Example of 2020 web design trend of photography and graphics
Design réalisé par Igor Vensko
Mélanger de vraies photos et des illustrations ou d’autres images graphiques permet de créer un message visuel véritablement unique. Qu’il s’agisse de photos d’individus ou de produits, ces images sont plus capables que les autres de représenter les valeurs d’une marque et de différencier le site web d’une entreprise des autres.

Juxtaposer des éléments graphiques à de vraies photos crée un effet visuel mémorable, ce qui incite d’autant plus à laisser libre cours à sa créativité.

Cette tendance (qui fait penser aux techniques de collage) est très polyvalente et peut être utilisée pour ajouter du charme à une photo de produit autrement banale (voir TSP ci-dessus), ou encore pour clarifier des concepts complexes ou abstraits, dans le secteur de la finance ou de la technologie, par exemple. C’est un moyen de personnaliser ses images et d’ajouter du caractère (l’un des traits principaux des tendances de 2020) à son design.

Pour tirer profit au maximum de la polyvalence de cette tendance, assurez-vous que le style de votre illustration se marie bien aux autres éléments graphiques de l’identité de votre marque. Le style de votre illustration aura une influence sur la manière dont votre audience interprétera votre photo : un style BD pour créer une atmosphère ludique et détendue, des formes géométriques précises pour créer un design sophistiqué, etc.

6. Cadres blancs

Web design trends 2020 example: web design with neat white space framing
Design réalisé par akorn.creative
Example of 2020 web design trend of framing with blank space
Design réalisé par malzi
web design with white space framing around image
Design réalisé par Alex Capellan.
Web design trends 2020 example: web design with white space framing images
Design réalisé par Daan Spits via QVT
J’aime beaucoup la tendance à ajouter de l’espace blanc autour des sites, qui s’éloigne de la tendance à utiliser l’effet parallaxe et des designs occupant tout l’écran. En créant un cadre, on donne plus de poids à l’image qu’il contient. Ainsi, le design « ressort » davantage.

Les designs qui occupent la totalité de l’écran sont devenus courants, au cours des dernières années. Les graphistes privilégient désormais des mises en page permettant d’intégrer beaucoup d’espace blanc (ou de n’importe quelle couleur) à leurs designs. Cela apporte davantage de structure et de stabilité aux designs, tout en renforçant l’impact des éléments se trouvant à l’intérieur du cadre.

En 2020, nous verrons de plus en plus de larges cadres blancs apparaître dans les designs de sites web. L’espace blanc permet de faire ressortir tous les éléments d’un design et procure une certaine satisfaction, car tout est bien organisé et à sa place sur la page, en fonction de la priorité données à chaque élément.

7. Couleurs lumineuses et éclatantes

Example of 2020 web design trend of bold duotone
Design réalisé par Gabriel™
Example of 2020 web design trend of bold duotone
Design réalisé par Hiroshy
web design with glowing neon colors on dark background
Design réalisé par MercClass
Example of 2020 web design trend of bold duotone
Design réalisé par deandesign
Example of 2020 web design trend of bold duotone
Design réalisé par MASER
Example of 2020 web design trend of bold duotone
Design réalisé par Matthias Vambairgue
Example of 2020 web design trend of bold duotone
Design réalisé par Magic People Voodoo People
Les palettes de couleurs et les designs futuristes seront à la mode l’année prochaine, poursuivant ainsi la tendance isométrique récente et introduisant les bleus, les violets et les roses vifs comme couleurs phares.
- Adrianne Mesnard, Directrice artistique, 99designs

L’année 2020 sera l’année des combinaisons de couleurs osées, utilisées stratégiquement pour que les sites web sautent aux yeux des utilisateurs. Les tendances en design web sont de plus en plus audacieuses, avec des couleurs néon qui brillent dans le noir ou encore des couleurs extrêmement saturées associées à des couleurs sombres ou délavées, de sorte à donner une certaine luminosité aux designs.

Les sites web bichromiques, en particulier, sont ceux qui tirent le plus profit de cette tendance. La bichromie continue de se réinventer et maintient sa place au-devant des tendances en design web grandissantes en 2020. La dernière version de cette technique (et probablement la plus osée) consiste à utiliser des couleurs néon associées à des couleurs diamétralement opposées pour créer une vivacité visuelle inégale.

Les designs bichromiques uniques sont visuellement séduisants et intéressants. La bichromie permet de changer pour ainsi dire n’importe quelle image en un outil de branding redoutable.

En 2020, les palettes de couleurs originales et intrigantes auront la part du lion, en web design. Avec les tendances à l’ultra minimalisme et aux modes sombres, les couleurs auront toute la place pour briller !

8. Navigation ultra minimaliste

Example of 2020 web design trend of large photos and videos
Design réalisé par Alt*CEVA
Example of 2020 web design trend of large photos and videos
Design réalisé par JPSDesign
Example of 2020 web design trend of minimalist navigation
Design réalisé par deandesign
Example of 2020 web design trend of large photos and videos
Design réalisé par Clint English
Example of 2020 web design trend of large photos and videos
Design réalisé par Mike | Creative Mints (via Dribbble)
Example of 2020 web design trend of minimalist navigation
Design réalisé par Sathish (via Dribbble)
En 2020, les sites web contiendront plus de vidéos (et leur transcription) que de texte, privilégiant la précision plutôt que la description. Les sites web auront, de manière générale, des designs plus simples de façon à rendre la navigation encore plus facile.

Avec la popularité grandissante de la technologie portable et des appareils « mettables » (wearable devices) comme les montres connectées, les tendances en design web sont de plus en plus influencées par les tout petits formats d’écran. La navigation est l’élément le plus affecté, bien qu’elle soit l’élément qui rassemble tous les autres. Ces dernières années, les barres de navigation se sont énormément simplifiées afin de pouvoir accommoder des écrans de plus en plus petits.

Les barres de navigation extrêmement minimalistes améliorent également la fonctionnalité : moins l’utilisateur passera de temps à trouver ce qu’il cherche, plus il passera du temps sur le site en question, allant de page en page au lieu de se demander comment faire pour aller de page en page, justement…

Aussi, les images deviennent de plus en plus importantes. Les photos et les vidéos grand format sont autant d’opportunités d’impressionner les utilisateurs, le tout avec très peu de texte seulement.

Example of 2020 web design trend of large photos and videos
Design réalisé par David & George
Example of 2020 web design trend of large photos and videos
Un design minimaliste contenant une photo grand format. Design réalisé par Coincept ™
Les photos et les vidéos grand format ont plusieurs avantages de taille. Elles attirent l’attention sur les objectifs de la marque. C’est pour cette raison que les entreprises sont de plus en plus nombreuses à utiliser cette technique pour leur site web.

En réduisant la quantité de texte, on dirige davantage le regard des visiteurs sur les images, qui deviennent alors le centre d’intérêt principal de la page. Choisissez donc bien vos visuels !

Le web design en 2020

En cette fin de décennie et la nouvelle année approchant à grands pas, les designers adoptent plus que jamais un style futuriste, avec des visuels et des couleurs captivantes, des effets 3D et de nouvelles itérations d’anciennes tendances. Et ce mouvement ne se limite pas aux écrans : l’expérience utilisateur étant au centre de toute l’attention, on comprend que le mode sombre et la navigation minimaliste aient autant de succès.

À l’aube de 2020, une nouvelle décennie commence et les designers sont résolument tournés vers le futur, tout en puisant dans le passé pour trouver l’inspiration. Cela crée un courant de tendances opposées qui garantit son lot de surprises !

Vous avez besoin d’un design de site web dernier cri ?
Contactez nos graphistes et obtenez un design unique et sur mesure.