Светлый путь: как мы сделали визитку мясокомбината, которую хочется съесть глазами
- Заказчик
- «Мясокомбинат Светлый» — предприятие из тихого экологически чистого уголка Беларуси. Компания работает с 2017 года и уже успела нарастить мускулы — как в производстве, так и в репутации.
- Задача
- Разработать сайт-визитку для мясокомбината. Яркий, современный, с выразительной анимацией.
Важный акцент — на качестве продукции и атмосфере производства. Сайт должен был передавать главную идею бренда: «Говядина для тех, кто ценит качество».
Обязательные элементы:
- Видеоблок на главной странице
- Фирменные цвета (синий и белый)
- Крупная типографика и полупрозрачные текстовые плашки с эффектом параллакса
- Анимированные счетчики и блок с историей компании
- Отдельная страница новостей
Важно было не только создать визуально сильный сайт, но и предусмотреть удобную систему редактирования — чтобы заказчик мог сам управлять контентом после запуска.
Особенности проекта
Команда заказчика уже участвовала в запуске сайта для мясной фабрики «Александров», поэтому понимание задач и ожиданий было с первой встречи. Но это не упрощало работу: в мире мясокомбинатов границы узкие, а внимание к деталям — пристальное.
Вдохновлялись Bownds Ranches — за плавную анимацию и эмоцию, и Мясной фабрикой «Александров» — за визуальный стиль. Правда, у последнего не было новостей, а здесь они были принципиальны.
Каталог в виде быка
В «Александрове» структура каталога выполнена в форме быка. В «Светлом» эту идею тоже захотели перенять. Казалось бы, можно было сделать по-другому, но образ оказался слишком узнаваемым и полюбившимся, чтобы от него отказаться.
Если увидите каталог в виде бык — ставьте на то, что это наша работа.
Повтор? Формально — да. Но в деталях — своя логика, свое исполнение, свои акценты. Мы адаптировали механику под новый контент и сделали визуально иначе, насколько это было возможно в рамках заданной идеи.
При выборе части коровы пользователь переходит в каталог: открывается список доступных продуктов.
На странице каждого продукта реализованы анимации появления текста и главных изображений. Клиент видит всю информацию, историю просмотров и может оставить заявку.
Самостоятельное редактирование
Фото, тексты, баннеры — почти все заказчик легко может менять сам. И делает это: уже через несколько дней после запуска обновили изображение на главной. Именно для этого мы и предусмотрели гибкую систему редактирования, чтобы сайт развивался без участия разработчиков.
Было:
Стало:
Дизайн и анимация
Сайт «Светлого» — это не просто витрина, а отражение философии бренда: качество, надежность и уважение к традициям. Мы стремились создать пространство, где каждый элемент работает на общее впечатление. Никаких трюков ради трюков: если что-то двигалось, значит, для этого была причина.
Фирменные цвета — глубокий синий и чистый белый — задают тон всему сайту. Крупная типографика собралась в аккуратные блоки, чтобы все выглядело цельно.
При наведении надпись превращается в бегущую строку:
С анимациями тоже пошли не по верхам. Добавили параллакс в фоны, чтобы страницы не были плоскими. Сделали выезд текста и наезды экранов, чтобы структура чувствовалась динамичной. Подключили счетчики, чтобы история компании жила прямо на экране — и двигалась вместе с пользователем.
На главной — видео. Коровы едят, трава сочная, воздух чистый.
В мобильной версии заменили его на статичную картинку, но атмосферу сохранили.
В результате получился сайт, который рассказывает историю бренда, создает доверие и подчеркивает ценности «Светлого».
Разработка и технологии
Сначала собрали прототип в Figma, согласовали логику и поведение блоков, а потом спокойно пошли в верстку. Дизайн сразу делали с прицелом на адаптацию.
Была задача сделать так, чтобы клиент мог сам менять почти все. Сделали. Заголовки, тексты, изображения, практически все наполнение сайта легко поменять.
Технически проект не из сложных, но всегда важно не допустить халтуры. Страницы должны загружаться быстро, анимация не должна сбоить, медиа — не тормозить мобильную сеть. Поэтому оптимизировали все: от веса изображений до порядка загрузки блоков.
Результат
«Светлый» получил современный сайт, который отражает суть бренда: уверенность, прозрачность и внимание к деталям. Клиент остался доволен.
Вместо очередной визитки с разделом «О нас» собрали живой сайт. Он делает свою работу — показывает, кто заказчик, откуда мясо и почему ему можно доверять. И главное — говорит на том же языке, что и сам комбинат: коротко, честно и по существу.