Illustrations de cartes

Illustrationen von Karten

Die Idee

Eine Karte zeigt die Sache selbst, vereinfacht auf das, was der Leser braucht, bewusst beschnitten, und jede Anmerkung hat einen Grund. Ein Fragment einer Benutzeroberfläche oder eines Dokuments, flach, groß, auf hellem grauen Hintergrund; drumherum einige technische Notizen in monospace, verbunden durch eine dünne Linie. Man muss die Ressource verstehen, ohne den Text der Karte zu lesen.

Das Vokabular

Jede Szene besteht aus drei bis fünf dieser Teile, niemals allen.

Visuelle Referenzen, die man sich vor dem Zeichnen einer Szene ansehen sollte:

• references/vocabulaire.png (und .svg): die zwölf Teile, jedes isoliert auf seiner Tafel, mit seiner Regel in einer Zeile.
• references/exemple-noir-et-blanc.png und references/exemple-accent-couleur.png (und .svg): dieselbe vollständige Szene in beiden Modi. Nur die Farbe des akzentuierten Elements ändert sich.
• references/accent-palette.png und .json: die zehn Farbtöne der Palette, zusammen mit ihrer sanften Version.

Teil	Was es ist
Hintergrund	Helle graue Tafel (#F3F3F2 bis #F5F5F4), Ecken 16 bis 24 px, Format 13:10. Weder Schatten noch kräftiger Rand.
Bühne (stage)	Gepunktetes Rechteck gray-300 mit einem sehr blassen Raster darin: der Arbeitsbereich. Optional, um zu sagen „dies ist ein Gestaltungsraum“.
Fenster	Weißes Fenster, Titelleiste mit drei grauen Punkten, feine Linie gray-200, sanfter Schatten. Es überragt die Bühne oder die Tafel (rechts oder unten abgeschnitten): Der Bildausschnitt ist bewusst gewählt. Adressleiste, wenn die URL wichtig ist.
Skelett	Der sekundäre Text in abgerundeten grauen Balken (gray-200), die Listenzeilen durch eine feine Linie getrennt, die Avatare als graue Scheiben. Nur das Element, das die Bedeutung trägt, hat echte Wörter („Share“, „Publish“).
Stapel	Mehrere Karten mit leichtem vertikalem Versatz gestapelt, nur die Oberkante jeder Karte sichtbar (ein Dateiname, ein Titel); die oberste ist vollständig mit Titel und Absatz. Um eine Sammlung von Dokumenten zu zeigen.
Popover	Kleine weiße Karte, die den Rand des Fensters überlappt (einen Rahmen, eine Zeile von Kästchen), stärkerer Schatten als das Fenster: Sie liegt darüber.
Annotation	Monospace-Text gray-500, 11 bis 13 px, außerhalb des Objekts platziert: ein Attribut (data-target="share"), ein Zustand ({ open: false } in einer kleinen Karte), ein Dateipfad, eine Entscheidung. Sie benennt, was das Bild zeigt, in der Sprache des Workshops.
Verbindungslinie	Dünne Linie gray-400, die von der Annotation ausgeht und mit einem 4 px gefüllten Punkt am Element endet. Gerade oder eine einzelne sanfte Kurve. Eine gestrichelte Linie für eine Rückkehr.
Schrittleiste	Horizontale Linie mit leeren Kreisen und einem monospace-Label unter jedem; der aktuelle Schritt ist gefüllt. Um die Ressource in einem Prozess zu verorten.
Kontaktabzug	Raster kleiner nummerierter Vorschaubilder (01 bis 06), nur eines ausgewählt, durch eine Verbindungslinie mit seiner vergrößerten Version verbunden. Für eine Serie, deren ein Element betrachtet wird.
Maßangabe	Eine gezeichnete Messung (Linie, zwei Endstriche, „4 px“), wie in einer annotierten Skizze. Für ein Detail mit Präzision.
Nummerierte Markierungen	Gefüllte Scheiben 1, 2, 3, auf den Elementen platziert, in der Lesereihenfolge. Mit einem Cursor, wenn eine Aktion ausgeführt wird.

Zwei Modi

Die Skill wird in einem von zwei Modi gestartet, die nur eines ändern: die Farbe des einzigen akzentuierten Elements. Hintergrund, Oberflächen, Skelett, Annotationen, Komposition und Interaktionen bleiben identisch.

Modus	Wie man ihn aufruft	Das akzentuierte Element
Schwarz-Weiß	/card-illustrations noir et blanc, „in Schwarz-Weiß“, „monochrom“, „farblos“	volle Tinte gray-900 (weißer Text darauf)
Farbakzent	/card-illustrations accent, „mit Farbakzent“, „in Farbe“	ein Farbton der Palette, abgeleitet von einer stabilen Kennung

Wahl des Modus: Zuerst das Argument oder die Wörter der Anfrage. Ohne Angabe den Modus der bereits online befindlichen Szenen übernehmen, damit die Bibliothek einheitlich bleibt; gibt es keine, dann Schwarz-Weiß. Niemals beide Modi im selben Raster mischen: Ein Moduswechsel bedeutet, alle sichtbaren Karten gemeinsam umzustellen. Im Code ist der Modus eine einzige Konstante (ACCENT_MODE: 'ink' | 'color'), die von allen Szenen gelesen wird, um die Bibliothek mit einer Zeile umzuschalten.

Der Akzent: Grau und ein Hauch von Farbe (Modus Farbakzent)

Die Szene bleibt grau (Hintergrund, weiße Oberflächen, Skelett, Annotationen). Nur ein Element trägt einen Farbakzent: der aktuelle Schritt, das ausgewählte Vorschaubild, die Maßangabe, das angehakte Kästchen, der primäre Button, das ausgewählte Element. Alles andere ist grau oder Tinte. Der Akzent ist den Illustrationen vorbehalten, sodass die Site-Oberfläche (Buttons, Links, Navigation) monochrom bleibt.

Die Palette umfasst zehn Farbtöne mit derselben Helligkeit und Sättigung in OKLCH (L 0,655, C 0,11), nur der Farbton ändert sich. Dies ist die lebendigste Einstellung, die alle zehn Farben im sRGB-Gamut und mit mindestens 3:1 auf Weiß (Schwelle für grafische Elemente) hält. Jeder Farbton hat eine sanfte Version (L 0,95, C 0,03) für eine getönte Markierung oder einen hellen Hintergrund. Farbtabelle in references/accent-palette.png, Werte in references/accent-palette.json.

Name	Akzent	Sanft
rot	#CB756E	#FFE7E4
koralle	#C87A56	#FFE9DE
orange	#BF8242	#FDEBDA
bernstein	#AF8B37	#F8EDD8
grün	#63A266	#E3F4E2
smaragd	#42A680	#DDF5E9
türkis	#0DA5A5	#D8F5F5
himmel	#389DC7	#DBF3FF
blau	#6B90D4	#E4EFFF
violett	#9284CE	#EEEBFF

Verwendungsregeln:

• Ein Farbton pro Szene, zufällig, aber stabil ausgewählt: Eine Funktion accentFor(id) leitet den Farbton aus der Kennung der Ressource ab (einfacher Hash), um auf Server und Browser dieselbe Farbe zu erhalten, ohne Hydratationsfehler. Nicht mit Math.random() arbeiten.
• Auf einem vollen Akzent ist der Text weiß und fett (mindestens 11 px); auf einem sanften Hintergrund nimmt der Text den vollen Akzent an.
• Niemals zwei Farbtöne in derselben Szene, niemals ein Gradient zwischen Farbtönen. Eine grüne und orange Verfügbarkeitsleiste bleibt eine Ausnahme, bei der die Farbe das Thema ist.
• Referenzbild: Eine Tafel mit UI-Elementen, bei der der aktive Tab getönt, der primäre Button voll, das Kontrollkästchen farbig und der Schieberegler in einem hellen Farbton auf einem grau karierten Hintergrund (in sanfterer Version) ist.

Einen Farbton hinzufügen: Berechne ihn mit L 0,655 und C 0,11, überprüfe, ob er im sRGB-Gamut liegt und 3:1 auf Weiß erreicht, und platziere ihn dann zwischen seinen farbtonmäßigen Nachbarn.

Komposition

• Das Objekt links oder in der Mitte, die Annotationen rechts oder darunter, niemals über dem Inhalt.
• Der Bildausschnitt schneidet ab: Ein Fenster, das über die Tafel hinausragt, wirkt größer und realer als ein vollständig dargestelltes, verkleinertes Fenster.
• Großzügige Ränder der Tafel (8 bis 10 %); drei bis fünf Teile; wenn man zögert, ein weiteres hinzuzufügen, fügt man es nicht hinzu.
• Lesbar in Kartengröße (ca. 350 px Breite): Text mindestens 11 px, einschließlich monospace.
• Schriften: Eine serifenlose Schrift für die simulierte Oberfläche, system-monospace (ui-monospace, font-mono) nur für Annotationen.

Was die Szene zeigen soll

Das Fragment sagt, was die Ressource ist und wozu sie dient, ohne ihre interne Funktionsweise zu zeigen. Ein Workshop für kollektive Intelligenz wird durch seine Tafel gezeigt (Post-its von mehreren Händen, das ausgewählte Post-it mit seinen Stimmen), eher als durch seine zeitliche Aufteilung; eine Checkliste durch ihre abgehakten Kästchen; ein Ritual durch seine beiden Treffen in der Woche. Wenn das Fragment einer Erklärung bedarf, um verstanden zu werden, ist es das falsche Fragment. Annotationen präzisieren, sie gleichen kein unscharfes Bild aus.

Bei Hover

Nur eine Interaktion pro Szene, die sagt, was das Dokument tut: Ein Kästchen wird angehakt, die nächste Markierung füllt sich, das Popover hebt sich an, das nächste Vorschaubild wird ausgewählt. Transform und Opazität, 300 ms, eine sanfte Beschleunigungskurve, nur Zeigegeräte, höchstens ein paar Pixel.

Implementierung (React und Tailwind)

• Eine Komponente pro Tafel (der Hintergrund) und eine Komponente pro Szene, ausgewählt durch die Kennung der Ressource.
• Einige von allen Szenen gemeinsam genutzte Bausteine: eine Oberfläche (weiße Karte, sanfter Schatten), eine Markierung, ein Skelettbalken, die Konstanten für die Hover-Interaktion (Dauer, Verschiebung).
• Dieselbe Render-Funktion versorgt das Raster, die Karten „zum Fortsetzen“ und die Karussells.
• Die Detailseite einer Ressource kann sich mit der Sache selbst öffnen (Diagramm eines Modells, Folien eines Decks) anstatt mit ihrer Vorschau.

Eine Ressource hinzufügen

1. Ein Satz: Welches Fragment stellt die Ressource dar, welches ist das einzige Element, das die Farbe annimmt, welche Annotation (höchstens zwei) benennt es?
2. Wähle drei bis fünf Teile aus dem Vokabular. Schreibe die Szene in HTML und Tailwind, positioniert in Prozent der Tafel, die Wörter in einem Wörterbuch pro Sprache (geschützte Leerzeichen auf Französisch).
3. Füge sie zum Szenenauswähler hinzu, zusammen mit ihrer Hover-Interaktion.
4. Erfasse das Raster bei 1280 px in 2x und bei 390 px, im Ruhezustand und bei Hover. Überprüfe: Lesbar in Kartengröße, nur eine Farbe auf nur einem Element, Annotationen außerhalb des Objekts, nichts ohne Grund abgeschnitten.

Was verworfen wurde

• Isometrische „Papier“-Blätter: Sie wirken wie physisches Material.
• Vorschaubilder eines verkleinerten Diagramms: Text unlesbar, zu viele Elemente.
• Zeitliche Aufteilung eines Workshops: Sie zeigt die Mechanik, nicht die Sache.
• Verläufe, mehrere Farben in einer Szene, gesättigte Farben außerhalb der Palette.