Разработка сайта салона красоты Юнель

«Юнель» — это не только салон красоты. Под одной крышей работают клиника косметологии, парикмахерское и ногтевое направление, SPA, массаж и аппаратная коррекция фигуры. Клиент формулировал позиционирование так: «не нужно выбирать между красотой и здоровьем» — врачи и бьюти-мастера в одной команде.

Из этого следовала главная сложность сайта: объём каталога при премиальной подаче. Нужно было показать десятки процедур с ценами, двенадцать аппаратов и медицинские компетенции врачей — и при этом не превратить сайт в прайс-лист, который разрушит ощущение частного, спокойного пространства.

Сайт разрабатывался по техническому заданию полного цикла: от вёрстки макетов Figma до наполнения, тестирования и передачи клиенту работающей админки.

01

Подготовка и аудит макетов

Разобрали макет Figma на переиспользуемые компоненты и собрали карту сайта: главная, шесть категорий услуг, двадцать шесть подразделов, специалисты, лояльность, сертификаты, «О нас», контакты и шесть юридических страниц. Отдельно зафиксировали состояния, которых в макете не было: пустой прайс, длинное название процедуры, поведение многоуровневого меню на планшете.

Результат: Утверждённая карта сайта на 47 страниц и перечень из 9 сквозных компонентов.

02

Вёрстка макетов

Сверстали шаблон на Montserrat в фирменной палитре — кремовый фон, тёмно-бордовые заголовки, персиковые акцентные плашки. Липкая шапка удерживает телефон и кнопку «Записаться» на всех экранах, многоуровневое меню услуг раскрывается и на десктопе, и на тач-устройствах. Адаптив собран от 1920 до 375 px.

Результат: Адаптивная кроссбраузерная вёрстка всех типовых страниц на тестовом контуре.

03

Анимация и интерактив

Слайдеры акций, блока аппаратов и партнёров собраны на Swiper 11, галереи интерьеров — на Fancybox. Прайс внутри разделов раскрывается аккордеонами, чтобы страница с сорока позициями не пугала стеной цифр. Анимации намеренно сдержанные: плавные состояния наведения и мягкое появление блоков, без параллаксов и тяжёлых эффектов.

Результат: Интерактив, который помогает читать каталог, а не отвлекает от него.

04

Установка и интеграция с 1С-Битрикс

Развернули 1С-Битрикс и перенесли вёрстку в собственный шаблон /local/templates/yunel/. Спроектировали инфоблоки: «Услуги» с двухуровневой вложенностью и привязанным прайсом, «Специалисты», «Аппараты», «Акции», «Партнёры», «Сертификаты». Меню работает на штатном компоненте с кастомным шаблоном, у всех разделов — ЧПУ. Онлайн-запись выведена на YCLIENTS: кнопка «Записаться» ведёт в виджет салона.

Результат: Каждый блок сайта, включая цены и состав команды, редактируется из админки без разработчика.

05

Тексты услуг

Написали описания для всех разделов и процедур — от классического маникюра до дыхательной терапии на OXYTERRA и тренировки мышц тазового дна на PelviPower. Формулировки выверены под требования к рекламе медицинских услуг: описываем механизм действия и эффект в допустимых формулировках, без гарантий. Для каждой страницы подготовлены title и description с упоминанием услуги и города.

Результат: Единый тон для 33 страниц услуг и мета-теги по всему каталогу.

06

Изображения и графика

Собрали визуальный ряд: карточки шести направлений, двенадцать снимков оборудования с логотипами производителей, интерьеры салона, портреты специалистов, логотипы партнёров. Всё приведено к одной стилистике и сетке кадрирования, сжато под веб, для некритичных блоков включена отложенная загрузка. Каждому изображению прописан осмысленный alt.

Результат: Комплект изображений с подтверждённой лицензионной чистотой и alt-атрибутами.

07

Наполнение и правка контента

Перенесли в админку весь каталог: процедуры, варианты и цены — от 4 900 ₽ за сеанс дыхательной терапии до 270 000 ₽ за максимальный протокол термолифтинга. Отдельно собраны депозитная система с четырьмя порогами, шесть номиналов подарочных сертификатов и карточки двенадцати специалистов. Прошли типографикой: неразрывные пробелы в ценах и телефоне, единый формат диапазонов «от — до».

Результат: Полностью наполненный и вычитанный сайт, готовый к тестированию.

08

Тестирование

Проверили сценарии записи и переход в YCLIENTS, работу форм и доставку писем, поведение меню и аккордеонов на реальных устройствах, сверку вёрстки с макетом постранично. Отдельным блоком — версия для слабовидящих: переключение режима, масштаб шрифта и контрастные схемы на всех типах страниц. Баг-лист вели единым документом с повторной проверкой каждой позиции.

Результат: Закрытый баг-лист и отчёт о тестировании, переданный клиенту.

09

Публикация

Сайт развёрнут на тестовом контуре test.yunel.ru — на нём проходит финальная приёмка контента заказчиком. Дальше по регламенту идёт перенос на боевой домен: настройка DNS и SSL, принудительный переход на HTTPS, robots.txt и карта сайта, подключение аналитики с целями на запись и клик по телефону, настройка резервного копирования.

Статус: Тестовый контур принят; перенос на боевой домен — следующий шаг.

10

Передача проекта

Клиент получает доступы к серверу и админке, исходники вёрстки и графики, резервную копию сайта и инструкцию редактора: как добавить процедуру в прайс, завести нового специалиста, поменять баннер акции. Всё это закрывается обучающей сессией с администратором салона.

Результат: Сайт, который команда салона ведёт самостоятельно.

Что получилось

• Каталог из 33 страниц услуг, где цену, описание или новую процедуру администратор добавляет сам — из админки, за минуту.

• Запись на процедуру доступна с любой страницы: телефон и кнопка закреплены в шапке, переход в YCLIENTS — в один клик.

• Витрина оборудования на двенадцать аппаратов, которая объясняет, за что клиент платит премиальную цену.

• Юридический контур медицинской организации закрыт: лицензии, политики, согласия, версия для слабовидящих.

• Премиальная подача сохранена при большом объёме коммерческой информации — прайс не вытесняет ощущение частного салона.

•