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. Les zones minées y sont marquées en vert toxique — la couleur des cartes officielles de déminage utilisées par les ONG sur place.
Noir, blanc, et un vert toxique.
Le sujet imposait une palette froide. Noir charbon pour la gravité, blanc pour les zones de respiration éditoriale, et un vert acide (#7BC242) emprunté aux cartes de déminage officielles : c'est la couleur des zones « confirmées contaminées » dans les rapports du HALO Trust et de la FSD. Une couleur instantanément lisible pour qui connaît le terrain, troublante pour le grand public.
Deux serifs, un condensé.
PP Editorial New — display, italiques marquées, pour les titres et les accroches de chapitre. Une serif éditoriale moderne, juste un peu plus stricte que les classiques, pour ne pas verser dans le pathos.
Inter — corps des articles. Sans-serif lisible, bien adaptée aux paragraphes longs et aux légendes. Sans concession sur la performance.
Suisse Int'l Mono — légendes photos, numéros de chapitre, statistiques. Le condensé monospace évoque les rapports techniques d'ONG — un clin d'œil discret au registre du sujet.
Trois défis techniques.
La carte interactive. Carte SVG dessinée par Didier, intégrée en CSS pur. Hover sur une région → tooltip avec données du HALO Trust. Tout est statique mais ressenti comme dynamique. Zéro librairie de cartographie, ~80 lignes de CSS et 30 lignes de JS.
L'habillage audio des témoignages. Cinq victimes témoignent, certaines en ukrainien, doublées par l'équipe Pôle image de La Libre. Lecture audio intégrée avec waveform visuel synchronisé en canvas (similaire à la vague de ce portfolio, d'ailleurs — c'est là que l'idée est née).
Reveal scroll-based des chiffres. Les statistiques clés (1 400 victimes, 139 000 km², 389 morts) s'animent quand elles entrent dans le viewport via un counter qui ramp de 0 à la valeur cible. IntersectionObserver + requestAnimationFrame, pas de librairie de tween.
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.
- Virginie Nguyen Hoang — photojournaliste, reportage en Ukraine.
- Svitlana Horieva — fixeuse et traductrice sur le terrain.
- Gregory Sherban — fixeur et traducteur sur le terrain.
- Sabine Verhest — journaliste, édition.
- Didier Lorge — infographiste, cartographie.
- Raphael Batista — graphiste, design éditorial, développement front-end.
- Pôle image de La Libre — doublage audio des témoignages : Christel Lerebourg, Lina Triniac, Magdalena Kolaj, Simon Bradfer, Maxime Daix.
- The HALO Trust & FSD — données de déminage et accès terrain.
- Fonds pour le journalisme — soutien financier au projet.
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 aussi le projet qui m'a poussé à abandonner définitivement les librairies JS lourdes pour des grands dossiers éditoriaux. Vanilla canvas, CSS Grid, IntersectionObserver — tout tourne sans bundler. Mon making-of de portfolio en est l'héritage direct.