SVITLO

SVITLO — концепт сучасної beauty-студії, у якому естетика, зручність і цифрові сервіси зібрані в один інтерфейс. Це не макет сторінки: сайт працює на власному сервері, увесь його вміст лежить у базі, а форма запису справді створює записи й звіряє вільний час із розкладом майстрів.

Завданням було зробити не презентаційну вітрину салону, а повноцінний цифровий продукт, у якому відвідувач проходить увесь шлях сам: дивиться напрями, порівнює результати процедур, читає про майстра, бачить ціну й тривалість — і записується, не беручи телефон до рук.

Окремо будувалася система керування вмістом. Послуги, ціни, майстри, фотографії, відгуки, питання, контакти, тексти секцій і SEO редагуються в панелі — без розробника й без правок у коді. Сайт і панель — одна система: ціна, змінена в адмінці, одночасно оновлюється в прайсі, у блоці популярних послуг і у формі запису.

1. 02.01Створити впізнавану візуальну систему для beauty-бренду, що поєднує елегантність, мінімалізм та емоційну фотографію.
2. 02.02Побудувати зрозумілу структуру послуг за основними напрямами: волосся, нігті, брови, вії, обличчя та макіяж.
3. 02.03Розробити зручний онлайн-запис із вибором послуги, майстра, дати та часу.
4. 02.04Створити повноцінні профілі майстрів із можливістю перейти до запису просто з картки.
5. 02.05Реалізувати інтерактивну галерею результатів процедур із порівнянням «До / Після».
6. 02.06Продумати зрозумілу систему цін, популярних послуг, консультацій та подарункових сертифікатів.
7. 02.07Створити адміністративну панель для керування вмістом і щоденними процесами студії.
8. 02.08Адаптувати весь користувацький досвід для desktop, tablet та mobile.

Візуальна концепція — Modern Elegance. Виразна serif-антиква в заголовках із курсивними акцентами, що підхоплюють ключове слово рядка; поруч — спокійний гротеск в інтерфейсі. Палітра тримається на молочному й піщаному тлі, темно-шоколадному чорному та одному теплому теракотовому акценті, який працює лише там, де від людини чекають дії.

Beauty-фотографія подається великим планом і майже без обрізань — вона несе настрій, якого не дасть жодна іконка. Навколо неї — повітряна композиція з великими полями, м’які скруглення, тонкі волосяні розділювачі та делікатні анімації наведення: картка трохи підводиться, фото майстра отримує тепле сяйво, стрілка в кнопці зміщується на пару пікселів.

Тло кожної смуги — рівна заливка плюс тонке зерно, і воно лежить під текстом, а не плівкою поверх сторінки: плівка з’їдає частку контрасту в кожної літери. Світлових плям і розмиттів на сторінці немає зовсім — градієнти лишилися тільки там, де в них є робота: затемнення під заголовком героя, підкладка під круглими кнопками на фото майстра, паперова фактура самого сертифіката.

Усе це працює на функцію, а не замість неї. Кнопка запису є в шапці, у герої, у кожній картці послуги й майстра — шлях від «цікаво» до «записаний» ніде не довший за два кроки. Спокійне преміальне тло потрібне саме для того, щоб ці кроки було видно: на строкатій сторінці помаранчева кнопка перестає бути єдиним яскравим місцем, а разом із цим перестає бути очевидною.

