Aufgabe
Websites von Yogastudios sehen fast überall gleich aus: Beige, eine Frau, die im Sonnenuntergang meditiert, ein Lotus, „Finde deine innere Ruhe“, und ganz unten der Stundenplan als fremdes Widget einer Buchungsplattform. Dabei ist der Stundenplan der Grund, warum man die Website öffnet. Ich wollte eine Studio-Website zeigen, in der Stundenplan und Buchung im Mittelpunkt stehen, mit eigenem Charakter. Das ist ein Musterprojekt: Studio, Adresse und Lehrer:innen sind erfunden, die Fotos sind generiert.
Rolle
Konzept, Art Direction, Design, Entwicklung, Fotos
Was ich gemacht habe
- Zuerst Art Direction: eine ehrliche Liste dessen, was Yoga-Websites austauschbar macht, ein Moodboard mit zwei Paletten auf derselben Seite und drei Schriftpaaren. Gewählt: Betongrau mit einem einzigen Ultramarin nur für Aktionen und ein Schriftpaar, das sich wie ein Fahrplan liest. Der Name kommt vom Ort: Der Himmel über der Ruhr war lange grau und ist heute blau, und »blau machen« heißt, sich Zeit nehmen.
- Der Stundenplan als Herz der Website: die ganze Woche als ein Band, Filter nach Stil, Level und Lehrer:in, und die Buchung direkt in der Zeile, auf dem Smartphone in einem Bottom Sheet. 22 Punkte zeigen die freien Matten, eine Leiste hält den eigenen Platz auf jeder Seite im Blick, und Links von überall öffnen die richtige Stunde.
- Atmen als System: Jeder Kurs hat seinen Takt (Vinyasa 4/4, Yin 5/7, Pilates 3/2, Atem 4/7/8). Auf der Kursseite atmet ein Kreis in diesem Takt, die Linie im Kopf atmet mit, und man kann eine Minute mitatmen, auf dem Smartphone mit kurzer Vibration.
- Seiten, die echte Fragen beantworten: ein Preisrechner, der ehrlich sagt, wann sich die 10er-Karte nicht lohnt, Lehrer:innen mit ihren Stunden direkt aus dem Stundenplan, der Weg von der Haltestelle bis zur Matte und ein Journal in der eigenen Stimme des Studios. Keine Bewertungen, keine Sterne.
- Details mit Aufgabe: Der Kopf ist eine Abfahrtstafel der nächsten freien Stunden, hinter dem großen Schriftzug liegt ein Himmel aus einem WebGL-Shader von 1,8 KB mit CSS als Rückfall. Deutsch und Englisch, „Bewegung reduzieren“ überall berücksichtigt, als statische Dateien auf Cloudflare veröffentlicht.
Ergebnis
Die Demo funktioniert: Wählen Sie eine Stunde und buchen Sie selbst einen Platz. Die Buchung bleibt in Ihrem Browser, nichts wird verschickt. Genauso kann ein Studio, eine Tanzschule oder eine Praxis den Stundenplan auf der eigenen Website führen.
Werkzeuge
Next.js 16, React 19, Tailwind CSS 4, Motion, Zustand, WebGL · Cloudflare Workers · ElevenLabs (photos) · Inter Tight, IBM Plex Mono