top of page
Logo les défricheurs
  • Photo du rédacteurAdrien da Cunha Belves

Plus que l'horizontal, le verticalisme me pulsionne : vive le scrollytelling !

Dernière mise à jour : il y a 4 jours

Vous avez probablement remarqué un changement massif dans la façon dont les gens consomment du contenu. Les sites web classiques avec du texte et des images sont révolus, alors que les vidéos engageantes sont désormais omniprésentes. Nous vivons à l'ère de TikTok et YouTube, où quelques secondes suffisent pour captiver avec des visuels et des récits intrigants.


En effet, un rapport TikTok de 2024 a révélé que les publicités utilisant des techniques de narration induisant la curiosité ont vu leurs temps de visionnage augmenter de 1,4 fois.


Le même principe s'applique au design web. Les gens veulent consommer du contenu engageant, et le scrollytelling est le dernier moyen de raconter des histoires avec votre design web et d'optimiser votre processus de création. Voyons quelques outils, stratégies et exemples de scrollytelling pour rester à la pointe de l'une des tendances les plus populaires en matière de design web aujourd'hui. Et quand vous êtes prêt à raconter l'histoire de votre prochain client, découvrez les capacités de design de Wix Studio pour le faire de manière créative.


téléphone

Qu'est-ce que le scrollytelling ?


Le scrollytelling est une technique de narration visuelle qui utilise des éléments interactifs sur une page web pour raconter une histoire. En tant que web designer, vous présentez les informations de manière à ce que les utilisateurs vivent l'histoire en faisant défiler la page. Le New York Times a introduit le scrollytelling dans le journalisme avec "Snow Fall: The Avalanche at Tunnel Creek", qui a remporté le prix Pulitzer en 2013. Mais ce concept de narration numérique n'est pas limité au journalisme en ligne, chaque marque ayant sa propre histoire à partager.


Comment fonctionne le scrollytelling ?


Le scrollytelling est similaire aux bandes dessinées, où une histoire visuelle est divisée en différentes sections et scènes. Au lieu de simplement du texte et des images, le scrollytelling inclut des animations web, des éléments interactifs et des vidéos de fond. Au fur et à mesure que l'utilisateur fait défiler, la page web révèle de nouveaux contenus, fait avancer l'histoire et transmet les informations de manière engageante.


Les Composants du Scrollytelling


Comme pour la création d'une histoire, les composants du scrollytelling dépendent de votre imagination. Vous pouvez transporter les lecteurs dans un écran 2D avec des infographies, ouvrir les portes de votre cinéma 3D en ajoutant des animations ou offrir une expérience cinématographique via des graphiques interactifs, un audio immersif et des curseurs thématiques. Voici les composants typiques du scrollytelling :


  • Infographies : Utilisez des graphiques, du texte et des données pour la visualisation des données afin de transmettre des messages et des idées de manière efficace.

  • Graphiques 3D : Ajoutez de la profondeur et du réalisme aux visuels en créant des représentations tridimensionnelles de scènes pour une expérience plus immersive.

  • Défilements interactifs (verticaux et horizontaux) : Permet aux lecteurs d'explorer le contenu en faisant défiler verticalement ou horizontalement, encourageant l'interaction et fournissant un moyen intuitif de consommer du contenu.

  • Défilement parallaxe : Créez de la profondeur et un sentiment de mouvement en déplaçant différentes couches de la page web à des vitesses variées pour ajouter un élément dynamique à votre histoire.

  • Animations de texte : Ajoutez des effets de texte pour souligner des informations importantes, guider l'attention des utilisateurs et améliorer l'expérience globale du site web.

  • Pages dynamiques : Personnalisez l'expérience utilisateur en ajoutant des transitions pour changer le contenu et la mise en page des pages web en réponse aux interactions.

  • Éléments audio : Rendez votre marque plus mémorable et offrez une expérience engageante en ajoutant des éléments audio, tels que la narration, la musique de fond ou les effets sonores pour accompagner le texte ou les boutons d'appel à l'action (CTA).


Les avantages du scrollytelling en design web


Le scrollytelling permet de créer des expériences web captivantes et immersives qui offrent plusieurs avantages pour les clients et les visiteurs du site :


  • Les clients se souviennent de la marque : En racontant votre histoire de manière engageante, vous pouvez rester dans l'esprit des clients et obtenir de meilleurs résultats avec votre page de destination.

  • Les clients bénéficient d'une expérience personnalisée : En offrant des éléments interactifs tels que des infographies, des graphiques et des animations qui répondent aux actions des utilisateurs, vous personnalisez l'expérience de chaque visiteur.

  • Les clients restent jusqu'à la fin : Le scrollytelling offre une expérience captivante qui incite les gens à s'engager jusqu'à la fin. Les visiteurs explorent activement votre site web, consomment votre contenu et comprennent ce que votre marque a à offrir.


Comment utiliser le scrollytelling dans le contenu web


Créez des expériences interactives engageantes avec quelques bonnes pratiques :


  • Brainstormez une histoire captivante : Commencez par un récit qui résonnera avec votre public.

  • Planifiez votre structure : Divisez votre histoire en sections ou scènes déclenchées par les actions de défilement de l'utilisateur.

  • Choisissez des éléments multimédias : Sélectionnez des images, vidéos, animations, infographies ou clips audio à ajouter à votre template réactif pour compléter votre récit.

  • Ajoutez des fonctionnalités interactives : Intégrez des effets de parallaxe, des animations déclenchées par le défilement et d'autres fonctionnalités qui répondent aux actions des utilisateurs.

  • Optimisez les performances : Assurez-vous que l'expérience de scrollytelling est fluide sur différents appareils en optimisant la vitesse de chargement des pages.


6 Meilleurs exemples de scrollytelling pour l'Inspiration


01. Un appel à l'émotion


Les meilleures histoires font ressentir quelque chose. Cette histoire de scrollytelling commence par des animaux apparaissant tristes. En faisant défiler, vous voyez comment l'humanité affecte les animaux : la fumée sortant des cheminées, les océans jonchés de déchets et les cornes d'animaux symbolisant la menace de la chasse.


wix studio template

02. Une approche moderne d'un classique


Tout le monde connaît le livre classique de Lewis Carroll "Alice au Pays des Merveilles". Les web designers de cet exemple de scrollytelling l'ont modernisé de manière interactive et surprenante. L'ensemble du site est réactif aux mouvements des curseurs des utilisateurs.


wix studio template


03. Un portfolio engagé


Maya Lynne Adar, une designer graphique multidisciplinaire, montre qu'il est possible d'appliquer le scrollytelling à un site portfolio. Plutôt que de montrer une multitude de projets, Maya a activé des animations au survol pour mettre en avant chaque projet individuellement.


wix studio template


04. Une histoire de marque captivante


BLUXSTUDIO est un excellent exemple d'application du scrollytelling à un site de marque. Il utilise des éléments de scrollytelling tels que le défilement parallaxe, des animations déclenchées par le défilement et des graphiques 3D.


wix studio template


05. Le voyage d'un héros


The Boathouse utilise le scrollytelling pour son site de marque en présentant son autobiographie. En défilant, vous découvrez tout ce que The Boathouse a accompli, les processus sous-jacents et les résultats attendus.


wix studio template


06. Une plongée profonde dans le processus


Eliran Vahdi utilise le scrollytelling pour illustrer son processus créatif. L'histoire commence avec un astronaute disparaissant dans les nuages et, au fur et à mesure que vous faites défiler, vous suivez le parcours d'Eliran, de sa passion pour l'espace à la quantité de café consommée pendant la conception de son site web.


wix studio template

Comments


bottom of page