Wenn Entwickler auf Designer treffen: Erkenntnisse aus Vibe Coding und der Kunst des kreativen Ausdrucks

Vibe Coding und die Kunst des kreativen Ausdrucks

#creative-coding #design #vibe-coding

Der Originalartikel wurde am 5.1.2026 auf JavaPro.io veröffentlicht.

Hast du dich jemals gefragt, was passiert, wenn man Klimadaten, künstliche Intelligenz und eine Gruppe kreativer Menschen zusammenbringt? Ich habe es kürzlich bei einem „Future Fridays”-Workshop herausgefunden, einer Zusammenarbeit zwischen infogr8 und der Data Visualization Society. Das Ziel war es, mit KI-gestütztem Creative Coding zu experimentieren, um Klimadaten zu visualisieren.

Es war eine faszinierende Erfahrung, bei der Datenkreative und Designer – zusammen mit einigen Entwicklerinnen – zusammenkamen. Wir wollten Visualisierungen erstellen, die nicht nur Zahlen anzeigen, sondern tatsächlich Emotionen wecken und zum Handeln anregen. In diesem Artikel zeige ich dir, was ich darüber gelernt habe, wie man Daten zum Leben erweckt, und warum du als Entwickler dich für KI-gestütztes Codieren interessieren solltest.

_{Vorneweg: Die in diesem Artikel verwendeten Personenbezeichnungen beziehen sich auf alle Geschlechter.}

I. Was ist Creative Coding?

Wie lässt sich Creative Coding also definieren? Einfach ausgedrückt besteht das Ziel von Creative Coding darin, ausdrucksstarke Animationen zu erstellen, die emotional berühren. Es geht nicht nur um die Funktionalität, sondern auch um das Erlebnis. Ein wesentliches Merkmal dieses Ansatzes ist die Verwendung von Zufälligkeit. Aber wie gelangt man von einer einfachen Idee zu einer komplexen Animation?

Von der Idee zur Animation

Der Prozess sieht in der Regel wie folgt aus:

Du hast eine gute Idee. Dann möchtest du diese Idee in eine Simulation oder eine Animation umwandeln. Die „Brücke“ zwischen deiner Idee und dem Endergebnis ist die Codegenerierung. Hier wird das Programmieren zu einem Mittel zu Kunstwerk-Produktion.

Selbst wenn du keine spezifische Programmiersprache kennst, können KI-Modelle dir beim Schreiben von Code helfen. Daher kommt auch der Begriff „Vibe Coding“. Das bedeutet, dass du den von der KI generierten Code so akzeptierst, wie er ist, nur um den gewünschten „Vibe“ oder Look zu erhalten. Im echten Leben empfehle ich den generierten Code auf jeden Fall zu überprüfen, aber darauf wollen wir hier nicht näher eingehen. Der Code ist in diesem Zusammenhang ein Medium – ein Werkzeug, das Formen, Text oder Bilder erzeugt. Der Einsatz von KI-Modellen senkt die Einstiegshürde erheblich.

Die Magie der Zufälligkeit: Perlin-Rauschen

Einer der wichtigsten Algorithmen wenn es um Creative Coding geht, ist Perlin-Rauschen, entwickelt von Ken Perlin.

Seine Magie liegt in seiner Eigenschaft, einen fliessenden Übergang zwischen Punkten zu ermöglichen. Es vermeidet scharfe, unrealistische Übergänge, die zu unnatürlichen Texturen führen würden.

Es erzeugt eine organisch wirkende Zufälligkeit, die für das menschliche Auge natürlich erscheint. Dies ermöglicht:

• Komplexe Texturen.
• Natürlich aussehende Landschaften (sanfte Hügel, Berge).
• Wettereffekte wie Wolken, Regen, Wasser, Rauch und Feuer.
• Flüssige Bewegungen wie Wellen oder Staubpartikel.

Bei der Textursynthese hilft dir Perlin-Rauschen dabei, langweilige Wiederholungen zu vermeiden. Damit kannst du deine Kreativität nicht nur bei der Auswahl des richtigen Algorithmus einsetzen, sondern auch bei dessen Anwendung, um etwas Einzigartiges zu erschaffen.

Die Praktische Seite

Anders ausgedrückt ist Creative Coding die Praxis, Code als Kunst- und Designwerkzeug zu verwenden. Es erzeugt ausdrucksstarke Ergebnisse wie visuelle Darstellungen, Musik und interaktive Erlebnisse.

Hier sind die wichtigsten Aspekte, die du kennen solltest:

