SLAB Strength Club Schwer ist der Punkt

01 · Überblick

Wir haben die Spiegel verkauft und mehr Scheiben gekauft

Jede Fitnessstudio-Website sieht aus wie ein Spa. Weiche Verläufe, eine Frau, die eine Hantel anlächelt, ein Stockfoto von einem Smoothie. Für dieses Konzept habe ich mir SLAB als Betonboden in Detroit vorgestellt, mit 41 Ständern und ohne Spiegel, 115 Stunden die Woche geöffnet — und die Site musste erkennbar dasselbe Gebäude sein.

Also ist die Seite wie die Geräte gebaut: drei Pixel Rahmen, harte Acht-Pixel-Schatten nach unten rechts versetzt, ein 48-Pixel-Bodenraster über alles gezogen, und ein einziges Säuregelb, nur als Fläche und nie als Text verwendet. Nichts ist weich, nichts ist rund, und nichts blendet — Reveals rasten in neunzig Millisekunden linearer Transformation ein, ganz ohne Änderung der Deckkraft.

02 · Die Idee

Das Interface als Gerät

Eine Regel hält den Build zusammen: Das Interface ist ein Gerät. Es stapelt, es ist an den Kanten verschraubt, es ist beschriftet, und es gibt nie vor, leichter zu sein, als es ist. Drei Entscheidungen folgen daraus, und nichts im Build bricht sie.

• Schatten sind physisch

  Ein harter Versatz von 8px 8px 0, ganz ohne Weichzeichnung. Er liest sich wie eine Scheibe, die auf einer Scheibe liegt, und nicht wie UI-Elevation.

• Säure ist eine Fläche

  Gelb füllt Blöcke und Chips. Es ist nie Text, 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

1. Filtern, nicht konvertieren

   Die Seite soll manche Leute abschrecken. Das Manifest steht an zweiter Stelle, vor den Programmen und lange vor dem Preis, genau aus diesem Grund.

2. Die ganze Woche veröffentlichen

   Ein vollständiger Kursplan in einer Tabelle, die man auf dem Telefon wirklich lesen kann — denn das ist die erste Frage, die jedes künftige Mitglied hat.

3. Ohne Entschuldigung bepreisen

   Drei Stufen, kein Jahresrabatt-Theater, überschrieben mit „zahl für Eisen, nicht für Innenarchitektur“.

4. Leute in einem Bildschirm anmelden

   Name, E-Mail, Telefon, Ziel, Tarif. Fünf Felder mit Fehlern direkt im Formular am Fuß der Seite, ohne Schritt davor, und die Bestätigung über eine Statusregion angesagt statt nur gezeigt.

04 · Baureihenfolge

Das Programm

Erst Struktur und Linie, dann Schrift in voller Lautstärke, dann die eine Bewegung, die sich die Seite erlaubt, und zuletzt das schwierigste Bauteil.

1. Raster und Rahmen

   Das 48-Pixel-Bodenraster und der Drei-Pixel-Rahmen kamen vor jedem Inhalt hinein. Alles danach musste sie überstehen.

2. Schrift in voller Lautstärke

   Anton für die Display-Ebene, Roboto Mono für alles andere. Die Brotschrift ist die Monospace, und genau das lässt die Seite wie gedruckte Gerätebeschriftung lesen.

3. Einstempelnde Reveals

   Eine lineare Skalierung über 90 ms ohne Blende, dazu ein Sicherheitsnetz nach dem Laden, das alles wieder sichtbar macht, was der Observer verpasst hat.

4. Die Woche, in Eisen

   Die Plantabelle, zuletzt gebaut, weil sie das Schwerste auf der Seite ist, um bei 375 Pixeln lesbar zu bleiben.

05 · Architektur

Drei Dateien

Kein Bundler, kein Framework, kein Icon-Font und kein node_modules. Drei Dateien, ausgeliefert wie geschrieben, und elf Custom Properties, die das ganze Aussehen halten.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Säuregelb ist die Marke, und es fällt im Kontrast sowohl gegen Weiß als auch gegen Schwarz in Textgrößen durch. Es für Überschriften zu verwenden wäre ein glattes WCAG-Versagen am lautesten Element der Seite gewesen.

   Lösung

   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 vollständig da, und nichts auf der Seite ist unlesbar.

2. Problem

   Reveal beim Scrollen versteckt Inhalt standardmäßig. Auf einer Seite, deren ganze Persönlichkeit Direktheit ist, wäre Inhalt, der unsichtbar hängen bleibt, weil ein Observer nie ausgelöst hat, das schlimmstmögliche Versagen.

   Lösung

   Ein Sicherheitsnetz beim window-load durchsucht jedes noch versteckte Element und macht es sichtbar. Der Reveal ist eine Zugabe mit ausdrücklicher Frist.

3. Problem

   Ein Kursplan über sieben Tage ist eine breite Tabelle, und breite Tabellen bei 375 Pixeln sind die Stelle, an der die meisten Fitnessstudio-Seiten schlicht aufgeben und den Inhalt verstecken.

   Lösung

   Echtes Tabellen-Markup, das unterhalb des Breakpoints zu einem Stapel Tagesblöcke wird, wobei jede Zeile ihre Kopfzuordnung behält. Die meisten der sieben Media Queries im Build existieren für dieses eine Bauteil.

4. Problem

   Ein Sprunglink, der nur scrollt, lässt die Tastatur zurück: Die Ansicht bewegt sich, der Fokus nicht, und das nächste Tab läuft dort weiter, wo die Leserin ohnehin schon war.

   Lösung

   Das Scrollen bleibt in CSS, und das Skript bewegt nur den Fokus. Jeder Anker gibt seinem Ziel ein tabindex von -1 und fokussiert es mit preventScroll, sobald das Scrollen zur Ruhe gekommen ist — unter reduzierter Bewegung sofort, weil dort nichts zur Ruhe kommen muss.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Schwer ist der Punkt

  Drei gestapelte Stempel, der dritte konturiert statt gefüllt. Die ganze Marke in einem Hero, ganz ohne Fotografie.

• Such dir dein Gift aus

  Programmkarten mit Duotone-Fotografie, anderthalb Grad aus der Achse gedreht, damit sich das Raster nie maschinengesetzt anfühlt.

• Die Lauten

  Coaches, die mit ihren Lifts vorgestellt werden statt mit ihren Zertifikaten.

• Klare Antworten

  Eine FAQ, die „habt ihr eine Sauna“ mit „nein“ beantwortet. Text und Gestaltung machen denselben Job.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Es wird nichts davon geladen, bevor du es verlangst — die Seite, die du gerade liest, bleibt also so leicht, wie sie aussieht.

slabstrength.club

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