10 Tendances en webdesign à suivre en 2020

En web comme ailleurs, les tendances vont et viennent, parfois se recyclent et se transforment. Cette année 2020 reste dans la continuité de 2019, avec toutefois une accentuation de certaines tendances webdesign. Notre top 10 des éléments à adopter lors de l’élaboration de vos visuels !

1.    Les illustrations abstraites et à la main

L’illustration a de plus en plus la cote : on retrouve beaucoup de sites web et de visuels qui en contiennent. Alors que la personnalisation devient le maître mot pour se démarquer de la concurrence, deux tendances webdesign se dégage.

Les illustrations abstraites d’une part, constituées de motifs et formes géométriques ou organiques. On les associe volontiers à des couleurs très flashy.

A cela s’ajoute les illustrations dessinées à la main. Quoi de plus personnalisé que d’avoir des dessins ou esquisses dotés d’un style unique ?

Illustrateurs et designers, sortez tablettes graphiques et crayons de couleur, et laissez parler votre âme d’artiste ! La tendance est non seulement au dessin, mais aussi aux imperfections 🙂

2.    Une typographie voyante et déconstruite

C’est un bon point pour l’accessibilité et la lisibilité. Les polices de caractère (fontes) se font plus épaisses, notamment sur les titres. Cela permet de générer des titres plus visibles et accrocheurs. Comme beaucoup de tendances webdesign, ce style de typographie est très vite repris par les grandes marques. Apple, Samsung, Nike ou encore McDonalds surfent sur la tendance pour donner de l’impact à leurs gros titres.

En webdesign on constate aussi une déconstruction des règles de la typographie. Espacements irréguliers, lettres inversées, superposition de texte… Un vent de créativité souffle sur la typographie. Mais attention à la lisibilité !

Vous lancez votre activité et souhaitez optimiser votre présence en ligne ?

Nous pouvons vous conseiller

3.    La 3d : une tendance webdesign incontournable

Avec la microanimation, la 3d fait partie des ajouts les plus marquants au webdesign ces dernières années. Les animations en motion design en 3d sont devenues incontournables. Le but est de générer de l’interactivité et de donner une impression de profondeur au design. La 3d permet aussi de voir un produit en détail, de le zoomer, de changer d’angle. Un gros plus pour les boutiques e-commerce.

La boutique Lolo Chatenay par exemple, utilise un configurateur 3d pour que l’utilisateur personnalise ses accessoires. Cette innovation est possible grâce au configurateur de produits développé par la société HapticMedia.

L’effet 3d peut aussi se retrouver sur des illustrations statiques. C’est comme si les visuels sortaient de l’écran. Une tendance qui se rapproche de celle que l’on décrit ci-dessous, le neumorphisme.

4.    Le neumorphisme : le webdesign réaliste

On entend de plus en plus parler du neumorphisme, dérivé du Skeuomorphisme  du début des années 2010. C’est une technique graphique qui apporte beaucoup de réalisme aux interfaces. Elle dépeint les choses comme elles sont, et non pas de manière imagée.

Puis le flat design est apparu et les applats sont devenus la norme. Bien que le flat design continue à être beaucoup utilisé, certains ont décidé de ressusciter le skeuomorphisme avec quelques changements.

Contrairement à son prédécesseur, le neumorphisme se veut simple et épuré et s’appuie surtout sur l’illusion de reliefs. Il faut donner l’impression que l’objet représenté est palpable. Certains pensent que cette tendance, qui se prête peu aux changements, risque de ne pas durer.

En tout cas, si l’envie vous prend d’adopter cette tendance webdesign, il existe déjà de multiples tutoriels.

• Un tutoriel sur uxplanet.org

5.    Le mélange photo & illustration

On a vu juste au-dessus qu’en webdesign, l’illustration a encore de beaux jours devant elle. Une des tendances qui se démarque en 2020, c’est le mélange d’illustrations en 2D avec de la photo. Cela crée un effet de mélange entre réalité et fiction, et apporte du changement par rapport aux illustrations que l’on voit partout, avec des personnages en flat design aux proportions exagérées.

