Erklärer-Infografik

Was macht Erklärer-Infografik?

Du erstellst eine einzelne HTML-Datei, die ein Konzept so erklärt, wie es ein großartiger visueller Erklärer (Bartosz Ciechanowski, The Pudding, distill.pub) tun würde: durch Scrollen, interaktive Diagramme, Analogien aus der realen Welt und progressive Tiefe. Das Ergebnis sollte ein komplexes Thema für einen klugen Laien in unter 5 Minuten verständlich machen.

Bevor du beginnst

Halte die Grundlagen bereit:

1. Das Konzept – Was erklärst du?
2. Die Zielgruppe – Wer liest? (Standard: kluge Laien)
3. Der Anlass – Ist das für ein Meeting, eine Unterrichtsstunde, ein Video, einen Blogbeitrag, persönliches Lernen?
4. Die Tiefe – Schnelle Intuition (ein Bildschirm) oder tiefere Erkundung (langes Scrollen)?

Wenn nicht anders angegeben, Standardeinstellung: kluge Laien, tief genug zum Scrollen für 3-5 Minuten, kein spezifischer Anwendungsfall.

Aufbau

Die meisten Konzepte lassen sich in 5 Schritten erklären. Erstelle die Seite in dieser Reihenfolge:

1. Der Aufhänger (ein Bildschirm)

Beginne mit der Frage oder überraschenden Tatsache, die das Konzept verstehen lohnenswert macht. Nicht „Was ist X“ – sondern etwas wie „Warum beginnen Brücken, die über Wasser gebaut werden, mit leeren Kisten?“ oder „Warum kostet eine 30-jährige Hypothek mehr als das Doppelte des Hauspreises?“

2. Die Analogie

Verknüpfe das Unbekannte mit etwas, das der Leser bereits kennt. Die Analogie sollte auf der gesamten Seite durchgehalten werden, nicht nur in der Einleitung. Beispiele:

• LLMs als „predictive text auf Steroiden“
• Cashflow als „Wasser durch Rohre“
• DNS als „das Telefonbuch des Internets“

Wähle eine starke Analogie und bleibe dabei. Das Mischen von Analogien verwirrt den Leser.

3. Der Mechanismus (3-7 Abschnitte)

Erkläre Schritt für Schritt, wie die Sache tatsächlich funktioniert. Für jeden Abschnitt:

• Eine klare Überschrift
• Ein kurzer Absatz
• Eine Visualisierung – Diagramm, Animation oder interaktives Element
• (Optional) Ein „Klicke für mehr Tiefe“-Reveal für Neugierige

Das ist das Herzstück der Seite. Die Visualisierungen machen den Unterschied zu einem Blogbeitrag aus.

4. Häufige Missverständnisse

Ein kurzer Abschnitt, der die Dinge anspricht, die Leute zu diesem Thema oft falsch verstehen. Formatiert als „Mythos: X / Realität: Y“-Paare.

5. Das Fazit

Ein Absatz, der alles wieder mit dem Aufhänger aus Abschnitt 1 verbindet. Hinterlasse dem Leser einen Satz, den er auf einer Dinnerparty wiederholen könnte.

Gestaltungsstil

• Off-white oder warm-weißer Hintergrund – angenehmer für die Augen bei längeren Texten als reines Weiß
• Großzügige Typografie – Fließtext 18-20pt, Zeilenabstand 1.6+, maximale Breite 65 Zeichen
• Eine Akzentfarbe – verwendet für Hervorhebungen, Links und das Schlüsselelement in jedem Diagramm
• Diagramme in SVG – scharf bei jedem Zoom, über CSS thematisierbar
• Animation zweckmäßig, nicht dekorativ – animiere Dinge, um Veränderungen im Laufe der Zeit zu zeigen (einen Prozess, der sich entfaltet; einen Wert, der wächst; ein System, das reagiert). Animiere nicht, nur weil du es kannst.
• Scrollgesteuert, wo es hilft – für Abläufe und Prozesse verwende scrollgesteuerte Animationen, damit der Leser das Tempo bestimmt. Für statische Diagramme verzichte auf den Scroll-Trigger.

Interaktive Elemente (maximal 2-3 pro Seite)

• Schieberegler/Eingabebereich – einen Parameter anpassen und die Auswirkung sehen
• Umschalter – zwischen zwei Zuständen wechseln (mit/ohne, vorher/nachher)
• Klick-Enthüllung – zusätzliche Details für neugierige Leser
• Schrittweise Animation – „Weiter“-Button, um einen Prozess im Tempo des Lesers zu durchlaufen

Übertreibe es nicht. Drei gut gestaltete interaktive Momente sind besser als zehn Spielereien.

Technische Umsetzung

Einzelne, eigenständige .html-Datei, gespeichert als explainer-[thema-slug].html. Keine externen Abhängigkeiten – Schriftarten einbetten, SVGs inline schreiben, nur Vanilla-JS.

Erforderlich:

• Mobilfreundlich – die meisten Leser werden auf dem Handy scrollen
• Barrierefrei – semantisches HTML, Alternativtexte für Diagramme, per Tastatur navigierbare Interaktionen
• Schnell – sollte sofort laden, kein Ladespinner, keine Verzögerung durch Ressourcen-Laden

Inhaltsregeln

1. Beginne mit der Analogie, nicht mit der Definition. „Ein neuronales Netz ist ein Funktionsapproximator“ ist korrekt und nutzlos. „Ein neuronales Netz ist wie ein Stapel Dimmschalter, die lernen, sich selbst hoch- oder herunterzudrehen“ ist nützlich.
2. Verwende echte Zahlen. „Die meisten Hypotheken laufen über 30 Jahre“ ist allgemein. „Eine 500.000-Dollar-Hypothek zu 7% kostet über 30 Jahre 1,2 Millionen Dollar – 700.000 Dollar davon sind Zinsen“ bleibt hängen.
3. Zeige, erzähle nicht. Wenn du dich dabei ertappst, „Stell dir vor...“ zu schreiben, überlege, ob du es stattdessen mit einem Diagramm zeigen kannst.
4. Sei nicht albern. Witz ist in Ordnung; zu aufgesetzter Humor lenkt von der Erklärung ab. Das Ziel ist Klarheit, nicht Unterhaltung.
5. Beende mit einer Frage oder Implikation. Ein großartiger Erklärer lässt den Leser nachdenken, nicht nur informiert zurück.

Warum dies so aufgebaut ist

Reine Texterklärungen sind leicht zu überfliegen und zu vergessen. Folien sind zu komprimiert für Nuancen. Eine scrollbare, visuelle Seite liegt genau in der Mitte: lang genug für Substanz, visuell genug, um einprägsam zu sein, interaktiv genug, um Engagement zu fördern. Gut gemacht ist dies das Format, das Leser dazu bringt, Screenshots zu machen und zu teilen.

Nach der Generierung

Teile dem Benutzer mit:

1. Der Dateipfad
2. Wie er sie öffnen kann
3. Eine konkrete Sache, die er zur Verbesserung anfordern könnte (du bist noch nicht fertig – erste Entwürfe von Erklärern brauchen normalerweise eine Runde „Der X-Abschnitt fühlt sich schwach an“)
4. Wie er sie teilen kann – die Datei ist in sich geschlossen, also kann er sie per E-Mail verschicken, in Slack teilen oder überall hosten