Les vraies tendances webdesign en 2021

par | 22 avril 2021 | UX



L’historique des tendances webdesign, et celles de 2021..

 

2017 : flat design et grosses typographies

 

C’est en 2017 que des courants de “tendances” webdesign s’installent dans la création web.

Tout débute avec le flat design, qui a explosé cette année-là.

Il se définit par de nombreux aplats de couleurs sur lesquels on va pouvoir appliquer différents éléments. Le flat design n’offre pas du tout de perspective dans la vision créative, c’est une approche assez minimaliste mais colorée la plupart du temps.

 

flatdesign

flat design

 

 

En parallèle, les typographies se sont émancipées. On les a vu plus “bold”, plus “osées’, plus “XXL”.

 

grosses typographies

tendances typographies imposantes

 

Cette année-là, le skeuomorphisme perdurait toujours aussi ! L’idée derrière résidait dans le fait de vouloir imiter des éléments réels

 

skeuomorphisme

 

 

2018 : Material design et broken grid

 

Le material design est une évolution du flat design. Le material design vient directement des équipes de chez Google qui se base également sur des aplats de couleurs avec un plus de 3 dimensions comme des ombres portées ou de la superposition, afin de faire comprendre l’approche du design avec les “couches”, et donc de hiérarchiser les éléments web.

 

material design

 

Les typographies sont toujours aussi présentes, la petite particularité cette fois-ci c’est l’utilisation des grilles brisées. L’utilisation de cette déstructuration détonne avec l’utilisation habituelle des grilles et créer une nouvelle dynamique, notamment grâce aux technologies.

 

Broken grids

broken grids

 

Pour finir cette année 2018, le design vintage est venu se glisser parmi les tendances. Pour donner un côté rustique et authentique. Ce qui contraste énormément avec une tendance flat design ou material design, car ces dernières manquent peut être parfois de caractère ou de texture.

 

vintage ui design

vintage design

 

 

2019 : Les tendances restent mais évoluent

 

Le material design introduit les illustrations typées flat design, simples et colorées. La typographie prend de plus en plus d’ampleur. Les couleurs se contrastent, se vivifient puisque les technologies, comme l’amélioration de la qualité des écrans, le permettent.

Les tendances suivent principalement ces contraintes de développement qui passent avant tout par l’avancée technologique des supports web.

Fin 2019, l’apparition du neumorphisme qui reprend l’esprit du material design avec ses aplats et des ombres portées un peu plus prononcées pour se rapprocher de la représentation de l’objet réel. Cet effet de relief est directement porté sur l’UX utilisateur, qui rend les éléments presque palpables. Cette tendance perdure encore aujourd’hui, en revanche elle pose la problématique d’une trop forte neutralité et la hiérarchisation des boutons, des CTA peut être perturbée.

 

neuomorphism

neuomorphisme

 

 

2020 : L’animation est reine 

 

Le mouvement se démocratise car encore une fois les navigateurs et technologies supportent mieux animations et vidéos.

Les typographies sont dorénavant un réel vecteur de transmission d’image de marque, on les personnalise pour donner un caractère à son site. Les designs deviennent plus expérimentaux et ne marchent pas toujours.

Le nouveau né de la famille des “morphismes” en 2020 est le glassmorphism. L’idée principale de cette tendance design est d’apporter de l’opacité, du flou pour apporter de la texture et du relief. Le petit point négatif se portera plutôt du côté de la lisibilité  par les navigateurs, qui pourraient ne pas très bien identifier les intentions graphiques derrières les couches floues et non floues.

 

glassmorphisme

 

 

2021 : Le minimalisme au milieu de créativité débordante !

 

Les illustrations varient, se développent et se diversifient. La 3D et les micro-interactions (micro-animation à l’interaction comme un clic ou un chargement) fait son apparition pour toujours plus d’immersion et d’expérience utilisateur optimisée.

 

illustrations 3D

les illustrations 3D

 

La typographie reste dans la volonté de se démarquer, elles apparaissent plus grosses, toujours plus originales et sont un véritable moteur d’authenticité.

Pour finir, le minimalisme, qui s’inspire du design suisse et print, revient en force sur le web pour sortir du surplus d’éléments. Il s’inscrit également dans une démarche d’éco-conception tout droit venue des périodes de confinement qui nous ont poussé à consommer de toutes les manières possibles, de façon plus responsable.

 

design suisse

design suisse

 

 

Les risques de suivre les tendances

 

Faire plaisir à son égo vs faire plaisir à son utilisateur

 

Le risque de suivre les tendances, qu’elles soient graphiques ou web, c’est de vouloir satisfaire son plaisir personnel. Or, un site web ne se destine pas à l’équipe design. Un site web se destine à votre utilisateur, et votre cible ne sera peut être pas sensible ou habituée à une interface très expérimentale.

Exemple de site expérimental mais peu optimisé en termes d’UX :

 

Le lien ici

 

