Contexte
Ryoko Tsunami est un projet réalisé en deuxième année d’Architecture Transmédia. Le thème de départ était le Japon, avec une collecte de données autour des tsunamis et plus particulièrement autour de l’impact du tsunami de 2011.
À partir de ces données, nous avons choisi de ne pas rester uniquement dans une approche documentaire. Nous avons transformé le sujet en une histoire plus sensible, portée par des personnages et par une expérience de scrollytelling.
Concept du projet
Le projet raconte l’histoire de Haruto et Nagi. Haruto est un homme, Nagi est un poisson, et tous deux se retrouvent liés par le désastre du tsunami de 2011. Ensemble, ils traversent un récit marqué par la perte, la mémoire et les conséquences de cette catastrophe.
Le site avance grâce au scroll : en descendant dans la page, l’utilisateur découvre progressivement l’histoire, les visuels, les animations, les sons et les informations liées aux tsunamis au Japon.
Objectif
L’objectif principal était de créer une expérience émotionnelle et interactive. Nous voulions parler d’un sujet réel et difficile, mais en passant par une narration accessible, visuelle et sensible.
Le projet devait aussi montrer comment des données peuvent être intégrées dans une expérience narrative. L’idée n’était pas seulement de montrer des informations, mais de les faire ressentir à travers un parcours.
Ce que nous avons réalisé
Nous avons créé un site en scrollytelling dans lequel l’histoire avance au rythme du scroll. Le projet combine du HTML, du CSS et du JavaScript, avec des animations, des éléments visuels, des données et une ambiance sonore.
Nous avons aussi travaillé une direction artistique proche de la bande dessinée et du comics. Le projet est passé par plusieurs storyboards, différentes versions de l’histoire, des recherches graphiques, des personnages dessinés et des assets visuels intégrés au site.
Le sound design faisait également partie de l’expérience. Les sons et ambiances permettaient d’accompagner le récit, de renforcer l’immersion et de rendre la découverte du site plus agréable.
Travail de groupe
Ce projet a été réalisé en groupe avec Alexandre Bosch, Jérémie Jourdain et Adrien Meyer. Chacun a apporté des compétences différentes, ce qui a permis de construire une expérience plus complète.
Alexandre Bosch a travaillé sur la programmation, les animations et la data visualisation. Son rôle a permis de relier la partie technique du site avec la présentation des données.
Jérémie Jourdain a travaillé sur l’écriture, le design et l’organisation du temps. Il a participé à la construction de l’histoire, à l’identité visuelle et au suivi du projet.
Adrien Meyer a travaillé sur l’écriture, le design et la recherche. Il a participé à la collecte d’informations, à la narration et à la construction graphique du projet.
De mon côté, j’ai travaillé sur la programmation et les animations. J’ai participé au développement du site, à l’intégration des éléments visuels et à la mise en place de l’expérience de scrollytelling.
Direction artistique
La direction artistique du projet s’est orientée vers un style proche de la bande dessinée. Nous avons travaillé avec des contours noirs, des trames, des lignes de vitesse et des ambiances visuelles fortes pour donner au site une identité plus marquée.
Les personnages ont également évolué au fil du projet. Nous sommes passés par des prototypes, des moodboards, des brouillons et du character design avant d’arriver à des assets plus aboutis.
Choix techniques
Le projet a été développé avec HTML, CSS et JavaScript. Ces langages ont permis de construire le site, de gérer la mise en page, les animations et l’expérience de scroll.
Nous avons aussi utilisé Figma et Adobe Illustrator pour la création graphique, Clip Studio Paint pour le dessin numérique, et Visual Studio Code pour le développement.
Ce que ce projet m’a appris
Ce projet m’a permis de mieux comprendre le potentiel du scrollytelling. Le scroll n’est pas seulement une manière de naviguer : il peut devenir un outil de narration, de rythme et d’immersion.
J’ai aussi appris à travailler sur un projet où plusieurs dimensions doivent fonctionner ensemble : histoire, données, animations, design, développement web et son. Chaque élément doit servir l’expérience globale.
Ce que je pourrais améliorer
Avec plus de temps, j’aimerais améliorer certaines transitions, rendre les animations plus fluides et renforcer encore l’intégration des données dans le récit.
J’aimerais aussi pousser davantage le confort utilisateur, notamment sur mobile, afin que l’expérience reste agréable sur différents écrans.
Galerie
