1. La large diffusion du Dark Mode
Le dark mode n’est pas nouveau (Apple, Google, Netflix) mais a cessé d’être réservé aux géants de la tech : Wetransfer, Spotify ou encore Star Wars ont basculé, partiellement ou totalement, du côté obscur.
Ses caractéristiques sont un fond sombre contrastant avec les éléments au premier plan (textes, boutons, dataviz, illustrations). Son principal avantage à l’usage est de présenter des contrastes élevés qui facilitent la lisibilité pour les personnes malvoyantes ou daltoniennes.
Google Font : des caractères qui ressortent parfaitement sur le fond noir.
Swissborg et Atom Finance : la datavisualisation mise en valeur par le dark mode.
L’atelier de BNP Paribas : une immersion renforcée.
We are kettle utilise le dark UI pour faire ressortir ses graphismes.
2. Des animations partout
Sur des micro-interactions (ex. waze), de la typographie (ex. typefaces), des illustrations (ex. superscene) lors d’un scroll (ex. gegen menschenhandel) (cf. scrollytelling), ou afin de mieux visualiser un produit (ex. superscene) : les animations sont partout.
En plus d’apporter de nouvelles expériences aux utilisateur·rice·s en singularisant les interfaces, elles les rendent plus actif·ve·s dans leur navigation : le mouvement attire l’œil et le curseur vers les éléments choisis.
Il peut s’agir de micro-animations (un curseur évoluant selon les éléments survolés qu’on retrouve sur LJcom), des changements d’état sur un CTA (ex. RXlive) comme de ligne directrice structurant une page (la visualisation d’un produit en éclaté selon l’état du scroll dans la page qu’on retrouve sur Superscene).
flayks.com : les animations apportent un mouvement et un côté dynamique au site.
ILAB solutions: l’animation fait partie intégrante de ce site à l’identité visuelle gamifiée et interactive où l’utilisateur·rice peut modeler la forme centrale.
Studio Maertens : une immersion dans un univers mécanique grâce à l’ensemble des animations proposées sur le site.
Waze utilise de nombreux micro-animations rendant le site dynamique et vivant.
3. La 3D pour se projeter
Les outils permettant de créer des formes et animations en 3D sont de plus en plus populaires et abordables d’un point de vue technique. En parallèle, les navigateurs évoluent pour faciliter de plus en plus l’intégration d’éléments 3D.
Les avantages d’une visualisation 3D sont multiples : montrer un produit sous toutes ses coutures (comme le fait par exemple Apple avec ses 3D animées), mais aussi transmettre des informations qui sont plus difficiles à visualiser sur une image en 2D statique (texture, impact de la lumière sur la couleur).
Apple : propose une vue en 3 dimensions de ses écouteurs AirPods.
Hyperframe : la 3D mélée à une animation permet de mieux comprendre comment le produit fonctionne.
Meadlight propose une 3D de sa fameuse bouteille qui suit l’utilisateur tout au long de sa navigation.
Renault propose de revisualiser ses modéles mythiques grâce à la 3D.
4. Les “vraies” photos
Sature-t-on des filtres Instagram (et autres) ? En tout cas, les photos “studio” tirées de banques d’images sont moins au goût du jour. En 2022, place aux clichés à l’aspect réel. L’idée est de transmettre authenticité et proximité (ex. We are jolies, moodz).
Comme la 3D, la photographie permet de se projeter, mais aussi de se faire une idée des échelles de tailles, des matières et des couleurs.
Tesla : pas de mise en scène pour présenter la voiture sur sa fiche produit.
Spotify souhaite transmettre une certaine authenticité à travers son site culturenext.byspotify.com.
We are Jolies : des photos peu retouchés, des modèles de tous types de corps et de couleurs de peau.
5. Des typographies audacieuses
L’usage de polices de caractères format BOLD (re)fait son apparition, les images narratives laissant la place à des textes plein écran. Avec ou sans empattement, ces typographies affirment un style graphique, une identité et un discours.
Des jeux typographiques (déformations, changement de couleur) et des animations peuvent donner vie à ces textes et enrichir l’expérience des utilisateurs.
Application de l’usage de typographie en format XXL sur Azzerad.
Nikolaus Lauda : l’évolution de la narration est marquée par un jeu d’apparition typographique.
6. Un aspect brutaliste
Le brutalisme, un style d’abord architectural, est issu du mouvement moderne et connaît son apogée entre 1950 et 1980. Il se caractérise par un design minimaliste et l’utilisation de matériaux « bruts » comme le béton mais aussi le verre, l’acier ou la pierre.
A cette période, les villes détruites par la Seconde Guerre Mondiale sont en reconstruction et ces matériaux sont moins coûteux. Le brutalisme résonne ainsi avec des problématiques sociétales et une volonté d’être sans ornement, franc, géométrique : il met en avant son message.
Sur les interfaces cela donne une mise en page articulée autour des caractères et donc du discours, sans fioriture.
Purho : met en avant le texte les visuels.
La grille de mise en page semble disparaître sur 99 percent off sale.
7. Des dégradés de couleurs et des tâches vaporeuses
L’utilisation de dégradés remonte à maintenant plusieurs années (voir une dizaine).
A la base utilisés pour souligner des images sur fond blanc, ou bien pour illustrer des notions de profondeurs, celles-ci ont progressivement évoluées devenant de plus en plus complexes afin de s’intégrer au mieux dans les visuels.
Les dégradés sont utilisés directement dans la typographie (des titres par exemple) ou bien dans les illustrations, leur donnant un côté vaporeux, doux et chaleureux.
L’usage d’ailleurs de tâches vaporeuses de couleurs est quelque chose que l’on retrouve de plus en plus. Ces dernières, se situent aussi bien en arrière plan d’un visuel pour l’habiller, qu’en arrière plan d’un texte ou d’un élément cliquable comme pour attirer l’œil de l’utilisateur.
8. Un effet glassmorphism renforcé
Ce style graphique que l’on pouvait déjà retrouver sur les interfaces iOS et Microsoft (Windows Vista) commence à se faire une place de plus en plus importante.
Étant une sorte de réponse au Neumorphism qui présentait malgré son élégance des problèmes d’accessibilité, le Glassmorphism s’inspire lui, de la façon d’on reflète la lumière à travers le vers (on comprend donc mieux son nom).
Ce dernier fonctionne en représentant différents plans par un jeu de transparence : plus un élément est proche, plus il sera transparent et vis versa. Le but de cette représentation visuelle est de donner une certaine profondeur aux interfaces, tout en gardant une forme de hiérarchie visuelle.
Decimal met en avant certains éléments par l’utilisation du Glassmorphism.
L’utilisation de dégradés de couleurs renforce l’effet de transparence des éléments en premier plan sur People.
9. Renforcer son discours grâce à la Datavisualisation
Quoi de mieux que de présenter des résultats concrets, chiffrés et visuels plutôt que de belles phrases déjà toutes faites ?
L’utilisation de données pour visualiser des résultats est une tendance qui semble de plus en plus utilisée sur Internet.
Le but de montrer de façon visuelle, simple et esthétique des données chiffrées permettra de renforcer un discours. Ces données devront être traitées afin d’être rapidement compréhensibles sans que les utilisateurs n’aient à chercher une information spécifique.
Hapi utilise la représentation visuelle de données pour illustrer un discours.
Datavisual utilise des graphiques illustrant des résultats positifs visibles en un coup d’œil.
10. Le retour des 90’s ou du néo-Memphis
Ne dit-on pas que la mode est un éternel recommencement ? Cela semble en tout cas se confirmer avec un revival des années 90 (qui elles même s’inspiraient de certains styles graphiques au courant artistique du Memphis).
Couleurs vives, typographies pixélisées, animations d’illustrations minimalistes, icônes et même glitch refont leurs apparitions sur l’Internet mondial.
Tous les codes d’une interface datant des années 90 sont présentent sur le site Poolsuite
Bolder boards : des visuels et codes graphiques qui plonge l’utilisateur directement dans les 90’s.
Greta : des dégradés, des effets néons et surtout une typographie pixelisée, welcome back