11 Septembre 2023

Suivre la tendance web design en 10 inspirations, made in 2023

Le webdesign, c’est un monde en perpétuel mouvement dans lesquel se mêlent tendances tantôt modernes, rétro, authentiques, rebelles ou encore brutales. Ces tendances reflètent notre société bien plus que l’on ne pense, des courants idéologiques à la conception de pointe en matière de graphisme. En tant que fans incontestés du design web, nous avons exploré les 10 tendances de l’année 2023 qui sont pour nous tout simplement immanquables.

Suivre la tendance web design en 10 inspirations, made in 2023

studio seja

Agence de développement spécialisée dans la conception de sites vitrine, e-commerce et applications web.

1. Une police surdimensionnée

Des polices survoltées, surdimensionnées et qui semblent manger la majeure partie de votre écran, voilà une tendance qui semble s’installer dans le temps. Ces caractères taille XXL habillent les titres, sous-titres, voire même des paragraphes, et deviennent un élément central de la conception webdesign. Cette manière audacieuse de présenter du texte ne date pas tout à fait d’hier, mais elle est plus que jamais dans l’ère du temps ! Nous-mêmes avons fait le pari de jouer avec cette tendance sur notre page d’accueil.

Mais alors, pourquoi proposer des typographies aussi gigantesques à ses utilisateurs ? Après tout, ils ne doivent pas tous.tes être si myopes, non ?

Pour attirer l’attention

Le concept est assez simple : plus le texte est grand, plus on le voit. C’est même d’ailleurs la première chose qui interpelle l’utilisateur lorsqu’il arrive sur le site. Ces gros titres et slogans deviennent impossibles à ignorer, tandis qu’un texte plus petit peut aisément être survolé. Pour mettre en avant un message clé ou guider les visiteurs vers un appel à l’action, ou CTA, c’est très efficace !

Pour plus de simplicité

Parfois, les choses évidentes deviennent les plus simples. Dans un univers digital saturé d’information, un court texte prenant la moitié de votre écran aura plus d’effet qu’un paragraphe caché dans un coin. Un design épuré accompagné d’une typographie surdimensionnée offre un message clair, direct et sans distraction.

Pour être mémorable

Vous ne le savez peut-être pas, mais les polices d’écriture, comme tout élément de design, sont liées à l’émotion. Une police douce, lascive, ou au contraire brute et incisive n’aura pas le même effet sur vos visiteurs. Multipliez sa taille par 10 et vous avez un résultat encore plus impactant.

exemple site typographies surdimensionnées
Nombreux sont les sites web qui utilisent des typographies surdimensionnées comme éléments de design.

 

2. L’inclusivité au centre du design

L’inclusivité et la diversité sont des valeurs qui, selon nous, sont centrales au sein de tous types de représentation dans notre société. Le web ne fait pas exception, et pour qu’il puisse s’adresser à tout le monde sans exception, l’inclusivité et la diversité doivent prendre part au processus de design.

Le webdesign de l’année 2023 prône un désir de représenter tous les humains sans exception, en promouvant des valeurs telles que la mixité sociale, l’égalité des genres, les droits LGBT ou encore la représentation des personnes valides comme non-valides.  

La binarité homme/femme abrogée

Certaines marques prennent le pari de s’acquitter de l’habituel clivage homme/femme pour laisser place à une neutralité de genre qui s’adapte ainsi à tous.tes. L’usage du langage inclusif, celui de pronoms neutres ou encore la suppression des catégories homme/femme sur certains sites sites e-commerce en sont des exemples.

Une accessibilité travaillée

Si l’accessibilité est souvent citée comme critère de base d’ergonomie pour un site internet, elle n’est pas toujours respectée. Un webdesign inclusif pousse l’accessibilité encore plus loin en s’assurant que le site est utilisable et agréable à parcourir pour tous types d’utilisateurs.

La représentation sans discrimination

A travers toutes les représentations graphiques d’humains, qu’il s’agisse de photos stock ou d’illustrations, un webdesign inclusif prendra garde à représenter tout le monde. Chaque visiteur doit pouvoir se sentir accueilli et valorisé.

extrait du site "girls who code girls"
L’initiative “Girls Who Code Girls” propose de créer son propre personnage de jeu vidéo à travers un message d’inclusivité pour toutes les femmes dans le domaine de la tech.

 

3. Des mondes immersifs en 3D

Si vous n’êtes encore jamais tombés sur un site web dont le design vous emmène parcourir un monde en 3D, vous avez loupé une expérience incroyable. Certains sites vous font partir à l’aventure et à la découverte d’un monde tridimensionnel dans lequel vous allez pouvoir naviguer et interagir dans le plus beau des émerveillements.

Une conception technologique de pointe