Ce portfolio reprend bien les tendances actuelles, mais la démarche UX reste un peu maladroite. Le “scroll” est très confus et n’amène nulle part. Si le designer s’adresse à ses compères designers, l’objectif est plus ou moins rempli car il fait preuve de créativité. En revanche, si il s’adresse à des clients potentiels, cela peut lui porter préjudice car l’on peut être vite perdu dans notre navigation. Un trop plein d’animations, pas forcément pertinentes, fera perdre rapidement l’attention de vos visiteurs. De plus, un site qui s’imprègne trop des tendances design, aura tendance à mal vieillir

 

 

Le lien ici 

 

Ce site reprend les codes de plusieurs tendances : années 90 et rétro’, grosses typographies, couleurs contrastées..L’identité visuelle est réellement marquée par l’approche design très affirmée en revanche la construction du site rentre dans les standards fonctionnels d’un site d’e-commerce, ce qui marche et le rend tangible. L’identité visuelle vient servir à intéresser la cible jeune, ce qui donne sens à l’application du côté trendy, ce qui permettra par la suite de l’actualiser graphiquement pour rester dans la vague.

 

 

Les bonnes pratiques incontournables (toujours depuis l’invention de Paint) à maîtriser en webdesign, quelle que soit la tendance.

Connaître son audience

 

buyer personna

 

Un site qui fonctionne et qui est en tendances, c’est avant-tout parce qu’il correspond aux besoins de ses utilisateurs finaux. Le travail fait en amont de la production du site, sur le plan stratégique, sera tout aussi utile à la conception. Une bonne connaissance de sa cible, en passant par la création précise et aboutie de ” buyer personna”. Si votre cible est senior, une typographie agrandie et imposante pourra se justifier aisément. Le préciser dans votre cahier des charges sera donc primordial.

 

 

Établir un menu de navigation simple et intuitif

 

 

Simplifier et hiérarchiser vos informations dans une barre de navigation claire et concise permettra à l’utilisateur de comprendre systématiquement votre proposition de valeurs.

 

 

Avoir une identité visuelle cohérente

 

Avoir un simple logo n’est pas suffisant. Une charte graphique associée, et la communiquer de façon cohérente. Typographies, couleurs, assets graphiques, images et iconographie.. Vous pouvez par exemple utiliser Color Tool, pour commencer à initier votre identité visuelle.

➡️ Vous pouvez consultez des ressources utiles sur ce site : Material.io

 

 

Aérer et espacer votre contenu

 

Un sujet de débat dans les équipes de designers ! Ne pas aérer le contenu de son site vous exposera à prendre le risque de perdre la hiérarchisation de vos informations. Tout mettre au même niveau pourrait perturber le parcours de votre utilisateur, et ainsi votre tunnel de conversion. C’est pourquoi le design est essentiellement au service du marketing et de la communication. Le vide et l’espace sera un marqueur invisible mais significatif de l’architecture de vos propositions et de vos textes.

 

 

exemple

 

 

Savoir être créatif sans bousculer les standards

 

Être créatif, c’est bien, mais composer avec les standards, c’est encore mieux. Le web est aujourd’hui standardisé, dans la conception de ses interfaces, car c’est une habitude pour les utilisateurs. Respecter la culture web que les usagers ont acquis depuis des années peut être un avantage considérable dans le développement de votre site. Si sur un site e-commerce vous changez l’icône panier en icône os pour chien, vous allez provoquer la confusion et de la frustration auprès de vos utilisateurs.

 

 

Pensez au responsive design

 

 Penser aux différentes interfaces optimisera vos chances de ne rater aucune occasion de visite sur votre site.

 

 

Bonus : la checklist design. Cet outil magique vous permet de faire un checkpoint sur votre liste de design à produire. Logo, branding, design system.. vous n’oublierez rien du tout ! 

 

 

➡️ Le lien du site : ici 

 

 

 Les outils à maîtriser en 2021

 

figma sketch adobe xd

Figma, Sketch et Adobe XD : les trois principaux logiciels webdesign

 

 

Sketch est conçu pour avoir un design fiable et solide. La création de librairies, de règles à appliquer  permet d’être rigoureux dans la production.

À l’opposé de ce mode de fonctionnement se trouve Adobe XD, plutôt adapté à l’itération et au mode partage. XD permet de concevoir un design assez rapidement tout en gardant de la flexibilité sur les modifications de règles. Sa plus grande force réside dans le prototypage et l’animation de maquettes, ce qui permettra au client de mieux se projeter sur le produit final.

Entre ces deux logiciels se trouve Figma.  Un outil qui ne cesse d’évoluer et qui performe à 100% sur la partie partage et communauté, avec la rigueur de sketch et l’intuitivité d’XD. Le bon compromis se situra donc essentiellement dans ce choix pour Figma.

 

 

schéma figma sketch adobe xd

 

Schéma par la chaîne Youtube ➡️ Basti UI 

 

 

Maintenant vous en savez un peu plus sur l’histoire du webdesign, ses tendances et ses règles. Vous pourrez ainsi introduire une démarche différente dans la conception de vos cahiers des charges ou même la production de sites !

 

➡️ Testez votre maturité digitale ⚓️

 

➡️ Découvrez tous nos outils magiques 🛠

➡️ Regardez en replay tous nos webinars 🖥

➡️ Ne manquez pas le prochain webinar pour monter en compétences simplement 🌱

 

 

Découvrez nos autres articles