Erstberatung

Wir reden, Claude baut: wie unsere neue Website im Team entstand

Malte Fonfara, · 19 Minuten LesezeitThemen: Websites & RelaunchKI

Die Startseite der neuen NINJAPIRATEN-Website im Dunkelmodus: links „Alles greift ineinander.“, rechts zeichnen die Linien ein Auge mit Fischschwanz, unten Wellen.
Die neue Startseite im Dunkelmodus. In Ruhe wird die Linienwolke zum Auge.

In gut zwei Arbeitstagen haben wir unsere neue Startseite entworfen, im Kern zu zweit: Sophie und ich, zeitweise unterstützt von Roman und Franzi. Am Ende standen sechs Entwürfe, 121 Einträge im Verlauf und fünf veröffentlichte Versionen. Ohne Designprogramm, ohne Folien, nur mit Claude. Das Tempo war das eine. Wichtiger war, wie wir zusammengearbeitet haben: Das Team hat gesprochen, Claude hat gebaut, und alle haben am selben Entwurf entschieden. Die ganze Geschichte steht hier, mit den Umwegen.

Vier Versionen in 90 Minuten

An unserem wichtigsten Arbeitstag ging die neue Startseite viermal online, innerhalb von 90 Minuten. Dazwischen lagen kleine, klare Fragen. Passt der Referenz-Slider auf einen 13-Zoll-Bildschirm? Tragen die drei neuen Kundenlogos? Sitzen die Kästen für Leistungen und KI, hell wie dunkel? Jede Antwort war ein Link, den das ganze Team auf dem eigenen Rechner und Handy öffnen konnte.

Niemand musste ein Layout als Bild herumschicken und erklären, wie es sich später bewegen wird. Niemand musste warten, bis die Entwicklung den Entwurf nachgebaut hat. Was wir gesehen haben, war schon die Seite: mit echter Bewegung, echtem Dunkelmodus und echtem Verhalten auf dem Handy.

Websites können jetzt im Team entstehen, als Gespräch, in dem jede Disziplin sofort sieht, was ihr Beitrag bewirkt. Eine Kette von Übergaben braucht es dafür nicht mehr. Daraus folgt eine zweite Erkenntnis: Folien reichen als Entwurf nicht mehr.

Früher eine Kette, heute ein Gespräch

Wer schon einmal eine Website hat bauen lassen, kennt den klassischen Ablauf. Erst ein Konzept, dann Layouts in einem Designprogramm, dann Abstimmungsrunden über Bilder, dann die Entwicklung, die alles nachbaut, und irgendwann kommen die Texte. Jede Station wartet auf die vorherige. Jede Übergabe kostet Zeit und verliert etwas: eine Bewegung, die im Bild nicht zu sehen war, einen Abstand, der auf dem Handy anders wirkt, eine Formulierung, die im fertigen Layout nicht mehr passt.

Gesprochen haben wir auch früher. Gute Projekte leben davon, dass Design, Text und Technik früh an einem Tisch sitzen. Der Unterschied ist, was nach dem Gespräch passiert. Früher wurde aus dem Gespräch eine Aufgabenliste, die nacheinander abgearbeitet wurde. Heute wird daraus in Minuten ein klickbarer Stand. Die Übersetzung ins Visuelle geht einfach viel schneller.

Damit verschiebt sich, wer mitgestalten kann. Wenn eine Idee nicht mehr erst gezeichnet und dann programmiert werden muss, kann jede:r im Team sie einbringen und sofort beurteilen. Die Designerin sieht, ob ihre Farbwelt im Dunkelmodus trägt. Wer die Texte schreibt, sieht, ob die Überschrift in die Zeile passt. Wer an Ladezeit und Technik denkt, sieht, was die Animation kostet. Und wer verkauft, sieht, wie die Seite auf dem Handy einer Kundin wirkt. Alle schauen auf denselben Link.

Das heißt nicht, dass jede:r alles kann. Es heißt, dass jede Disziplin ihr Urteil einbringen kann, ohne auf eine Übergabe zu warten. Das Urteil selbst bleibt Fachsache. Dazu am Ende mehr.

Warum überhaupt neu

