80.000 m² Campus, digital begehbar.

Die Ausgangslage

Das Ullsteinhaus wurde 1925 und 1926 als Druckereihaus gebaut und steht unter Denkmalschutz. Auf dem Campus gibt es fast alles, was ein Arbeitsort braucht: Fitnessstudio, Kantine, Café, Ärztehaus, Sicherheitsdienst rund um die Uhr, Tiefgarage und die Lage am Tempelhofer Hafen. Der Satz aus dem Asset Management dazu: wir haben sehr viel, aber es weiß keiner.

Berlin hat mehr Gewerbefläche als Nachfrage. Ein PDF mit Grundrissen entscheidet in diesem Markt nichts mehr. Gesucht war ein Auftritt, der drei sehr verschiedene Gruppen erreicht: Mietinteressenten zwischen 500 und 6.000 m², Großmieter, die über Makler kommen, und die Mieter, die schon im Haus sind.

Die Vorgaben waren klar. Echte Bilder statt Renderings und Stockfotos. Kein Hochglanz-Exposé. Ein Scroll-Erlebnis, das Lust auf den Ort macht. Und eine Seite, die trotz 3D nicht ruckelt.

Was wir gemacht haben

Workshop und Konzept

Am Anfang stand ein dreistündiger Workshop mit Vermietung und Asset Management. Danach haben wir 14 vergleichbare Auftritte national und international analysiert. Das Ergebnis war ein Konzeptdokument mit Zielgruppen, Style Direction, Hero-Konzepten, Seitenstruktur und dem 3D-Showcase.

Die Seitenstruktur haben wir bewusst schlank gehalten: Startseite, Campus und Umgebung, Freie Flächen mit dem 3D-Modell und Kontakt.

Brand Direction

Die Richtung liegt zwischen Editorial und Heritage. Die Geschichte des Hauses ist ein Verkaufsargument, kein Kostüm. Gezeigt wird, was wirklich da ist: große Innenaufnahmen, warmes Tageslicht, der Loft-Charakter des Altbaus. Die Wirkung, auf die wir hinarbeiten, ist einfach: hier würde ich gern arbeiten.

• warme, erdige Farbwelt mit Orange im Backstein-Ton als Akzent, auf hellen Flächen sehr sparsam
• Aeonik als Hausschrift, mit Web-Lizenzen
• Kernwerte: Gemeinschaft, Fokus, Kreativität, Produktivität, Vernetzung
• Logo als Wortmarke in Aeonik, entwickelt über mehrere Konzeptrunden
• LinkedIn-Banner und Icon aus derselben Richtung

Das 3D-Modell

Auf der Seite Freie Flächen steht der ganze Campus als 3D-Modell. Man kann ihn drehen und zoomen, am Desktop mit der Maus, mobil mit Touch. Standardmäßig zeigt das Modell einen Röntgenblick: das Gebäude ist halb durchsichtig, die Mietflächen erscheinen als pulsierende Punkte. Wer will, schaltet auf die Materialansicht um.

Fährt man über einen Punkt, erscheint eine Info-Karte. Ein Klick wählt die Fläche aus und öffnet die Details. Dazu gibt es ein Steuerkreuz zum Navigieren.

Freie Flächen mit Filter

Neben dem Modell läuft eine Liste aller Flächen mit Filter und Sortierung. Filter und Modell sind gekoppelt: im 3D erscheinen nur die Punkte, die zum Filter passen. Jede Fläche hat einen eigenen Link, den man weitergeben kann.

Die Gebäudenamen sind die, die das Haus selbst verwendet, etwa Altbau Haus 1 oder Neubau Türme 1 bis 3. Angezeigt werden nur Flächen, die gerade frei sind. Zu jeder Fläche führt ein Link auf das Inserat bei ImmobilienScout24 oder ein Exposé als PDF.

• Filter nach Gebäude, Etage und Fläche
• Sortierung der Ergebnisse
• Deep-Link pro Fläche
• Inserat oder Exposé direkt an der Fläche

Bild und Bewegung

Die Seite lebt von echten Aufnahmen des Campus. Wir haben Fotos und Videos nachbearbeitet und farblich an den Look der Seite angepasst, das Video im Hero selbst geschnitten und eigenes Material ergänzt. Gescrollt wird weich, Seitenwechsel laufen über Übergänge statt harter Ladevorgänge.

Technik und Anbindung

Vom CAD-Modell zum Web

Geliefert wurde das Masterplan-Modell aus SketchUp: 33 MB als SKP, 150 MB als OBJ, 1,57 Millionen Faces, exportiert in Millimetern. In Blender haben wir es auf Meter skaliert, die Gebäude vom Stadtkontext freigestellt und für das Web optimiert.

Ausgeliefert wird das Modell als GLB mit Draco-Kompression. Aus 27 MB werden so 2,1 MB. Den Draco-Decoder hosten wir selbst.

Flächen aus den Grundrissen

Die Mietflächen kommen aus den Grundriss-PDFs, Ebene für Ebene. Wir haben die Flächen als Polygone übernommen und ihre Größe aus den Polygonen berechnet. Teilflächen wie Terrassen tragen einen Zusatz im Namen und werden der Hauptfläche zugerechnet. So wurden aus 97 Objekten 78 Mietflächen.

Unsere Regel dabei: der Grundriss ist die Wahrheit. Optische Korrekturen dürfen die Daten nicht überschreiben. Wo eine Fläche falsch aussah, haben wir den Originalplan gerendert und das Polygon darübergelegt. Die Lage der Etagen haben wir von Hand nachjustiert. Zur Abnahme gab es einen Prototyp als einzelne HTML-Datei, die per Doppelklick läuft.

Viewer in three.js

Der Viewer ist in three.js geschrieben, ohne zusätzliches Framework. Wir haben mehrere Material-Varianten getestet, darunter echte Klinker-Texturen. Am Ende blieb der Röntgenblick der Standard, weil er auf Mobil und Desktop flüssig läuft, ohne die Grafikkarte zu überlasten.

Beim Seitenwechsel räumt der Viewer seinen Speicher vollständig auf. Der Arbeitsspeicher fällt dabei von 212 MB auf 10 MB.

Die Website darum

Die Seite ist mit Astro 5 statisch gebaut und läuft auf Vercel. Alle Gestaltungswerte kommen als Tokens direkt aus Figma, jeder mit Verweis auf seine Quelle im Design. Die Schrift ist selbst gehostet. Scroll und Übergänge laufen über Lenis, GSAP und Barba.js.

Für Suchmaschinen gibt es Sitemap, strukturierte Daten, Vorschaubilder und eine llms.txt. Der Cookie-Banner ist eine eigene Lösung, Google Maps lädt erst nach Einwilligung.

Das Ergebnis

Seit September 2026 ist der Campus unter ullsteinhaus.de online, mit 3D-Modell, Flächenliste und Kontakt in einem Auftritt. Die Rechnung dahinter ist einfach: eine einzige Vermietung über die Seite spart rund 30.000 Euro Maklerprovision.

Mobil

So sieht die Website auf dem Smartphone aus.

Messwerte

Gemessen mit Google PageSpeed Insights am 21. Oktober 2026. Bericht ansehen

Projektdetails

Kunde

Ullsteinhaus

Branche

Immobilien & Finanzen

Jahr

2026

Leistungen

Workshop und Konzept, Brand Direction, Logo, UI/UX Design, Development, 3D und Motion

Technik

Astro, three.js, GSAP, Lenis, Barba.js, Vercel