L'Ukraine,
le pays le plus
miné au monde.
Une enquête au cœur d'un pays contaminé.
Depuis 2022, l'invasion russe a fait de l'Ukraine l'un des territoires les plus contaminés par les mines au monde. Plus de 1 400 victimes civiles, dont 389 morts (21 enfants). Environ 139 000 km² potentiellement contaminés — la superficie de la Grèce. Terres agricoles, forêts, zones habitées, tout est concerné.
La photojournaliste Virginie Nguyen Hoang a passé plusieurs mois sur le terrain pour documenter cette urgence. Ce webdoc, soutenu par le Fonds pour le journalisme, est le résultat de cette enquête immersive en quatre chapitres : victimes civiles, déminage, agriculture, pollution.
Ma mission : design éditorial et développement front-end. Un dossier sombre, grave, où l'interface devait s'effacer pour laisser parler les images et les témoignages — sans jamais perdre en rythme.
La retenue comme langage.
Sur un sujet aussi grave, la tentation aurait été d'en faire trop — explosions stylisées, motion design dramatique, typographie agressive. J'ai choisi l'inverse : une grille typographique sobre, presque journalistique, qui laisse toute la place aux photographies de Virginie. L'interface est un cadre, pas un spectacle.
« Chaque chapitre ouvre sur une grande image silencieuse. Pas de titre flashy, pas de pop-up, juste un numéro et un thème. Le lecteur entre dans le sujet comme on entre dans une galerie. »
Une carte interactive de l'Ukraine, dessinée par Didier Lorge, ancre géographiquement l'ensemble. Le dossier s'ouvre sur une vidéo aérienne en plein écran — un champ ukrainien filmé par The HALO Trust — sans coupure, sans musique forte. Le ton est posé en dix secondes : on ne vient pas pour le spectacle.
Cuivre, doré, et un noir profond.
J'ai écarté d'emblée les couleurs attendues — pas de bleu/jaune Ukraine, pas de rouge sang, pas de gris militaire. Ces choix-là auraient parlé à la place du sujet. À la place, une palette terre : un cuivre chaud comme accent principal, un doré pâle pour les hiérarchies secondaires (chiffres, citations, numéros de chapitre), et un noir profond pour les pages immersives qui font respirer entre les passages de lecture en fond blanc.
Le cuivre n'est pas un choix décoratif. Il évoque la terre, le métal des obus, et — moins évident — la couleur que prennent les sols ukrainiens contaminés au plomb et au cadmium dans les rapports de pollution. Une couleur qui se tient en lecture longue, qui ne fatigue pas, et qui résiste au temps : si on doit republier ce dossier dans dix ans, il ne sentira pas l'année 2026.
Une display, une polyvalente.
Une stratégie typographique radicale : une seule display pour les titres, une seule sans-serif pour absolument tout le reste.
Abril Fatface
Display, pour les titres de chapitre et les accroches. Une serif moderne aux contrastes marqués qui assume la dimension éditoriale du dossier. Juste assez de gravité pour ne pas être neutre, sans tomber dans la dramatisation. Réservée aux titres — jamais en sous-titres ou intertitres — pour préserver son impact.
Josefin Sans
Absolument tout le reste. Intro, sous-titres, labels, numéros de chapitre (« 01 / 12 »), compteurs et chronos audio, corps des articles, légendes, menu, mentions de bas de page. Une seule famille pour le corps évite la cacophonie qu'on voit souvent sur les longs formats, et tient la lecture sur quatre chapitres sans fatiguer l'œil. Le numérique passe en mono via font-variant-numeric: tabular-nums pour éviter le saut de chiffres sur les compteurs.
Trois défis techniques.
Trois pièces de plomberie qui doivent rester invisibles à la lecture.
La sticky audio bar
Quand le lecteur lance le témoignage de Tatiana, Vasyl ou Olena, il ne devrait pas être contraint de remonter pour le couper quand le téléphone sonne. Une barre flottante en pilule apparaît en bas de l'écran à la lecture : titre du témoin, mini-progression, play/pause, croix de fermeture.
Elle persiste sur tout le scroll, dans n'importe quelle section. Backdrop-filter, animation slide-up à 450ms en cubic-bezier(.22, 1, .36, 1), synchronisation bidirectionnelle avec les players inline. UX façon mini-lecteur Spotify, adaptée à un contexte éditorial — le composant dont je suis le plus fier sur ce dossier.
Le carrousel scroll-jacké
Le diaporama de Vasyl et Tatiana — 12 images séquentielles racontant leur vie après l'amputation — fonctionne en scroll-hijacking : la section se pin à 100vh, les slides défilent horizontalement au rythme du scroll vertical.
La hauteur de la section est calculée dynamiquement en JS pour permettre N écrans de défilement horizontal, avec un compteur et une progress bar synchronisés via requestAnimationFrame. Sur mobile, bascule auto en scroll-snap horizontal natif — le scroll-hijacking ne pardonne pas au doigt.
Le sound design discret
Une ambiance sonore tourne en boucle sur l'index du dossier — un pad méditatif accordé à 888 Hz, presque inaudible (volume 0.5), qui crée une atmosphère contemplative avant l'entrée dans les chapitres durs. Des sons de hover légers s'activent au survol des spines de chapitres, avec un cooldown de 120 ms pour éviter la saturation.
Toggle on/off accessible en permanence, persisté en localStorage. Off par défaut sur les chapitres : on n'ajoute pas de musique sur des témoignages de victimes.
Reconnu par Awwwards.
Le webdoc a été repris par Awwwards en avril 2026. Une fierté particulière sur ce projet, parce que la reconnaissance vient récompenser non pas une prouesse visuelle mais le travail d'équilibre éditorial — laisser parler le sujet sans le décorer.
Le dossier a aussi été cité dans plusieurs revues de presse spécialisées en data journalism comme exemple de traitement éditorial sobre d'un sujet difficile. Le brief intérieur : « si on doit y revenir dans dix ans, ça doit tenir ». L'identité visuelle a été pensée pour vieillir.
Le projet, par les chiffres.
L'équipe au complet.
Un dossier de cette ampleur n'existe que parce qu'une équipe entière y a cru. Voici la sienne.
Photojournaliste. Plusieurs mois sur le terrain en Ukraine pour documenter la contamination — déminage, agriculture, témoignages de victimes civiles.
Gregory Sherban
Fixeurs et traducteurs sur le terrain en Ukraine. Coordination des rencontres, interprétariat, accès aux zones contaminées.
Journaliste à La Libre. Édition et accompagnement éditorial du dossier, écriture des chapitres et structuration narrative.
Infographiste à La Libre. Cartographie des zones contaminées et visualisation des données du HALO Trust et de la FSD.
La Libre
Christel Lerebourg, Lina Triniac, Magdalena Kolaj, Simon Bradfer, Maxime Daix — doublage français des témoignages enregistrés en ukrainien.
Le HALO Trust et la Fondation suisse de déminage (FSD) ont fourni les données et l'accès terrain. Le Fonds pour le journalisme a soutenu financièrement la production du dossier.
Direction artistique, design éditorial et développement front-end du webdoc. raphaelbatista.com
Ce que ce projet a changé.
Ukraine est sans doute le projet le plus exigeant émotionnellement de ma carrière. Travailler des heures sur des images de zones minées, écouter en boucle les témoignages de victimes pendant le motion design — il a fallu apprendre à préserver la distance professionnelle sans perdre l'empathie. Le brief personnel : ne jamais transformer la douleur en spectacle.
Côté technique, c'est le projet qui m'a poussé à isoler enfin mes composants critiques (carousel, audio, sticky bar) dans des fichiers JS et CSS dédiés, framework-agnostic. Vanilla JS, IntersectionObserver, scroll-jacking maison, CSS variables — tout est portable et réutilisable d'un dossier à l'autre. La structure pose les bases d'une vraie design system éditoriale pour les prochains grands formats de La Libre.