Angefangen hat es mit Neugier. Wir haben ausprobiert, was mit Claude Opus 5.5 möglich ist, und waren beeindruckt. Plötzlich läuft alles ineinander: Gestaltung, Bewegung, Handy, Dunkelmodus. Wir gestalten direkt in HTML.

Allein das Aussehen liegt ein paar Level über dem, was wir vorher hatten. Animationen, die früher Tage gekostet hätten, stehen in einem Bruchteil der Zeit. Wir wollten das zuerst an uns selbst ausprobieren, bevor wir es Kund:innen anbieten.

Das Ziel der neuen Seite ist einfach: mehr Reichweite und mehr Abschlüsse. Und sie soll selbst zeigen, wie wir heute arbeiten. Eine Agentur, die über diese Arbeitsweise spricht, sollte ihre eigene Website damit gebaut haben.

Wer was gemacht hat

Weil es oft falsch verstanden wird: Claude hat unsere Website nicht „gemacht“. Claude ist unser Werkzeugkasten, und den nutzen wir. Ein Teil der Grafiken ist von Hand gebaut, ein anderer entsteht im Zusammenspiel von Designer:innen und Claude.

Die Arbeitsteilung sah so aus:

  • Das Team hat die Richtung bestimmt, Varianten ausgewählt und verworfen, die Texte geschrieben und jede Entscheidung getroffen.
  • Claude hat Ideen in klickbare Entwürfe übersetzt, Varianten nebeneinandergestellt, Animationen in Einzelbildern aufgenommen und Entscheidungen mit Grund in Notizen festgehalten.

Im Kern waren wir zu zweit: Sophie und ich. Roman und Franzi haben zeitweise bei den Design-Iterationen unterstützt. Gearbeitet haben wir während der normalen Arbeitszeit und ohne großes Projektteam. Das ist uns wichtig, weil es zeigt, wie wenig Aufstellung diese Arbeitsweise braucht.

Diese Notizen sind ein unterschätzter Teil der Arbeit. Zu jedem Entwurf gibt es zwei kurze Dokumente: eines zu Zielgruppe, Ziel und Barrierefreiheit, eines zum visuellen System mit Farben, Schriften und Regeln. Dazu kommt ein Verlauf, in dem jede Entscheidung mit Grund steht. Das ist die gemeinsame Sprache des Teams. Wer später dazukommt, ob Mensch oder ein neuer Chat mit Claude, liest nach, was entschieden ist, und fängt nicht bei null an.

Ein Beispiel: Version 2 unserer Startseite haben wir verworfen, mit dem Vermerk, dass nichts davon übernommen wird. Ohne diesen Satz in den Notizen hätten spätere Arbeitsschritte Verworfenes leicht wieder aufgegriffen.

Wie ein Arbeitsschritt aussieht

Damit „das Team spricht, Claude baut“ nicht abstrakt bleibt, hier der Ablauf eines einzelnen Schritts, so wie er sich in diesen Tagen dutzendfach wiederholt hat.

Jemand formuliert, was fehlt oder stört. Das kann eine Designfrage sein („die Lupe wirkt wie ein Lolli“), eine inhaltliche („Mirco gehört in die Kontaktzeile“) oder eine technische („auf dem Handy ruckelt die Animation“). Claude setzt das im Entwurf um und zeigt das Ergebnis, bei Bewegungen als Bildfolge, bei Varianten als Vergleich nebeneinander. Wir schauen drauf, entscheiden und speichern. Ist der Schritt fertig, gibt es einen Link für alle.

Hinter jedem Entwurf steht unser Prototypen-System. Jeder Entwurf hat einen eigenen Link, den man teilen kann. Jede Veröffentlichung bekommt eine Versionsnummer, und ältere Versionen bleiben erreichbar. Wer gerade an einem Entwurf arbeitet, ist für alle sichtbar, damit sich niemand gegenseitig überschreibt. Und es gibt einen Live-Modus, in dem man direkt im Browser ein Element anklickt, sich Varianten zeigen lässt, an Reglern schiebt und das Beste übernimmt.

Ein Schritt dauert nicht mehr Tage, sondern oft Minuten. Damit lohnt es sich, auch kleine Beobachtungen sofort einzubringen, statt sie für die nächste Abstimmungsrunde zu sammeln. Und es macht etwas mit der Haltung im Team. Wer weiß, dass seine Anmerkung in zehn Minuten sichtbar umgesetzt ist, formuliert sie konkreter. Aus „irgendwie zu schwer“ wird „das Band unter den Überschriften ist zu dick“.

