Arke Estates Architektur, leise vermittelt

01 · Überblick

Weglassen als ganze Methode

Für dieses Konzept habe ich mir Arke als Vermittlung vorgestellt, die jedes Jahr eine kleine Zahl gestaltungsgeführter Häuser vertritt, diskret verkauft und ohne Schauspiel. Jeder Instinkt, den eine Immobilien-Website hat — das Galeriekarussell, der Hypothekenrechner, die Jetzt-anfragen-Leiste —, ist Schauspiel. Dieser Build definiert sich also über das, was nicht darin ist.

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 — kein einziges Inline-SVG in der Datei. Abschnitte sind durch eine Linie getrennt und durch etwa den doppelten vertikalen Raum jeder anderen Seite dieser Sammlung. Mit 21,6 KB ist das Stylesheet das kürzeste der zehn, um neun Kilobyte — und genau das ist die Gestaltung.

02 · Die Idee

Die besten Häuser warten darauf, verstanden zu werden

Der eigene Satz der Vermittlung — die besten Häuser kündigen sich nicht an, sie warten, ganz genau, darauf verstanden zu werden — ist ein Gestaltungsbriefing im Gewand eines Textes. Er schließt alles aus, was sich ankündigt: Bewegung, Kontrast, Farbe, Schriftstärke.

• Eine Schrift, drei Schnitte

  Archivo in 100 für die Display-Ebene, 200 für einen Objektnamen, 300 für die Wortmarke. Nichts auf der Seite ist fett. Die Hierarchie besteht aus Größe und Raum, nie aus Schriftstärke.

• Nur Deckkraft

  Reveals blenden ein und verschieben sich nie — eine bewusste Verweigerung. Eine Vermittlung, die Stille verkauft, sollte nichts herumrutschen lassen.

• Fotografie in Graustufen

  Neun Bilder, im Ruhezustand alle in Graustufen, Farbe kommt nur unter einem Hover oder einer ausdrücklichen Berührung. Es ist die einzige Farbe, die die Seite je zeigt.

03 · Ziele

Was die Seite leisten musste

1. Drei Häuser ordentlich präsentieren

   Lage, Architekt und Jahr, ein Name, ein Preis und die schlichten Fakten des Hauses. Genug, um eine Käuferin zu qualifizieren, und nichts, was sie unter Druck setzt.

2. Einen privaten Ablauf erklären

   Vier Schritte — das Gespräch, die Auswahl, die Besichtigung, der Abschluss —, die Diskretion nach Methode klingen lassen statt nach Ausweichen.

3. Ein Haus ausführlich zeigen

   Der Kessler Pavilion bekommt einen ganzen Abschnitt — das Tiefensignal, das ein Raster aus Miniaturen nie senden kann.

4. Ein Gespräch beginnen

   Ein Beratungsformular mit drei Feldern: Name, E-Mail und wonach du suchst. Kein Anfragetrichter, eine Vorstellung.

04 · Baureihenfolge

Wie es gebaut wurde

1. Die vier Tokens

   Weiß, Tinte, Grau, Haarlinie — zuerst geschrieben und nie ergänzt. Elf Custom Properties insgesamt, und die anderen sieben sind Schrift, Abstand und Timing.

2. Eine vertikale Skala, keine horizontale

   Ohne Farbe und ohne Schriftstärke bleibt als einzige Variable der Raum. Das Abschnittspolster ist ein clamp von 4,5rem bis 10rem, und die Abstandsskala hat mehr Aufmerksamkeit bekommen als alles andere im Build.

3. Die Navigation, die die Seite entfernt

   Das Öffnen des mobilen Menüs setzt Hauptinhalt und Fußbereich inert, und oberhalb von 900px existiert das Panel nicht, also wird der offene Zustand mit ihm freigegeben.

4. Statistik ohne Dekoration

   Hochzählende Zahlen in denselben Schnitten wie alles andere — keine Einheiten in anderer Farbe, keine Icons, keine Fortschrittsringe —, wobei die Endzahl zusätzlich für assistive Technik ausgeschrieben ist, damit die Animation dekorativ bleibt.

