Ghana —
l'envers de
nos écrans.
Comment on a fabriqué ce dossier.
Au Ghana, une économie parallèle de traitement des appareils électroniques s'est développée. Nathan Scheirlinckx est parti à Accra pour rencontrer les ferrailleurs, les ONG et les chercheurs qui tentent de transformer le secteur informel en filière formelle. Trois chapitres, une enquête au cœur du marché informel des déchets électroniques.
Ma mission : direction artistique, design éditorial et développement front-end du webdoc. Le concept central est venu vite — puisque l'enquête parle littéralement de cartes électroniques, le dossier devient sa propre métaphore.
Une enquête en circuit fermé.
Plutôt que d'illustrer le thème par des métaphores classiques (déchets, pollution), j'ai 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).
Terre et cuivre.
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, j'ai assumé une palette ocre/cuivre qui ancre le dossier dans son contexte géographique et matériel.
Trois voix, trois rôles.
Boldonse — titres & sous-titres. Caractère brut, presque architectural, en écho aux structures de fortune photographiées par Seth Moses Ellerman.
Crimson Pro — corps des articles. Un serif éditorial classique avec des italiques élégantes pour les citations.
Quicksand — interface, légendes, navigation. Moderne et lisible, pour tout ce qui n'est pas du contenu.
Trois défis techniques.
Le carrousel scroll-jacké. 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.
Le wave canvas du bouton audio. 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.
Les révélations de titre style NYT. 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).
Désactivé automatiquement avec prefers-reduced-motion.
Le projet, par les chiffres.
Une équipe, une histoire.
- Nathan Scheirlinckx — Journaliste, reportage & photographies. Accra, Ghana.
- Gilles Toussaint — Édition, responsable rubrique Planète-Inspire, La Libre.
- Didier Lorge — Infographiste, cartographie du Ghana.
- Raphael Batista — Direction artistique, design éditorial, dev front-end.
Ce que ce projet a changé.
Ghana est le projet où j'ai définitivement abandonné les librairies JS lourdes pour le storytelling éditorial. Tout — du scroll-jack au canvas audio, en passant par les révélations de titre — tourne en vanilla. Résultat : un dossier qui charge vite, se lit fluidement sur mobile, et reste maintenable.
Le concept de page dev/making-of que tu lis maintenant est né ici aussi.