Genau diese Konkretheit braucht man, wenn ein Werkzeug präzise umsetzt, was man sagt. Unklare Wünsche ergeben unklare Ergebnisse, nur eben schneller. Das Gespräch im Team wird dadurch wichtiger, nicht unwichtiger.

Zwei Arbeitstage, zwei Personen

Die ganze Startseite ist in gut zwei Arbeitstagen entstanden, im Kern von zwei Personen. Der Verlauf zeigt, wie ungleich sich die Arbeit verteilt hat:

  • Auftakt: erste Richtung und Briefing für den Farbring.
  • Erster Arbeitstag: Aus einer Studie wird in wenigen Stunden eine ganze Startseite.
  • Zweiter Arbeitstag: der Kern. Hier liegen 102 von 121 Einträgen, vier parallele Fassungen und vier Veröffentlichungen.
  • Abschluss: kein Design mehr, nur noch die Planung für die Umsetzung. Von den 121 Einträgen sind 76 inhaltliche Speicherstände. Der Rest ist Organisatorisches: Entwürfe anlegen, kopieren, archivieren und markieren, wer gerade woran arbeitet.

Für Kundenprojekte haben wir daraus Richtwerte abgeleitet:

  • ein bis zwei Stunden Briefing,
  • zwei bis drei Stunden für Richtungen als Skizzen,
  • drei bis fünf Stunden bis zum ersten klickbaren Entwurf mit Link,
  • vier bis sieben Stunden für parallele Varianten, wenn die Richtung offen ist,
  • danach Feinschliff in kleinen Schritten, gut ein Tag.

Voraussetzung ist, dass Inhalte und Entscheidungen bereitliegen. Dann ist der Weg von der Idee zum klickbaren Entwurf keine Frage von Wochen mehr.

Tag eins und zwei: eine Linie, die spazieren geht

Der erste Ansatz war ein Druckbogen-Stil mit Farbkontrollstreifen als Navigation, dazu eine Startseite und vier Themenseiten. Daneben entstanden mehrere typografische Ansätze mit großem Schriftzug. Alle wirkten überladen oder nach KI. Getroffen hat nur ein Motiv aus einem früheren Entwurf: der Farbring aus vier Linien in Cyan, Magenta, Gelb und Schwarz. Dazu gab es ein Briefing mit Konzeptbild, Storyboard und Bewegungsstudie.

Am ersten Arbeitstag ging es schnell. Erst eine Studie zum Einstieg mit dem Farbring, dann ein Vergleich von sechs Schriftpaaren. Wenige Stunden später stand die komplette neue Startseite: Mega-Menü, Referenzen mit Farbeffekt, Kundenlogos, Crew, Anfrage, heller und dunkler Modus.

Danach kam die Idee dazu, die die Website bis heute trägt. Jede der vier Linien steht für ein Thema und zeichnet ihre eigene Figur in einem Zug: ein Auge, einen Browser, eine Tasche, eine Lupe. Die Linien fließen sogar in die Kundenlogos und färben sie ein. Einfache Icons waren uns zu wenig. Text unter den Figuren sah seltsam aus, also wirkt jede Figur allein.

Die Linienwolke verwandelt sich in Einzelbildern in ein Auge
Die Wolke reduziert sich auf die Iris, daraus entsteht das Auge.

Nicht jede Figur saß beim ersten Mal. Die Lupe wirkte in der ersten Fassung eher wie ein Lolli. So etwas sieht man in einem klickbaren Entwurf sofort und bespricht es in einem Satz.

Browser, Tasche und Lupe in der ersten Fassung
die ersten Zeichen, die Lupe noch als Lolli.

Hier zeigt sich auch, was sich am Handwerk verändert hat. Schönheitslinien und Kurven aus der Designgeschichte hätten wir früher ebenso prüfen können. Nur hätte jede Variante Tage gekostet. Jetzt lagen sie nebeneinander, in Bewegung, auf dem Handy, und wir konnten über das Ergebnis reden statt über eine Vorstellung davon.

Die Sackgasse heißt Version 2

