01 · Überblick
Subtraktion als ganze Methode
Für dieses Konzept habe ich mir Arke als Maklerei vorgestellt, die jedes Jahr eine kleine Zahl architektonisch geprägter Häuser vertritt — verkauft mit Diskretion und ohne Spektakel. Jeder Instinkt einer Immobilien-Website — das Galerie-Karussell, der Hypothekenrechner, die Jetzt-anfragen-Leiste — ist Spektakel. Dieser Build definiert sich also über das, was nicht in ihm steckt.
Es gibt vier Farben: Weiß, Tinte, ein einziges warmes Grau und eine Haarlinie. Es gibt keine Karten, keine gefüllten Flächen, keine Schatten, keine runden Ecken und keine Icons. Sektionen trennt eine Linie und ungefähr doppelt so viel vertikaler Raum wie auf jeder anderen Seite dieser Reihe. Es ist mit weitem Abstand das kürzeste Stylesheet der zehn — und genau das ist das Design.
02 · Die Idee
Die besten Häuser warten darauf, verstanden zu werden
Die Zeile der Maklerei selbst — die besten Häuser kündigen sich nicht an; sie warten, präzise, darauf, verstanden zu werden — ist ein Design-Briefing im Gewand von Text. Sie schließt alles aus, was sich ankündigt: Bewegung, Kontrast, Farbe, Fette.
Eine Schrift, drei Schnitte
Archivo in 100, 200 und 300 für Display. Nichts auf der Seite ist fett. Die Hierarchie entsteht aus Größe und Raum, nie aus Strichstärke.
Nur Opazität
Reveals blenden ein und verschieben nie — eine bewusste Verweigerung. Eine Maklerei, die Stille verkauft, sollte nichts herumschieben lassen.
Fotografie in Schwarzweiß
Neun Bilder, alle monochrom — die einzige Farbe auf der Seite ist der Preis.
03 · Ziele
Was die Seite leisten musste
Drei Häuser richtig präsentieren
Genannter Architekt, Lage, Preis, ein Absatz. Genug, um einen Käufer zu qualifizieren, und nichts, was ihn unter Druck setzt.
Einen diskreten Prozess erklären
Vier Schritte, die Diskretion nach Methode klingen lassen statt nach Ausweichen.
Ein Haus ausführlich würdigen
Der Kessler Pavilion bekommt eine ganze Sektion — das Tiefensignal, das ein Raster aus Vorschaubildern nie senden kann.
Ein Gespräch beginnen
Ein Beratungsformular mit drei Feldern. Kein Anfrage-Funnel, sondern eine Vorstellung.
04 · Bauablauf
Wie es gebaut wurde
Die vier Tokens
Weiß, Tinte, Grau, Haarlinie. Zuerst geschrieben und nie ergänzt — jede spätere Entscheidung musste sich in diesen vier ausdrücken lassen.
Eine vertikale Skala, keine horizontale
Ohne Farbe und ohne Strichstärke bleibt als Variable nur der Raum. Die Abstandsskala bekam mehr Aufmerksamkeit als alles andere im Build.
Die Navigation, die die Seite entfernt
Das Öffnen des mobilen Menüs markiert jede Landmark im Hintergrund als
inertund gibt sie oberhalb von 900px wieder frei — das Panel ist wirklich modal, nicht nur visuell modal.Statistik ohne Dekoration
Zähler in denselben drei Schnitten wie alles andere. Keine Einheiten in anderer Farbe, keine Icons, keine Fortschrittsringe.
Löschen
Der letzte Durchgang entfernte einen Trennerstil, zwei Hover-Zustände und eine Hero-Animation. Das Stylesheet war am Ende des Tages kleiner als an seinem Anfang.
05 · Architektur
Drei Dateien
├── index.html 19.9 KB — 5 Sektionen, 9 Fotografien, 0 Inline-SVG
├── styles.css 20.7 KB — 11 Custom Properties, 5 Media Queries
└── script.js 12.2 KB — 352 Zeilen: Nav · inert · Reveals · Zähler · Formular
Der Stack
- Semantisches HTML
- CSS Grid
- inert
- IntersectionObserver
- Archivo 100–300
- Inter
Barrierefreiheit
- inert im Hintergrund
- aria-expanded
- aria-live
- Fokus beim Absenden
- Reduzierte Bewegung
06 · Was sich gewehrt hat
Probleme — und was sie geschlagen hat
Ultraleichte Schrift in Displaygröße ist elegant auf einem Retina-Laptop und nahezu unlesbar auf einem Bildschirm mit niedriger Pixeldichte bei 100% Zoom, wo die Stämme zu nichts ausdünnen.
Schnitt 100 ist nur oberhalb einer Größenschwelle erlaubt; Fließtext geht nie unter 400. Die leichtesten Schnitte existieren rein als Display — wofür sie gezeichnet wurden.
Ein mobiles Menü nur visuell zu verstecken lässt seine Links in der Tab-Reihenfolge zurück — Tastaturnutzer tabben durch ein unsichtbares Panel ins Nichts.
inert auf den Landmarks im Hintergrund, solange das Panel offen ist, freigegeben oberhalb von 900px, wo es das Panel nicht mehr gibt. Ein Attribut ersetzt einen manuellen tabindex-Kehraus, der für immer hätte gepflegt werden müssen.
Ohne Schatten, ohne Füllungen und ohne Farbe kann eine Seite unfertig wirken statt zurückhaltend — der Unterschied liegt allein in den Abständen.
Die vertikale Skala wurde abgestimmt, bevor irgendein Inhalt final war — der Rhythmus ist ein System, keine Reihe lokaler Korrekturen. Sektionen sitzen bei elf Rem; näher kommt sich nichts.
Reveals nur über Opazität geben dem Auge nichts zum Verfolgen — auf einer langen Seite lesen sie sich schnell als Flackern statt als Ankommen.
Statt der Distanz wuchs die Dauer: 1.2 Sekunden, länger als auf jeder anderen Seite hier. Langsam genug, um als Einblendung zu wirken, nie als Blitz.
07 · Was bleibt
Die Teile, die bleiben dürfen
Drei Häuser, langsam gewählt
Eine Angebotssektion, die drei Häuser listet — der im Briefing gedachten Knappheit entsprechend. Das Layout weigert sich, sie aufzufüllen.
Leise gesagt, ganz gemeint
Fiktive Kundenstimmen in Fließtextgröße, ohne Anführungszeichen, ohne Porträts, ohne Sternebewertungen.
Der Kessler Pavilion
Ein hervorgehobenes Haus mit einer ganzen Sektion — der Beweis, dass die Maklerei über Architektur sprechen kann statt über Quadratmeter.
Mit einem Gespräch beginnen
Die Überschrift der Kontaktsektion ist die gesamte Vertriebsstrategie, und das Formular hat dazu passend drei Felder.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
