Die neue Website ist online. Der Umbau mit KI hat eine Woche gedauert, mit ein paar Planänderungen unterwegs. Hier ist die Videoversion – oder Sie lesen unten die Kurzfassung.
Play videoZur Einordnung: Ich war sieben Jahre lang Produktmanager und kann eigentlich nicht programmieren. In den letzten drei Jahren habe ich aber Projekte mit KI gebaut, und diese Website ist eines davon.
Was nicht funktioniert hat
Die alte Website war über ein Jahr online. Ich mochte sie noch, aber ein paar Dinge haben mich gestört:
- Der Hero. Den Hintergrundeffekt hatte ich satt. Ich wollte selbst im Design vorkommen, mit mehr Persönlichkeit.
- Die Projekte. Eine Projektwand plus ein Bereich mit Highlights – trotzdem musste man sich durchklicken, um etwas zu erfahren, und das Laden sah nicht gut aus.
- Die Leistungen. Sie zählten meine Fähigkeiten auf, aber ein Kunde ohne technischen Hintergrund fragte sich womöglich trotzdem, was ich konkret für ihn tun kann.
- Fehlende Teile. Ich wollte einen Blog und eine Newsletter-Anmeldung.
Der Plan war also: den Look festlegen, Projekte und Leistungen neu denken und dann die neuen Funktionen ergänzen.
Den Look finden
Ich habe mit dem Sammeln von Referenzen begonnen: Websites, Bilder, Layouts, alles, was mir ins Auge fiel. Eines wollte ich unbedingt ausprobieren: eine realistische Figur. Viele Websites setzen auf 3D-Cartoonfiguren; ich wollte sehen, was KI sonst noch kann.
Ich habe einige Konzepte getestet: eine 3D-Cartoonversion von mir, ich im Wasser sitzend, ich vor schlichtem Hintergrund, eine Aufnahme von oben, umgeben von Spiegeln. Die Spiegel sahen als Standbild großartig aus, aber all die Spiegelungen hätten es schwer gemacht, die Figur in Bewegung konsistent zu halten.
Gewählt habe ich einen echten Menschen, der auf Wolken steht – eine Szene, die es so nicht geben kann.
Ein Standbild in Bewegung bringen
Ich habe das Konzept an Claude geschickt, und wir haben die Szene in Ebenen zerlegt: ziehende Wolken ganz hinten, JACK MIAO in der Mitte, ich davor, Navigation und Text obenauf.
Für die Figur war die Idee: Greenscreen-Clips, in denen ich nach oben, unten, links und rechts schaue, umgeschaltet je nach Mausposition – sodass es wirkt, als würde ich Ihrem Cursor folgen. Durch den Greenscreen sitzt die Person sauber zwischen den anderen Ebenen.
Außerdem wollte ich einen Übergang aus dem Hero heraus, als würde man durch die Wolken fallen und darunter herauskommen. Zuerst habe ich versucht, die Wolken in Blender zu bauen, aber auch nach mehreren Runden waren sie noch weit vom Konzept entfernt. Statt einem kostenpflichtigen Wolken-Setup hinterherzulaufen, bin ich auf Video umgestiegen.
Claude hat die Liste der benötigten Assets erstellt und aus dem ursprünglichen Konzept-Prompt Video-Prompts geschrieben. Ich habe Claude über die API mit Higgsfield verbunden, Testclips generiert und, als die Richtung stimmte, die finalen Versionen in 4K gerendert. Dann folgte viel Hin und Her: Fehler beheben, Clips auf der Seite platzieren, prüfen, neu generieren.
Projekte: durch den Himmel fallen
Für diesen Abschnitt brauchte ich die meisten Anläufe. Ein weißer Hintergrund mit Projekten auf einem rotierenden Zylinder. Ein blauer Himmel. Ziehende Wolken. Nichts davon fühlte sich richtig an.
Der Wendepunkt war ein Pinterest-Bild eines Fallschirmspringers, mitten in einem Bilderrahmen. Daraus wurde eine Geschichte: Oben stehe ich auf den Wolken, Sie scrollen durch sie hindurch, und bei den Projekten fällt eine Figur durch den Himmel.
Derselbe Ablauf: Prompts mit Claude, Material aus Higgsfield, Feinschliff auf der Seite. Außerdem habe ich die Liste auf eine kleine Auswahl gekürzt.
Ein Teil des Plans hat sich nicht erfüllt. Eigentlich wollte ich die Projekt-Detailseiten streichen, am Ende habe ich sie behalten. Weniger Projekte auf der Seite, aber Sie können sich jedes weiterhin genauer ansehen.
Leistungen: einfach sagen, was Sache ist
Das Ziel war schlicht: deutlich machen, wobei ich helfen kann. Anderswo gibt es genug Bewegung, deshalb stehen die Leistungen hier einfach in klaren Worten da.
Damit die Geschichte weitergeht, habe ich eine Version von mir generiert, die an Ballons hängt, und sie entlang eines Pfads hinter dem Text animiert. Die Worte erklären; die Figur verbindet den Abschnitt mit dem Rest.
Blog, Anmeldung und die letzte Planänderung
Blog und Newsletter-Anmeldung liefen im Vergleich reibungslos. Claude hat beides gebaut, und Sie lesen gerade das Ergebnis.
Beim Footer habe ich ein letztes Mal die Richtung gewechselt. Meine erste Idee war eine Tastaturtaste, die im Himmel schwebt und das Projektanfrage-Formular öffnet. In Code gebaut, hatte sie nicht den richtigen Look. In Blender modelliert, kam sie näher heran, war aber immer noch nicht richtig.
Also habe ich sie durch etwas ersetzt, das sich leichter umsetzen ließ: ein Fenster, das im Himmel schwebt, und dahinter ich bei der Arbeit. Damit schloss sich die Abfolge: auf Wolken stehen, durch den Himmel fallen, an Ballons schweben und zum Schluss ein Blick auf meinen Arbeitsplatz.
Hinter den Kulissen habe ich außerdem den Bot-Schutz verbessert, die API-Endpunkte aktualisiert und das Deployment der Website umgestellt. Davon sehen Sie nichts, also hebe ich mir das für ein andermal auf.
Was ich mitgenommen habe
Manche Ideen haben es bis zum Schluss geschafft. Die Blender-Wolken, die rotierende Projektwand und die Taste nicht – und jede davon hatte vorher mehrere Anläufe. Manchmal habe ich geändert, wie ich etwas baue; manchmal die Idee selbst.
Das war der eigentliche Prozess: eine Idee so weit umsetzen, dass man sie sich ansehen kann, prüfen, wie sie wirkt, und entscheiden, ob man weitermacht oder etwas anderes versucht. KI macht diese Schleife so schnell, dass man sie in einer Woche viele Male durchlaufen kann.
Scrollen Sie einmal von oben durch, und wenn Sie sehen möchten, was ich als Nächstes baue, abonnieren Sie unten.
