Web-Anwendungen mit Gen KI gestalten: Was im eyeye LAB entsteht

Wer Web-Anwendungen mit Gen KI gestalten will, findet im eyeye LAB einige Ansätze für lebendige, markenstarke Auftritte jenseits des Template-Webs.

Von Christian Schönfür eyeye

2. November 20265 Minuten Lesezeit

Web-Anwendungen mit generativer KI zu gestalten heißt: Bewegung, Licht, Farbe und Reaktion einer Webseite lassen sich in kurzer Zeit entwerfen, testen und verwerfen. Im eyeye LAB erproben wir so interaktive Oberflächen, die auf Maus, Scrollen oder Daten reagieren. Die gestalterische Entscheidung bleibt beim Menschen; die KI verkürzt den Weg vom Einfall zum prüfbaren Entwurf.

Vom festen Layout zur Oberfläche, die reagiert

Das Bewährte funktioniert, sieht aber oft austauschbar aus. Vor allem laden statische Inhalte selten zum Mitmachen ein.

Doch was ändert sich, wenn generative KI, also Software, die aus einer Beschreibung neuen Code, neue Bilder oder neue Texte erzeugt, in diesen Prozess einsteigt? Kurz: Die Schwelle zum Ausprobieren sinkt. Eine visuelle oder interaktive Idee lässt sich beschreiben, als lauffähige Web-Anwendung erzeugen und direkt im Browser prüfen: vom reagierenden Effekt bis zur Gamification (spielerische Elemente wie Ziele, Fortschritt oder Belohnung). Was nicht trägt, wird wieder verworfen.

Dieser Beitrag zeigt, woran wir im eyeye LAB arbeiten, und leitet daraus fünf Vorschläge ab: Markenfarben, die atmen, Licht, das dem Cursor folgt, Scrollen als Erzählung, Daten als Bild und Materialien, die man fast fühlt. Zudem geht es darum, wo die Grenzen dennoch liegen.

Startseite zum LAB-Projekt „Punsch und Code“.

Was im eyeye LAB passiert

eyeye ist ein Studio für Markenentwicklung und -kommunikation an der Schnittstelle von Strategie, Design und generativer KI. Menschliche Kreativität führt, Technologie dient dabei als Werkzeug.

Das eyeye LAB ist der Ort, an dem wir dieses Selbstverständnis praktisch prüfen: Dort experimentieren wir laufend mit Web-Anwendungen und suchen nach neuen gestalterischen Möglichkeiten. Die Experimente sollen vor allem eines klären: Wie weit lässt sich die Gestaltung einer Webseite treiben, und was davon passt zu einer Marke?

Der Ablauf ist meist ähnlich. Eine Designerin oder ein Designer formuliert eine visuelle Idee, etwa eine Oberfläche, die wie Wasser auf Berührung reagiert. Generative KI erzeugt daraus einen ersten Entwurf, also eine lauffähige Web-Anwendung, die sich direkt im Browser prüfen lässt. Anschließend wird verfeinert, verworfen, neu angesetzt. Die Entscheidung, ob etwas gut ist, bleibt beim Menschen. Genauer: beim Team, das die Marke kennt.

Wie das konkret aussieht, zeigen vier Experimente aus dem LAB: Punsch, Karo, Suminagashi und der eyeye Kopierer. Welche dieser Ansätze sich auf einen Markenauftritt übertragen lassen, zeigen die folgenden Vorschläge.

Vorschläge für Ihre nächste Web-Anwendung

Aus unseren Experimenten ergeben sich Ansätze, die sich auf Markenauftritte übertragen lassen. Einige Vorschläge:

Markenfarben, die atmen. Statt fester Farbflächen bewegen sich Verläufe langsam und bleiben dabei im Farbspektrum der Marke. So wirkt eine Startseite lebendig, ohne vom Inhalt abzulenken.

Licht, das dem Blick folgt. Ein Lichtschein oder eine Spiegelung reagiert auf die Position des Cursors. Produkte oder Logos erhalten dadurch Tiefe, fast wie unter einer Lampe im Schaufenster.

Scrollen als Erzählung. Beim Scrollen verwandeln sich Formen, Texturen oder Farben schrittweise. Die Seite erzählt damit eine Geschichte in Etappen, statt nur Inhalte untereinander zu stapeln.

Daten als Bild. Zahlen aus dem Unternehmen, etwa Wetter am Standort, Tageszeit oder Besucheraufkommen, steuern das Erscheinungsbild einer Seite. Die Oberfläche sieht dann morgens anders aus als abends.

Materialien, die man fast fühlt. Glas, Stoff, Metall oder Papier lassen sich digital nachbilden und auf Interaktion reagieren lassen. Für Marken mit starkem Bezug zu Material oder Handwerk dürfte das besonders interessant sein.

Keiner dieser Vorschläge ist neu im Sinne von „nie gesehen“. Neu ist allerdings, wie schnell sich solche Ideen heute prüfen lassen. Früher stand am Anfang die Frage, ob der Aufwand gerechtfertigt ist. Heute steht am Anfang ein lauffähiger Entwurf.

