Aug. 11, 2025

Willemstagram

Eine 3D-Fallblattanzeige mit Fotos, die Geschichten erzählt

Letzte Woche saß ich mit einem Kunden zusammen und betrachtete die neue willem.com-Homepage, auf der ich eine Erzählung nutze, um von meiner Arbeit zu berichten. Dieser Kunde ist einer der besten visionären und kreativen Denker, doch mein Text schien ihn nicht anzusprechen. Als ich darüber nachdachte, erinnerte ich mich an eine wichtige Psychologielektion aus der Universität: Ich brauchte etwas anderes, etwas Nichtlineares. In diesem Beitrag geht es darum, einen visuellen Paukenschlag zu landen!

Linkes versus rechtes Gehirn-Denken

Eines der coolen Dinge an meiner Ausbildung an der Universität von Amsterdam war, dass wir Kurse von verschiedenen Fakultäten hatten, was eine interessante Mischung aus interdisziplinärer Wissenschaft bildete. Ein klassisches Buch, das wir besprachen, war "Mintzberg on Management", in dem der Autor ausführt, warum verschiedene Menschen unterschiedliche Dinge bevorzugen, die klassische Dichotomie, die oft als linkes versus rechtes Gehirn-Denken vereinfacht wird:

• Der lineare Denker (das linke Gehirn): Dies ist der natürliche Zustand für Menschen, die eine logische Erzählung schätzen, die von A nach B nach C aufbaut. Typische Personen dieser Art sind Geschichtenerzähler, Architekten und Programmierer.
• Der nicht-lineare Denker (das rechte Gehirn): Dies ist der Zustand von Menschen, die keiner geraden Linie folgen. Sie scannen nach Eindrücken, Stimmungen und emotionalen Erkenntnissen. Typische Personen dieser Art sind kreative Menschen, einschließlich Künstler und visionäre Denker.

Meine neue willem.com-Homepage funktionierte gut für lineare Denker wie mich, die textbasierte Erzählung passt zum linken Gehirn. Aber mein Design versagte bei Menschen, die am besten auf nicht-lineare, stimmungsvolle Eindrücke ansprechen. Ich brauchte etwas, das die vielen visuellen Elemente auf eine reiche und dynamische Weise darstellt, lebendig und mit einer gesunden Dosis interaktivem Spaß.

Solari-Board

'Many moons ago' traf ich meine Frau am Hauptbahnhof Utrecht, direkt unter der gigantischen Abfahrtsinformationstafel. Die ikonische blaue Infotafel von 7x4,20 Metern, die rund 3000 Kilo wog, verfügte über klappernde mechanische Tafeln, die ein erkennbares Geräusch erzeugten, das man etwa jede Minute in der zentralen Halle des Bahnhofs hören konnte. Diese Art von Anzeigetafel wird oft als "Solari-Board" bezeichnet, benannt nach Solari di Udine, dem italienischen Unternehmen, das diese Ikonen herstellte. Heutzutage verfügt der Bahnhof Utrecht über digitale Informationsanzeigen, aber wenn Sie möchten, können Sie es immer noch im Het Spoorwegmuseum sehen.

Als Liebhaber von Metaphern (Buchtipp: Metaphors we live by) dachte ich, das Solari-Board mit seinem "Klappern" wäre eine reizvolle Möglichkeit, den Besuchern von willem.com zu ermöglichen, zu verschiedenen "Zielen" (den Geschichten) auf der Website "abzufahren". Anstatt Text zu verwenden, entschied ich mich bewusst dafür, die Fotos und visuellen Elemente in den Blogbeiträgen als Tore zum Einblicke-Bereich auf willem.com zu nutzen. Durch das zufällige Aufdecken neuer Ziele ist dies perfekt nicht-linear, und indem es interaktiv (klick- und berührbar) gemacht wird, ist es ansprechender als reiner Text. Jedes Ziel öffnet ein "Ticket", das ein wenig erklärt, was man gerade sieht. Wenn Ihnen gefällt, was Sie sehen, können Sie auf den großen Knopf drücken, um die Geschichte direkt an der Position des Bildes zu öffnen, was mitten in einem Blogbeitrag sein könnte. Geschichten öffnen sich in neuen Browserfenstern, sodass Sie zum "Bahnhof" zurückkehren können, um ein neues Ziel zu finden.

Implementierung: ThreeJS und eine eigene Bild-API

Früher habe ich mit der 3D-Grafik-Engine ThreeJS experimentiert, um Trainingsdaten zu visualisieren. Es ist eine Bibliothek, die das HTML5-Standard-canvas-Element verwendet, um Grafiken auszugeben, die mittels Spatial Computing erzeugt werden, eine fancy Art zu sagen, dass es einem ermöglicht, Dinge in drei Dimensionen (x, y, z) anstatt in zwei zu zeichnen, daher der Name. Es bietet Kamera-, Licht- und Nebelsteuerungen und ist darauf ausgelegt, Animationen basierend auf simulierter Position und Drehung zu ermöglichen. Es ist ziemlich cool, damit zu spielen und ziemlich leistungsfähig. Sehen Sie sich diese beiden früheren Beiträge über meine Experimente mit ThreeJS an:

