# Immo-App

> Eine Konzeptstudie für Architektur- und Bauunternehmen: ein viersprachiger Webauftritt mit einer interaktiven Vorher-Nachher-Galerie, die Sanierungsarbeit sichtbar macht. Vorab gerendert ausgeliefert, auf dem Telefon genauso schnell wie am Schreibtisch.

Quelle: [https://www.arytechsolutions.com/blog/immo-app-architekturbuero](https://www.arytechsolutions.com/blog/immo-app-architekturbuero)

- Kunde: ARY Tech Solutions
- Veröffentlicht: 2026-09-17
- Aktualisiert: 2026-09-20
- Autor: Ali Ramazan Yıldırım
- Lesezeit: 3 Min.
- Technik: Next.js, React, TypeScript, next/font, Swiper, WebP, Netlify

> Konzeptstudie aus eigener Hand: Immo-App ist kein Kundenauftrag, sondern ein Demoprojekt, an dem sich der Ansatz für Architektur- und Bauunternehmen vollständig zeigen lässt. Alles, was hier beschrieben wird, ist live nachprüfbar.

## Ausgangslage

Architektur- und Bauunternehmen arbeiten in einem der visuellsten Gewerbe überhaupt — und haben oft den unscheinbarsten Webauftritt. Das Portfolio liegt in PDF-Mappen, die Referenzen leben auf dem Handy des Bauleiters, und die Website zeigt am Ende vier Stockfotos und eine Telefonnummer. Wer ein Haus plant oder ein Bestandsgebäude saniert, entscheidet sich aber selten nach einer Leistungsliste. Er entscheidet sich, weil er gesehen hat, was am Ende dabei herauskommt.

## Die Herausforderung

- Die Arbeit sichtbar machen: Ein Rohbau und ein bezugsfertiges Haus sind dasselbe Projekt — nebeneinander erzählen sie eine Geschichte, einzeln fast keine.
- Über die Grenze arbeiten: Wer Projekte in Freiburg, Straßburg und Basel betreut, verliert Anfragen an einer rein deutschsprachigen Website.
- Vertrauen vor dem ersten Gespräch: Bauherren prüfen Team, Ablauf und Referenzen, lange bevor sie zum Hörer greifen.
- Auf der Baustelle geöffnet: Ein großer Teil dieser Besuche passiert am Telefon, oft bei schlechter Verbindung — die Seite muss dort genauso schnell sein wie am Schreibtisch.

## Die Lösung

Immo-App beantwortet diese vier Punkte nicht mit einem Funktionskatalog, sondern mit vier Entscheidungen. Die Transformationsgalerie stellt Vorher und Nachher in denselben Rahmen und überlässt dem Besucher den Regler — er sieht nicht ein Ergebnis, er deckt es selbst auf. Die vier Sprachversionen sind keine Übersetzungs-Widgets, sondern vollwertige Seiten mit eigenen Adressen, die Suchmaschinen getrennt aufnehmen können. Team, Ablauf, Referenzen und häufige Fragen stehen als eigene Bereiche da, damit die Vorabrecherche auf der Seite endet und nicht auf einer Bewertungsplattform. Und jede Seite wird vorab gerendert ausgeliefert, sodass sie auch bei magerer Verbindung sofort steht.

_Die Transformationsgalerie von Immo-App: links der Rohbau, rechts das schlüsselfertige Haus, dazwischen ein verschiebbarer Regler. — Der Regler lässt sich bis an beide Enden ziehen — oder mit den Schaltflächen »Vorher«, »50 / 50« und »Nachher« anspringen._ (https://pub-ee92c923c9954077b449900193b4651f.r2.dev/blog/028518a9-4179-4892-bf21-45754ef89315-immo-app-architekturbuero-transformation.webp)

## Nutzererlebnis

Der Einstieg führt über drei wechselnde Projektbilder, nicht über einen Begrüßungstext. Von dort läuft die Seite in der Reihenfolge, in der ein Bauherr ohnehin denkt: Was macht ihr, was habt ihr gebaut, wie sieht das vorher und nachher aus, wer arbeitet daran, was fragen andere, wie erreiche ich euch. Die Sprachumschaltung sitzt im Kopf der Seite und führt auf dieselbe Stelle in der gewählten Sprache statt zurück auf die Startseite.

- Bilder durchgehend im WebP-Format, Schriften mit der Seite ausgeliefert statt nachgeladen — beides spart Ladezeit im Mobilfunknetz.
- Vier Sprachen mit eigenen Adressen (/de, /en, /fr, /tr) und hinterlegten hreflang-Angaben — die gewählte Sprache bleibt beim nächsten Besuch erhalten.
- Ein Kontaktformular mit gekennzeichneten Pflichtfeldern, ein Suchfeld im Kopfbereich und ein FAQ-Akkordeon decken die drei häufigsten nächsten Schritte ab.

## Was das für Ihr Büro bedeutet

Der geschäftliche Kern dieses Aufbaus ist nicht die Technik, sondern die Reihenfolge der Beweise. Eine Anfrage entsteht selten aus einer Leistungsbeschreibung; sie entsteht, wenn jemand ein Projekt gesehen hat, das seinem eigenen ähnelt, und danach den Eindruck gewinnt, dass der Ablauf stimmt. Eine zweite Sprachversion kostet einmalig Übersetzung und öffnet dauerhaft einen Markt, der vierzig Kilometer entfernt beginnt. Und eine Seite, die auf dem Telefon sofort steht, verliert die Besucher nicht, die zwischen zwei Terminen kurz nachschauen.

- **4** — Sprachen aus einer Codebasis
- **~20** — Seiten inklusive Recht und Blog
- **6** — Referenzprojekte in drei Ländern
- **100 %** — Bilder im WebP-Format

## Warum dieser Ansatz?

Für eine Seite, die sich vier- bis fünfmal im Jahr ändert, ist ein permanent laufender Server der falsche Aufwand. Immo-App wird deshalb vorab gerendert und als fertige Seite ausgeliefert; die Technik dahinter — Next.js mit React und TypeScript — bleibt für den Betreiber unsichtbar und wird erst dann wichtig, wenn später ein Redaktionssystem, ein Projektarchiv oder ein Kundenbereich dazukommen soll. Genau das ist der Punkt: Der Aufbau ist bewusst so gewählt, dass die zweite Ausbaustufe kein Neubau ist.

## Ihr Projekt

Immo-App ist als Demoprojekt gebaut, aber jede Entscheidung darin stammt aus der Praxis von Architektur-, Bau- und Sanierungsbetrieben. Wenn Ihr Büro einen Webauftritt braucht, der Projekte zeigt statt sie aufzuzählen, lässt sich derselbe Aufbau mit Ihren Referenzen, Ihren Leistungen und Ihren Sprachen umsetzen — im Zweifel beginnend mit einer einzigen Vorher-Nachher-Strecke, die Sie ohnehin schon fotografiert haben.

[Lösungen für Architekten und Bau ansehen](/solutions/architects-construction)