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». Сторінка контактів додає мапу під карткою з адресою.