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 для паролей — и покрыт сквозными проверками, последний прогон которых прошёл полностью.

Мобильная версия — не уменьшенный desktop, а тот же продукт с переписанными сценариями. Навигация прячется под бургер и раскрывается на полный экран с телефоном и кнопкой записи под рукой. Направления и карточки услуг перестраиваются в одну колонку. Ленты мастеров и отзывов становятся горизонтальными с инерционной прокруткой пальцем. Прайс остаётся читаемым без горизонтальной прокрутки — строка переносится, а не сжимается.

Больше всего работы досталось форме записи и сравнению «До / После». Форма на телефоне идёт на полный экран, шаг за шагом, с большими зонами нажатия и клавиатурой, которая не перекрывает поле. Ползунок сравнения переводится на касание, но остаётся управляемым и с клавиатуры. Модальные окна блокируют прокрутку страницы под собой и возвращают фокус туда, откуда их открыли.