Тон Studio Кожа, которая держит свет.
Флагманский кейс студии эстетики лица: WebGL-герой, где лепестки собираются в профиль лица, шейдер-грейдинг «индекса сияния» по скроллу, бенто потребностей кожи с FLIP-раскрытием и тест «Код кожи», который собирает готовую заявку в WhatsApp. Палитра снята с лепестка — фарфор, румянец, роса, орхидея; чёрного на сайте нет вовсе. Дизайн и код — InterLAB. Студия вымышленная, это витрина подхода.
point-cloud · профиль
это не скриншот — в рамке настоящий сайт · наведите, чтобы выпрямить
Сайт в движении
Что сделано — и зачем
Скриншоты живого демо, а не макеты.
Лепестки собираются в лицо
Полторы тысячи лепестков лежат россыпью и на глазах сходятся в профиль лица; курсор раздвигает их. Ни одной фотографии и текстуры — всё считается в браузере.
«Индекс сияния» вместо «до/после»
Один и тот же портрет по скроллу проходит от холодной «городской кожи» к тёплой, рядом растёт счётчик. Продаётся приобретение лоска, а не избавление от дефекта.
Бенто по потребностям
«SMAS» и «BBL» ничего не говорят без медобразования. Сетка собрана по тому, что видно в зеркале: сияние, упругость, увлажнение, рельеф. Карточка раскрывается прямо в сетке.
Открытый протокол процедуры
Главный страх ниши — неизвестность. Протокол вынесен в отдельную главу: шаги загораются по очереди, а рядом — из чего складывается стоимость.
Тест «Код кожи» вместо формы
Вместо «оставьте телефон» — четыре вопроса, которые собирают предварительную карту процедур и уходят в WhatsApp вместе с ответами: администратор получает контекст, а не голый номер.
боль ниши
Косметология пугает раньше, чем успевает продать
Клиника показывает шприцы и «до/после» в жёстком свете, а прайс пишет на языке аппаратов: SMAS, BBL, биоревитализация. Человек не понимает, что он получит, боится боли и неестественности — и закрывает вкладку, так и не дойдя до записи.
решение
Свет вместо шприцов, результат вместо аппаратов
Никакого шок-контента: сайт говорит про сияние и ровный тон, а кожа набирает свет прямо на глазах у пользователя. Прайс переразложен по потребностям — «сияние», «упругость», «увлажнение», — протокол безопасности открыт по шагам, а вместо формы «оставьте телефон» стоит разбор из четырёх вопросов, который уходит в WhatsApp готовой картой процедур.
Палитра, пара шрифтов, стек. Одна ниша — одна система.
Кожа, которая держит свет
Oranienbaum — высококонтрастная антиква с родной кириллицей: на фарфоре перепад штрихов звучит как модный журнал, а узкие формы дают заголовку уместиться в строку. Geist — спокойный гротеск для набора и цен. Ни Playfair, ни Inter — и половина «дорогих» бьюти-шрифтов отпала сразу, кириллицы у них нет.
- --bg#fbf6f5фарфор
- --bg-2#f5e9e6тень лепестка
- --ink#3e2a33сливовый графит
- --tone-glow#b26039абрикосовый румянец
- --tone-lift#b2505eпион
- --tone-hydra#3f8480роса
- --tone-purity#7d59a4орхидея
стек
Почему сделано именно так
Лепестки, которые собираются в лицо
01Студия обещает, что вы уйдёте другим человеком, — поэтому первый экран не рассказывает про преображение, а показывает его. Полторы тысячи лепестков лежат россыпью и на глазах сходятся в профиль лица; курсор раздвигает их, как если бы вы провели рукой. Силуэт считается по контуру на CPU, свет и сборка живут в шейдере — ни одной фотографии и ни одной текстуры.
WebGL · instanced petals
Палитра снята с лепестка, а не со стока
02Первая версия была тёмной — оникс и янтарь — и читалась как ювелирка, а не как студия эстетики. Ниша ассоциируется с кожей на просвет: лепесток пиона, молоко, роса, перламутр. Поэтому фон — фарфор, вместо чёрного сливовый графит, а акценты названы по тому, откуда взяты: абрикосовый румянец, пион, роса, орхидея. Тон интерфейса меняется под раздел — пользователь управляет атмосферой.
petal palette · tone theming
«Индекс сияния» вместо «до/после»
03Стандартный слайдер до/после в косметологии показывает акне и морщины в жёстком свете — это вызывает отторжение. Мы меняем не форму, а свет: по скроллу один и тот же макро-портрет проходит грейдинг от холодной «городской кожи» к тёплой влажной, по кромке вайпа едет блик, рядом растёт счётчик. Продаём приобретение лоска, а не избавление от дефекта.
scroll grading · wipe
Бенто потребностей с раскрытием на месте
04«SMAS», «BBL», «биоревитализация» ничего не говорят человеку без медобразования. Сетка собрана по тому, что видно в зеркале: сияние, упругость, увлажнение, рельеф. Клик разворачивает карточку FLIP-анимацией прямо в сетке — соседи перетекают вниз, оверлей и блокировка скролла не нужны. Внутри — «формула ухода»: из чего складывается цена.
bento · FLIP
Открытый протокол и тест «Код кожи»
05Главный страх ниши — не боль, а неизвестность. Протокол 01→04 вынесен в отдельную главу: по вертикали идёт свет, шаги загораются по очереди. А вместо формы «оставьте телефон» — разбор из четырёх вопросов, который собирает предварительную карту процедур и уходит в WhatsApp вместе с ответами: в мессенджер приходит контекст, а не голый номер.
trust · wa.me
Честно
«Тон Studio» — вымышленная студия: флагман-демо шоурума InterLAB, цены, бренды препаратов и цифры — иллюстрация формата, а не реальная практика. Такой же сайт под ваш реальный бизнес собирается с вашими услугами, фото и номером WhatsApp.
Для похожего бизнеса
Хотите такой же — под вашу клинику?
Покажем черновик на нашем поддомене до любых оплат. WebGL-герой, бенто по потребностям и тест с выводом в WhatsApp — как в демо, но с вашими протоколами и ценами.
- Оценка объёма и рисков до старта
- NDA — по вашему или нашему шаблону
- Старт работ в течение недели