uct

UkrCapital Trade — поставщик молочных ингредиентов. Ассортимент — от сухого обезжиренного и цельного молока и несоленого сливочного масла до сухой сладкой, деминерализованной и жиронаполненной сыворотки, безводного молочного жира и сливочно-растительных спредов.

На первом экране этого B2B-сайта жирный белый заголовок гротеском сочетается с теплыми фото: ребенок с багетом в пшеничном поле на десктопе, корова на альпийском пастбище на мобильном. «Products» стоит особняком в бледно-песочном блоке в правом конце шапки, отдельно от «About», «Geography», «News», «Contacts», поиска и переключателя языков En/Ru/Ua. Во внутренних страницах — молоко, хлеб и порошок на светлом фоне.

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

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

На странице продуктов одна карточка вмещает целое продуктовое семейство. Жиронаполненная сухая сыворотка переключается между животным и растительным жиром, масло — между 72,5% и 82%, сухое молоко — между обезжиренным и цельным, а синие линии отмечают активную вкладку. Сетка остается короткой, а каждый сорт — на расстоянии одного клика. Отдельные позиции, например сухая сладкая сыворотка или спреды, получают простую карточку со студийным фото на бледно-сером, а поиск раскрывается на всю ширину шапки.

Упаковка повторяет точечный глобус из логотипа на крафтовой бумаге, с названием продукта крупным темно-синим шрифтом и растровым градиентом, поднимающимся от нижнего угла, — на мешке на 25 кг и коробке для масла.

Главная, «About» и «Products» используют общую рамку: первый экран с фото на всю ширину и белым листом контента, который заходит на его нижний край. Блок «About» расставляет две колонки текста вокруг фото склада в рамке из синих полос. В шапке «Products» открывает мегаменю, которое показывает весь ассортимент под «All Products».

UI-кит фиксирует три состояния шапки (обычное, со слоганом, с открытым поиском), кнопки «Explore more», футер, который повторяет список продуктов по категориям, и модальное окно «Drop Us a Line» с полями для имени, e-mail и сообщения и песочной кнопкой «Write to Us». Страница контактов добавляет карту под карточкой с адресом.