Задача
Сайти йога-студій майже всюди однакові: беж, жінка медитує на заході сонця, лотос, «знайди внутрішній спокій», а розклад — чужим віджетом платформи запису десь унизу. Хоча саме по розклад люди й відкривають сайт. Я хотів показати сайт студії, де в центрі розклад і запис, і з власним характером. Це зразковий проєкт: студія, адреса й викладачі вигадані, фото згенеровані.
Роль
Концепт, арт-дирекція, дизайн, розробка, фото
Що зроблено
- Спершу арт-дирекція: чесний перелік того, що робить сайти йога-студій однаковими, мудборд із двома палітрами на одному й тому самому екрані та трьома парами шрифтів. Обрано бетонний сірий з одним ультрамарином лише для дій і пару шрифтів, що читається як розклад руху. Назва — від місця: небо над Руром довго було сірим, а тепер синє, і «blau machen» німецькою означає взяти час для себе.
- Розклад як серце сайту: увесь тиждень однією стрічкою, фільтри за стилем, рівнем і викладачем, а запис просто в рядку заняття, на телефоні — у шторці знизу. 22 крапки показують вільні мати, смужка тримає твоє місце на виду на кожній сторінці, а посилання звідусіль відкривають потрібне заняття.
- Дихання як система: кожен курс має свій такт (Vinyasa 4/4, Yin 5/7, Pilates 3/2, Atem 4/7/8). На сторінці курсу в цьому такті дихає коло, лінія в шапці дихає разом із ним, і можна хвилину подихати разом, на телефоні з короткою вібрацією.
- Сторінки, що відповідають на справжні питання: калькулятор цін, який чесно каже, коли картка на 10 занять не вигідна, викладачі з їхніми годинами прямо з розкладу, дорога від зупинки до мата й журнал власним голосом студії. Без відгуків і зірочок.
- Деталі з функцією: шапка — це табло найближчих вільних занять, а за великим написом небо, яке малює WebGL-шейдер на 1,8 КБ із запасним варіантом на CSS. Німецька й англійська, «Зменшити рух» враховано всюди, опубліковано як статичні файли на Cloudflare.
Результат
Демо працює: оберіть заняття й запишіться самі. Запис лишається у вашому браузері, нікуди нічого не надсилається. Так само студія, школа танців чи практика можуть вести розклад на власному сайті.
Інструменти
Next.js 16, React 19, Tailwind CSS 4, Motion, Zustand, WebGL · Cloudflare Workers · ElevenLabs (photos) · Inter Tight, IBM Plex Mono