Hier ein Beispiel aus dem LAB Projekt „Suminagashi“.

Keine Grenzen? Fast.

Im Experiment wirken die gestalterischen Möglichkeiten nahezu unbegrenzt. Ein Entwurf muss dort nur im Browser laufen, nicht im Alltag bestehen. Allerdings gelten für eine Web-Anwendung im Einsatz andere Maßstäbe als für ein Experiment.

Zunächst die Leistung: Aufwendige visuelle Effekte beanspruchen die Grafikleistung des Geräts. Bei 60 Bildern pro Sekunde bleiben dem Browser nur etwa 16,7 Millisekunden pro Einzelbild. Wird dieses Budget verfehlt, ruckelt die Darstellung ^[1]. Schwächere Geräte geraten hier zuerst an ihre Grenze.

Zudem die Barrierefreiheit. Starke Bewegung kann für manche Nutzer:innen unangenehm sein. Gute Web-Anwendungen respektieren daher die Systemeinstellung „Bewegung reduzieren“ und bieten eine ruhigere Variante an.

Darüber hinaus die Marke selbst. Nicht jeder Effekt passt zu jedem Unternehmen. Eine Kanzlei braucht vermutlich keine flüssigen Farbexplosionen, ein Modelabel unter Umständen schon. Die eigentliche Grenze ist also weniger die Technik als die Frage, was zur Marke gehört.

Vom Experiment zum Projekt

Wie wird aus einem LAB-Versuch ein Bestandteil Ihres Auftritts? Aus unserer Sicht gehören dazu drei Schritte.

Klären Sie zuerst, wofür die Marke steht. Welche Eigenschaft soll spürbar werden: Ruhe, Präzision, Verspieltheit, Wärme? Erst danach lohnt die Suche nach der passenden visuellen Umsetzung.

Prüfen Sie Entwürfe früh auf echten Geräten. Ein Effekt, der auf dem Arbeitsrechner flüssig läuft, kann auf dem Smartphone Ihrer Kund:innen ruckeln oder den Akku belasten.

Planen Sie eine Rückfallebene ein. Für ältere Geräte oder reduzierte Bewegung sollte es eine schlichte, gleichwertige Darstellung geben.

Für solche Vorhaben arbeiten wir mit Claude Code und OpenAI Codex, also KI-Werkzeugen, die aus einer Beschreibung Programmcode erzeugen. Hinzu kommen Werkzeuge zur Bildgenerierung, etwa Midjourney oder ChatGPT Images 2.5 von OpenAI, für das in der API die Modelle GPT-Image-2.5 Flare und GPT-Image-2.5 Sunburst bereitstehen ^[2]^[3]. Was daraus in einem Kundenprojekt werden kann, zeigt etwa unser Markenrelaunch für UNCANNY MINDS. Teil der neuen Bildsprache ist dort ein Riffelglas-Effekt, umgesetzt als Web-Anwendung, die die Grafikkarte die Darstellung jedes Bildpunkts berechnen lässt.

Welche Ansätze aus dem LAB zu einer Marke passen, lässt sich am konkreten Auftritt prüfen: an ihren Eigenschaften, ihrem Publikum und den Geräten, auf denen sie gesehen wird.

Der Riffelglas-Effekt als Bestandteil des visuellen Markenauftritts von UNCANNY MINDS, übertragbar auf jedes Motiv in der Markenkommunikation.

Häufige Fragen

Was bedeutet es, Web-Anwendungen mit Gen KI zu gestalten?

Generative KI erzeugt aus einer Beschreibung lauffähigen Code für visuelle und interaktive Elemente einer Webseite. Gestalter:innen können Ideen dadurch schneller ausprobieren, bewerten und verfeinern. Die gestalterische Entscheidung bleibt beim Menschen.

Ersetzt die KI im eyeye LAB das Design-Team?

Nein. Die KI liefert Entwürfe und Varianten, das Team entscheidet, was zur Marke passt. Menschliche Kreativität führt, die Technologie dient als Werkzeug.

Laufen solche Web-Anwendungen auch auf dem Smartphone?

Grundsätzlich ja, allerdings hängt die Darstellung von der Leistung des Geräts ab. Deshalb testen wir auf verschiedenen Geräten und planen bei Bedarf eine vereinfachte Variante ein.

Für welche Marken eignen sich interaktive Web-Anwendungen?

Das hängt weniger von der Branche ab als vom Charakter der Marke. Entscheidend ist, ob ein Effekt eine Markeneigenschaft sichtbar macht oder nur Aufmerksamkeit erzeugt.

Wie starte ich ein Projekt mit eyeye?

Am besten mit einem Gespräch über Ihre Marke und Ihre Ziele. Auf dieser Grundlage lässt sich prüfen, welche Ansätze aus dem eyeye LAB sinnvoll sind.