Der Minimalist in mir überlegte kurz, mit CSS-Animationen, -Transformationen und -Übergängen zu arbeiten. Aber ich dachte, dass die realistische Perspektive, bei der sich die äußersten Tafeln stärker neigen, und die Zufälligkeit bei der Auswahl neuer visueller Elemente sowieso JavaScript erfordern würden. Um seinen Wert zu maximieren, wollte ich es direkt auf meiner Homepage integrieren. Aber das Laden einer kompletten 3D-Engine ist nichts, was man auf die leichte Schulter nehmen sollte. Um die Auswirkungen auf die Ladezeit der Homepage zu minimieren, habe ich es sorgfältig so konzipiert, dass es asynchron und völlig optional geladen wird (für Leute mit deaktiviertem JS).

Um das "Visual Journal" zu füttern, habe ich eine eigene API entworfen, die hochoptimierte Bilder im Format 400x400px bereitstellt. Jedes Bild hat einen lokalisierten Titel und einen Deeplink mit einem Hashtag-(Slug-)Anker, der das tiefe Eintauchen in Geschichten ermöglicht. Ich verlasse mich auf meine eigene Lemmid-Plattform, um die notwendige Infrastruktur dafür bereitzustellen. Im Hintergrund generiert ein optimierter NodeJS-Dienst die Bilder mit imagemagick, jpegoptim und pngquant. Sie können die API selbst unter [https://willem.com/de/images.json]https://willem.com/de/images.json) überprüfen, die ein JSON-Array wie dieses ausgibt:

[
  {
    "url": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/i_15_An-average-fly-is-bigger-than-most-screws-inside-the-iMac_400x400px.jpg",
    "title": "An average fly is bigger than most screws inside the iMac",
    "target": "/en/2020-07-30_upgrading-a-27-inch-imac-5k-to-14-terabytes/#an-average-fly-is-bigger-than-most-screws-inside-the-imac"
  },
  {
    "url": "/en/2019-06-25_assembling-a-cargo-bike/i_11_Using-filler-plates-to-make-up-for-Chinese-Precision_400x400px.jpg",
    "title": "Using filler plates to make up for Chinese Precision",
    "target": "/en/2019-06-25_assembling-a-cargo-bike/#using-filler-plates-to-make-up-for-chinese-precision"
  },
  {
    "url": "/en/2021-01-14_abandoning-my-own-tablet-os/i_05_You-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper_400x400px.jpg",
    "title": "You know you're digital pen is lacking trust if you grab for old fashioned pencil and paper...",
    "target": "/en/2021-01-14_abandoning-my-own-tablet-os/#you-know-you-re-digital-pen-is-lacking-trust-if-you-grab-for-old-fashioned-pencil-and-paper"
  },
  ...
]

Um zu verhindern, dass das Ding nur ein zufälliger Link-Generator ist, habe ich bewusst ein kleines Popup eingebaut, wenn man auf ein visuelles Element tippt oder klickt. Ich nutze die Bildunterschriften, die mein Lemmid Content Manager verwaltet, um ein wenig Information preiszugeben, damit Sie entscheiden können, ob es sich lohnt, die Geschichte zu öffnen.

Veröffentlichung des Source (AGPL)

Obwohl ich sehr zufrieden bin, wie das Visual Journal auf meiner Seite funktioniert, glaube ich fest ans Teilen. Die Chancen stehen gut, dass Sie eine noch bessere Idee für ein Solari-Klappern haben. Deshalb veröffentliche ich das Ganze als freie/libre Software unter der GNU Affero General Public License (AGPL). Das bedeutet, Sie können es selbst verwenden, modifizieren und verbreiten. Den Quellcode, die Readme-Datei und Beispieldateien finden Sie unter https://source.willem.com/visual-journal/

Fazit

Nach der Neugier meiner Kinder zu urteilen, bin ich sehr zufrieden mit dem Visual Journal, das ich scherzhaft Willemstagram getauft habe. Aber im Gegensatz zu Metas Instagram dient dieses nur dazu, meine Geschichten visuell zu erzählen, und seine Quelle ist libre. Sie können es sich auf der Homepage ansehen oder indem Sie auf den untenstehenden Button klicken. Welches Ziel werden Sie wählen?

Willemstagram

Dies wurde von Hand geschrieben. In einem Zeitalter KI-generierter Texte ist dies meine einfache Art, den menschlichen Gedanken und die Mühe hinter diesen Worten zu zeigen. Für Neugierige steht das originale (englische) Manuskript zum Download bereit.

Manuskript (PDF)