Nicht alles lief glatt, und das gehört in ein Making-of. Zu Beginn des zweiten Arbeitstags haben wir eine Kopie angelegt, um den Einstieg neu zu denken: Wolken statt Ring. In knapp zwei Stunden entstanden fünf Anläufe: Doppelspiralen, vier Wirbel, Schneckenspiralen, fließende Flächen und ein Wolkenkranz. Der eine war zu unruhig, der nächste zu zufällig, der letzte überzeugte nicht. Zwischendurch hieß es „zurück zum Ring“, am Ende stand ein klares Urteil: quatsch. Nichts davon ist in der Website gelandet.

Falsche Wege schlägt man auch ohne KI ein. Der Unterschied: Heute kosten sie Stunden statt Wochen, und das Original blieb die ganze Zeit unverändert.

Trotzdem hätten wir früher abbiegen können, nach dem zweiten Anlauf statt nach dem fünften. Ein Teil der Zeit war nötig, um herauszufinden, was wir nicht wollen. Ein anderer Teil wäre mit zwei Regeln gespart worden:

  1. Erst Skizzen erstellen lassen, dann bauen. Eine Skizze kostet Minuten, ein Umbau des Einstiegs eine Stunde.
  2. Bei der KI mitlesen. Wer verfolgt, was gerade entsteht, erkennt falsche Richtungen, bevor sie fertig gebaut sind.

Die Sackgasse hatte noch eine Nebenwirkung, die mit Teamarbeit zu tun hat. „Version 2“ konnte im Gespräch zwei Dinge bedeuten: ein zweites Konzeptbild oder diesen Entwurf. Das hat Rückfragen gekostet. Seitdem gilt: Jede Fassung heißt im Gespräch, im Ordner und im Link gleich. Wenn mehrere Menschen gleichzeitig mitreden, sind eindeutige Namen keine Kleinigkeit.

Vier Fassungen an einem Tag

Danach haben wir neu angesetzt, diesmal parallel. Eine Fassung, Version 3, baute die Linienwolke als Hauptmotiv aus, mit Figuren an den Überschriften: einem Schiff, einer Krake, die zum Steuerrad wird, und einem Papagei, der zur Flaschenpost wird. Eine zweite Fassung erzählte die Agentur als Geschichte: Piraten über Wasser, Ninjas darunter. Wenig später kam eine dritte dazu. In weniger als sieben Stunden lagen vier Fassungen nebeneinander.

Krake und Steuerrad, Papagei und Flaschenpost an den Überschriften
die gewählten Figuren an den Überschriften.

Sophie hat die Design-Iterationen mit mir getragen, Roman und Franzi haben zeitweise unterstützt. Für alle drei war es der erste Einsatz unseres neuen Prototypen-Systems, mit einer klaren Regel: nur Claude. Kein Designprogramm, keine weitere Software, kein Baukasten. Sophie ist klassische Designerin. Für sie und alle, die so ausgebildet sind, heißt das, das eigene Handwerk neu zu denken. Der Blick für Farbe, Form und Rhythmus bleibt, das Werkzeug ist ein anderes: Statt Flächen zu zeichnen, beschreibt man, was man will, prüft das Ergebnis und korrigiert.

Genau hier wird der Gedanke vom Anfang greifbar. Mehrere Fassungen liefen gleichzeitig, und alle waren sofort als Link vergleichbar. Niemand musste präsentieren. Wir haben die Fassungen geöffnet, nebeneinandergelegt und entschieden.

Aus Sophies Fassung „Version 3 in Grün mit Wellen“ kam, was die Seite heute prägt: der grüne Dunkelmodus, die Wellen und die Kästen. In der aktuellen Fassung haben wir genau diese Teile übernommen. Pillenförmige Buttons, Kachel-Layout und eine andere Schrift haben wir weggelassen. Kacheln und Pillen wirken schnell beliebig, und die Handschrift der Linien wäre verwässert.

Entscheidungsbogen: grüner Dunkelmodus und Wellen aus Sophies Fassung
der Bogen, auf dem die Entscheidung für den grünen Dunkelmodus fiel.

Auch die Farbwelt selbst entstand im Vergleich. Der frühere Dunkelmodus in Indigo wich dem Grün. Für den hellen Modus waren Salbei zu grau und Lindgrün zu blass, es wurde Mint. Solche Entscheidungen fielen auf Vergleichsbögen, die Claude in Minuten aufgenommen hat, und dauerten entsprechend kurz.

