Application cartographique interactive, pensée en mode sombre.

Pl. 09 / 13Étude de cas

MEMENTO

Application cartographique interactive, pensée en mode sombre.

Bon de commandeN° Pl. 09 · 2026
Client
MEMENTO
Année
2026
Rôle
Art DirectionUI/UX DesignFrontend Dev
Nature du travail
  • Web & App ✓
  • Branding
  • Print
  • 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

Interface de Memento : carte sombre de la France avec des marqueurs rouges
Pl. 09.1Vue carte, filtres de période et de catégorie

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