Pour réaliser ces mondes 3D qui parviennent à tenir et à être aussi fluides que possible sur un site web, les développeurs doivent mettre en œuvre leurs compétences techniques et utiliser les dernières technologies, souvent inspirées de la réalité virtuelle ou augmentée, pour offrir la meilleure expérience possible aux visiteurs.

Une créativité incroyable

Ces balades le long de mondes 3D offrent un visuel et une immersion qui sont rarement possible dans des sites web dits classiques, qui souvent n’offrent que quelques animations limitées. Le mouvement, les décors, les sons, la musique et les éléments sont travaillés jusque dans les moindres détails de la conception.

extrait du site "atmos"
Site Atmos propose une aventure complètement immersive avec un avion.

 

4. Le glassmorphism et l’iridescence

Très en vogue mais surtout très récents, le grassmorphism et l’iridescence se retrouvent tout simplement partout lorsque l’on recherche des idées de webdesign moderne. Ces techniques de design jouent avec les lumières, les effets et les couleurs mais aussi sur la profondeur. Ils apparaissent comme futuristes, avant-gardistes et possèdent une dimension parfois très poétique.

Le glassmorphism

Le glassmorphism se caractérise par l’utilisation de fonds translucides, qui ressemblent un peu à du verre dépoli, qui viennent jouer avec les couleurs vives, les flous et les superpositions. Un effet de profondeur se créé ainsi sur les éléments de design du site web.

L’iridescence

L’effet d’iridescence provient à l’origine d’un effet d’optique dans laquelle la couleur d’un objet change selon l’angle de la lumière qui l’atteint. On retrouve l’iridescence sur les bulles de savon, les ailles de papillons ou encore certains coquillages. Dans le web design, l’iridescence donne l’impression de scintiller, et provoque une émotion d’émerveillement.

exemple site iridescence et glassmorphisme
Sur ce site web, l'iridescence et le glassmorphism sont tous deux représentés.

 

5. Les effets de défilement parallaxe

Les effets de défilement dits « parallaxes » ne datent en vérité pas d’hier, mais continuent d’être une valeur sûre en termes de conception webdesign. Ils désignent une technique dans laquelle l’arrière-plan d’une page web se déplace à une vitesse différente des éléments superposés lors du scroll, ou défilement, de la page. C’est un élément qui vient ainsi améliorer l’expérience utilisateur lors de la navigation sur la page.

Le parallaxe donne un effet de profondeur au site

En jouant sur les superpositions et la différence de vitesse de mouvement des éléments, l’effet parallaxe crée un sentiment de profondeur en rappelant un peu le concept de 3D sans pour autant en être.

Le parallaxe dynamise le site web

Comparé à un défilement classique, l’effet parallaxe donne une véritable impression d’animation et de mouvement. C’est un effet qui n’est, en plus, pas nécessairement difficile à mettre en place et décidemment moins lourde qu’une animation !

 

extrait du portfolio du designer joonas sandell
Nombreux sont les sites web basés sur le scroll parallaxe, comme le portfolio du designer finlandais Joonas Sandell.

6. Le dark mode à l’honneur

Si le dark mode est de plus en plus utilisé dans le webdesign, c’est tout simplement parce que la demande utilisateur n’a de cesse de grandir. Le dark mode propose ainsi un design sur fond noir ou très foncé, avec des textes blancs ou très clairs. Le concept apparaît comme simple, mais en vérité, il se doit d’être travaillé différemment qu’un mode clair classique, au risque de ne pas offrir l’expérience design que l’on aurait souhaité.

Pour plus de modernité

Le noir est souvent perçu comme plus moderne, plus sobre mais aussi plus élégant et raffiné que le blanc. La majorité des sites web étant encore sur fond clair, un fond sombre offre encore, même s’il devient petit à petit la norme, un sentiment de nouveauté et de modernité.

Pour jouer avec les couleurs

Impossible de travailler les couleurs de la même manière que sur un fond clair : les couleurs doivent trancher, ressortir correctement sur l’abysse profonde du site. Ce qui permet de jouer avec des tons et des jeux de lumière qui n’auraient jamais pu être poussées à leur juste potentiel autrement.

extrait d'un site utilisant le dark mode
Le dark mode est à l'honneur sur de nombreux sites internet, tous secteurs confondus.

 

7. Les dégradés avec du grain

Petits nouveaux de notre époque, arrivés à peu près en même temps que la tendance glassmorphisme et la tendance iridescente, les dégradés avec du grain commencent peu à peu à s’imposer comme trend design avant-gardiste. Cette technique, pour faire simple, associe les dégradés de couleurs, que l’on connaît déjà tous.tes très bien, au grain, aussi appelé bruit, cette texture que jusqu’à présent on faisait tout pour faire disparaître.

L’apaisement du dégradé