• Künstlerischer Schwerpunkt: Im Gegensatz zur traditionellen Programmierung, bei der Funktionalität im Vordergrund steht, stehen hier Ästhetik, Schönheit, Emotionen und kreativer Ausdruck im Vordergrund.
• Vielfältige Anwendungsmöglichkeiten: Es wird in der digitalen Kunst, der Spieleentwicklung, Live-Visuals, Kunstinstallationen, Projektionsmapping und Werbung eingesetzt.
• Interaktive Erlebnisse: Du kannst Werke schaffen, die auf Geräusche, Daten oder Benutzereingaben reagieren.
• Kreative Problemlösung: Es regt dich dazu an, unkonventionelle Lösungen zu finden und dein kreatives Denken zu entwickeln.

II. Warum sollte das einen Softwareentwickler interessieren?

Du fragst dich vielleicht: „Ich bin Backend-Entwickler. Ich schreibe Logik. Warum muss ich etwas über Creative Coding wissen?“ Das ist eine berechtigte Frage. Hier sind einige Gründe, warum es sich lohnt, sich damit zu beschäftigen:

• Neue Perspektiven: Es hilft dir dabei, neue Wege zu erkunden, wie Menschen Daten wahrnehmen. Du kannst Designs erstellen, die nicht nur funktional sind, sondern das Publikum dazu anregen, über ein Thema nachzudenken und sich intensiv damit auseinanderzusetzen. Dieses Verständnis von „emotionaler Bindung” und Creative Coding kannst du in deine tägliche Arbeit einfliessen lassen.
• Bessere Frontends: Wenn du über backendlastige Anwendungen hinausgehen möchtest, ist dies entscheidend. Creative Coding vermittelt dir Kenntnisse über Ästhetik, Farbtheorie und die Auswahl der richtigen Schriftarten. Es hilft dir dabei, harmonische Benutzeroberflächen zu erstellen, die deinen Kunden einen zusätzlichen künstlerischen Touch verleihen. Das geht einen Schritt über das hinaus, was du in der Fachhochschule für Informatik gelernt hast.
• Wissen erweitern: Es ist wichtig zu wissen, was möglich ist. Du musst kein Experte sein, aber es ist hilfreich, dir eine mentale Karte dieser Werkzeuge zu erstellen. Wenn du irgendwann eine Form des kreativen Ausdrucks benötigst, weisst du genau, wo du suchen musst.

III. Implementierungswerkzeuge

Zwar kann man dafür fast jede Sprache verwenden, doch gibt es einige Frameworks oder Bibliotheken, die speziell für kreative Arbeiten entwickelt wurden. Bekannte Beispiele sind Processing, p5.js und openFrameworks.

Warum p5.js?

Für unseren Workshop haben wir uns auf p5.js konzentriert. Dabei handelt es sich um eine clientseitige JavaScript-Plattform für Künstler, Designer und Studenten. Sie basiert auf den Grundprinzipien von Processing, wurde jedoch für das Web entwickelt.

Die Merkmale:

• Es handelt sich um eine JavaScript-Bibliothek, d. h. sie läuft direkt im Browser.
• Sie lässt sich leicht in HTML/CSS integrieren.
• Sie ermöglicht die Zusammenarbeit in Echtzeit.
• Sie ist für Anfänger sehr gut geeignet.

Die Schwachstellen:

• Es hat Leistungseinschränkungen bei komplexen Projekten.
• Es hängt von den Funktionen des Browsers ab.

Im Grunde genommen ist p5.js eine Umsetzung des Konzepts Creative Coding. Du benötigst keine Vorkenntnisse über komplexe Visualisierungsbibliotheken. Du kannst sofort loslegen.

Warum es ideal für Anfänger ist:

• Es ist quelloffen und anfängerfreundlich.
• Es unterstützt Zufälligkeit und Rauschen (wie das zuvor erwähnte Perlin-Rauschen).
• Es eignet sich perfekt für Animationen.
• Über den Online-Editor erhältst du sofort Ergebnisse.

Auf der Website von p5.js findest du Anleitungen und auf OpenProcessing inspirierende Projekte.

Die Verwendung von KI mit p5.js ist überraschend einfach. Du kannst mit einem KI-Modell Code generieren, diesen in den p5.js-Online-Editor einfügen und sofort eine Vorschau der Animation anzeigen.

Mit p5.js kannst du:

• Formen und Muster bauen
• Framebasierte Animationen erstellen
• Eingabedateien hinzufügen (z. B. eine CSV-Datei)
• Ton oder Video hinzufügen
• Mit Text und Bildern spielen

IV. Wie geht Creative Coding?

