cover 1280 × 720 · 16:9
bannière de couverture, card recadrée (marges 8 %)
Média · Composition
Les ressources.
Deux visuels par ressource : la cover qui dit ce qu'on va apprendre, et l'illustration qui enseigne un élément d'interface. Composés en HTML, rendus via la médiathèque.
01 · Les formats
Deux cadres
illustration 1600 × 900 · 16:9
figure pédagogique dans la page
02 · La cover
Une accroche-objectif, rien d'autre
L'accroche dit ce qu'on va apprendre, lisible sans le titre — et passe deux tests : la clarté (on comprend le sujet en lisant seulement l'image) et l'anti-slogan (si la phrase pourrait vendre autre chose, on jette). C'est le seul texte de la cover.
Le verbe d'apprentissage
« Savoir… », « Comprendre… », « Bien… » + le sujet.
Le périmètre chiffré
« Les N … pour … », « N commandes, N gestes ».
La durée réelle
« X en N minutes » — correspond à la réalité de la ressource.
Le libellé descriptif
« Sujet : ce que c'est. »
Le climat suit la nature du sujet — nocturne pour le technique, clair pour les concepts — et l'objet central évoque la nature du contenu. Le type cheatsheet porte son badge, l'unique exception aux labels.
bien-formuler
« Les 4 principes pour bien formuler sa demande à l'IA. »
commandes-cheatsheet
« Les commandes Claude Code. »
03 · L'illustration
La maquette filaire
Une illustration = un élément d'interface enseigné. La fausse UI recule — traits filet, textes gris, labels réels en Geist — et l'élément enseigné est le seul porteur du vermillon, mise en évidence + annotation eyebrow. L'esprit de la figure technique, en interface.
sidebar
« La barre latérale : la navigation qui reste. »
modale
« La modale : décider avant de continuer. »
formulaire
« Le formulaire : saisir et envoyer. »