Риментел

Главное о кейсе

«Риментел» пришёл с задачей выделиться среди «рыбных» сайтов и рассказать о трёх брендах так, чтобы захватить внимание и быстро вести к продукту. Старый подход «кто мы и что продаём» сменили на яркий имиджевый сайт с историей, анимациями и микроинтерактивами. Пользователи получают «вау» уже с первого скролла главной страницы: сочный промоблок, где слайды сменяются будто вы просматриваете пачку фото; динамичные анимированные блоки с самой важной информацией о компании; понятное меню, из которого можно сразу перейти на лендинги брендов — не менее впечатляющие, чем главная страница. Далее — красивый каталог с необычным подскроллом категорий, вкусные пошаговые рецепты с калькулятором расчета ингредиентов.

Как проект изменил жизнь пользователей

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

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

Ориентироваться в ассортименте проще: бренды оформлены каждый в свой цвет — понятно, где вы и какие товары перед вами.

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

Итог: простая и понятная навигация, полная и прозрачная информация о компании и продукте, помощь в поиске, покупке и применении продукта.

Бизнес-задача и ее решение

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

Решение: разработали имиджевый сайт, который совмещает яркую визуальную подачу с чёткой структурой. Каталог построен так, чтобы визуально разделять бренды по цветам и стилю, анимации и микроинтерактивы повышают вовлечённость, рецепты с калькулятором порций и ссылками на товары упрощают путь к покупке. Технически реализовано через GSAP, ScrollVariable, playbackRate, с обработкой графики помогли нейросети. Результат — единая онлайн-платформа, которая одновременно продаёт продукт и транслирует ценности бренда.

Крафт (мастерство), реализация, технические детали

Сайт держит внимание за счёт анимаций и микроинтерактивов, которые работают плавно и без лагов даже при медленном интернете. Если сеть проседает, видео автоматически сменяется статичным изображением — скорость проверяется через Network Information API.

При скролле заголовки на главной странице «разъезжаются», а между словами появляется небольшая картинка, которая чуть больше погружает в «рыбную» тематику. Бегущие строки можно таскать мышкой и менять им направление — для этого использовали библиотеку GSAP.

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

Каталог и навигация разделяют три бренда по цветам, но всё смотрится как единый стиль. Плюс — интерактивные рецепты с калькулятором порций и ссылками на товары, которые превращают идею в покупку буквально в пару кликов.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Брендбук стал отправной точкой, но быстро стало ясно: просто «перерисовать» фирменный стиль недостаточно. Вместе с клиентом решили экспериментировать — тестировали анимации, подачу рецептов, варианты каталога.

Во время тестирования выяснили, что видео на главной при медленном интернете превращается в мучение. Решили добавить автоматическую подмену на фото.

Фишка страницы рецепта — калькулятор, который рассчитывает точное количество ингредиентов в зависимости от количества порций.

Скриншоты