Quelles sont les tendances web design de 2020 à adopter ? 🖌

Les images jpeg et png étaient jusqu’à présent les plus répandus sur le web. Il semble que cette année, les formats matriciels laissent place à une extension vectorielle adaptée aux mobiles comme aux postes de travail : le SVG. D’autres changements sont attendus, avec pour mot d’ordre : “prenez du volume”. Voyons les tendances web design 2020 à adopter.

Article publié à l’origine sur cotinga.io

Le soulèvement des formats

Les formats de contenu se transforment, les formats de fichier aussi. La montée en puissance attendue du SVG en 2020 s’explique par une navigation web largement dominée par les plateformes mobiles.

En effet, les PNG, GIF, JPG et autre JPEG ont prouvé jusqu’à présent qu’ils étaient peu adaptés à une expérience utilisateur légère et cohérente d’une plateforme à l’autre.

Le soulèvement des machines

L’intelligence artificielle était une des convives de marque de 2019. Il semblerait qu’elle devienne une invitée permanente au cercle des bonnes pratiques en web design 2020.

Un des péchés originels du web design est son incapacité à fournir une expérience utilisateur parfaitement personnalisée à chaque visiteur. La technologie, elle aussi, a ses limites.

L’idée jusqu’à présent a donc été de faire des choix capitalisant sur la masse d’utilisateurs en concevant des interfaces parlant à tous. Si cette époque n’est pas complètement révolue, l’introduction des algorithmes de machine learning a permis de changer la donne.

En 2020, des progrès sont attendus dans la production web design à la volée, en fonction des caractéristiques de l’utilisateur.

Un design XXL

L’ergonomie et le confort d’absorption de l’information restent au cœur de l’expérience utilisateur. Cette année, ce concept prend du poids de façon décomplexée : polices d’écriture grasses, énormes menus de navigation… l’idée est de guider l’utilisateur dans sa navigation en pavant celle-ci de manière claire. Si cette tendance, visant à attirer l’attention, est très efficace, attention aux abus néanmoins.

La surcharge d’éléments se bousculant les uns les autres est tout sauf agréable visuellement.

Le fluo s’invite sur nos écrans

Pour limiter celle-ci, une certaine touche de sobriété est attendue avec l’usage assumé du vide grâce aux espaces blancs. Cependant, les espaces remplis, seront meublés avec panache.

2020 est placée sous le signe de l’exubérance et de la débauche d’intensité dans l’usage des teintes : les couleurs vives domineront.

Pour que “less is more” reste vrai, vides et pleins devront savamment s’alterner.

Des contenus d’apparence déstructurée

Afin d’organiser ces vides et ces pleins d’ailleurs, 2020 prévoit des écrans divisés assortis de designs asymétriques.

Rendant accessibles plusieurs concepts d’un rapide coup d’œil, l’idée de mettre côte à côte deux sections doit néanmoins éviter de créer la confusion chez l’utilisateur.

C’est l’asymétrie qui permettra en l’occurrence à un groupe d’éléments de ressortir plus que l’autre.

Cette association contribuera à façonner l’expérience utilisateur en pointant du doigt la direction à prendre.

Attirant l’œil très rapidement, les bordures des sections, pourtant nettes, ne seront cependant pas vierges.

Le débordement des textes et des images sur les lignes de démarcation matérialisées par les changements de couleur sera de mise.

Enfin, les parallaxes sont vraisemblablement toujours attendues au menu de 2020 et permettront d’amorcer la transition vers un futur “tout animé”.

Des contenus plus interactifs et plus animés

Les moteurs de recherche ont du mal à indexer les vidéos, malgré les attributs de balise qui se multiplient pour rendre le contenu toujours plus clair.

Mais ce n’est pas le réel problème qui empêche l’intégration de vidéos à grande échelle dans les sites. La lenteur du chargement et la compatibilité des modules en sont la raison principale.

2020 contourne le problème en faisant un usage plus important d’un élément qui était déjà présent jusqu’à maintenant : les animations.

La tendance, cependant, sera plutôt aux “micro-animations”.

Permettant les transitions d’un bloc à un autre, elles seront utiles notamment pour re capturer l’attention du visiteur devant faire face à un contenu statique conséquent.

Nous ne sommes cependant pas encore entrés dans l’ère du tout animé et ces outils ne seront pas forcément digestes sur toutes les plateformes mobiles.

À utiliser avec parcimonie donc.

L’utilisation des CSS Grids

D’un point de vue technique, les frameworks tels que Bootstrap de Twitter ont longtemps mené la danse. S’ils restent toujours d’actualité, de même que les supersets CSS et autres langages de script, le HTML5 devient de plus en plus puissant.

Grâce à leurs fonctionnalités supportées par de plus en plus de navigateurs, les CSS Grids s’imposent en 2020 grâce à leur flexibilité et concision.

Du scrapbook aux écrans

Les illustrations personnalisées se démocratisent. Avec l’usage de filtres dans des applications telles qu’Instagram, les photos augmentées de stickers et de dessin à main levée sont devenues monnaie courante.

Pour parler le même langage que les utilisateurs, les web design 2020 feront donc la part belle aux illustrations personnalisées et aux images hybrides.

Augmentation de réalité

Les photos ne sont pas les seules à être augmentées cette année. L’AR équipera de plus en plus de sites à finalité commerciale afin de transmettre aux prospects le plus de détails possibles sur les produits “comme s’ils y étaient”.

Le Material Design prend du volume

Les volumes virtuels de l’AR s’invitant par rotoscopie en temps réel sur nos écrans traduisent une aversion pour le plat.

En 2020, le Material Design introduit par Google sur les années précédentes va continuer à prendre de l’ampleur grâce à des couleurs pleines et des ico-images en isométrie offrant une certaine profondeur aux visiteurs.

Cette année, attendez-vous à ce que vos sites prennent du volume : grossir semble être la tendance 2020.