Titel: Eine visuelle Story im Web

Dieses Beispiel zeigt ein minimalistisches Layout für eine Web-Story.
Der Text ist zentriert und gut lesbar, während Bilder bewusst breiter
dargestellt werden, um visuelle Akzente zu setzen. Das Ergebnis ist ein
klarer, ruhiger Lesefluss – wie man ihn von guten Datenjournalismus-Seiten kennt.


Akt 1 – Der Einstieg

Gute narrative Seiten arbeiten mit Rhythmus. Text führt ein, ein Bild
vertieft, weiterer Text erklärt. Der Weißraum sorgt für Fokus und gibt
dem Auge Pausen.

Ein gutes Layout hat drei Eigenschaften:

- Es lenkt die Aufmerksamkeit dorthin, wo sie hingehört
- Es macht Hierarchien sichtbar – was ist wichtig, was ist Kontext
- Es funktioniert auf jedem Gerät, nicht nur auf dem Desktop

Mehr Inspiration: https://www.reuters.com/graphics/


Akt 2 – Kontext schaffen

Jede Sektion funktioniert eigenständig. Überschriften geben Orientierung,
Absätze strukturieren Information, Bilder schaffen visuelle Anker.
Zusammen ergeben sie eine Geschichte.

Die wichtigsten Bausteine eines solchen Layouts:

- h1 und h2 für Titel und Zwischenüberschriften
- p für Fließtext und Erklärungen
- img für visuelle Elemente, breiter als der Text
- section um zusammengehörige Inhalte zu gruppieren

Das Layout ist bewusst einfach gehalten – ein guter Ausgangspunkt
für eigene Web-Stories.


Akt 3 – Abschluss

Dieses Grundmuster lässt sich vielseitig erweitern. Mögliche nächste
Schritte wären:

- Interaktive Grafiken statt statischer Bilder
- Sticky-Elemente die beim Scrollen sichtbar bleiben
- Scroll-Animationen für einen kinematischen Effekt
- Datengetriebene Visualisierungen mit D3.js oder Observable

Ziel dieser Demo ist es, ein klares Grundmuster zu zeigen:
Lesbarkeit, Hierarchie und Rhythmus im Scroll. Mehr braucht es
für den Anfang nicht.

Weitere Beispiele:
- https://www.spiegel.de/thema/daten-und-visualisierungen/
- https://pudding.cool