Aurelia House Zurückhaltung als Luxussignal

01 · Überblick

Zurückhaltung als Luxussignal

Für dieses Konzept habe ich mir ein Hotel vorgestellt, das 1927 eröffnet hat und nie geworben hat. Jede Konvention der modernen Hotel-Website — das mitlaufende Buchungs-Widget, das Dringlichkeitsbanner, das Video, das über der Falz automatisch abspielt — arbeitet gegen diese Prämisse. Also borgt sich die Seite von dem einen Medium, dem das Haus ohnehin trauen würde: seinem eigenen gedruckten Briefpapier. Alles sitzt auf einer zentrierten Achse, Gold erscheint nur als Haarlinie oder als Raute, und nichts zählt herunter.

Das Ergebnis ist die symmetrischste Seite der Sammlung und das bewusste Gegenteil des Ember-&-Oak-Broadsheets. Wo jene Seite Seitenzahlen in einen linken Gutter hängt und asymmetrische Spalten führt, legt diese alles auf die Mittelachse und lässt den Raum die Arbeit machen.

02 · Die Idee

Einundvierzig Zimmer, keine Dringlichkeit

Der Satz, den ich für die Marke geschrieben habe — eine ruhige Adresse in einem lauten Jahrhundert — hat das ganze Briefing gesetzt. Drei Entscheidungen folgten daraus, und jede andere Wahl auf der Seite liegt flussabwärts davon.

• Gold ist eine Haarlinie

  Der Akzent füllt nie eine Fläche. Er liniert, er unterstreicht, er setzt eine Raute zwischen zwei Takte, und das war es. Vier der vierzehn Custom Properties sind dasselbe Gold in absteigenden Alphastufen — 1, 0,45, 0,22 und 0,10 —, und mehr Spielraum bekommt es nicht.

• Alles zentriert

  Symmetrie liest sich als Gelassenheit. Die breiteren fotografischen Platten durchbrechen die Maßspalte, wo sie es müssen, aber nichts auf der Seite durchbricht die Achse.

• Langsamer als der Rest

  Reveals laufen mit dem hauseigenen Reveal-Token von 1,1 Sekunden, und die Galerie hält jede Fotografie 5,5 lang. Hier kommt nichts schnell an.

03 · Ziele

Was die Site tragen musste

1. Acht Takte, eine Stimme

   Einleitung, Zimmer, Ausstattung, Geschichte, Galerie, Gästestimmen, Angebote und eine Anfrage — acht Abschnitte, jeder mit eigener beschrifteter Überschrift.

2. Eine Galerie, die sich selbst führt und auf Wunsch anhält

   Vier Fotografien, die auf einem 5,5-Sekunden-Takt überblenden, mit Rautenpunkten als Tablist, Pfeiltasten zum Durchgehen und einer Pausetaste für den Daumen, der nicht schweben kann.

3. Eine Anfrage, kein Checkout

   Sieben Felder — Anreise, Abreise, Gäste, Zimmer, Name, E-Mail, Nachricht —, direkt im Formular geprüft, mit einer Fehlerzeile, die sich ansagt, und einem Bestätigungsfeld, das den Fokus übernimmt.

4. Ein Menü, das nicht leckt

   Das mobile Panel hält Tab in beide Richtungen innerhalb von Kopfbereich und Panel und gibt den Fokus beim Schließen an den Burger zurück.

04 · Baureihenfolge

Das Haus durch den Build

Der Build lief von seiner Palette nach außen: erst die Farbe, dann die Achse, dann das eine Ornament, dann die zwei Dinge, die sich bewegen.

1. Palette vor Layout

   Vierzehn Custom Properties, und nichts anderes durfte hinein: Anthrazit, Elfenbein, Gold, Bronze, Schiefer, ein angehobenes Anthrazit, ein gedämpftes Elfenbein, drei Gold-Alphastufen, zwei Schriftfamilien, eine Easing-Kurve und die Reveal-Zeit.

2. Das zentrierte Raster

   Eine Maßspalte, im Container zentriert — 42rem für einen Abschnittsvorspann, 40rem für den Einleitungstext —, wobei Platten breiter ausbrechen dürfen. Keine Seitenspalten, keine Asymmetrie.