Schauen wir uns einmal an, wie wir den kreativen Prozess während des „Future Fridays”-Workshops konkret angegangen sind. Die Schritte waren auch für Nicht-Designer leicht nachvollziehbar und ähneln denen, die Softwareentwickler oder Datenwissenschaftler kennen.

1. Vorbereitende Arbeit

• Ziel & Zielgruppe: Unser Ziel war es, eine ansprechende Animation zu erstellen, um Klimadaten einem breiten, nicht wissenschaftlich versierten Publikum zugänglich zu machen. Das Zielmedium war eine Instagram-Story. Wir brauchten eine Erzählung, die einfach, klar, emotional und zum Nachdenken anregend war.
• Datenquelle: Wir haben verschiedene Klimadaten-Sets geprüft. Viele Teilnehmer haben sich auf den Anstieg des Meeresspiegels konzentriert. Ich habe mich für Schneemessdaten aus der Schweiz entschieden (offene Behördendaten).

Meine Hypothese war einfach: Wärmere Winter führen zu kürzeren Wintern mit weniger Schnee.

Meine Botschaft lautete nun: „Der Schneemann schrumpft.“

• Storytelling & Einschränkungen: Die Herausforderung bestand darin, diese Idee auf einfache Weise zu vermitteln. Die Animation musste den Abmessungen von Instagram entsprechen und etwa 30 Sekunden lang sein, um das Interesse des Publikums aufrechtzuerhalten. Das Ziel war es, das Publikum zu überraschen und zum Nachdenken anzuregen.

2. Bereinigung und Analyse der Daten

Ich begann damit, die Daten zu bereinigen und einfache Diagramme zu erstellen. Dabei stellte ich fest, dass die Schneehöhen in hoch gelegenen Stationen stärker variierten, während sie in tiefer gelegenen Stationen konstanter waren.

Ohne zusätzliche Daten, die für eine wissenschaftlich fundierte Schlussfolgerung notwendig gewesen wären, konnte ich jedoch keinen klaren Trend erkennen.

Hier unterschied sich mein Vorgehen von der üblichen Vorgehensweise: Bei einem typischen Projekt steht zuerst die Analyse, dann die Erkenntnisse. Hier liess ich mich von meinen persönlichen Erfahrungen mit der Natur leiten.

Mir war bewusst, dass es sich bei diesem Projekt nicht um eine wissenschaftliche Arbeit handelte. Ich vereinfachte die Datenverarbeitung, um sie an die Erzählung anzupassen, achtete dabei jedoch darauf, keine irreführenden Schlussfolgerungen zu präsentieren. Es war ein bewusster Kompromiss zwischen Genauigkeit und Storytelling.

3. Entwürfe skizzieren

• Moodboards: Wir haben Moodboards erstellt, um visuelle Inspirationen zu sammeln. Ich habe gelernt, dass ein Moodboard nicht nur aus zufälligen Bildern besteht. Es definiert das „Look and Feel” deines Konzepts, einschliesslich Schriftkombinationen und Farbpaletten, die zu deiner emotionalen Tonart passen. Wir haben OpenProcessing verwendet, um unkonventionelle Formen und Effekte zu finden.
• Skizzieren: Skizzieren hilft dir dabei, mit verschiedenen Designoptionen zu experimentieren. Ich habe die durchschnittliche Anzahl der Schneetage auf die Grösse eines Schneemanns übertragen. Mehr Schnee bedeutet einen grösseren Schneemann. Die Auswahl der Winterfarben war entscheidend für die Verstärkung des Themas.

Es gibt zahlreiche digitale Werkzeuge zum Skizzieren. Ich habe erkannt, dass die Wahl der richtigen Schriftart essenziell ist: Sie schafft Harmonie im Design.

Dieser Prozess ist iterativ; jeder Schritt baut auf dem vorherigen auf.

4. Erstellen und Bereitstellen der Visualisierung

In der letzten Phase habe ich meine Skizze in eine einfache Animation umgewandelt.

Dazu gehörte auch Vibe-Coding. Ich habe die KI-Prompte verfeinert, um das gewünschte Design zu erhalten, und sie im Online-Editor p5.js getestet.

Im Gegensatz zum normalen Coding habe ich mich nicht darauf konzentriert, jede Zeile selbst zu lesen oder zu schreiben. Der Fokus lag auf den Ergebnissen. Viele Designer haben das Gleiche getan. Da die meisten von ihnen keine Entwickler waren, konnten sie die Richtigkeit des Codes nicht beurteilen.

