Почему смешение разных идей дает крутой результат: кейс Promeat

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

Одновременно с этим, новый сайт должен был привлекательно рассказать историю продукта и ценности бренда. Хотелось уйти от шаблонов типичных мясных компаний и привлечь внимание дизайнеров и потенциальных клиентов чем-то свежим. Возникла идея поискать вдохновение за пределами привычной сферы — и решение пришло довольно неожиданное.

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

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

Идея зашла сразу. Сомнения ушли, а вместе с ними — и базовая смета: заказчик выбрал более амбициозный вариант, и бюджет проекта вырос почти вдвое. Вывод? Не бойтесь озвучивать идеи заранее. Они могут не только убедить клиента работать с вами, но и задать проекту совсем другой масштаб. Сильная идея на старте — это инвестиция, которая окупается

Для того чтобы наглядно рассказать о продукте, мы реализовали секвенцию на WebGL, построенную на базе Three.js. Это позволило пользователям буквально «увидеть» продукт в действии, в динамике. Однако за впечатляющим результатом стояло немало технических вызовов.

Проблемы, с которыми столкнулись:

• 3D-модель мяса была слишком детализированной. Избыточное количество полигонов и тяжёлые текстуры вызывали лаги и тормоза.
• Сковорода, несмотря на неоптимальность, имела важное визуальное значение и её хотелось сохранить.
• Необходимо было синхронизировать движение объектов с видеореференсом — обеспечить точное, плавное вращение и перемещение при скролле.
• Прокрутка на устройствах без тачпада была слишком резкой, нарушая эстетику взаимодействия.
• Мы также хотели добавить эффект динамической глубины резкости (DOF), зависящей от положения мяса, и отзывчивые микроанимации по всему сайту.

Как мы решили задачи:

• Оптимизировали 3D-модели: у сковороды сократили количество полигонов, сжали текстуры; мясо заменили на облегченную версию, сохранив визуальную привлекательность.
• Для плавного рендеринга использовали скрипт на базе gltf-transform — это обеспечило быструю загрузку, в том числе на мобильных.
• Реализовали дампинг-анимации: он позволил добиться мягких, реалистичных переходов в движении и вращении объектов.
• Написали кастомный React-хук для управления анимацией и позиционированием объектов. Он принимает карту ключевых кадров и интерполирует их относительно прокрутки. Хук универсален и уже используется в других проектах.
• Привязали плавное появление объектов (мясо, сковорода) к положению скролла.
• Эффект DOF реализован через линейную интерполяцию, что позволило добиться нужной глубины и реалистичности без потерь в производительности.
• Для устранения резкости скролла использовали библиотеку Lenis — она делает прокрутку плавной и предсказуемой даже на мышках.
• В секциях с горизонтальной прокруткой применили animation-timeline: view() — анимации запускаются только при попадании в viewport. Для старых браузеров предусмотрены fallback-решения.
• Добавили живые микроанимации: ховеры, плавное появление, интерактивность по действиям пользователя — всё это сделало интерфейс отзывчивым и эмоционально приятным.

Инсайты и выводы:

• Оптимизация 3D-моделей экономит ресурсы и время разработки.
• Кастомные хуки — мощный инструмент для масштабируемых решений.
• Плавность UX — это не косметика, а необходимость: damp, lerp и Lenis значительно улучшили опыт взаимодействия.
• Постобработка (например, DOF) добавляет глубины, но требует тонкой настройки для сохранения производительности.
• Микроанимации делают интерфейс дружелюбным и современным.

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

Итогом этого смелого эксперимента стал не только эффектный сайт, но и высокая оценка сообщества. Проект Promeat привлёк внимание международных экспертов и получил награду Website of the Day («Сайт дня») на престижной площадке CSS Design Awards. Кроме того, проект был отобран в галерею лучших UI-проектов на Behance, что стало ещё одним подтверждением качества созданного нами нового визуального языка.

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

Важно отметить, что микс идей — это не самоцель, а инструмент. Он эффективен, когда каждая составляющая усиливает другую. В нашем случае журнальный стиль усилил ощущение экспертности, а мясная тематика приобрела стильную подачу. Такого рода синергия и рождает вау-эффект.

Как однажды сказал Стив Джобс: «Креативность — это просто соединение вещей. Когда вы спрашиваете креативных людей, как они сделали что-то, они чувствуют себя немного виноватыми, потому что на самом деле они просто увидели связь». В дизайне это означает: не бойтесь экспериментировать и сочетать несовместимое. Если делать это осмысленно, можно добиться впечатляющих результатов.