Salon Wirbel

Задача

Малі салони й практики в Ессені та Рурі часто записують лише телефоном або відправляють клієнтів на платформу запису з чужим брендом і комісією. Я хотів показати, як може виглядати їхній власний сайт із записом без дзвінка. Це зразковий проєкт: салон, адреса й команда вигадані, фото — згенеровані заглушки. А запис справжній.

Роль

Концепт, арт-дирекція, дизайн, розробка, бекенд запису

Що зроблено

• Арт-дирекція: чесний розбір того, що зазвичай не так із сайтами салонів у Німеччині, мудборд із палітрами й парами шрифтів, три сміливі напрямки верстки, потім по три варіанти шапки й футера на вибір. Готовий сайт бере з них найкраще: величезне цегляне «Wirbel» з круглим дзеркалом у дуотоні за літерами, темний прайс, де довжина смужки показує тривалість послуги, і темний футер із гігантським обрізаним написом.
• Сайт, який знає, котра година. Повільна стрічка вгорі каже, чи салон зараз відчинений, і показує найближчий вільний час із запису; під курсором вона зупиняється, а ще має кнопку паузи. Перед футером годинник Ессена з поточним статусом і кнопкою одразу на цей час. Навігація плаває й лишається під рукою, поки гортаєш.
• Онлайн-запис у три кроки, що працює наживо: обрати послуги, потім майстра, день і вільний час, потім імʼя й пошту. Сервер перевіряє, що час ще вільний, а до підтвердження додається файл .ics для календаря. Демо-записи зберігаються, але листи не надсилаються.
• Німецька, англійська й українська версії; салон говорить спокійно й по-людськи, без вигаданих відгуків і зірочок.
• Приватність за DSGVO від початку: без трекерів і запитів на чужі сервери, шрифти лежать на самому сайті.
• Рух лише там, де він щось робить: обраний день клацає на місце, навколо обраного часу пробігає лінія, перш ніж він заллється, сума докручується, а спіраль доростає на виток із кожним кроком і замикається на підтвердженні. З увімкненим «Зменшити рух» усе нерухоме. Lighthouse на мобільному: 97 за швидкість, 100 за доступність і найкращі практики.

Результат

Демо працює по-справжньому: спробуйте записатися самі. Так само запис може працювати на сайті вашого салону чи практики.

Інструменти

HTML, CSS, JavaScript · Cloudflare Workers, KV · Piazzolla, Commissioner