Ich habe die Rahmenbedingungen (Instagram sichere Zonen) überprüft und das Video fertiggestellt. In der realen Welt würde man dem Kunden in der Regel regelmässig den Fortschritt zeigen, um Rückmeldungen zu erhalten. So kann man sicherstellen, dass man auf dem richtigen Weg ist, das Design bei Bedarf anpassen und den Kunden einbinden.

Bei unserem Future Fridays-Workshop haben wir statt Kundenpräsentationen den kreativen Prozess und das Endprodukt innerhalb der Gruppe geteilt. Das Ergebnis? Eine kurze Videoanimation für Instagram.

V. Vergleich der Ergebnisse

Das war der interessanteste Teil: der Vergleich der Arbeit von Designern und Entwicklern.

Wie fielen die Ergebnisse der Designer aus?

• Die meisten hatten wenig bis gar keine Programmiererfahrung.
• Sie zeigten unglaubliche Fantasie und Kreativität. Das bewies ihre umfangreiche Erfahrung mit dem kreativen Prozess.
• Sie waren mutig und bereit, sich an der KI-Code-Generierung zu versuchen.
• Sie waren neugierig, experimentierten viel und hatten viel Spass dabei.
• Sie hatten jede Menge Geduld und wiederholten den Vorgang so lange, bis das Ergebnis genau ihrer Vorstellung entsprach.
• Ihre Arbeiten vermittelten durch Farbe und Komposition die Emotionen und Dringlichkeit des Klimawandels.

Wie war mein Ergebnis als Softwareentwicklerin?

• Ich hatte ein starkes Konzept, ein ansprechendes visuelles Design und setzte Texturen überlegt ein.
• Ich verstand den Code perfekt und konnte ihn leicht lesen.
• Allerdings hatte ich weniger Geduld mit Iterationen. Aufgrund von Zeitdruck lieferte ich ein „pragmatisches” Ergebnis (warten wir Entwickler immer bis zur letzten Minute mit der Fertigstellung?)
• Meine Storytelling war weniger klar als die der anderen.

Für mich war es am wertvollsten, den kreativen Prozess der Designer zu beobachten, von ihren Denkweisen zu lernen und ihre Entscheidungen zu verstehen.

VI. Interpretation der Ergebnisse

Was sagt uns das?

Mir wurde klar, dass mir das Vibe Coding (das Prompting von KI) zwar nicht schwerfiel, die Designer jedoch ein Ergebnis mit grösserer emotionaler Wirkung lieferten.

Designer beherrschen die Kunst des kreativen Ausdrucks. Ihre Erfahrung, Kreativität, Arbeitsweise und Affinität zur Ästhetik verschafften ihnen einen Vorteil. Sie wussten instinktiv, welche Farben und Formen funktionieren würden und welches Design-Tool sie wählen sollten.

Entwickler sind besser im Programmieren und pragmatischer. Allerdings denken sie weniger über die Emotionen nach, die eine Visualisierung hervorrufen könnte.

Meine Schlussfolgerung ist jedoch, dass Entwickler aufholen können. Unsere technische Grundlage ist solide. Wir können lernen, bessere Visualisierungen zu erstellen, indem wir bestehende Kunstwerke analysieren (reverse-engineering) und lernen, mit den Augen eines Designers zu sehen.

VII. Ersetzt KI Fachkräfte?

Wird KI Entwickler, Designer oder Daten-Storyteller ersetzen?

Nein, zumindest nicht zum jetzigen Zeitpunkt.

KI-Tools und -Methoden wie Vibe Coding ersetzen keine qualifizierten Fachkräfte, sondern unterstützen sie.

• Designer nutzen KI, um komplexe Ideen umzusetzen, die sie zuvor nicht programmieren konnten.
• Entwickler nutzen KI, um die Lücke in der visuellen Kreativität zu überwinden.

Die emotionale Vielfalt, der Stil und die künstlerische Ausrichtung kommen von dir. Sie sind unverwechselbar und individuell. Kreativität und die Fähigkeit, Emotionen zu wecken, sind nach wie vor dein Privileg. Eine KI kann diesen menschlichen Funken nicht von selbst entfachen.

Wenn du ein erfahrener Fachmann bist, ist KI ein unverzichtbares Werkzeug, das du beherrschen musst, um deine Arbeit zu verbessern.

Wenn du Einsteiger bist, brauchst du eine solide Grundlage, um die Ergebnisse der KI beurteilen zu können. Ohne die Grundlagen wirst du nur Rätselraten können.

VIII. Ansätze kombinieren: neue Möglichkeiten eröffnen