Einstieg im Vergleich: grüner Dunkelmodus, hell und der frühere Dunkelmodus in Indigo
der Einstieg in drei Farbwelten.

Manchmal war die beste Lösung ein Kompromiss. Unter den Überschriften lag bei uns ein kräftiges Band, bei Sophie ein feiner Strich von 1,6 Pixeln. Das Band war zu schwer, der feine Strich verschwand fast. Geworden ist es ein Strich von 3 Pixeln. Nicht Entweder-oder, sondern das Beste aus beiden Fassungen.

Der Strich unter den Überschriften: fein, Band, neu
Sophies feiner Strich, das bisherige Band und der neue Strich.

Parallel zu arbeiten hat sich gelohnt. Aus jeder Fassung blieb etwas übrig, auch aus der Geschichte mit Piraten und Ninjas: Sie brachte die Wellen als Meer und das grüne Farbgefühl ein. Die wichtigste Regel dabei: vorher festhalten, was übernommen wird und was nicht. Nur so bleibt eine Hauptfassung erkennbar, statt dass alles zu einem Kompromiss verschwimmt.

Feinschliff: viele kleine Fragen

Der Rest des zweiten Arbeitstags war dem Feinschliff gewidmet, und er zeigt, wie unterschiedlich die Beiträge eines Teams sind. Es ging um Gestaltung, um Inhalt und um Technik, oft im selben Atemzug.

Der Referenz-Slider bekam einen neuen Aufbau, damit er auch auf 13-Zoll-Bildschirmen funktioniert: Text links, Pfeile unten, Linien in der Mitte.

Referenz-Slider bisher und neu
der Slider vorher und nachher.

Die Logoreihe wuchs um drei Kundenlogos auf zehn. Eines davon haben wir nachgezeichnet, weil das Original eine Unterzeile hat, die in der Reihe nicht lesbar gewesen wäre.

Ein Kundenlogo im Original mit Unterzeile und nachgezeichnet ohne
Original und Nachzeichnung.

Und dann die Texte. Vier Texte auf der Startseite habe ich selbst geschrieben. Alle früheren Textvorschläge von Claude flogen raus. Daraus ist eine feste Regel geworden, die wir auch für Kundenprojekte übernehmen: Texte, die jemand selbst geschrieben hat, sind unantastbar. Claude darf vorschlagen, aber nicht ungefragt ersetzen. Gerade wenn viele Menschen an einem Entwurf arbeiten, muss klar sein, wessen Wort gilt.

Auch der KI-Abschnitt bekam seine Figuren: Zahnräder aus Wolkenlinien für Automation, eine Sprechwolke mit tippenden Punkten für Assistenz.

Die KI-Figuren: Zahnräder und Sprechwolke
die KI-Figuren groß.

Zum Schluss kamen Spielereien dazu, um auszuprobieren, wie weit die Figuren tragen. Die Krake schwimmt beim Scrollen in einem Bogen mit Luftblasen zum Teamfoto. Der Papagei fliegt flatternd neben den Knopf „Anfrage senden“. Der Browser wird zum Handy, die Tasche zur Kreditkarte. Eine erste Idee, bei der die Krake am Teamfoto spritzt, gefiel nicht und wurde ersetzt.

Die Krake schwimmt beim Scrollen ins Teamfoto
der Ablauf der Krake in Einzelbildern.

Jede dieser Fragen war ein eigener kleiner Schritt mit eigener Veröffentlichung. Dass vier davon in 90 Minuten online gingen, lag genau daran: Eine Veröffentlichung beantwortete eine Frage. So blieb jede Version nachvollziehbar, und niemand verlor den Überblick, was sich geändert hatte.

Präzision bis ins Einzelbild

Was uns am meisten überrascht hat, war die Präzision. Man kann heute ziemlich genau steuern, wohin man will, bis zur Bahn einer einzelnen Linie.

Zum Abschluss habe ich die Animation im Einstieg Bild für Bild durchgesehen statt nur in Echtzeit. Dabei fielen Dinge auf, die beim normalen Abspielen untergehen: Linien, die als Geister stehen blieben, angeschnittene Bögen, ein schiefer Schweif an der Wolke.

Befunde der Bildprüfung mit Beschreibung
die Befunde der Bildprüfung.