1. 04.01UX/UI-дизайн. Повна візуальна система: типографічна шкала, сітки, відступи одного ритму, адаптивні компоненти й стани — наведення, фокус, активний, вимкнений, завантаження.
2. 04.02Головна сторінка. Герой, швидкий запис, напрями, популярні послуги, простір студії, переваги, команда, результати процедур, прайс, відгуки, питання, сертифікати й контакти — чотирнадцять секцій, зібраних із бази.
3. 04.03Каталог послуг. Шість напрямів, понад два десятки послуг із описом, ціною, типом ціни («фіксована» або «від»), тривалістю й фотографією. Порядок усередині напряму змінюється перетягуванням.
4. 04.04Онлайн-запис. П’ять кроків — послуга, майстер, дата, час, контакти — і підтвердження з кодом. Вільні години рахує сервер: він звіряє робочі години майстра, перерви, відпустки, уже наявні записи й те, чи вміщається повна тривалість послуги до кінця зміни.
5. 04.05Профілі майстрів. Картка з фотографією, спеціалізацією, стажем, напрямами роботи й підходом; із неї одразу можна записатися саме до цього майстра — форма відкривається вже з обраним виконавцем.
6. 04.06До / Після. Інтерактивне порівняння з повзунком: чотири роботи, у кожної — опис і факти про процедуру. Точка кадрування спільна для обох знімків, інакше при порівнянні обличчя розходяться.
7. 04.07Популярні послуги. Горизонтальна стрічка з фотографіями, цінами й переходом до запису. Це не окремий список, а прапорець на тій самій послузі — тому ціна тут не може розійтися з прайсом.
8. 04.08Відгуки. Слайдер із оцінками й фотографіями, форма надсилання з боку відвідувача та модерація в панелі: на сайт потрапляє лише опублікований відгук, і телефон автора не виводиться на сторінку взагалі.
9. 04.09Прайс-лист. Напрями перемикаються на місці, у рядку — ціна, тривалість і дія запису. Під списком — блок консультації для тих, хто ще не знає, що обрати.
10. 04.10Подарункові сертифікати. Номінали й довільна сума в заданих межах, термін дії та умови; у панелі — виписані сертифікати з читабельним номером, який можна продиктувати телефоном. Платіжної системи в проєкті немає: статус оплати ставить співробітник, і жодного фальшивого «оплачено» система не малює.
11. 04.11CMS та адміністративна панель. Шістнадцять розділів: сторінки й секції, послуги й ціни, майстри, онлайн-записи, розклад, відгуки, галерея, сертифікати, медіафайли, контакти, SEO, налаштування, службові сторінки, користувачі та журнал дій. Ролі — супер-адміністратор, адміністратор і менеджер — обмежують доступ на сервері, а не приховуванням кнопок.
12. 04.12Керування записами та розкладом. Список із фільтрами за станом, майстром і датою, календар дня по колонках майстрів, картка запису з історією, створення запису вручну та перенесення. Переходи станів обмежені таблицею, а не довільні: із «завершеної» вийти нікуди, інакше історія почала б брехати. Розклад — робочий тиждень, перерви, відпустки й заблоковані інтервали — справді керує тим, що бачить відвідувач у формі.
13. 04.13Адаптивна версія. Окрема логіка мобільного меню, карток, стрічок, прайсу, форми запису та модальних вікон. Перевірено на 1440, 768 і 390 px: горизонтальної прокрутки немає ніде, зокрема й у панелі — усі 23 її сторінки.
14. 04.14Motion і мікровзаємодії. Поява секцій при прокрутці, наведення на кнопки й картки, перемикання слайдерів, розкриття питань, відкриття модальних вікон і кроків запису. Усе коротке й тихе: рух тут підказує, а не розважає, і в режимі зменшеного руху зникає повністю.
15. 04.15SEO та технічна оптимізація. Для кожної сторінки — заголовок, опис, canonical, Open Graph і robots, усе з панелі. Структуровані дані BeautySalon: адреса, телефон, години, соцмережі — без рейтингів і кількості відгуків, бо вигадана оцінка карається, а не допомагає. Доки адресу сайту не вказано, canonical, og:url і sitemap.xml не виводяться зовсім: тег із вигаданим доменом шкодить більше, ніж його відсутність.
16. 04.16Службові сторінки. Політика конфіденційності, умови використання й політика cookie — три документи з власним візуальним редактором, чернеткою та публікацією: власник правит їх сам, не чіпаючи розмітки.

SVITLO — не красива головна сторінка, а зв’язана система. Каталог послуг є джерелом і для прайсу, і для блока популярних, і для першого кроку запису. Майстри прив’язані до послуг, які виконують, і до власного розкладу. Розклад визначає вільні години у формі. Запис створює подію, яка одразу видно в панелі — у списку, у календарі дня й у картці з історією станів.

Той самий зв’язок іде у зворотний бік. Змінена ціна з’являється в трьох місцях сторінки одночасно. Прихований майстер зникає з команди й із форми, але вже наявні записи лишаються цілими. Знятий з публікації відгук зникає з сайту, а не ховається стилем. Вимкнена секція зникає зі сторінки цілком. Вилучити медіафайл, який десь використовується, система просто не дає — перевірка йде по восьми місцях одразу.

Під цим — своя інженерія. Подвійне бронювання закрите на трьох рівнях: перевірка й вставка в одній транзакції, умовний унікальний індекс у базі та відповідь 409, яка повертає клієнта до свіжої сітки годин. Вісім одночасних запитів на один слот створюють рівно один запис. Весь проєкт написаний без жодної зовнішньої залежності — вбудований HTTP-сервер, вбудована SQLite, вбудований Argon2id для паролів — і покритий наскрізними перевірками, останній прогін яких пройшов повністю.

SVITLO показує, як сайт beauty-студії може поєднувати емоційну візуальну подачу з повноцінними цифровими інструментами. Від знайомства з послугами до вибору майстра й онлайн-запису всі ключові дії зібрані в одному зрозумілому інтерфейсі, а не розкидані між сторінкою, телефоном і месенджером.

Адміністративна панель доповнює цей досвід із другого боку: вміст, ціни, майстри, розклад і щоденні записи лишаються в руках студії, без розробника між наміром і зміною на сайті.