Mise en situation
Gloire, Pouvoir, Fortune… Un homme avait amassé tous les trésors du monde : Gold Roger, le Roi des Pirates.
Dans le cadre du projet Design Fiction, il nous a été demandé de réaliser un site web responsive sur base d’un « What If » pouvant exister dans un futur proche et étant relié à une nouvelle technologie.
Le choix du thème restait libre tant que ce dernier était cohérent dans le temps, le What If étant sensé se dérouler dans 10 à 15 ans environ.
Phase de recherches
« Mon trésor je vous le laisse, il est à vous. » Et ceux qui oseront le chercher en découvriront bien plus qu’une simple pièce.
Une fois le briefing donné, j’ai tout de suite commencé à chercher mon What If. Cette phase de recherche n’a pas été très longue étant donné que l’idée de le faire sur le manga One Piece m’est venue tout de suite en tête.
J’ai ainsi construit cette phrase : « Et si la chasse pour le One Piece devenait réelle ? ». J’ai fait valider l’idée auprès de mon professeur et j’ai ensuite réfléchi à comment mettre tout ça en forme.
Je suis arrivé à la conclusion que je voulais faire un site de lecture immersif dans lequel l’auteur écrivait une lettre d’adieu afin de lancer cette chasse au trésor.
Création du design
Ma chasse au trésor n’a pas de règles, tous les coups sont permis. Vous n’êtes pas des enfants de cœur, vous êtes des pirates.
Pour le design, j’ai décidé de partir sur quelque chose de très sobre et minimaliste.
Premièrement, j’ai choisi mes couleurs. Blanc cassé pour le fond, noir pour les écritures et du rouge clair pour ajouter de la variation dans la lecture du site.
En termes d’éléments décoratifs, j’ai ajouté les noms des chapitres en bas de l’écran (sur les côtés) et également leur traduction en japonais (sous forme de caractères).
Le site est assez aéré afin de laisser le lecteur respirer durant sa lecture.
Développement du site
Mon trésor, je vous le laisse… Que la nouvelle ère de la piraterie commence.
Pour le code, j’ai essayé de nouvelles choses. Vu que le design est assez sobre, il fallait compenser avec des animations pour que le lecteur ne s’ennuie pas durant la visite du site.
Tous les textes et images apparaissent de manière smooth sur la page avec GSAP. Ils disparaissent et réapparaissent lors du scroll avec ScrollTrigger.
Chaque fois qu’on entre dans un nouveau chapitre, le titre de celui-ci et sa traduction sont changés en bas de l’écran avec une animation d’entrée/sortie.
Pour finir, j’ai ajouté de la musique afin d’améliorer l’expérience de lecture.
Autres projets
Envie de découvrir mes autres projets ? Cliquez sur les cartes afin de voir ce qu’elles renferment.
Data Clash
2025
Clash entre différents artistes
Janus
2024
Site critique du streamer ZeratoR