Die Animation war seit dem ersten Arbeitstag Stück für Stück gewachsen. Jede Verwandlung, jeder Anflug und jede Fläche, die eine Linie verdeckt, hatte eigene Sonderfälle bekommen. In diesem Durchgang wurden daraus einheitliche Regeln. Die Linien kommen beim Laden aus verschiedenen Richtungen, der Aufbau läuft von vorn nach hinten, und eine Fläche deckt nur so weit, wie der Stift schon gezeichnet hat. Danach ging Version 5 online.

Aufbau der Animation vorher und nachher
Aufbau vorher und nachher, mit Linien aus verschiedenen Richtungen.

Dieser Durchgang zeigt auch die Arbeitsteilung zwischen Mensch und Werkzeug. Vieles sieht man als Mensch sofort, eine KI nicht. Claude baut, nimmt auf, misst und vergleicht schnell. Ob eine Bewegung schön ist, ob eine Kurve Spannung hat oder nur zufällig wirkt, entscheiden wir.

Was ein Team braucht, damit das funktioniert

Wenn viele mitreden und eine KI in Minuten liefert, entsteht schnell Chaos. Aus diesen gut zwei Tagen haben wir eine Handvoll Regeln mitgenommen, die das verhindern:

  • Eine Veröffentlichung, eine Frage. Jede Version beantwortet genau eine Frage. Dann weiß jede:r im Team, worauf zu achten ist.
  • Höchstens drei Varianten gleichzeitig. Jede bekommt einen Satz, was sie beweisen soll. Mehr Varianten überfordern das Urteil, statt es zu schärfen.
  • Nach vier Stunden ohne Entscheidung wird gefragt, nicht weitergebaut. Schnelles Bauen verführt dazu, Entscheidungen aufzuschieben.
  • Entscheidungen sofort mit Grund aufschreiben. Sonst kommen verworfene Ideen durch die Hintertür zurück.
  • Eindeutige Namen. Jede Fassung heißt überall gleich.
  • Texte der Autor:innen bleiben wörtlich. Vorschläge ja, stilles Umschreiben nein.
  • Teile übernehmen, nicht Ganzes. Aus Teamentwürfen wird übernommen, was zur Hauptfassung passt, und das wird vorher festgelegt.

Keine dieser Regeln ist neu. Neu ist, wie wichtig sie werden, wenn die Umsetzung kein Engpass mehr ist. Dann liegt der Engpass bei den Entscheidungen, und die brauchen Struktur.

Wo die Zusammenarbeit gerieben hat

Parallel zu arbeiten war die richtige Entscheidung. Reibungslos war es nicht, und auch das gehört zur Geschichte.

Mehrere Fassungen teilten sich dieselben Bausteine, etwa die Kundenlogos und den Code der Animation im Einstieg. Wer an einer Stelle etwas verbesserte, musste wissen, ob die anderen Fassungen davon betroffen sind. Bei jeder Veröffentlichung meldete die automatische Prüfung außerdem dieselbe bekannte Kleinigkeit an den alten Unterseiten. Sie war längst geklärt, musste aber jedes Mal neu vermerkt werden. Unsere Lehre daraus: Wiederkehrende Meldungen einmal klären und festhalten, statt sie jedes Mal neu zu begründen.

Auch die Organisation hinterlässt Spuren. Damit niemand gleichzeitig an derselben Fassung arbeitet, markiert unser System, wer gerade woran sitzt. Das hat funktioniert, aber 36 der 121 Einträge im Verlauf sind genau solche Markierungen ohne inhaltliche Änderung. Der Verlauf wird dadurch länger und schwerer zu lesen. Daran arbeiten wir.

Und schließlich die Menschen selbst. Wer klassisch gestaltet, ist gewohnt, ein Layout in Ruhe zu Ende zu denken und dann zu zeigen. In einem System, in dem jeder Zwischenstand sofort als Link sichtbar ist, verschiebt sich das. Man zeigt früher, man zeigt öfter, und man muss aushalten, dass ein halbfertiger Stand kommentiert wird. Für Sophie, Roman und Franzi war das der erste Durchgang mit dieser Arbeitsweise. Dass aus ihren Iterationen die Farbwelt und die Wellen der fertigen Seite stammen, zeigt, dass sich das Umdenken lohnt.

