{
 "id": 82164,
 "slug": "2026-10-18_interaktives-webdesign",
 "url": "https://agents.willem.com/de/posts/2026-10-18_interaktives-webdesign/",
 "source_url": "https://willem.com/de/2026-10-18_interaktives-webdesign/",
 "language": "de",
 "date": "2026-10-18",
 "published": "2026-10-18T00:00:00+02:00",
 "created": "2026-10-19T10:03:04.766000+02:00",
 "updated": "2026-10-20T09:22:37.257000+02:00",
 "title": "Interaktives Webdesign",
 "subtitle": "Aber macht es auch Spaß?!",
 "summary": "Eine Website muss keine Broschüre sein, an der man vorbeiscrollt. Immer öfter baue ich interaktive Websites, Seiten zum Spielen: einen Globus, den du drehst, Artwork, das deinem Finger Platz macht, Gebäude, die sich selbst bauen, und kleine Männchen, die zurückreden. In diesem Beitrag zeige ich vier davon!",
 "topics": [
  "web",
  "webdesign",
  "work"
 ],
 "author": {
  "name": "Willem L. Middelkoop",
  "url": "https://willem.com"
 },
 "provenance": {
  "kind": "model",
  "method": "Gemini translation (2025), reviewed and corrected by Claude Sonnet (20 Oct 2026) against a glossary and hunspell",
  "date": "2026-10-20",
  "reviewed_by_native_reader": false,
  "language": "de",
  "source_language": "en"
 },
 "translations": [
  {
   "language": "en",
   "title": "Interactive Webdesign",
   "url": "https://agents.willem.com/en/posts/2026-10-18_interactive-webdesign/",
   "source_url": "https://willem.com/en/2026-10-18_interactive-webdesign/"
  },
  {
   "language": "nl",
   "title": "Interactief Webdesign",
   "url": "https://agents.willem.com/nl/posts/2026-10-18_interactief-webdesign/",
   "source_url": "https://willem.com/nl/2026-10-18_interactief-webdesign/"
  },
  {
   "language": "es",
   "title": "Diseño web interactivo",
   "url": "https://agents.willem.com/es/posts/2026-10-18_diseno-web-interactivo/",
   "source_url": "https://willem.com/es/2026-10-18_diseno-web-interactivo/"
  },
  {
   "language": "fr",
   "title": "Webdesign interactif",
   "url": "https://agents.willem.com/fr/posts/2026-10-18_webdesign-interactif/",
   "source_url": "https://willem.com/fr/2026-10-18_webdesign-interactif/"
  },
  {
   "language": "it",
   "title": "Web design interattivo",
   "url": "https://agents.willem.com/it/posts/2026-10-18_web-design-interattivo/",
   "source_url": "https://willem.com/it/2026-10-18_web-design-interattivo/"
  },
  {
   "language": "pt",
   "title": "Design web interativo",
   "url": "https://agents.willem.com/pt/posts/2026-10-18_design-web-interativo/",
   "source_url": "https://willem.com/pt/2026-10-18_design-web-interativo/"
  },
  {
   "language": "pap",
   "title": "Desèño Web Interaktivo",
   "url": "https://agents.willem.com/pap/posts/2026-10-18_deseno-web-interaktivo/",
   "source_url": "https://willem.com/pap/2026-10-18_deseno-web-interaktivo/"
  },
  {
   "language": "fy",
   "title": "Ynteraktyf webdesign",
   "url": "https://agents.willem.com/fy/posts/2026-10-18_ynteraktyf-webdesign/",
   "source_url": "https://willem.com/fy/2026-10-18_ynteraktyf-webdesign/"
  }
 ],
 "image": "https://willem.com/global/images/fa780e1b5f7e.webp",
 "image_width": 2560,
 "images": [
  {
   "url": "https://willem.com/global/images/8fd47fd1a37f.webp",
   "description": "gpcardio.org: Zieh am Globus, und die neuesten Vorträge kreisen mit; ein Tipp öffnet einen",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-1.jpg"
  },
  {
   "url": "https://willem.com/global/images/043d88dd9515.webp",
   "description": "Das Artwork zum Leben erweckt: der Start, die Punkte, die auf Finger oder Maus reagieren, die Wörter und das Rennen",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-2.jpg"
  },
  {
   "url": "https://willem.com/global/images/5691f6a2e646.webp",
   "description": "Stockwerk für Stockwerk, dann der Scan: Jedes Stockwerk bekommt die Farbe seines Zustands",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-3.jpg"
  },
  {
   "url": "https://willem.com/global/images/886e5604e762.webp",
   "description": "Tippe einen Kollegen an: Jeder hat etwas zu sagen",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-4.jpg"
  },
  {
   "url": "https://willem.com/global/images/67fc011c74e2.webp",
   "description": "Vier Fragen, eine Empfehlung: Wer sich krankmeldet, legt sich hin",
   "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_82164_images-5.jpg"
  }
 ],
 "text": "Spielen\nMenschen erinnern sich an das, was sie berührt haben. Eine Seite, die auf Maus oder Finger antwortet, lädt dich ein, dich umzusehen, etwas auszuprobieren, ein bisschen länger zu bleiben. Das war früher schwierig: komplexe 3D-Technik, langsame Chips in Smartphones, ein Akku, der leerläuft ... schwierig! Aber dank extremer Optimierung und automatisierter KI-Pipelines kann ich die Messlatte jetzt viel höher legen. JETZT GEHT ES, ES GEHT WIRKLICH!!\nSchau dir den Film unten an, um es in Aktion zu sehen:\nEin Globus für die Kardiologie\ngpcardio.org ist das Global Primary Care Cardio Network: Vorträge, Leitlinien-Updates und ein Überblick über die Literatur zu Herz-, Nieren- und Stoffwechselversorgung, für Hausärzte. Die Startseite ist ein Globus aus Punkten, auf dem die angeschlossenen Fachgesellschaften in ihren Ländern markiert sind. Die neuesten Vorträge und Updates kreisen als Karten darum herum. Zieh am Globus, und die Welt dreht sich, tippe auf eine Karte, und der Vortrag öffnet sich, wähle einen Chip, und nur die Videos bleiben. BAM, DIE GANZE WELT! DAS nenne ich mal eine wirklich globale Ambition in Form gebracht!\nArtwork, das läuft\nFür ein Sportevent habe ich das Artwork der Designerin zum Leben erweckt, mit 3D-Shadern und WebGL. Zu Beginn platzen die Bahnen aus dem Oval, gefolgt von Konfetti. Die Halbtonpunkte reagieren auf deinen Finger oder die Maus, die Bahnen sprinten, wenn du scrollst, die Sportarten rennen zu einer Ziellinie, jedes Mal mit einem anderen Sieger, und eine riesige Uhr zählt bis zum Eröffnungstag herunter. Die Live-Zeichnung stimmt zu 99,3 % der Pixel mit dem Original-Artwork überein, macht dank der Interaktivität aber _mindestens_ 300 % mehr Spaß!\nGebäude, die sich selbst bauen\nFür ein Ingenieurbüro für Gebäude und Installationen fallen vier Türme Stockwerk für Stockwerk herein. Eine Scanlinie färbt dann jedes Stockwerk nach seinem Zustand ein, und das Bild landet bei grünen Dächern: dem nachhaltigen Endzustand. Beweg die Maus, und die Szene dreht sich mit dir. Weiter unten laufen alle Leistungen entlang des Bauprozesses auf einer waagerechten Spur, und drei Ringe schieben sich zusammen, während du scrollst. Dynamik im _festen_ Anlagevermögen? KEIN PROBLEM!\nKleine Männchen\nFür einen arbeitsmedizinischen Dienst habe ich der Figur in ihrem Logo ein Gesicht gegeben. Fahr mit der Maus über eine, und sie lugt hervor, tippe sie an, und sie springt, tanzt oder fällt in Ohnmacht und steht wieder auf, und hat dabei etwas zu sagen. Sie regnen beim Scrollen in die Seite, und eine ganze Menge sortiert sich von selbst in 20, 60 und 20 Prozent: Fehlzeiten mit medizinischer Ursache, mit persönlichen Umständen und mit einer Ursache in der Organisation.\nDer Paketberater stellt vier Fragen. Mit jeder Antwort verändern sich die Männchen: mehr Kollegen, Zeitarbeitskräfte, und wer sich krankmeldet, legt sich hin. Die Empfehlung zeigt, was jedes Paket pro Jahr kostet, und du kannst direkt zur Anmeldung gehen oder um einen Rückruf bitten. Krankheit und Fehlzeiten machen keinen Spaß, aber ein umkippendes Figürchen ist umso komischer, und genau _dieses_ Lächeln gibt einem sonst ernsten Angebot seine positive Wirkung.\nSchnell, während es sich bewegt\nIch baue das auf jahrelanger Erfahrung mit Spieletechnik auf: von Snake '97 über Protect Your Eggs, ein Spiel, das ich zusammen mit meinem siebenjährigen Kind gebaut habe, bis zu Workout-Daten in 3D. Die 3D-Szenen werden in einem Worker neben der Seite gezeichnet, damit die Seite selbst frei bleibt, um zu reagieren. Sie zeichnen nur, wenn sich etwas ändert, und ruhen eine Sekunde nach der letzten Berührung. Die Männchen sind schlichtes SVG und CSS. Hinter jeder 3D-Szene liegt ein Standbild: für das erste Rendern, für Smartphones, die sie nicht zeichnen können, und für Besucher, die weniger Bewegung bevorzugen. Kein Framework und kein Skript von Drittanbietern: Die drei Konzeptseiten wiegen zwischen 0,15 und 0,46 MB.\nGemessen mit Lighthouse, dem Werkzeug hinter Googles PageSpeed Insights, Performance auf der Startseite, Smartphone / Laptop:\n| | Performance | Größter Inhalt (Smartphone) |\n|---|---|---|\n| gpcardio.org | 96 / 100 | 2,9 s |\n| Das Sportevent | 99 / 100 | 1,8 s |\n| Das Ingenieurbüro | 100 / 100 | 1,4 s |\n| Der arbeitsmedizinische Dienst | 99 / 100 | 2,1 s |\n*Lighthouse 13.5, Median aus drei Durchläufen pro Seite, 18. und 19. Oktober 2026.*\nFazit\nMacht es auch Spaß?! Das hat mich ein weiser Professor an der Uni immer wieder gefragt. Diese „Lektion“ wende ich heute mit großer Freude an: Interaktives Webdesign ist mehr als ein bisschen Dekoration. Es geht um Optimismus und eine nachhaltige Wirkung, die mit der natürlichen Neugier spielt! Möchtest du auch über die kreativen Möglichkeiten nachdenken, über eine Seite, die Menschen anfassen _wollen_? Schreib mir gern!",
 "word_count": 754,
 "markdown_url": "https://agents.willem.com/de/posts/2026-10-18_interaktives-webdesign/post.md"
}