01 · Überblick
Eine Dunkelkammer, keine Galerie
Fotografen-Websites machen meist einen von zwei Fehlern: ein Lightbox-Raster, das jedes Bild als austauschbar behandelt, oder eine vollflächige Slideshow, die einen nichts lange ansehen lässt. Für dieses Konzept habe ich mir Noctis als ein Studio vorgestellt, das jedes Bild von Hand gradet und achtzehn Hochzeiten im Jahr annimmt. Die Website musste so wählerisch sein wie der Buchungskalender.
Also verhält sie sich wie eine Dunkelkammer. Der Grund ist fast schwarz, die einzige Farbe ist ein Signalrot, eingesetzt wie in einer Kamera, Einblendungen kommen als Wischblende des Verschlusses statt als Überblendung, und die Arbeiten liegen auf einem Streifen, den man zieht — ein Kontaktbogen, kein Karussell.
02 · Die Idee
Available Light, von Hand gegradet
Rot ist ein Signal
Aufnahmepunkte, Bildzähler, ein CTA. Nie Hintergrund, nie Dekoration — genau die Disziplin des Equipments.
Wischblenden, keine Überblendungen
Jede Einblendung ist ein clip-path, der in eine Richtung wandert. Das liest sich wie ein Verschluss — die eine Metapher, die sich diese Marke verdient hat.
Ein Cursor, der sich benimmt
Ein eigener Punkt, nur bei feinen Zeigern, der den Systemcursor über Text oder Formularfeldern nie ersetzt.
03 · Ziele
Was die Seite leisten musste
Arbeiten in einer Größe zeigen, die sich lohnt
Ein horizontaler Streifen, auf dem jedes Bild groß genug ist, um es zu beurteilen — und das Weiterbewegen eine bewusste Handlung.
Drei Disziplinen erklären, ohne drei Seiten zu bauen
Hochzeiten, Editorial und Werbung als eine Sektion mit einem Grading, weil das Studio sie gleich behandelt.
Echte Verfügbarkeit veröffentlichen
Ein Buchungskalender, der am Ersten des Monats öffnet, statt eines Formulars, das verspricht, dass sich jemand meldet.
Niemanden im Dunkeln zurücklassen
Fällt das Skript aus, entfernt der
onerror-Handler die JS-Klasse, damit nichts hinter einer Wischblende verborgen bleibt, die nie laufen wird.
04 · Bauablauf
Zehn Module, der Reihe nach
Das Grading
Neunzehn Custom Properties: Fast-Schwarz, ein angehobenes Schwarz für Panels, drei Grautöne und die zwei Rottöne. Das angehobene Schwarz existiert, damit Panels ohne Rahmen lesbar sind.
Header und Overlay-Navigation
Ein sich verdichtender Header und ein Vollbildmenü mit Tab-Trap — die ersten beiden Module, weil alles andere unter ihnen sitzt.
Die Wischblende
Eine Easing-Kurve, eine clip-path-Richtung, angewendet über eine einzige Klasse, damit jede Sektion identisch erscheint.
Die Drag-Schiene
Pointer Capture, Pfeil-Buttons, ein Live-Zähler und Fokus-Sicherheit für die Tastatur — das größte Einzelmodul des Builds.
Der Kalender und das Formular
Verfügbarkeit aus dem aktuellen Datum berechnet, dann eine Buchungsanfrage mit fünf Feldern, die eine Referenz zurückmeldet.
05 · Architektur
Drei Dateien
├── index.html 29.8 KB — 6 Sektionen, 10 Fotografien
├── styles.css 39.4 KB — 19 Custom Properties, 19 Media Queries
└── script.js 25.6 KB — 795 Zeilen, 10 nummerierte Module
Der Stack
- Pointer capture
- clip-path
- Custom cursor
- IntersectionObserver
- Date maths
- Marcellus
- Figtree
Barrierefreiheit
- Tab trap
- Offset anchors
- Keyboard rail
- onerror fallback
- Reduced motion
- pointer: fine gate
06 · Was sich gewehrt hat
Was sich gewehrt hat
Drag-to-Scroll mit mousemove-Listenern auf Dokumentebene bricht in dem Moment, in dem der Cursor das Element verlässt — und lässt bei jedem verlorenen Pointer einen Listener zurück.
setPointerCapture. Das Element empfängt weiter Events, wohin der Cursor auch geht, und der Browser gibt die Capture bei pointerup oder pointercancel frei — ganz ohne Aufräumcode.
Ein Drag, der über einem Link endet, löst einen Klick aus — wer die Maus nach dem Ziehen der Schiene loslässt, navigiert von der Seite weg.
Die Gesamtstrecke messen und den Klick in der Capture-Phase schlucken, sobald sie ein paar Pixel überschreitet. Unter der Schwelle ist es ein Klick; darüber war es ein Drag.
Ein eigener Cursor ist der schnellste Weg, eine Website kaputt wirken zu lassen: Er hängt auf dem Trackpad nach, verschwindet über Eingabefeldern und ist auf Touch bedeutungslos.
Hinter (pointer: fine) verriegelt, sodass er auf Touch nie existiert, und der echte Cursor wird über jedem interaktiven Element wiederhergestellt statt global versteckt.
Clip-path-Einblendungen verbergen Inhalte standardmäßig, und diese Seite ist die dunkelste der Reihe — ein gescheitertes Skript hinterließe einen schwarzen Bildschirm ohne Erklärung.
Das Script-Tag trägt ein onerror, das die JS-Klasse entfernt — ein fehlgeschlagener Load setzt jede Wischblende in ihren Endzustand zurück, statt das gesamte Portfolio des Studios zu verbergen.
07 · Was bleibt
Die Teile, die bleiben
Selected Works
Ein Drag-Streifen mit Pfeilen, Zähler und Tastatur-Paging. Jede Eingabemethode erreicht jedes Bild.
Der Buchungskalender
Verfügbarkeit aus dem tatsächlichen Datum abgeleitet, geöffnet am Ersten des Monats — echte Knappheit statt einer behaupteten.
Das Kamera-HUD
Eine Bildanzeige im Hero, die sich die Typografie des Suchers leiht. Reines CSS, kein Canvas.
Wir lassen das Licht aus
Eine Atelier-Sektion, die das Grading erklärt — die eine Stelle, an der das Studio über Methode spricht, statt Ergebnisse zu zeigen.
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 ↗
