Dans le cadre de ma belt UI, un programme de formation interne à Ippon Technologies, j’ai parcouru divers articles sur les tendances webdesign. J’ai sélectionné sept tendances qui se démarquent ou sur lesquelles j’ai eu envie d’insister pour 2024. Je les partage avec vous à titre de veille graphique.
J’aborderai dans un premier temps les tendances centrées utilisateurs. Étant particulièrement sensible au sujet de l’accessibilité numérique, je fais un focus dessus. Je présente ensuite les tendances artistiques et les tendances “technologiques”. Je parlerai également des tendances générales observées dans le secteur B2B.
Les tendances centrées utilisateurs
Design écologique : La tendance sobre
L'importance de la durabilité et de l'écologie se reflète dans les choix de design, avec l'utilisation de motifs naturels et de matériaux organiques. Mais également par des interfaces épurées qui réduisent l'impact écologique. Cette tendance souligne une prise de conscience croissante de l'impact environnemental des créations graphiques.
Afin de creuser davantage le sujet, je vous recommande de consulter le Référentiel général d'écoconception de services numériques (RGESN) - 2024
Elles ne reflètent pas toujours l’implication réelle de l'entreprise dans une démarche d’éco-conception et se limitent parfois à surfer sur la vague.
Des entreprises peuvent ainsi utiliser abondamment des images de forêts, de plantes et d'animaux, de code couleur “green” ou un design épuré sur leur site web pour donner une impression de connexion avec la nature et de respect de l’environnement, même si leurs pratiques ne sont pas réellement durables et leur site ne s’inscrit pas dans une réelle démarche de réduction de leur impact écologique.
Il est encore difficile de faire la part du greenwashing d’un véritable engagement. Il est possible néanmoins de se faire une idée de l’empreinte carbone d’un site et de croiser la donnée avec l’engagement affiché de la marque.
La marque Patagonia par exemple affiche un score E et pourtant affiche un engagement écologique. Sans pointer du doigt, je veux souligner que la cohérence n’est pas encore toujours au rendez-vous.
Accessibilité Numérique : En avant les bonnes pratiques
L'accessibilité devient une priorité incontournable en 2024, influençant fortement les choix de design. L’accent est mis sur les critères WCAG à respecter. Les interfaces sont conçues pour être consultables, navigables et interactives pour tous. En terme de design, je vous donne quelques exemples des impacts et je vous recommande vivement l'article de Margaux sur le sujet :
Couleurs et contrastes. Les utilisateurs malvoyants ou ayant une déficience de la vision des couleurs peuvent avoir des difficultés à lire des textes peu contrastés. On met donc l’accent sur des contrastes de couleurs suffisants pour que le texte et l’ensemble des composants graphiques soient lisibles. On veille également à ce que les informations ne soient pas transmises uniquement par la couleur.
Zoom et espacement de lettres. Pour les utilisateurs malvoyants ou avec déficiences visuelles ou cognitives, il est utile de pouvoir redimensionner le texte sans perte de contenu ou de fonctionnalité. Ce qui nécessite des interfaces adaptatives qui s’ajustent à différentes tailles d'écran et dispositifs, assurant l'accessibilité sur tous les supports, ordinateur, mobile et tablette. Mais aussi de changer l’espacement des lettres et l’interlignage et de s’assurer que le contenu est toujours lisible.
Définition d’un état focus visible. Cela permet aux utilisateurs de savoir où se trouve leur curseur lorsqu'ils naviguent au clavier. Cela est particulièrement important pour les personnes ayant des handicaps visuels ou de motricité qui ne peuvent pas utiliser une souris et dépendent du clavier pour interagir avec le contenu.
Texte alternatif pour les images porteuses d’informations. Les utilisateurs qui naviguent avec un lecteur d’écran notamment les non-voyants ne peuvent pas voir les images. Il faut donc que l’information véhiculée soit transmise autrement. Il s’agit donc de fournir des descriptions textuelles pour les images, graphiques, et autres contenus non textuels. On pense par exemple aux infographies détaillées qui peuvent être téléchargeables au format texte par exemple.
Langage simple et clair. Pour aider les utilisateurs ayant des déficiences ou des troubles cognitifs, on préfèrera utiliser un langage simple et direct et éviter le jargon.
Afin de permettre aux personnes utilisant des technologies d’assistance (par exemple, un lecteur d’écran) d’obtenir l’information concernant la nature, le type et le format de saisie attendus, les formulaires fournissent des instructions, des étiquettes et les contrôles interactifs sont clairs et pertinents.
De la même façon, les champs de formulaire proposent des suggestions pour corriger les erreurs d'entrée et des fonctionnalités pour vérifier et confirmer les informations saisies.
Les composants graphiques complexes comme les date-picker intègrent une solution alternative telle que la saisie de la date via un champ formulaire accessible au clavier
Les sites prévoient au moins un lien d’accès rapide en haut de page, accessible au clavier permettant d’accéder directement au contenu principal.
Les sites pensent à mettre deux systèmes de navigation parmi la navigation principale, un plan de site ou un moteur de recherche sur l’ensemble du site.
Pour les utilisateurs ayant une déficience cognitive ou des troubles de l’attention, on tend également à minimiser ou à proposer des options de désactivation pour les animations et mouvements automatiques qui peuvent également causer des problèmes aux utilisateurs ayant des troubles vestibulaires. On pense par exemple à l’usage des carrousels qui proposent des boutons de lecture et de pause de rotation du diaporama ainsi que des flèches de navigation clairement identifiables.
Le design System de l’Etat propose des composants accessibles. De plus en plus de sites gérés par l’Etat l’utilisent (20 000 à date environ). La consultation de la documentation permet d’avoir des informations et des exemples de bonnes pratiques.
Pour en savoir plus, vous pouvez aussi consulter l’article passionnant de Figma : L’avenir des designs systems est dans l’accessibilité.
Les tendances technologiques
L’IA : La grande nouvelle tendance.
L'intelligence artificielle (IA) révolutionne le design graphique en générant des visuels innovants et personnalisés. Les outils d'IA peuvent créer des images, des illustrations et même des animations, facilitant la production de contenus visuels complexes et économisant du temps pour les designers. L'IA permet également de personnaliser les visuels en temps réel en fonction des préférences et des comportements des utilisateurs.
De nombreux outils graphiques ont intégré l’IA tandis que de nouveaux ont émergé. Par exemple :
Adobe Firefly est un outil d'intelligence artificielle conçu pour aider les créateurs de contenu à générer et à personnaliser des visuels rapidement et facilement.
DALL-E 2 et MidJourney sont des outils développés par OpenAI et d'autres entreprises qui utilisent des modèles de génération d'images basés sur des descriptions textuelles. Les utilisateurs peuvent entrer des descriptions et recevoir des images générées qui correspondent à ces descriptions.
Voilà un exemple de génération d’image avec IA avec le même message : “bords du Canal Saint-Denis avec des guinguettes et des espaces verts”
Avec Adobe Firefly
Avec Dall-E
Certains plugins permettent également de faciliter le design d’interface. Par exemple,
Autoflow est un plugin Figma qui permet de générer automatiquement des flux de navigation et des prototypes basés sur des wireframes existants.
Magicul utilise l'IA pour transformer des croquis en maquettes haute fidélité directement dans Figma, Adobe XD, Sketch.
De la même façon, Stark est un plugin Figma qui propose un contrôle de l’accessibilité des interfaces (je ne l’ai pas encore testé donc je le mentionne sans donner d’avis).
Les dernières mises à jour de Figma avec des suggestions d’IA sont consultables ici.
Odaptos est un outil (payant) qui utilise l'IA pour analyser les tests utilisateurs et identifier les zones problématiques dans les interfaces. Cela aide les équipes à comprendre les réactions et les émotions des utilisateurs, et à ajuster les designs en conséquence.
Conception 3D : la tendance immersive
L'utilisation d'éléments 3D continue de croître, offrant une profondeur et une dimension supplémentaires aux designs web. Les modèles 3D, lorsqu'ils sont bien intégrés, peuvent transformer un site web en une expérience visuelle immersive et moderne.
Les tendances artistiques
Couleurs audacieuses : la tendance émotion, engagement et impact.
Les réseaux sociaux comme Instagram et Pinterest, où le visuel joue un rôle central, ont popularisé les couleurs vives et audacieuses. Les études en psychologie des couleurs montrent que certaines couleurs peuvent influencer le comportement des utilisateurs. Par exemple, le rouge peut inciter à l'action, le bleu à la confiance et le vert à la tranquillité. Utiliser ces couleurs de manière stratégique peut améliorer l'expérience utilisateur et atteindre les objectifs du site.
Les couleurs audacieuses offrent aux designers une plus grande flexibilité créative pour expérimenter et innover. Elles permettent de créer des compositions visuelles plus intéressantes et dynamiques, ajoutant une dimension artistique au design.
Rétro-futurisme : la hype
Inspirée des visions passées du futur, cette tendance combine des éléments rétro avec une esthétique futuriste, créant des visuels nostalgiques et innovants à la fois. Les textures et les motifs rétro sont modernisés pour s'intégrer aux designs contemporains. Bien que cela s'applique actuellement principalement à des projets personnels, culturels et artistiques, il reste à voir si cette tendance s'étendra à des interfaces plus diversifiées. Pour découvrir certains des projets créatifs.
Les tendances graphiques B2B (Business to Business - transactions interentreprises)
- Éléments de confiance et de professionnalisme : Dans le secteur B2B, les visuels doivent inspirer confiance et professionnalisme. L'utilisation de palettes de couleurs sobres, de typographies épurées et de mises en page structurées est cruciale pour établir une image sérieuse et crédible.
- Infographies et données visuelles : Les infographies sont un outil puissant dans le B2B pour transmettre des informations complexes de manière claire et engageante. L'intégration de graphiques, de diagrammes et de visualisations de données permet de communiquer efficacement des insights et des résultats.
- Design axé sur l'utilité : L'efficacité et l'utilité priment dans les designs B2B. Les interfaces utilisateur doivent être intuitives, facilitant l'accès rapide aux informations et la réalisation des tâches. Les designs épurés et fonctionnels sont privilégiés pour améliorer l'expérience utilisateur.
- Personnalisation : La personnalisation des visuels et des expériences utilisateur gagne en importance. Les entreprises cherchent à offrir des contenus adaptés aux besoins spécifiques de leurs clients professionnels, utilisant des données pour créer des expériences sur mesure.
Sources :
https://graphicmama.com/blog/3d-website-examples
https://www.sortlist.fr/blog/flat-design/
https://www.blogduwebdesign.com/blog/webdesign/tendances-webdesign-2024.html
https://lareclame.fr/dossier-tendances-graphiques-2024-290031
https://www.blogduwebdesign.com/blog/graphisme/tendances-graphiques-2024.html
https://www.codeur.com/blog/tendances-web-design/
