Dieses Projekt ist eine Website für Structiv, ein Studio im Großraum Dallas, das maßgeschneiderte Häuser plant und baut. Sie beginnt mit einem leeren Grundstück, das sich in fünfzehn Sekunden in ein fertiges Anwesen verwandelt. Danach scrollt man seitwärts durch sieben Bildschirme: die Zeichnungen, das Licht, die Innenräume, den Ablauf, einen Kostenrechner und das Studio selbst. Bei jedem Schritt habe ich mit KI gearbeitet. Hier ist das Video, oder Sie lesen unten die schriftliche Fassung.
Play videoDas Video folgt dem Bau der Reihe nach. In diesem Beitrag geht es mehr um die Überlegungen: warum die Website mit einem Film beginnt, warum sie seitwärts scrollt und was ich wieder herausgenommen habe, als sie im Browser lief.
Vier Fragen vor jedem Entwurf
Der Auftrag lief auf vier Dinge hinaus, die die Website leisten musste:
- In wenigen Sekunden klarmachen, dass ein Team alles übernimmt: Planung, Bau und Innenausbau, bis zur Schlüsselübergabe.
- Hochwertig wirken und im Gedächtnis bleiben, ohne wie ein Immobilienexposé auszusehen.
- Beantworten, was Bauherren vor dem Bau beschäftigt: Was wird es kosten, wie lange dauert es, und wer ist verantwortlich?
- Die richtigen Anfragen bringen und Menschen, deren Budget oder Wünsche nicht passen, helfen, das selbst zu erkennen, bevor jemand Zeit für ein Gespräch aufwendet.
Dazu kam ein echtes Haus, um das herum alles entstehen sollte. Jedes Bild und jeder Bildschirm musste dasselbe Haus zeigen: dieselbe Dachlinie, dieselben Fenster, dieselbe Zufahrt.
Der erste Punkt war der wichtigste. „Ein Team, von Anfang bis Ende“ ist leicht behauptet und leicht überlesen. Jeder Bauunternehmer sagt das. Deshalb sollten Besucher es geschehen sehen, statt es zu lesen.
Ein Satz, neun Einstellungen
Die Idee: Die Website mit einer einzigen durchgehenden Einstellung eröffnen, in der ein leeres Grundstück langsam zu einem Zuhause wird, in dem tatsächlich jemand lebt. Keine Schnitte, kein Springen zwischen Projekten, nur ein Haus, eine Kamera und die Arbeit eines Teams.
Bevor ich ein einziges Bild erstellt habe, habe ich diesen Weg in neun Einstellungen zerlegt:
Jede Reihe hat eine Aufgabe. Die erste beginnt den Bau: leeres Grundstück, Bagger, Fundament. Die zweite gibt dem Haus seine Form: Rohbau, Fassade, fertiges Haus. Die dritte wechselt vom Bauen zum Wohnen: durch die Haustür, eine Familie auf dem Sofa, dann hinauf in die Luft über das ganze Anwesen.
Diese letzte Reihe ist der Kern des Films. Die Website eines Bauunternehmens könnte leicht beim „fertigen Haus“ aufhören. Aber Bauherren kaufen kein Gebäude, sie kaufen den Tag des Einzugs. Deshalb geht der Film hinein, bevor er endet.
Als das Storyboard stand, habe ich die Bilder für jede Einstellung erstellt. Das waren viele Runden aus Erzeugen und Verwerfen, und der Maßstab war nicht, ob ein einzelnes Bild gut aussieht. Ich habe den ganzen Satz nebeneinandergelegt und gefragt: Ist das eindeutig dasselbe Haus in verschiedenen Bauphasen? Sitzen die Fenster an derselben Stelle? Verläuft die Zufahrt gleich? Ein schönes Bild, das die Kontinuität brach, flog raus, denn der Film hält nur zusammen, wenn jede Einstellung in die nächste führt.
Auf der Website trägt der Film ein paar Live-Daten: einen Tageszähler von Day 001 bis Day 412 und die aktuelle Bauphase (Grundstück und Fundament, Rohbau, Gebäudehülle, Garten und Ausbau). Die Eröffnungszeile lautet „Every estate starts as dirt.“, die Schlusszeile „From first dig to first dinner.“ Wenn die Kamera auf der Luftaufnahme zur Ruhe kommt, erscheinen fünf Markierungen auf dem Haus (Oberlicht, Pool, Vorhof, Olivenhain, Kalksteinfassade), und jede öffnet eine kleine Karte mit einer Nahaufnahme.
Warum seitwärts, und warum Bauzeichnungen
Für den Rest der Website sollte sich schon das Durchblättern anfühlen wie ein Weg, Schritt für Schritt. Deshalb scrollt sie horizontal, jeweils einen ganzen Bildschirm.
Die Idee, die alles verbindet, kam aus der Welt des Kunden. Architekten liefern ein Haus als Satz von Zeichnungsblättern: A-00, A-01, A-02 und so weiter. Also wurde jeder Bildschirm zu einem Blatt, nummeriert von A-00 bis A-06, und der Wechsel zum nächsten fühlt sich an wie das Umblättern zur nächsten Zeichnung. Schrift, Haarlinien, die warme Papierfarbe und der einzige Bronze-Akzent entstehen alle aus dieser Idee.
Vor jedem visuellen Entwurf habe ich jedem Blatt eine Aufgabe gegeben:
| Blatt | Was es zeigt | Welche Frage es beantwortet |
|---|---|---|
| 01 The Build | Der Film, mit Tageszähler und Markierungen | Wie sieht „ein Team“ aus? |
| 02 Elevation | Bauplan auf der einen Seite, Foto auf der anderen | Können sie wirklich entwerfen? |
| 03 Lighting | Dasselbe Haus von Tag über Dämmerung bis Nacht | Denken sie an Details? |
| 04 Interiors | Der Wohnraum, mit Material-Markierungen | Ist das Innere so gut wie das Äußere? |
| 05 Process | Klassischer Ablauf gegen Planen und Bauen aus einer Hand | Wie lange dauert es? |
| 06 Estimate | Eine Kostenspanne in dreißig Sekunden | Was kostet es mich? |
| 07 Studio | Zahlen, eine Kundenstimme, Kontakt | Kann ich ihnen vertrauen, und wie fange ich an? |
Die Reihenfolge ist ein Trichter. Die ersten vier Blätter gewinnen Aufmerksamkeit und Vertrauen, die nächsten zwei beantworten die praktischen Fragen, und erst dann bittet die Website um ein Gespräch. Wer nach dem letzten Blatt weiterscrollt, landet wieder beim leeren Grundstück. Die Geschichte eines fertigen Hauses wird zur Einladung, das nächste zu beginnen.
Texte, die nach Bauunternehmer klingen
Vor den Überschriften habe ich ein paar Regeln für die Texte festgelegt. Kurz und klar in Aussagesätzen. Zahlen, wo immer möglich: Tage, Quadratfuß, Monate. Und kein „dream home“, „luxury living“ oder „world-class“. Solche Formulierungen lassen eine Website wie Werbung klingen, und diese Zielgruppe hat genug Werbung gesehen.
Die Überschriften wurden schlichte Aussagen, jede eine Behauptung, die ihr Blatt dann zeigt:
- Designed in-house. Built by the same hands. (Im eigenen Haus entworfen. Von denselben Händen gebaut.)
- Light is a material. (Licht ist ein Material.)
- Finished by the team that framed it. (Fertiggestellt vom Team, das den Rohbau aufgestellt hat.)
- A simpler, faster path to an exceptional home. (Ein einfacherer, schnellerer Weg zu einem außergewöhnlichen Haus.)
- What will your home cost? (Was wird Ihr Haus kosten?)
- One team. From dirt to dinner. (Ein Team. Vom Bauplatz bis zum Abendessen.)
Das Blatt Elevation ist das deutlichste Beispiel für Zeigen statt Behaupten. Die linke Hälfte ist eine Strichzeichnung, Linie für Linie vom Foto abgezeichnet, die rechte das fertige Haus. Zieht man den Trenner, wird die Zeichnung zum Gebäude. Danach muss die Überschrift nicht mehr viel überzeugen.
Der Rechner beantwortet die schwierigste Frage
Die Frage, die man einem Bauunternehmer am ungernsten stellt, lautet „Was kostet das?“. Deshalb bekam sie ein eigenes Blatt.
Fünf Eingaben: Wohnfläche, Ausstattungsstufe, Grundstückssituation, Anzahl der Geschosse sowie Pool und Außenbereich. Das Ergebnis ist eine Spanne, keine einzelne Zahl: mit den Standardwerten $3.8M–$4.6M und 14–18 Monate, aufgeteilt in Planung, Bau und Innenausbau. Darunter steht, dass die Spanne ein Richtwert für den Großraum Dallas ist und der endgültige Preis nach einer Grundstücksbesichtigung folgt.
Ein paar Entscheidungen waren hier wichtig:
- Eine Spanne, kein Angebot. Eine einzelne Zahl liest sich wie ein Versprechen, das niemand halten kann, bevor er das Grundstück gesehen hat. Eine Spanne ist ehrlich und trotzdem nützlich.
- Keine E-Mail nötig. Die Schätzung soll Besuchern bei der Entscheidung helfen, nicht sie einfangen. Passt es, öffnet der Button direkt unter dem Ergebnis das Beratungsformular, die Schätzung ist schon eingetragen.
- Sie filtert ebenso, wie sie verkauft. Wer auf ein Haus für eine Million Dollar hofft, erfährt in dreißig Sekunden, dass dies nicht das richtige Studio ist, und das ist für beide Seiten ein gutes Ergebnis. Das war der vierte Punkt des Auftrags.
Dahinter steckt eine einfache Formel (Fläche × Preis der Ausstattungsstufe, plus feste Beträge für einen Pool oder einen Abriss), mit allen Zahlen in einer Datei. Will der Kunde einen Preis ändern, ist es eine einzige Änderung.
Das Blatt Process beantwortet „Wie lange?“ im selben Geist. Zwei Zeitachsen auf einer Skala: der klassische Weg, bei dem Planung, Genehmigung, Ausschreibung, Bau und Ausbau nacheinander 18–24 Monate dauern, und Planen und Bauen aus einer Hand, bei dem die Phasen überlappen und nach 12–16 Monaten fertig sind. Der Unterschied ist sichtbar, bevor man ein Wort liest.
Von Konzeptbildern zum echten Browser
Vor der Entwicklung habe ich detaillierte Konzeptbilder jedes Blatts erstellt, um zu prüfen, ob Fotos, Schrift und Farben zusammenpassen und das Tempo stimmt. Dann habe ich alles in Claude Design zu einem Designsystem gemacht und Entwurf, Briefing und Entwicklungsnotizen an Claude Code übergeben.
Die erste Version war zu etwa 80 % da. Struktur und wichtigste Bilder entsprachen dem Plan. Aber schon nach wenigen Sekunden Benutzung spürte man, was nicht stimmte: Das Scrollen hatte eine seltsame Trägheit, der Wechsel zwischen Bildschirmen ruckelte, und ein Teil der Schrift war nicht, wie ich ihn wollte.
Nichts davon können Konzeptbilder zeigen. Sie scrollen nicht. Die nächste Phase drehte sich deshalb darum, wie sich die Website anfühlt, und viel davon war Weglassen:
- Ein Bildschirm pro Wischbewegung. Ein Trackpad sendet weiter Scroll-Ereignisse, nachdem die Finger schon weg sind, sodass ein kräftiges Wischen zwei Bildschirme überspringen konnte. Jetzt bewegt eine Geste genau einen Bildschirm, ein leichter Stups federt zurück.
- Der Film läuft von selbst. Anfangs spulte das Scrollen durch den Film. Klingt raffiniert, legte aber das Tempo der Geschichte in das Handgelenk der Besucher, und die meisten hetzten hindurch oder blieben stecken. Jetzt läuft er von allein, auf fünfzehn Sekunden gekürzt, und die Markierungen erscheinen am Ende.
- Weniger Zeichnungsdekor. Die erste Version hatte ein Fortschrittslineal, einen Schriftkopf auf jedem Blatt, ein Raster, das zwischen den Bildschirmen darüberfuhr, und Zahlen-Einblendungen über dem Film. Jedes davon stand im Konzept, zusammen waren sie Lärm. Ich habe sie entfernt. Die Idee der Bauzeichnung lebt in Struktur, Schrift und Papierfarbe weiter, und sie ist stärker, weil sie leiser ist.
- Smartphones bekommen ein eigenes Layout. Seitwärtsscrollen ist eine Desktop-Idee. Auf dem Telefon stapeln sich die Blätter untereinander, aus der Schleife wird ein Button „Back to the beginning“, und wer reduzierte Bewegung eingestellt hat, sieht das Luftbild mit einem Button, um den Film abzuspielen.
Was ich ins nächste Projekt mitnehme
- Den einen Satz finden, den der Kunde vermitteln muss. Hier war es „ein Team, von Anfang bis Ende“, und Film, Struktur und der Großteil der Texte sind daraus gewachsen.
- Erst das Storyboard, dann generieren. Neun Skizzen legten fest, was jeder Moment sagen muss, sodass die Bilder eine Richtung hatten, statt einzeln ausgesucht zu werden.
- Bilder als Satz beurteilen. Kontinuität zählt mehr als jedes einzelne schöne Bild.
- Jedem Bildschirm eine Frage geben, und sie in der Reihenfolge anordnen, in der ein Kunde fragen würde.
- Damit rechnen, dass der Browser den Plan ändert. Das Konzept legt das Aussehen fest; wie es sich anfühlt, zeigt sich erst beim Scrollen, und die Lösung ist oft, etwas wegzunehmen.
Die Bildschirme und den fertigen Film sehen Sie auf der Projektseite von Structiv, oder probieren Sie die Live-Website selbst aus.
Welchen Teil soll ich vertiefen: den Baufilm, das horizontale Scrollen oder den Weg von Claude Design zu Claude Code? Schreiben Sie es mir in die YouTube-Kommentare, und abonnieren Sie unten, um den nächsten Beitrag zu bekommen.
