Имиджевый сайт бренда БАД: авторский дизайн и анимации на чистом JS, без CMS и конструкторов

Mangrove — собственный бренд БАД IBIX, продажи идут через Wildberries и Ozon. Основной оборот делают карточки маркетплейсов, и на первый взгляд сайт бренду не нужен вовсе.

Нужен он оказался по трём причинам, и все три пришли из практики.

Доверие к бренду. Покупатель БАД перед заказом ищет производителя в поиске. Если по названию не находится ничего, кроме карточек на маркетплейсе, часть аудитории уходит к конкуренту с сайтом. Особенно в категории, где вопрос «а не подделка ли это» стоит остро.

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

Внешние коммуникации. Заявки на конкурсы, переписка с площадками, поставщиками, регуляторами — везде запрашивают сайт компании.

Отсюда сложилось техническое задание:

- Сайт должен производить впечатление уровня премиального бренда, а не выглядеть шаблоном с конструктора — иначе он решает задачу доверия наоборот

- Строгое соответствие ст. 25 ФЗ «О рекламе»: никаких лечебных заявлений, ни одной формулировки, за которую можно получить претензию. Это ограничение определило весь копирайтинг

- Быстрая загрузка при большом объёме анимации

- Двуязычность: русская и английская версии для работы с зарубежными партнёрами

- Полная автономность: без CMS, без подписок на конструктор, без зависимости от сторонних сервисов, которые завтра могут отключить российских пользователей

- Возможность вносить правки за минуты, а не через тикет подрядчику

Дизайн-концепция

Отправной точкой стал сам образ мангрового леса — тёмная вода, приглушённый свет, зелень. Клиент попадает не в аптечный каталог, а в атмосферу.

Типографическая пара — Cormorant Garamond для заголовков и DM Sans для основного текста. Классическая антиква даёт бренду вес и историю, гротеск отвечает за читаемость. Всё впечатление держится на контрасте шрифтов и воздухе между блоками, без единой фотографии человека.

Изображения продукта подготовлены отдельно: бутылки вырезаны по альфа-каналу и посажены на собственную тень, чтобы естественно ложиться на фон вместо белого прямоугольника поверх макета.

Техническая реализация

Сайт собран как один самодостаточный HTML-файл со встроенными стилями и скриптами. Без CMS, без сборщика, без npm-зависимостей.

Решение выглядит нестандартно, но за ним расчёт:

• Нет базы данных и админки — нет и типового вектора взлома, нечего обновлять от уязвимостей

• Минимум сетевых запросов при загрузке

• Полный контроль над разметкой, никаких «так сделал шаблон»

• Правка контента занимает минуты

• Ежемесячная стоимость владения — только хостинг

Анимации написаны вручную на чистом JavaScript, без jQuery и анимационных библиотек: появление блоков при скролле через Intersection Observer, магнитный эффект у кнопок, наклон и блик на элементах при движении курсора, медленно перетекающий градиент фона.

Языковое переключение реализовано без редиректов и второго набора страниц: контент обеих версий лежит в одном документе, переключатель меняет отображаемый слой. Посетителю с англоязычной локалью показывается ненавязчивое предложение переключиться.

Хостинг

Здесь мы сознательно отказались от привычного стека. С середины 2025 года у российских провайдеров начались проблемы с прохождением трафика через зарубежные CDN, поэтому сайт размещён на российском хостинге с российским DNS — чтобы он одинаково открывался у клиента из Нальчика и из Москвы, независимо от оператора.

Домен зарегистрирован на владельца бренда, техническое управление — на стороне IBIX. Этот же принцип мы применяем во всех клиентских проектах: сайт остаётся собственностью заказчика.

Копирайтинг

Каждая формулировка проверялась на соответствие требованиям к рекламе БАД. Задача была рассказать о продукте убедительно, оставаясь строго в рамках закона. Работали через описание состава, происхождения сырья, стандартов производства и подтверждающих документов — без обещаний результата.

Роль ИИ в производстве

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

Именно этот подход позволяет нам делать за две-три недели объём, на который классическая студия ставит команду впятеро больше.

Две цифры здесь важнее остальных.

Total Blocking Time — 0 мс. Все анимации страницы не блокируют главный поток ни на миллисекунду. Это прямое следствие отказа от сторонних библиотек: на странице нет чужого кода, конкурирующего за исполнение.

Cumulative Layout Shift — 0. При загрузке ни один элемент не смещается, включая языковой баннер и уведомление о cookie — под них место зарезервировано в разметке заранее.

Разрыв между FCP и LCP составляет 0,3 секунды: самый крупный элемент дорисовывается почти сразу за первым кадром, без ступеньки «текст появился, картинка через две секунды».

Что сайт дал бренду

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

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

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

Что подтвердилось технически

Отказ от CMS оправдал себя за время эксплуатации: нет обновлений безопасности, нет админки как точки входа, нет расходов на поддержку платформы.

Решение по хостингу тоже подтвердилось. Сайт одинаково открывается у пользователей разных операторов по всей стране — в отличие от проектов, которые в 2025 году столкнулись с проблемами прохождения трафика через зарубежные CDN.

Что из этого мы перенесли в клиентские проекты

Кейс стал для нас производственным стандартом. Схема «один файл, без CMS, без внешних зависимостей, российский хостинг, домен на имя клиента» с тех пор применяется на всех имиджевых сайтах и лендингах. Клиент получает актив в собственность, а не аренду платформы, и не платит за поддержку того, что не должно ломаться.