01 · Überblick
Wir haben die Spiegel verkauft und mehr Hantelscheiben gekauft
Jede Gym-Website sieht aus wie ein Spa. Weiche Verläufe, eine Frau, die eine Kurzhantel anlächelt, ein Stockfoto von einem Smoothie. Für dieses Konzept habe ich mir SLAB als Betonboden in Detroit vorgestellt, mit 41 Racks und ohne Spiegel, geöffnet 115 Stunden pro Woche — und die Site musste erkennbar dasselbe Gebäude sein.
Also ist die Seite gebaut wie das Gerät: drei Pixel Rahmen, acht Pixel harte Schatten, versetzt nach unten und rechts, ein 48-Pixel-Bodenraster über alles gezogen und ein einziges Säuregelb, eingesetzt als Fläche — nie als Text. Nichts ist weich, nichts ist gerundet, und nichts blendet: Reveals schnappen in neunzig Millisekunden linearem Transform ein, ganz ohne Änderung der Opazität.
02 · Die Idee
Das Interface als Gerät
Schatten sind physisch
Ein harter Versatz von 8px 8px 0 ohne Weichzeichnung. Er liest sich wie eine Scheibe auf einer Scheibe, nicht wie eine UI-Elevation.
Säure ist eine Fläche
Gelb füllt Blöcke und Chips. Text ist es nie, denn #D8F21D auf Weiß ist ein Kontrastversagen, und keine Marke ist das wert.
Keine Easing-Kurve
Neunzig Millisekunden, linear. Easing impliziert Schwung, und Schwung impliziert Weichheit.
03 · Ziele
Was die Seite leisten musste
Filtern, nicht konvertieren
Die Seite soll manche Leute abschrecken. Genau deshalb steht das Manifest an zweiter Stelle.
Die ganze Woche veröffentlichen
Ein vollständiger Kursplan in einer Tabelle, die sich auf dem Smartphone tatsächlich lesen lässt — denn das ist die Frage, die jedes künftige Mitglied hat.
Preise ohne Entschuldigung
Drei Stufen, kein Jahresrabatt-Theater, überschrieben mit „zahl für Eisen, nicht für Innenausstattung“.
Anmeldung auf einem Bildschirm
Name, E-Mail, Telefon, Ziel, Tarif. Fünf Felder, Inline-Fehler, eine Live-Region.
04 · Bauablauf
Das Programm
Raster und Rahmen
Das 48-Pixel-Bodenraster und der Drei-Pixel-Rahmen kamen vor jedem Inhalt. Alles danach musste sie überleben.
Schrift in voller Lautstärke
Anton für Display, Roboto Mono für alles andere — die Textschrift ist die Monospace, und genau das lässt die Seite wie gedruckte Gerätebeschriftung wirken.
Reveals wie Stempel
Ein lineares 90ms-Scale ohne Einblendung, plus ein Sicherheitsnetz nach
load, das alles wieder einblendet, was der Observer verpasst hat.Die Woche, in Eisen
Die Kursplan-Tabelle, zuletzt gebaut — sie ist das Schwierigste auf der Seite, wenn sie bei 375 Pixeln lesbar bleiben soll.
05 · Architektur
Drei Dateien
├── index.html 33.9 KB — 8 Sektionen, 8 Duotone-Fotografien
├── styles.css 37.4 KB — 12 Custom Properties, 7 Media Queries
└── script.js 12.2 KB — 367 Zeilen: Nav · Stempel-Reveals · Zähler · Formular · Anker
Der Stack
- Semantisches HTML
- CSS Grid
- Harte Schatten
- requestAnimationFrame
- Anton
- Roboto Mono
Barrierefreiheit
- aria-expanded
- aria-live
- Sicherheitsnetz bei load
- Reduzierte Bewegung
- Echtes Tabellen-Markup
06 · Was sich gewehrt hat
Was sich gewehrt hat
Säuregelb ist die Marke — und fällt bei Textgrößen im Kontrast gegen Weiß wie gegen Schwarz durch. Es für Überschriften zu nutzen wäre ein glatter WCAG-Verstoß auf dem lautesten Element der Seite gewesen.
Säure wurde von Anfang an als Flächen-Token definiert. Es füllt Blöcke, die schwarzen Text tragen, und färbt nie Schrift. Die Marke ist voll präsent, und nichts auf der Seite ist unlesbar.
Reveal-on-Scroll versteckt Inhalte standardmäßig. Auf einer Seite, deren ganze Persönlichkeit Direktheit ist, wäre unsichtbar hängender Inhalt, weil ein Observer nie gefeuert hat, der schlimmstmögliche Fehler.
Ein Sicherheitsnetz bei window.load geht über jedes noch versteckte Element und blendet es ein. Der Reveal ist eine Verbesserung mit ausdrücklicher Frist.
Ein Kursplan über sieben Tage ist eine breite Tabelle, und breite Tabellen auf einem 375-Pixel-Bildschirm sind der Punkt, an dem die meisten Gym-Sites schlicht aufgeben und den Inhalt verstecken.
Echtes <table>-Markup, das unterhalb des Breakpoints zu einem Stapel aus Tagesblöcken wird — jede Zeile behält ihre Header-Zuordnung. Die meisten der sieben Media Queries im Build existieren für diese eine Komponente.
Ein Seitenlink, der nur scrollt, lässt die Tastatur zurück. Die Ansicht bewegt sich, der Fokus nicht, und das nächste Tab macht dort weiter, wo der Leser vorher war.
Das Scrollen bleibt in CSS; das Skript bewegt nur den Fokus. Jeder Anker gibt seinem Ziel tabindex="-1" und fokussiert es mit preventScroll, sobald das Scrollen zur Ruhe gekommen ist — sofort unter prefers-reduced-motion, wo nichts zur Ruhe kommen muss.
07 · Was bleibt
Die Teile, die bleiben dürfen
HEAVY IS THE POINT
Drei gestapelte Stempel, der dritte als Kontur statt gefüllt — die ganze Marke in einem Hero, ganz ohne Fotografie.
Such dir dein Gift
Programmkarten mit Duotone-Fotografie, um anderthalb Grad aus der Achse gedreht, damit das Raster nie maschinell gesetzt wirkt.
Die Lauten
Coaches, vorgestellt mit ihren Lifts statt mit ihren Zertifikaten.
Klare Antworten
Ein FAQ, das „habt ihr eine Sauna“ mit „nein“ beantwortet. Text und Design machen denselben Job.
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 ↗