5. Löschen

   Der letzte Durchgang hat einen Trennerstil, zwei Hover-Zustände und eine Hero-Animation entfernt. Das Stylesheet war an diesem Tag am Ende kleiner als am Anfang.

05 · Architektur

Drei Dateien

Drei Dateien und insgesamt 55,8 KB Quelltext — der kleinste Build der Sammlung und das kleinste Stylesheet darin. Es gibt keinen Bundler und keine Abhängigkeit, die Reduktion musste also im Quelltext stattfinden und nicht in einem Build-Schritt.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Ultraleichte Schrift in Displaygröße ist auf einem Retina-Laptop elegant und auf einem Bildschirm geringer Dichte bei 100 % Zoom nahezu unlesbar, weil die Stämme ins Nichts ausdünnen.

   Lösung

   Schnitt 100 ist nur oberhalb einer Größenschwelle erlaubt — Abschnittstitel beginnen bei 2,5rem —, und Fließtext geht nie unter 400. Die leichtesten Schnitte existieren rein als Display, wofür sie gezeichnet wurden.

2. Problem

   Ein mobiles Menü visuell zu verstecken lässt seine Links trotzdem in der Tab-Reihenfolge, also tabbt eine Tastaturnutzerin durch ein unsichtbares Panel ins Nichts.

   Lösung

   Hauptinhalt und Fußbereich werden inert gesetzt, solange das Panel offen ist, und oberhalb von 900px freigegeben, wo das Panel nicht mehr existiert. Ein Attribut ersetzt einen manuellen tabindex-Durchlauf, den man ewig hätte pflegen müssen.

3. Problem

   inert allein hat die Tastatur nicht eingefangen, und die Lücke zeigte sich erst beim Messen statt beim Lesen: Drei fokussierbare Stationen saßen weiterhin außerhalb des Panels, und beim Tabben über den letzten Link verließ man die Seite.

   Lösung

   Zwei der drei sind korrekt und bleiben — die Wortmarke und der Umschalter zeichnen über dem Panel, und der Umschalter ist die Schließen-Taste —, also wurde die Grenze zu Kopfbereich und Panel gemeinsam, mit einem Tab-Zyklus, der an beiden Enden umläuft.

4. Problem

   Das gedämpfte Grau war die ganze Sekundärstimme der Seite, und in der Größe, in der es die Mikro-Labels verwenden, bestand es nicht: 3,62:1 auf Weiß, bei jedem einzelnen seiner Verwender.

   Lösung

   Es wurde auf 4,63:1 vertieft. Alle sechs Verwender sind eine Textfarbe, also hat sich nichts außer der Tiefe dieses Graus bewegt, und die Begründung steht im Stylesheet über dem Wert.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Drei Häuser, langsam gewählt

  Ein Objektabschnitt, der drei listet — passend zur vorgestellten Knappheit des Briefings. Das Layout weigert sich, ihn aufzufüllen, und der Preis ist das Größte in der Zeile, gesetzt in Schnitt 100 mit Tabellenziffern.

• Leise gesagt, ganz gemeint

  Zwei erfundene Kundenstimmen in Textgröße, jede mit einem 56 Pixel großen Graustufenporträt und einer einzigen Zeile Zuschreibung. Keine Sternebewertung, keine Logowand.

• Der Kessler Pavilion

  Ein hervorgehobenes Haus mit einem ganzen Abschnitt — der Beleg, dass die Vermittlung über Architektur sprechen kann statt über Quadratmeter.

• Beginne mit einem Gespräch

  Die Überschrift des Kontaktabschnitts ist die ganze Verkaufsstrategie, und das Formular hat passend dazu drei Felder — mit einer Fehlerzeile, deren Verweis auf das Feld wandert, das durchgefallen ist, statt auf beiden zu sitzen.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Er lädt auf Abruf, es wird also nichts von der Vermittlung geholt, bevor du es verlangst.

arkeestates.com

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen