Interaktives Webdesign

Zusammenfassung

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!

Volltext

Spielen

Menschen 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!!

Schau dir den Film unten an, um es in Aktion zu sehen:

Ein Globus für die Kardiologie

gpcardio.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!

[action1]

Artwork, das läuft

Fü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ß!

Gebäude, die sich selbst bauen

Fü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!

Kleine Männchen

Fü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.

Der 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.

Schnell, während es sich bewegt

Ich 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.

Gemessen mit Lighthouse, dem Werkzeug hinter Googles PageSpeed Insights, Performance auf der Startseite, Smartphone / Laptop:

| | Performance | Größter Inhalt (Smartphone) | |---|---|---| | gpcardio.org | 96 / 100 | 2,9 s | | Das Sportevent | 99 / 100 | 1,8 s | | Das Ingenieurbüro | 100 / 100 | 1,4 s | | Der arbeitsmedizinische Dienst | 99 / 100 | 2,1 s |

Lighthouse 13.5, Median aus drei Durchläufen pro Seite, 18. und 19. Oktober 2026.

Fazit

Macht 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!