Contexte
2024, j’ai contacté Nabil Elderkin (réalisateur américain pour Kendrick Lamar, Dua Lipa, TheWeeknd et photographe pour les Daft Punk) afin de le convaincre de refaire son portfolio. Après une bonne collaboration, me voilà recommandé auprès d’un réalisateur de film sur Los Angeles.
Domaine
Visual design
Webflow Dev
User testing
Prototyping
année
2024
Logiciel & plugin
Figma
Phosphor icons
Webflow
Problèmes
Nabil souhaitait une grande galerie d’images dynamique et cliquable pour présenter ses photos, avec un total de 1 500 visuels. Problème : Webflow limite chaque collection CMS à 100 items et n’en autorise que deux par page. Impossible donc d’afficher toutes les images simplement en dupliquant les collections.
La galerie devait également être responsive et permettre à l’utilisateur de redimensionner l’affichage pour voir les images en grand ou en mosaïque. Un script JavaScript personnalisé a été développé pour contourner les limites de Webflow et gérer dynamiquement l’affichage.
Petite subtilité supplémentaire : sur mobile, la galerie devait automatiquement passer d’un layout en flex à un layout en block pour garantir une expérience fluide et lisible.
Lorsqu’un utilisateur clique sur une image de la galerie (chargée dynamiquement depuis le CMS), il doit pouvoir faire défiler les visuels suivants sans quitter l’affichage. Un slider sur mesure a donc été intégré pour refléter précisément la disposition et l’ordre des images dans la galerie.
La lightbox native de webflow étant beaucoup trop limitée, il fallait donc créé cela from scratch.
Pour la partie vidéo, la logique est similaire à celle de la galerie d’images : un slider a été intégré à l’aide de Swiper JS. Nabil souhaitait que l’utilisateur puisse naviguer fluidement d’une vidéo à l’autre, sans avoir à revenir en arrière ou recharger la page.
L’ensemble devait rester entièrement dynamique, connecté au CMS de Webflow, pour lui permettre de gérer facilement les contenus depuis l’interface d’administration.
Résultats
Pour pouvoir avoir qu'une seule collection et un nombre illimité d'items j'ai utilisé les custom attribut de Finsweet.
Côté front-end, un script JavaScript personnalisé gère l’organisation, le rendu adaptatif et le comportement interactif de la galerie. Il permet notamment :
de redimensionner dynamiquement les images (grande taille vs mosaïque)
de basculer automatiquement en display: block sur mobile pour une meilleure lisibilité
de maintenir une performance fluide malgré le grand volume de contenus
Cette solution permet de dépasser les contraintes natives de Webflow tout en garantissant une expérience utilisateur fluide, responsive et maintenable côté client.
Pour répondre au besoin d’une navigation fluide après le clic sur une image de la galerie, un système de slider entièrement personnalisé a été mis en place. La lightbox native de Webflow s’étant révélée trop limitée (notamment en matière d’animation, de personnalisation du layout et de compatibilité avec les contenus dynamiques), il a été nécessaire de construire cette fonctionnalité from scratch.
J’ai utilisé la librairie Swiper JS, parfaitement intégré à la galerie CMS. L’ensemble a été pensé pour rester totalement responsive et offrir un rendu fluide, même sur mobile ou lors de transitions rapides.
Des ajustements précis ont été réalisés sur les animations (vitesse, easing, transition entre les slides) afin de coller exactement à la direction artistique souhaitée par Nabil. Le slider est également synchronisé avec les données du CMS, garantissant une expérience cohérente même lors de mises à jour régulières des visuels.
Pour la section vidéo, l’objectif était de créer une expérience de lecture en séquence, sans rupture dans le parcours utilisateur. J’ai intégré un composant Swiper JS configuré spécifiquement pour gérer des contenus vidéo, avec une navigation horizontale fluide et sans rechargement de page.
Chaque vidéo est alimentée dynamiquement depuis le CMS de Webflow, permettant une mise à jour simple et autonome par le client.
Conclusion
Ce projet a été l’occasion de repousser les limites techniques de Webflow en intégrant des fonctionnalités dynamiques avancées, tout en garantissant une gestion de contenu simple pour le client. Grâce à une combinaison sur mesure de JavaScript et de Swiper JS, l’expérience utilisateur reste fluide, responsive et cohérente, malgré un volume important de contenus.
Une attention particulière a été portée à chaque détail d’interaction, afin de proposer une galerie immersive et un parcours vidéo sans friction, parfaitement alignés avec les attentes du client.
Damien Ferrero
UI & Product Designer