Studio B —
de nouvelles façons
de raconter l'info.
Donner une adresse au département design.
Studio B est le département design et innovation d'IPM Group. Il produit des visuels, des infographies, des grands formats, des outils data et des prototypes pour La Libre, DH Les Sports+ et Paris Match Belgique. Tout ce travail existait, mais nulle part au même endroit : chaque dossier vivait sur son URL, sans récit commun ni trace de ce qu'il avait apporté au titre.
Le studio existe depuis 2017 ; le site est sa première adresse publique. Conception, direction artistique, design et développement : moi, pour un studio que je dirige et qui compte deux personnes.
Les travaux, le labo, la méthode.
Cinq sections et pas une de plus. Les travaux, une ligne par projet, filtrables par média et par type. Le labo, qui montre ce que le lecteur ne voit jamais : chartes, ateliers et outils internes qui font gagner du temps aux rédactions. La méthode, l'équipe, et une FAQ courte pour les questions qu'on nous pose le plus.
« Une ligne pour un projet, même quand il a été décliné sur plusieurs médias. »
Chaque fiche porte le brief de la rédaction, les choix de design et de code, et l'impact mesuré pour le titre. C'est la quatrième règle de la méthode maison, et la plus exigeante : mesurer ce qui change plutôt que montrer ce qui est joli.
Encre, papier, un seul bleu.
Une base encre et papier, un unique accent bleu électrique, et les couleurs des titres du groupe strictement réservées aux étiquettes de média : le magenta La Libre, le rouge DH, l'encre Paris Match. Un projet se repère à sa pastille, jamais à un aplat décoratif. Le mode nuit suit le système, avec un interrupteur dans la barre qui force le jour ou la nuit et s'en souvient.
Une grotesque, une italique, une mono.
Trois familles libres, auto-hébergées en woff2, aucune requête vers un CDN.
Schibsted Grotesk
Titres et interface. Quatre graisses, de 400 à 900. La 900 porte les titres de section, la 500 l'interface.
Instrument Serif
Les mots d'accent. Uniquement en italique, et uniquement sur un mot par titre : raconter, récents, travaille. Le contraste vient de là, pas d'une couleur de plus.
JetBrains Mono
Les métadonnées. Numéros, étiquettes, années et compteurs. La même mono que ce portfolio, ce qui n'est pas un hasard.
Trois défis techniques.
HTML sémantique, CSS sans framework, JavaScript vanilla en modules ES, zéro dépendance.
Le B en points
La lettre est dessinée dans un canvas invisible puis échantillonnée sur une grille qui couvre tout le hero : un point par case, plein dans la lettre, minuscule ailleurs. Chaque point est relié à sa position d'origine par un ressort amorti (raideur 0,06, friction 0,82), le pointeur les repousse dans un rayon de huit pas, et un clic lance une onde circulaire qui avance de 14 px par image. Le canvas se met en pause dès qu'il sort de l'écran.
Le texte d'abord
Tout le contenu est dans la source HTML, lisible par les moteurs de recherche et par les assistants. Les animations viennent par-dessus, jamais à la place. C'est une règle de la méthode du studio avant d'être un choix technique.
Une grille suisse, une échelle fixe
Douze colonnes, gouttières de 24 px, largeur maximale de 1280 px, dans la lignée de Josef Müller-Brockmann. Les espacements suivent une échelle fixe : 8, 16, 24, 32, 48, 64, 96. Aucune valeur n'est posée au jugé.
Un tableau de bord, sans cookie.
Le site embarque son propre tableau de bord, stats.php, protégé par
mot de passe : projets les plus cliqués, clics par média, rubriques lues, partages
et surprises découvertes. La mesure est entièrement locale, sans cookie et
sans conserver d'adresse IP, avec le même moteur que le dossier Ligue des champions.
Le site vient d'être mis en ligne, le compteur part donc de zéro : les chiffres ci-dessous sont ceux du studio, pas encore ceux de son audience.
Vingt-cinq surprises et une porte de service.
Le code Konami ↑ ↑ ↓ ↓ ← → ← → B A ouvre les coulisses du site : la charte complète, la stack, les réglages du canvas. Et une deuxième surprise y attend encore.
Ailleurs, vingt-cinq surprises sont cachées dans les pages. Elles parlent du studio et de son fondateur : racines portugaises, passions, projets. La progression reste dans le navigateur du visiteur, et les surprises au clavier se jouent sur ordinateur.
Ce que ce projet a changé.
Studio B donne un nom et une adresse à un travail qui, jusqu'ici, se résumait à une liste d'URL. Pour les rédactions, c'est un catalogue de ce qu'on sait faire et de ce qu'on peut rejouer. Pour le studio, c'est une discipline : chaque nouveau dossier doit désormais pouvoir dire ce qu'il a apporté au titre, parce qu'une fiche vide se voit immédiatement.