
Pl. 09 / 13Étude de cas
MEMENTO
Application cartographique interactive, pensée en mode sombre.
- Client
- MEMENTO
- Année
- 2026
- Rôle
- Art DirectionUI/UX DesignFrontend Dev
- Nature du travail
- Web & App ✓
- Branding
- Motion
- Social media
- Illustration
- Livrables
- Conception de l’interface
- Développement front et back
- Outils
- React 19
- TypeScript
- MapLibre GL
- Zustand
- Firebase
- GSAP
- Tailwind CSS
- Three.js
- MapLibre
- Vite
Le brief
Memento est une application cartographique interactive conçue pour explorer l'histoire sous un angle différent : celui des événements sombres, mystérieux et tragiques qui ont marqué notre monde. Le projet est né de la volonté de fusionner la narration historique, la visualisation de données géospatiales et une esthétique immersive "dark". L'objectif était de transformer une simple base de données d'événements (crimes, catastrophes, lieux hantés) en une expérience utilisateur captivante et éducative.
Au programme
- Carte interactive des événements historiques
- Filtre par période
- Filtre par catégorie
- Recherche par lieu ou par date
- Suggestion d’événements
La démarche
Le développement de Memento a suivi une approche axée sur la performance et l'immersion visuelle. 1. Design System & Identité : Création d'une interface ultra-sombre utilisant un jeu de contrastes forts, des typographies serif élégantes (Playfair Display) et des micro-animations fluides pour renforcer l'aspect mystérieux et prestigieux du site. 2. Moteur de Cartographie : Intégration de React-Map-GL (Mapbox/MapLibre) avec des styles de tuiles personnalisés. Mise en place d'un système de clustering performant pour gérer des centaines de marqueurs sans sacrifier la fluidité. 3. Chronologie Interactive : Développement d'une timeline dynamique permettant de filtrer les événements à travers les siècles, créant ainsi une véritable "machine à remonter le temps" visuelle. 4. Animations & Interactivité : Utilisation intensive de GSAP pour les transitions d'interfaces et de Three.js pour ajouter de la profondeur visuelle. 5. Optimisation : Implémentation de techniques SEO avancées et support PWA complet pour une expérience fluide sur mobile, transformant l'application en une véritable encyclopédie de poche.
Planches

Palette
Couleurs relevées sur les visuels du projet.
- Fond#111010C0 M6 J6 N93
- Panneaux#272B2FC17 M9 J0 N82
- Rouge#8C0001C0 M100 J99 N45
- Texte#DBDBDBC0 M0 J0 N14