Ich sehe grosses Potenzial für die Gestaltung wirklich ausdrucksstarker, ansprechender und effektiver Visualisierungen, wenn man „Design Vibe” mit „Developer Logic” kombiniert.

Wir haben derzeit zwei starke Qualifikationsprofile:

• Die Stärken von Softwareentwicklern: Wir bringen analytisches Denken, kritische Codeanalyse, automatisierte Tests, API-Integration, Kenntnisse in der Bereitstellung von Echtzeitdaten, Skalierbarkeit und Leistung mit. Wir sorgen dafür, dass Dinge zusammen funktionieren, und verfolgen dabei manchmal einen pragmatischen Ansatz.
• Die Stärken von Designern: Sie bringen die „perfekte“ Ästhetik, emotionales Storytelling, ein Design, das die Natur der Daten widerspiegelt, Neugier und tiefe Kreativität mit. Sie sorgen dafür, dass sich Dinge richtig anfühlen.

Beide Gruppen beginnen mit einem Konzept, können die Daten analysieren, kennen ihre Zielgruppe und praktizieren eine iterative Umsetzung.

Warum lassen wir sie nicht zusammenarbeiten – zum Beispiel beim Aufbau einer interaktiven Webanwendung mit hohen grafischen Anforderungen?

Wie kann man von dieser Kombination profitieren?

Ein kombinierter Ansatz für wirkungsvollere Visualisierungen

Wenn Designer und Entwickler zusammenarbeiten, entsteht eine effektivere und ansprechendere Visualisierung. Designer bringen ihre Expertise im Bereich visuelles Storytelling ein, während Entwickler für die technische Zuverlässigkeit sorgen. Durch eine frühzeitige Zusammenarbeit können beide Seiten Ideen testen, potenzielle Probleme identifizieren und ein nahtloses Erlebnis gewährleisten.

Wie man zusammenarbeitet

• Designer: Sie definieren die emotionale Reise des Benutzers. Wie soll sich das Erlebnis anfühlen – überraschend, bestärkend oder kraftvoll? Das sollte sich im Design und in den Interaktionen widerspiegeln.
• Entwickler: Sie sorgen dafür, dass die Interaktionen schnell, responsive und stabil sind, auch bei grossen oder komplexen Datensätzen.

Warum das funktioniert

• Balancierte Ergebnisse: Das Endprodukt verbindet emotionale Bindung mit technischer Robustheit.
• Schnellere Problemlösung: Probleme mit Design oder Performance kann man frühzeitig erkennen, was Zeit spart und Nacharbeiten reduziert.
• Bessere Interaktion: Die Interaktion der Nutzer – egal ob beim Bewegen des Mauszeigers, beim Filtern oder beim Erkunden von Daten – sollte sich wie eine geführte Reise anfühlen und das Erlebnis verbessern.

Dieser Ansatz sorgt dafür, dass die Nutzer engagiert bleiben und die Übersicht behalten, und bietet ihnen eine reibungslose und durchdachten Erfahrung, die sowohl durch kreative als auch technische Stärken ermöglicht wird.

Sich als Entwickler ohne Designer verbessern

Auch wenn du ohne Designer arbeitest, kannst du deine Visualisierungsfähigkeiten verbessern, indem du dich mit Designprinzipien beschäftigst. Studiere Konzepte wie Farbtheorie, visuelle Kanäle, Hierarchie und Layout und schau dir Visualisierungen an, die dir gefallen.

Analysiere die Designs: Welche Entscheidungen hat der Designer getroffen? Warum wurde eine bestimmte Technik oder Form gewählt? Wenn du diese Entscheidungen verstehst, kannst du deine eigene Arbeit verbessern.

Experimentiere und erkunde neue Ansätze, wenn es deine Zeit erlaubt. Du musst kein Designer werden, aber wenn du die grundlegenden Prinzipien verstehst, kannst du effektivere und ansprechendere Visualisierungen erstellen.

Ein letzter Gedanke

Der Workshop hat mir gezeigt, dass Code mehr als nur Logik ist; er ist ein Medium zum Ausdrücken. Egal, ob du ein komplexes Backend oder eine kleine Webanimation entwickelst, wenn du den menschlichen Aspekt im Blick behältst, wird deine Arbeit besser.

Deshalb habe ich eine Herausforderung für dich: Wenn du das nächste Mal einen freien Nachmittag hast, öffne p5.js, lass dir von einer KI einen „Perlin-Noise-Code” geben und schau, was passiert. Du wirst vielleicht selbst überrascht sein, was du damit zaubern kannst.

Weitere Quelle:

Die Schneemann-Animation als Mini-Webanwendung

---