3. Das Ornament

   Ein sieben Pixel großes Quadrat, um 45 Grad gedreht, zwischen zwei Haarlinienverläufen, in CSS gezeichnet und ohne Bild. Es trennt jeden Abschnitt und ist der einzige Schmuck der Seite.

4. Der Galerietakt

   Eine Überblendung im 5,5-Sekunden-Intervall, Rautenpunkte auf einem wandernden Tabindex für die Position, und ein vollständiger Halt in dem Moment, in dem ein Zeiger auf dem Rahmen ruht oder der Fokus hineinfährt.

5. Das Anfrageformular

   Zuletzt gebaut, damit es Schrift und Abstände erbt, statt eigene aufzuzwingen.

05 · Architektur

Drei Dateien

Kein Bundler, kein Transpiler und kein node_modules. Das ganze Hotel sind 78 KB Quelltext über drei Dateien, ausgeliefert genau wie geschrieben.

06 · Was sich gewehrt hat

Was sich gewehrt hat

1. Problem

   Eine selbst weiterlaufende Galerie ist feindselig gegenüber jedem, der im eigenen Tempo liest, und sie zerstört die Tastaturbedienung aktiv: Der Fokus landet auf einer Folie, die anschließend wegläuft.

   Lösung

   Der Takt hält bei mouseenter und bei focusin an und läuft erst beim passenden Verlassen weiter. Einen Punkt zu wählen startet die Uhr nicht neu, solange ein Zeiger noch auf dem Rahmen ruht, unter den Punkten sitzt eine Pausetaste für Touch, und unter reduzierter Bewegung läuft die Diashow überhaupt nie von selbst weiter.

2. Problem

   Gold auf Anthrazit ist schön und häufig unzulässig. Das Gold selbst besteht, aber die Bronze, mit der es gepaart ist, fällt in Textgröße durch und bei 0,72rem noch einmal.

   Lösung

   Bronze wurde vollständig aus dem Schriftsystem entfernt — das Token ist weiterhin deklariert, und keine einzige Regel liest es. Schiefer übernahm als lesbares Sekundär bei 7,07:1, Gold trägt bei 8,20:1 die kleinen Labels, die Bronze getragen hätte, und beide Werte stehen im Stylesheet neben den Farben.

3. Problem

   Ein bildschirmfüllendes Mobilmenü ist die Stelle, an der der Fokus entkommt: Tabbe weit genug und du bist unsichtbar in der Seite dahinter.

   Lösung

   Der Tab-Zyklus ist an Kopfbereich und Panel gemeinsam gebunden — das Panel plus die Leiste, die es schließt — und läuft an beiden Enden dieser Menge um, in beide Richtungen. Escape schließt das Panel und gibt den Fokus an den Burger zurück.

4. Problem

   Zentrierte Layouts fallen bei langen Zeilen auseinander. Ein zentrierter Absatz von neunzig Zeichen Breite ist unlesbar, so elegant die Schrift auch sein mag.

   Lösung

   Der Text wird vorher gekappt: 42rem beim Abschnittsvorspann, 40rem beim Einleitungstext, 780px beim schmalen Container, jeweils mit automatischem Innenrand zentriert. Die Achse hält, während die Zeilenlänge bequem bleibt.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Das Haus durch die Jahre

  Fünf datierte Stationen ab 1927, gesetzt als gedruckte Chronik statt als Infografik — ein Jahr, eine Zeile, keine Icons.

• Rautenpunkte

  Positionsmarken der Galerie, um 45 Grad gedreht passend zum Ornament und in CSS ohne Bild gezeichnet. Jede sitzt in einem 26-Pixel-Ziel, damit die Anforderung an die Zeigergröße erfüllt ist, während die Raute selbst sieben Pixel bleibt.

• Gästestimmen

  Zwei Referenzen als zentrierte Auszeichnungszitate, mit der Stadt des Gastes und dem Jahr des ersten Aufenthalts unter dem Namen — die Hierarchie des hauseigenen Briefpapiers, geborgt.

• Eine Buchungsanfrage

  Sieben Felder, die fragen, was ein Concierge fragen würde, beantwortet von einem Bestätigungsfeld, das den Fokus übernimmt, statt von einem Modal, das ihn stiehlt.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Er lädt auf Abruf, es wird also nichts vom Hotel geholt — die dreizehn Fotografien eingeschlossen —, bevor du es verlangst.

aureliahouse.co.uk

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