Webdesign interactif

Jouer

Les gens se souviennent de ce qu'ils ont touché. Une page qui répond à ta souris ou à ton doigt t'invite à regarder autour de toi, à essayer quelque chose, à rester un peu plus longtemps. Avant, c'était de la technologie 3D difficile et complexe, des puces lentes dans les téléphones, une batterie qui se vide... compliqué ! Mais grâce à une optimisation extrême et à des pipelines d'IA automatisés, je peux maintenant placer la barre bien plus haut ! MAINTENANT, ÇA MARCHE, VRAIMENT !!

Regarde le film ci-dessous pour le voir en action :

Un globe pour la cardiologie

gpcardio.org est le Global Primary Care Cardio Network : des conférences, des mises à jour de recommandations et une veille de la littérature sur les soins cardiaques, rénaux et métaboliques, pour les médecins généralistes. La page d'accueil est un globe de points sur lequel les sociétés partenaires sont épinglées dans leur pays. Les conférences et mises à jour les plus récentes tournent autour sous forme de cartes. Fais glisser le globe et le monde tourne, touche une carte et la conférence s'ouvre, choisis une puce et seules les vidéos correspondantes restent. BAM, LE MONDE ENTIER ! Voilà ce qui s'appelle donner forme à une ambition vraiment mondiale !

VISITER GPCARDIO.ORG

Des œuvres qui courent

Pour un événement sportif, j'ai donné vie aux visuels de la designer, avec des shaders 3D et WebGL. Au départ, les couloirs jaillissent de l'ovale, suivis de confettis. Les points de la trame réagissent à ton doigt ou à ta souris, les couloirs se mettent à sprinter quand tu fais défiler la page, les sports courent vers une ligne d'arrivée avec un vainqueur différent à chaque fois, et une horloge géante compte à rebours jusqu'au jour de l'ouverture. Le dessin en direct correspond à l'œuvre originale pour 99,3 % de ses pixels, mais il est au moins 300 % plus amusant grâce à l'interactivité !

Des bâtiments qui se construisent tout seuls

Pour un bureau d'études en bâtiment et installations, quatre tours se posent étage par étage. Une ligne de balayage colore ensuite chaque étage selon son état, et l'image se stabilise en toits verts : l'état final durable. Bouge la souris et la scène tourne avec toi. Plus bas, tous les services défilent le long du processus de construction sur une seule piste horizontale, et trois anneaux glissent ensemble quand tu fais défiler la page. De la dynamique dans des actifs immobilisés ? AUCUN PROBLÈME !

Des petits bonshommes

Pour un service de santé au travail, j'ai donné un visage au personnage de leur logo. Passe la souris sur l'un d'eux et il jette un œil, touche-le et il saute, danse ou s'évanouit puis se relève, avec quelque chose à dire. Ils pleuvent dans la page pendant que tu fais défiler, et toute une foule se range en 20, 60 et 20 pour cent : absence pour cause médicale, pour des circonstances personnelles, et pour une cause liée à l'organisation.

Le conseiller en formules pose quatre questions. À chaque réponse, les petits bonshommes changent : plus de collègues, des intérimaires, et celui qui se met en arrêt maladie s'allonge. Le conseil montre ce que coûte chaque formule par an, et tu peux l'emporter tout de suite vers l'inscription ou demander un appel. La maladie et l'absence n'ont rien de drôle, mais un petit personnage qui bascule l'est d'autant plus, et c'est ce sourire qui donne à une proposition par ailleurs sérieuse son impact positif.

Rapide en mouvement

Je construis tout ça sur des années d'expérience avec la technologie du jeu vidéo : de Snake '97 à Protect Your Eggs, un jeu que j'ai créé avec mon fils de sept ans, en passant par les données d'entraînement en 3D. Les scènes 3D sont dessinées dans un worker à côté de la page, si bien que la page elle-même reste libre de réagir. Elles ne dessinent que quand quelque chose change et se mettent au repos une seconde après le dernier contact. Les petits bonshommes sont du SVG et du CSS tout simples. Derrière chaque scène 3D se cache une image fixe, pour le premier affichage, pour les téléphones qui ne peuvent pas la dessiner et pour les visiteurs qui préfèrent moins de mouvement. Pas de framework et pas de script tiers : les trois pages de concept pèsent entre 0,15 et 0,46 Mo.

Mesuré avec Lighthouse, l'outil derrière PageSpeed Insights de Google, performance de la page d'accueil, téléphone / ordinateur portable :

Lighthouse 13.5, médiane de trois mesures par page, 18 et 19 octobre 2026.

Conclusion

Est-ce que c'est amusant aussi ?! C'est ce que me demandait sans cesse un sage professeur à l'université. J'applique aujourd'hui cette « leçon » avec beaucoup de plaisir : le webdesign interactif, c'est bien plus qu'un peu de décoration. Il s'agit d'optimisme et d'un impact durable qui joue sur la curiosité naturelle ! Tu veux réfléchir toi aussi aux possibilités créatives, à une page que les gens veulent toucher ? N'hésite pas à m'envoyer un message !