Für uns ist das der eigentliche Lernprozess dieser Tage. Die Technik ist schnell verstanden. Die Zusammenarbeit neu einzuspielen, dauert länger: wer wann entscheidet, wie man Anmerkungen formuliert, wann man stoppt und fragt. Das üben wir jetzt mit jedem Projekt.

Was wir beim nächsten Mal anders machen

Das würden wir anders machen:

  • Erst Skizzen, dann Bau. Bei offener Richtung zuerst Skizzen erstellen lassen und eine auswählen. Die Sackgasse mit Version 2 hätte sich so abkürzen lassen.
  • Mitlesen. Nicht warten, bis etwas fertig ist, sondern früh eingreifen.
  • Bild für Bild prüfen, und zwar ab der ersten Animation. Bei uns kam die Prüfung erst am Schluss. Bis dahin war die Animation über mehr als 20 Speicherstände gewachsen, mit vielen Sonderfällen. Hätten wir früher in Einzelbildern geschaut, wären die Fehler gar nicht erst zusammengewachsen.
  • Regeln früh vereinheitlichen. Sobald dieselbe Sache dreimal leicht anders gelöst ist, eine Regel für alle festlegen.
  • Die Unterseiten mitdenken. Die vier Themenseiten zeigten damals noch den Stil des allerersten Ansatzes. Der Bruch zur Startseite war sichtbar, behoben haben wir ihn erst mit dem Umbau.
  • Technik später, aber bewusst. Die Startseite steckte damals noch in einer einzigen großen Datei. Für einen Prototyp war das schnell, für eine Website war es zu schwer. Optimiert haben wir sie erst beim Umbau zur Website.

Vom Prototyp zur Website: kein Nachbau

Die letzte Entscheidung dieser Tage betrifft die Technik, und sie folgt direkt aus der Arbeitsweise. Unser Prototyp besteht schon aus echtem HTML, CSS und JavaScript. Ihn in einem Baukasten nachzubauen, hieße, die handgezeichnete Linienanimation und jedes Detail noch einmal herzustellen. Also haben wir das nicht getan. Die neue Website ist mit Astro entstanden und läuft auf einem eigenen Server. Der Prototyp wurde dafür in Bausteine zerlegt und weiterverwendet.

Das ist die Fortsetzung des interdisziplinären Gedankens. Wenn Entwurf und Website dasselbe sind, entfällt die letzte große Übergabe zwischen Design und Entwicklung.

Dazu kommt ein zweiter Grund. Claude arbeitet mit Dateien direkt und nachprüfbar. Jede Änderung ist eine lesbare Änderung an einer Datei, die sich vergleichen und zurücknehmen lässt. Auch die Inhalte liegen als Dateien vor: Leistungen, Referenzen, Crew und dieses Journal. Gepflegt werden sie zunächst über Claude. Wenn Kolleg:innen ohne Claude selbst schreiben sollen, kommt später eine einfache Oberfläche dazu, die auf denselben Dateien arbeitet. Ob und wann wir die brauchen, ist eine der offenen Fragen. Sie hängt genau daran, wie weit diese Arbeitsweise im ganzen Team trägt. Unser Ziel sind 100 Punkte bei Performance, SEO, Barrierefreiheit und Best Practices. Wie das ausgeht, erzählen wir, wenn die Seite live ist.

Für Kundenprojekte bleibt Bricks unser Werkzeug. Der Prototyp dient dort als Vorlage. Schnelle, schlanke Websites mit Astro könnten ein zweites Angebot werden, mit unserer eigenen Seite als Beweis.

Was das für euch heißt

Wir verkaufen inzwischen nicht mehr, ohne vorher Ergebnisse zu zeigen. Wenn Iteration so schnell geworden ist, kostet ein früher Vorschlag wenig, und er bringt das Gespräch sofort auf die richtige Ebene. Ihr klickt euch durch einen echten Entwurf, auf eurem Handy, statt Folien zu beurteilen. Und eure Leute aus Marketing, Vertrieb oder Geschäftsführung können mitreden, weil sie sehen, worüber sie reden.

