[email protected]

Раменский design concept

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

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



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

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

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

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

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

Пресс-центр. Информирует о последних новостях компании. Состоит из заголовка компонента и списка последних постов из любой категории.

Галлерея. Слайдер с фото и видео материалом, перелистывается вручную или автоматически.

Вакансии. Позволяет перейти на все вакансии или на страницу стажировок. Ниже располагаются последние актуальные вакансии.

Футр. Состоит из формы обратной связи, логотипа, контактных данных и навигации по страницам.

Figma full page


Страница каталога состоит из блока с баннерами, управляющим блоком с сортировкой и переходом по категориям, сетка товаров, пагинация по страницам.

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

Ниже располагается сортировка по категориям и сетка товаров. Товар в сетке состоит из изображения, наименования, цены, вес, вводом количества и кнопкой «добавить в корзину».

Сначала пользователь добавляет товар в корзину, после указывает необходимое количество

В каталоге присутствует переключатель отображения товаров вида «список» и «плитка». Отображение товара в виде списка позволяет сделать каталог более компактным и быстрым для покупок.

В карточках товара у юр. лиц отсутствует цена

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

На 4 шаге нам предлагается товар в необходимом количестве с разбивкой по месяцам. Одним кликом мы можем добавить его в корзину.

Страница товара. По клику на товар в каталоге пользователь переходит на страницу с подробным содержимым.

Figma full page


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

Если физ. лицо или незарегистрированный пользователь добавил товаров на определенную сумму, всплывает окно с предложением «Стать дилером».

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

Figma full page


Личный кабинет. Страница управления личными данными, данными по доставке и просмотру заказов. Стартовая страница личного кабинета — это вкладка «заказы».


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

Figma full page


Мобильная версия. Благодаря блочной структуре дизайн быстро адаптируется под экраны мобильных телефонов сохраняя свою функциональность и эстетику.


Компонентный подход позволяет быстро и гибко создавать и модернизировать страницы. Готовые UI-компоненты, помогают дизайн системе сайта масштабироваться.


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

Сергей Шилов — digital director
Денис Левченко — creative director, designer
Лилия Идилия — web designer
Семён Левченко — motion designer
Алексей Глушков — project manager

p.motion 2022