Coulisses · Webdoc
Le making-of du webdoc "À Accra, l'envers des écrans" — choix créatifs, défis techniques et coulisses d'un reportage long-format.
Trois chapitres, une enquête au cœur du marché informel des déchets électroniques au Ghana. Un projet conçu comme un circuit imprimé, où chaque module est un témoignage, chaque trace cuivre un fil narratif.
L'équipe
Journaliste, parti à Accra pour rencontrer les ferrailleurs, les ONG et les chercheurs qui tentent de transformer le secteur informel en filière formelle.
Responsable de la rubrique Planète - Inspire à La Libre Belgique. Édition et accompagnement éditorial du dossier.
Direction artistique, design éditorial et développement front-end du webdoc. raphaelbatista.com
Infographiste à La Libre, il a réalisé la carte du Ghana qui accompagnent le reportage. Une mise en image des données pour rendre lisibles les enjeux du dossier.
Direction artistique
Le sujet imposait des couleurs terre et cuivre : terre africaine, rouille des appareils abandonnés, et surtout le cuivre, le métal le plus convoité par les ferrailleurs d'Accra. Plutôt que les verts "écolos" classiques des sujets déchets, nous avons assumé une palette ocre/cuivre qui ancre le dossier dans son contexte géographique et matériel.
Côté typographie, trois polices avec des rôles distincts :
Titres & sous-titres — caractère brut, presque architectural, en écho aux structures de fortune photographiées par Seth Moses Ellerman.
Corps des articles — un serif éditorial classique avec des italiques élégantes pour les citations.
Interface, légendes, navigation — moderne et lisible, pour tout ce qui n'est pas du contenu.
Concept
Le sujet portait littéralement sur des cartes électroniques. Plutôt que d'illustrer ce thème par des métaphores classiques (déchets, pollution), nous avons choisi de devenir la métaphore : la home présente les trois chapitres comme les composants d'une carte mère, reliés par des traces cuivre qui se dessinent au scroll.
Chaque module possède sa "puce" pulsante en haut à gauche, ses pads de connexion en bordure, et un effet d'illumination de sa trace au survol. Sur mobile, les traces sont masquées au profit d'une lecture verticale, mais l'identité PCB reste présente dans les détails (chips, pads, cuivre).
Sous le capot
Une section qui se "pin" pendant que l'utilisateur scrolle, et
dont les images défilent horizontalement au rythme du scroll
vertical. Implémenté en vanilla JS (pas de GSAP) pour rester
léger : position: sticky, calcul d'un progress 0→1,
et translate3d sur le track.
Une onde sinusoïdale dessinée image par image en <canvas>,
avec une amplitude qui suit un spring physics léger
(0.055) pour la transition entre l'état muet (ligne plate) et
l'état actif (vague cuivre). Sans librairie, ~50 lignes de code.
Effet "rideau qui se lève" sur les titres des hero, obtenu avec
clip-path: inset() + translateY et la
courbe d'animation cubic-bezier(0.22, 1, 0.36, 1)
(ease-out-quart). Aucune librairie, du CSS pur. Désactivé
automatiquement avec prefers-reduced-motion.
Inspirations
Aucun projet ne naît seul. Voici quelques sites et dossiers qui ont nourri la réflexion sur Ghana :
En chiffres
Stack technique
Un mot
Ce dossier est le fruit d'un dialogue entre un journaliste qui revient avec son carnet de terrain, un infographiste qui traduit les chiffres en images, et un développeur qui imagine une expérience pour leur donner vie. Merci à Nathan pour le voyage, à Didier pour la rigueur cartographique, et à La Libre d'avoir donné le temps et la liberté nécessaires à un format long.
— Raphael Batista, avril 2026
Vous avez aimé cette page ? Essayez le Konami Code sur la home : ↑ ↑ ↓ ↓ ← → ← → B A