Vous voulez booster le SEO de votre site ou de votre e-commerce ?

Voir notre méthode ici

6.    La navigation adaptée aux mobiles ++

Avec l’index mobile first et l’expansion des smartphones, un site web responsive n’est plus une innovation, c’est même la base. La plupart du temps, sur mobile, la navigation se fait via le fameux hamburger, ces trois traits horizontaux qui, quand on clique dessus, font apparaître un menu.

Mais on remarque que pour naviguer avec le pouce, comme la plupart des utilisateurs le font, cliquer sur le menu en haut de l’écran n’est pas le plus pratique.

On voit donc apparaître des menus qui reprennent la même navigation que celle des smartphones ou de certaines applications, avec un bouton en bas pour le menu.

Cette illustration démontre bien quelles zones sont les plus accessibles avec le pouce (en vert) et quelles zones sont plus difficiles à atteindre (rouge).

Une bonne raison de changer son menu d’emplacement, et d’avoir un site web réellement optimisé pour la navigation sur mobile J

7.    Le material design : une tendance de 2014 toujours utilisée

Le material design n’est pas tout jeune. Il a été créé en 2014 par Google pour unifier le style de ses différents services, applications et produits. Ce type de design s’inspire du flat design mais y ajoute une touche de relief légère, en ajoutant quelques ombres. Il se caractérise par des formes géométriques, colorées, une impression de mouvement. Le but est d’améliorer l’expérience utilisateur (UX Design).

8.    Les animations et la vidéo

La vidéo est l’une des vedettes des tendances, et pas seulement en webdesign. Ce média est le préféré des utilisateurs : il augmente leur temps d’attention et donc le temps qu’ils passent sur votre site. D’ailleurs, Youtube est le deuxième réseau social en nombre d’utilisateurs dans le monde, juste après Facebook.

La vidéo captive naturellement et les designers l’ont bien compris. On l’utilise donc plus fréquemment en fond ou à la place du traditionnel diaporama que l’on retrouve en page d’accueil des sites. Cela permet aussi de faire passer plus d’informations, de façon plus ludique.

Pour les mêmes raisons, les animations et micro-animations continuent leur ascension. Elles permettent d’ajouter du dynamisme au contenu.

On retrouve beaucoup les micro-animations sur les boutiques en ligne. L’avantage est évident : le produit peut ainsi être vu sous plusieurs angles, en mouvement.

Votre site web ne génère pas suffisamment de visites ou de contacts ?

Voir notre méthode ici

9.    Le minimalisme : une tendance qui évolue

Le minimalisme se caractérise souvent par l’utilisation de flat design et de grands espaces vides. Cette tendance que l’on retrouve aussi en aménagement et décoration semble continuer à plaire.

Mais cette année, une nuance change la donne. C’est l’ajout de couleurs, notamment de couleurs vives, venant combler les espaces d’habitude laissés blanc en minimalisme.

Le minimalisme se veut apaisant, intuitif et pratique. Le superflu est mis de côté pour ne communiquer que sur l’essentiel.

10.    Le dark mode design (dark UI) : une tendance webdesign omniprésente

Le dark mode, ou mode sombre, se retrouve disponible dans de plus en plus d’applications et d’interfaces. Messenger, Google Maps, Youtube…

Le dark mode se veut plus reposant pour les yeux et permet de réduire la consommation d’énergie par rapport aux autres couleurs. De plus, comme on l’a vu dans notre dossier sur les couleurs, la couleur noire est une couleur :

• Intemporelle,
• Classe, évoquant le style ou le luxe

Cette popularité du mode sombre commence à s’étendre aux webdesigners et designers d’interface.

Il faut toutefois faire attention à ne pas utiliser trop de noir dans une interface, ce qui pourrait lui donner un effet austère.

• Voir aussi : Les avantages du dark mode

Tendances en webdesign 2020 : elles sont nombreuses

Nous n’avons pas listé toutes les tendances les plus emblématiques de l’année, car il y en a bien d’autres. Elles feront l’objet de prochains articles !