Les dégradés de plusieurs couleurs, de deux à trois maximum en principe, ont tendance à nous apaiser, contrairement aux couleurs uniques qui sont plus affranchies et incisives. Un mouvement lent se créé entre deux teintes, qui fusionnent dans la douceur et se mêlent pour venir former une sorte de flou chromatique.  

L’étrange nostalgie du grain

Le grain, c’est la texture qui rappelle les écrans de télévision, les pochettes d’albums et les photographies analogiques d’il y a quelques décennies. C’est une connexion instantanée, bien que parfois inconsciente, vers notre jeunesse ou vers des époques passées qui ne reviendront jamais.

exemple de site avec un dégradé avec grain
Le dégradé avec du grain est une tendance très moderne qui s'impose peu à peu sur tous les supports graphiques.

 

8. Le rétro des années 70

On a peut-être l’impression qu’il n’y en a que pour les années 90 ces derniers temps, et pourtant en webdesign ce sont les 70s qui reviennent à la mode. La tendance hippie, nostalgique, affranchie et libre, parfois même un peu psychédélique, séduit celles et ceux qui parfois n’ont pas connu cette décennie.

Des couleurs chaudes

Le naturel est central à la tendance seventies : des couleurs chaudes, terreuses et naturelles telles que le marron, l’ocre, le vert et l’orange se mêlent à des imprimés fleuris et organiques.

Une nostalgie authentique

Le charme nostalgique des époques révolues séduit énormément, et les années 70 possèdent d’autant plus une certaine authenticité que l’on retrouve difficilement de nos jours. Le retour à un esthétique vintage refuse la digitalisation stérile de notre monde au profit d’un univers chaleureux ou l’authenticité et la connexion humaine sont privilégiées.

La contre-culture d’époque

Le mouvement hippie, bien plus que des fleurs et des trips psychédéliques, c’était avant tout un symbole fort de contre-culture et de rébellion. Face à la méfiance inspirée par les grandes entreprises et les institutions, l’esthétique hippie y oppose des notions de liberté et d’indépendance.

extrait du site d'aura bora
La marque Aura Bora a tout misé sur une identité visuelle très hippie des 70s.

 

9. Les animations 3D comme éléments de design

Les animations 3D sont souvent réservées à des designs hautement immersifs ou à la technologie de pointe de certains secteurs. On la retrouve aussi dans la présentation de produits sur certains sites e-commerce, pour donner à l’utilisateur une expérience précise qui va lui permettre de passer à l’achat avec plus de confiance envers l’entreprise.

Mais la conception et l’usage d’animations 3D n’est pas nécessairement forcé de servir un but plus poussé que celui du design. De plus en plus de sites web créent des éléments de design qu’ils vont ensuite venir animer grâce à la 3D, afin de rendre leur site plus moderne et plus créatif lors de la navigation.

extrait du site de l'agence raw
L’agence RAW utilise l’animation 3D sur son site comme partie intégrante du design et de son identité visuelle.

 

10. Le brutalisme

Le brutalisme se fait sa propre place au sein des tendance design de nos jours grâce à son avant-gardisme et son excentricité, particulièrement au sein des générations les plus jeunes. Il a tendance à choquer, parfois même à apparaître comme déplaisant ou aux antipodes du design web, et c’est absolument ce que le brutalisme cherche à faire.

Inspiré du mouvement brutalisme dans l’architecture, alors caractérisé par des formes épurées, une fonctionnalité évidente et des matériaux bruts, le brutalisme dans le web reprend un peu les mêmes notions.

L’ultrasimple, sans chichis

La base du brutalisme, c’est d’offrir à l’utilisateur ce qu’il est venu chercher, sans fioritures et sans détour. Pas d’éléments de design pour le distraire de sa navigation, pas d’animations pour lui faire perdre son temps : un contenu brut, offert de manière rude.

Une audace presque effrontée

En s’affranchissant des codes du design auxquels sont habitués les utilisateurs, le brutalisme est très audacieux car il sait qu’il va diviser et que les visiteurs peuvent tout simplement détester. Parfois, le brutalisme devient effronté lorsqu’il dépasse les limites de la lisibilité et lorsqu’il utilise des images volontairement de mauvaise qualité.

Une rébellion contre le beau

Il y a une certaine authenticité dans la volonté du brutalisme de s’affranchir du beau pour proposer du vrai. Le beau, l’esthétique, les couleurs et les mouvements vont nous faire ressentir des émotions, vous nous distraire et, selon le brutalisme, nous mentir et nous manipuler. Le brutalisme, c’est être brutalement honnête, c’est nous faire réfléchir sur nos attentes et ce qu’elles peuvent potentiellement nous dire de nous-mêmes.

exemple site brutalisme
Le brutalisme nous rappelle facilement l'époque où les perspectives de design sur le web étaient fortement limitées.

Votre prochaine agence de développement