На главнуюКейс · Сайты и лендинги
COSMi — сайт студии аппаратной косметологии в Казани
Премиальный многостраничный сайт с видео на первом экране, страницами услуг, интерактивным прайсом, разделом специалистов, формой консультации и онлайн-записью.
- Клиент
- студия COSMi
- География
- Казань
- Формат
- многостраничный сайт
- Направление
- аппаратная косметология
- Задача
- презентация услуг и получение заявок на запись
Адаптивный сайтВидео на первом экранеСтраницы услугИнтерактивный прайсОнлайн-записьYCLIENTSФорма консультации
Задача
Сделать сайт частью впечатления от студии
COSMi требовался сайт, который не выглядел бы типовым лендингом салона красоты. Он должен был передать спокойную премиальную атмосферу пространства, понятно представить аппаратные процедуры, познакомить посетителя со специалистами и сократить путь от первого знакомства до записи.
- сформировать целостный премиальный образ студии
- показать реальное пространство, оборудование и специалистов
- представить услуги без сложной профессиональной терминологии
- сделать цены удобными для просмотра
- направить пользователя к онлайн-записи или персональной консультации
- адаптировать интерфейс под компьютер, планшет и смартфон
Подход
Спокойная визуальная система без типового салонного дизайна
Визуальная концепция построена на сочетании глубокого тёмного фона, тёплых молочных поверхностей, крупных фотографий и сдержанных красных акцентов. Контрастная антиквенная типографика отвечает за эмоциональность, а простой гротеск — за навигацию, формы и практическую информацию.
Сайт соединяет имиджевую подачу с понятной пользовательской логикой: познакомиться со студией, выбрать направление, изучить процедуру и цены, подобрать специалиста и перейти к записи.
Навигация
Навигация, которая ведёт к записи
В шапке собраны основные разделы, выпадающее меню услуг, контакты, социальные сети, телефон и заметная кнопка онлайн-записи. Активный раздел выделяется красным акцентом, а пользователь может перейти к нужной процедуре из любой части сайта.
Фиксированная шапкаВыпадающее меню услугКонтакты и мессенджерыКнопка «Записаться»Компьютер и смартфон
Атмосфера
Пространство как часть позиционирования
Интерьер студии показан не обычной фотогалереей, а полноценной визуальной композицией. Крупное изображение кабинета дополняют фотографии зоны ожидания, оборудования и профессиональной косметики. Блок помогает передать атмосферу ещё до первого визита.
Технологии
Технология под задачу
Интерактивный блок объясняет, что процедура и параметры подбираются специалистом с учётом особенностей тела или кожи. Для блока реализована слайдерная механика со стрелками, текстовыми состояниями и индикаторами текущего экрана.
Интерактивный слайдерСтрелки навигацииСмена описанийИндикаторы слайдов
Команда
Специалисты, которым доверяют
Команда представлена через крупные персональные карточки с фотографиями, именами, должностями и специализациями. Такой формат делает студию более открытой и помогает пользователю заранее познакомиться со специалистами.
Консультация
Консультация без обязательного выбора процедуры
Форма не заставляет посетителя заранее определяться с процедурой. Пользователь оставляет имя и телефон, выбирает интересующее направление или вариант «Пока не определились», даёт согласие на обработку данных и получает персональную консультацию.
Имя и телефонВыбор направления«Пока не определились»Согласие на обработку данныхПолитика конфиденциальностиЗаметная кнопка отправки
Страница услуги
Отдельные посадочные страницы под процедуры
Для ключевых направлений предусмотрены отдельные страницы. На примере Icoone Laser MMAS пользователь сразу видит название процедуры, краткое объяснение, фотографию оборудования и два сценария действия: записаться онлайн или сначала получить консультацию. К другим услугам можно перейти через меню.
Хлебные крошкиКатегория услугиЗаголовок под поисковый запросЗапись и консультацияИзображение оборудования
Прайс
Прайс, с которым удобно работать
Большой объём услуг разбит на понятные категории. Слева пользователь выбирает направление, справа видит название процедуры, продолжительность и стоимость. Внутри категорий предусмотрены дополнительные смысловые группы: тело, лицо и абонементы.
Навигация по разделамАктивное состояниеПродолжительностьСтоимостьТело, лицо и абонементыМобильная адаптация
Завершение
Завершение пути к записи
В футере повторяются ключевые контакты и онлайн-запись. Дополнительно размещены адрес, режим работы, навигация, социальные сети, политика конфиденциальности, согласие на обработку персональных данных и обязательное медицинское предупреждение.
Мобильная версия
Интерфейс, который сохраняет характер на смартфоне
Мобильная версия COSMi — не уменьшенная копия десктопного интерфейса. Навигация, контент, формы, прайс и действия пользователя перестроены под вертикальный экран, управление одной рукой и быстрый переход к записи.
фиксированная мобильная шапкаполноэкранное менюнижняя панель действийвертикальные карточкиадаптированные формыгоризонтальная навигация по прайсудлинные разделы прайсамобильный футер
Ключевые мобильные сценарии
Основные разделы сайта получили отдельную мобильную композицию: от выбора направления и знакомства со студией до прайса, консультации и онлайн-записи.
01
Выбор направления
Пользователь сразу выбирает интересующее направление и сохраняет доступ к записи через фиксированную нижнюю панель.
02
Атмосфера и пространство
Крупные фотографии и текстовая композиция перестроены под вертикальный экран без потери атмосферы.
03
Уход продолжается
Фото и информационная карточка соединены в вертикальный сценарий со стрелками и индикаторами.
04
Знакомство с мастерами
Карточки специалистов сохраняют крупные фотографии, должности и специализации.
05
Персональная консультация
Поля и быстрые варианты выбора перестроены в одну колонку и удобны для заполнения со смартфона.
06
Полноэкранная навигация
Основные разделы, контакты и мессенджеры собраны в отдельном полноэкранном меню.
07
Категории прайса
Категории переведены в горизонтальную прокрутку, а услуги — в читаемый вертикальный список.
08
Абонементы и цены
Даже длинные тарифные блоки сохраняют понятную иерархию, длительность и стоимость.
09
Завершение пути
Адрес, режим работы, телефон, запись, социальные сети и навигация собраны в едином мобильном footer.
Что реализовано
От визуальной концепции до записи
Многостраничная архитектура
Видео на первом экране
Адаптивная версия для компьютеров и смартфонов
Выпадающее меню на компьютере и полноэкранное меню на смартфоне
Отдельные страницы процедур
Интерактивный прайс с горизонтальной навигацией на смартфоне
Слайдер технологий
Раздел специалистов
Фотогалерея интерьера
Адаптация формы консультации под смартфоны
Фиксированная нижняя панель действий
Адаптация длинных разделов прайса
Онлайн-запись через YCLIENTS
Юридические документы и согласия
Базовая SEO-структура
Технологии
Технологическая основа проекта
Проект объединяет кастомную фронтенд-разработку, адаптивную вёрстку, многостраничную архитектуру, видеоинтеграцию, формы заявок, базовую SEO-разметку и онлайн-запись через YCLIENTS.
Кастомная фронтенд-разработкаАдаптивная вёрсткаМногостраничная архитектураВидеоинтеграцияYCLIENTSФормы заявокSEO-разметкаОптимизация под мобильные устройства
Результат
Сайт, который передаёт атмосферу студии и ведёт к записи
В результате COSMi получила целостный сайт: выразительный первый экран, подробные страницы услуг, удобный прайс, знакомство со специалистами и несколько понятных способов записаться. Сайт показывает пространство студии, помогает разобраться в процедурах и выбрать следующий шаг.
Следующий проект
Нужен сайт, который производит впечатление и помогает получать заявки?
Разработаем структуру, интерфейс и интеграции под задачи вашего бизнеса.
Обсудить проект