01Überblick
K10 plant vorbeugenden Brandschutz und Technische Gebäudeausrüstung für Neubau, Bestand und Sanierung. Für das Büro habe ich den ersten vollständigen Webauftritt konzipiert, gestaltet und entwickelt, inklusive digitalisiertem Logo und Übergabepaket für den eigenen Server.
02Ausgangslage
Die Domain des Büros zeigte nur eine passwortgeschützte Seite. Wer K10 recherchierte, fand weder Leistungen noch Referenzen, obwohl das Büro an anspruchsvollen Projekten in Hannover arbeitet. Das Logo lag nur als flache Bilddatei vor.
03Herausforderung
Zwei Disziplinen mussten als ein Angebot erzählt werden, ohne fachliche Tiefe zu verlieren: Brandschutz nach AHO, Gebäudetechnik nach HOAI, jeweils mit neun Leistungsphasen. Gleichzeitig sollte die Seite als statischer Export auf dem eigenen Server des Büros laufen, ohne Abhängigkeit von Plattformen.
04Strategie
Die Dramaturgie folgt einem Satz, den das Büro selbst vorgegeben hat: zwei Welten, ein Ansprechpartner.
ABelege statt Behauptungen
Anonymisierte Originalpläne aus der eigenen Produktion zeigen, was am Ende eines Auftrags auf dem Tisch liegt: Brandschutzpläne, Feuerwehr-Laufkarten, Übersichtspläne.
BArbeitsweise in Phasen
Sechs nachvollziehbare Projektphasen entlang von HOAI und AHO machen die Zusammenarbeit planbar, bevor das erste Gespräch stattfindet.
CEchte Fotos
Anlagen- und Projektfotos aus dem Büro statt Stockmotiven. Ein einzelnes Symbolbild ist am Bild gekennzeichnet.

05Gestaltung
Der Würfel des Logos wurde vermessen und aus Geraden rekonstruiert, die Wortmarke vektorisiert und gegen das Original zurückgemessen. Grün aus dem Corporate Design, eine kondensierte Display-Schrift und dunkle Flächen übersetzen die technische Präzision des Büros.
Typografie
Saira Condensed für Überschriften, Inter für Fließtext
Farben
- CI-Grün#57891E
- Hellgrün#83C22E
- Tiefgrün#456B18
- Dunkel#16170E
06Nutzerführung
Eine lange, klar gegliederte Seite, die in der Reihenfolge der Fragen eines Bauherrn oder Betreibers erzählt.
- Leistungen in zwei Säulen: Brandschutz und Technische Ausrüstung
- Planwerk mit anonymisierten Beispielplänen im Planbetrachter
- Arbeitsweise in sechs Phasen
- Referenzprojekt als eigene Fallstudie
- Werdegang und Haltung des Inhabers


07Entwicklung
Umgesetzt mit Next.js als statischer Export für Apache oder nginx. Bilder laufen durch eine eigene Pipeline mit AVIF, WebP und JPEG. Zur Übergabe gehören Serverkonfigurationen und ein Prüfskript mit 20 automatischen Kontrollen.
Technologie
Next.js (statischer Export), React, TypeScript, Tailwind CSS
Besondere Funktionen
- Betrieb ohne Plattformabhängigkeit
- AVIF- und WebP-Bildpipeline
- Strukturierte Daten und llms.txt
- Prüfskript mit 20 Kontrollen
08Ergebnis
Ein Auftritt auf dem Niveau der Arbeit, die das Büro abliefert: mit echten Plänen, echten Fotos und einer Struktur, die Fachlichkeit belegt. Der Livegang auf der eigenen Domain wird vorbereitet.
09Wirkung
0
Anfragen an Drittanbieter
keine externen Schriften, Skripte oder Tracker
Quelle: Netzwerkanalyse des statischen Exports, 04.09.2026
520 kB
für die erste Ansicht
inklusive Bilder und Schriften, Layout-Verschiebung 0
Quelle: Messung des statischen Exports, 04.09.2026
Konkret entstanden
- Erster öffentlicher Auftritt mit Leistungen, Referenzen und Kontakt
- Logo als saubere Vektordaten für Web und Druck
- Übergabepaket für den Betrieb auf eigenem Server