Aus diesen Tagen ist ein Ablauf entstanden, den wir für Kundenprojekte nutzen wollen. Wir nennen ihn Prototyp-Sprint:

  1. Briefing. Zielgruppe, Ziel, Marke, Pflichttexte und Anforderungen an Barrierefreiheit werden festgehalten. Texte, die ihr selbst schreibt, sichern wir wörtlich.
  2. Richtungen. Zwei bis drei Skizzen oder Konzeptbilder, noch nicht gebaut. Eine wird gewählt, die anderen werden mit Grund verworfen.
  3. Erster klickbarer Entwurf. Einstieg und zwei bis drei Abschnitte, hell und dunkel, auf dem Handy. Ihr bekommt einen Link und gebt erstes Echo.
  4. Varianten, wenn die Richtung offen ist. Höchstens drei nebeneinander, danach eine Hauptfassung mit den besten Teilen.
  5. Feinschliff in kleinen Schritten. Je Schritt eine Frage, je Frage eine Version.
  6. Bildfolge-Prüfung. Jede Bewegung in Einzelbildern, auf Handy und Desktop, hell und dunkel, von Anfang an.
  7. Dokumentieren und übergeben. Die Notizen werden auf den echten Stand gebracht, dann geht es an die Umsetzung.

Was ihr dafür mitbringen müsst, ist überschaubar: Inhalte, die bereitliegen, und Menschen, die entscheiden können. Je kürzer der Weg zu einer Entscheidung, desto mehr spielt das Tempo der Umsetzung aus. Ein Entwurf, der zwei Wochen auf Freigabe wartet, ist nicht schneller als früher.

Eine Grenze gehört dazu. Wir sind Fachleute und können einschätzen und bewerten, was entsteht. Wie gut das ohne diese Erfahrung funktioniert, wissen wir nicht. Interdisziplinär heißt für uns nicht, dass jede:r alles entscheidet. Es heißt, dass jede Disziplin früh mitreden kann und das Urteil bei denen bleibt, die es tragen können. Die KI liefert schnell, aber jemand muss wissen, wohin es gehen soll.

Wie „erst zeigen, dann verkaufen“ in Kundenprojekten aussieht, erzählen wir im Beitrag Erst zeigen, dann verkaufen. Schreibt uns, was ihr vorhabt.

Häufige Fragen

Kurz beantwortet: was uns zu diesem Beitrag oft gefragt wird.

Design, Text, Technik und Vertrieb arbeiten nicht mehr nacheinander, sondern gleichzeitig am selben klickbaren Entwurf. Das Team bespricht, was es will, Claude setzt es um, und alle beurteilen dasselbe Ergebnis über einen Link. Jede Disziplin bringt ihr Urteil ein, ohne auf eine Übergabe warten zu müssen.

Gut zwei Arbeitstage, während der normalen Arbeitszeit. Im Kern haben zwei Personen gearbeitet, Sophie und Malte, zeitweise mit Unterstützung von Roman und Franzi. Der größte Teil der Arbeit fiel auf einen einzigen Tag.

Nein. Claude ist unser Werkzeugkasten. Richtung, Auswahl und jede Entscheidung kamen von uns, ein Teil der Grafiken ist von Hand gebaut oder im Zusammenspiel von Designer:innen und Claude entstanden. Neu ist das Tempo, mit dem aus einem Gespräch etwas Sichtbares wird.

Für diese Website haben wir bewusst keins benutzt. Das Team hat ausschließlich mit Claude gearbeitet und direkt in HTML gestaltet. Ergebnis waren klickbare Prototypen mit eigenem Link statt Bilder oder Folien.

Das wissen wir noch nicht. Wir sind Fachleute und können einschätzen, ob eine Richtung trägt. Die KI liefert schnell, aber jemand muss mitlesen und früh merken, wenn es in die falsche Richtung geht.

Porträt von Malte Fonfara

Malte Fonfara

Geschäftsführer von NINJAPIRATEN. Die ganze Crew

Einfach anfragen.

Erzählt uns kurz, was ihr vorhabt. Wir melden uns mit Terminen für eine kostenlose Erstberatung per Video-Call.

Kostenlos und unverbindlich.

Wird verschickt …

Angekommen.

Danke! Wir melden uns per E-Mail mit Terminvorschlägen für die Erstberatung.

Ihr sprecht mit Philipp, Malte oder Mirco. Lieber direkt? info@ninjapiraten.de oder +49 451 61122272