ЧУП «РагозаПласт»

ЧУП «РагозаПласт» продаёт упаковочную продукцию, но у компании не было зафиксированного визуального решения и структуры будущего сайта. Нужно было одновременно представить поставщика, помочь покупателю отобрать товар по применению и параметрам и довести его до заявки или вопроса.

• разработали логотип PERBOX и визуальную систему сайта;
• спроектировали путь от общей задачи покупателя к каталогу и карточке товара;
• собрали в Figma главную, каталог с поиском и фильтрами, карточку товара с двумя сценариями обращения;
• спроектировали разделы «О компании», «Контакты», ленту блога и подробную статью;
• подготовили мобильные композиции показанных страниц.

Для компании разработали логотип PERBOX. В буквенное написание встроен голубой куб: он занимает место буквы «O» и прямо связывает знак с коробкой и упаковкой. Благодаря этому название и предмет деятельности работают в одном изображении.

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

Типографика решает другую часть задачи. Крупные заголовки без засечек обозначают разделы, более лёгкий набор используется для пояснений и характеристик. Здесь выразительность не вытесняет информацию: визуальная иерархия помогает отделять название продукта, условия выбора и следующее действие.

В макетах предусмотрели несколько уровней работы с ассортиментом:

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

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

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

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

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

Сопоставление desktop- и mobile-макетов показывает, что адаптация затронула композицию целиком, а не только размер шрифта.

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

Этот кейс показывает, как из ещё не оформленного запроса можно собрать предметное решение: связать образ компании, ассортимент, способы выбора и обращение покупателя. За итоговой композицией стоит проектирование всей структуры, а не только первого экрана.

Если вашему проекту нужна похожая работа, начнём с контекста и согласуем необходимый состав. Записаться на бесплатную консультацию · Все кейсы.