Разработка b2b сайта для завода сухих смесей Полипласт - Веб-студия ARIAL

Разработка сайта для завода сухих строительных смесей Полипласт

Завод сухих строительных смесей «Полипласт» обратился к нам за разработкой современного корпоративного сайта каталога. Главная задача — грамотно представить сложный ассортимент продукции и максимально упростить оформление заявок для дилеров. Мы провели анализ ниши, разработали интуитивную структуру каталога с фильтрами. Итог — ресурс, работающий на имидж и рост продаж. В этом кейсе расскажем, как создали эффективный цифровой инструмент для реального сектора экономики и справились со спецификой B2B.

Видеопрезентация процесса создания сайта

01 Технические задачи

уникальный и индивидуальный дизайн
стиль дизайна - продающий
SEO-оптимизация под поисковые системы
адаптивность под мобильные устройства и планшет

02 Общая информация

Категория - корпоративный сайт каталог
Тематика - строительные смеси
Сроки разработки - 32 дня

Рабочий процесс

Проект проходил тестирование, обсуждение и внесение правок на каждом этапе разработки. Полное взаимодействие дизайнеров, разработчиков и заказчика позволило выполнить проект с ожидаемым положительным результатом и в четко обозначенные сроки.

анализ ниши и прототипирование дизайна главной страницы сайта

прототипирование дизайна внутренних страниц сайта

отрисовка в figma цветного дизайна главной страницы сайта

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

отрисовка в figma цветного дизайна внутренних страниц сайта

верстка сайта (html/css/javascript)

интеграция верстки на cms, наполнение контентом

загрузка на боевой домен, сдача проекта заказчику

анализ ниши и прототипирование дизайна главной страницы сайта

прототипирование дизайна внутренних страниц сайта

отрисовка в figma цветного дизайна главной страницы сайта

отрисовка в figma цветного дизайна мобильной и планшет версии сайта

загрузка на боевой домен, сдача проекта заказчику

интеграция верстки на cms, наполнение контентом

верстка сайта (html/css/javascript)

отрисовка в figma цветного дизайна внутренних страниц сайта

Видеообзоры каждого этапа разработки

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

1 этап - отрисовка прототипа главной страницы

2 этап - прототип внутренних страниц

3 этап - отрисовка дизайна desktop главной страницы

4 этап - отрисовка дизайна desktop внутренних страниц

5 этап - отрисовка дизайна tablet + mobile главной страницы

6 этап - вёрстка сайта с дизайна figma

7 этап - натяжка на cms и запись видео урока

Этапы работ

1 этап - прототипирование главной страницы

Видеообзор этапа

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

Мы разработали детальную wireframe-структуру, определили ключевые блоки: каталог продукции, калькулятор расхода, форма для дилеров. Особое внимание уделили навигации. Важно было именно сократить путь от входа на сайт до раздела «Где купить». Прототип помог согласовать расположение элементов с заказчиком без отвлечения на цвета и шрифты.

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

2 этап — прототипирование внутренних страниц

Видеообзор этапа

После утверждения главной мы углубились в структуру каталога и служебных разделов. Для завода критически важно четко отобразить технические характеристики каждой смеси. Мы разработали макеты страниц категорий, карточек товаров, документов и контактов.

Особый акцент сделали на карточке продукта. Здесь разместили таблицы свойств, инструкции по применению и кнопки скачивания сертификатов. Это закрывает боли инженеров и снабженцев. Также продумали логику фильтрации в каталоге, чтобы поиск нужной марки смеси занимал секунды.

Прототипирование ключевых узлов позволило выявить скрытые проблемы навигации до начала верстки. Мы согласовали с «Полипласт» каждый экран, убедившись, что информация подана иерархически верно. Это сэкономило бюджет на правки в дизайне. Итог — полная карта сайта, где каждая из 13 страниц решает важную бизнес-задачу, будь то информирование или сбор лидов.

ui-kit Сетка дизайна обеспечивает верное размещение блоков и элементов сайта с сохранением одинаковых отступов на всех версиях отображения от desktop версии до mobile версии. Цветовая палитра и шрифт позволяет соответствовать цветовой концепции компании, брендбука и официального стиля компании.

desktop сетка проекта

tablet сетка проекта

mobile сетка проекта

цветовые решения

#0D5E43

#0F7D58

#F0F3F4

#002E1E

#727272

шрифтовые решения

Аа

Roboto ExtraLight Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Light Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Regular Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

Аа

Roboto Medium Аа Бб Вв Гг Дд Ее Ёё Жж Зз Ии Йй Кк Лл Мм Нн Оо Пп Рр Сс Тт Уу Фф Хх Цц Чч Шш Щщ ъ ы ь Ээ Юю Яя 1234567890!@#$%^&*()_+?{}|\

H1 Заголовок

H2 Заголовок

H3 Заголовок

Текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа текст параграфа Ссылка в тексте Ссылка в тексте HOVER Ссылка в тексте PRESSED

3 этап - отрисовка в figma цветного дизайна главной страницы

Видеообзор этапа

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

Детально проработали типографику: шрифты читаемы даже в таблицах с техническими характеристиками. Добавили фото производства и продукции, чтобы подчеркнуть масштаб завода. Избежали визуального шума, сохранив «воздух» между блоками.

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

4 этап - отрисовка мобильной и планшетной версии в figma

mobile

tablet

Видеообзор этапа

В B2B часто ищут поставщиков со смартфона, поэтому адаптивность критична. Адаптировали каталог, таблицы и формы. Увеличили тач-зоны, упростили меню, сохранив стиль. Проверили читаемость. Клиент получил макеты для всех разрешений. Это гарантирует корректное отображение сайта у снабженцев.

5 этап - отрисовка цветного дизайна всех страниц в Figma

Видеообзор этапа

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

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

Стиль подчеркивает промышленный масштаб заказчика. Мы показали клиенту полный визуал сайта, чтобы исключить сюрпризы на этапе верстки. Это помогло избежать недопонимания и правок в коде. Все страницы готовы к передаче программистам. Итог — полный комплект макетов, готовый к реализации.

Как из прототипа делается дизайн

Завод сухих строительных смесей

6 этап - вёрстка сайта

Видеообзор этапа

Перенесли макеты из Figma в код. Использовали современные технологии для скорости загрузки. Сайт полностью адаптивен, корректно отображается на всех устройствах. Код чистый, семантический, что важно для SEO. Провели кроссбраузерное тестирование. Всё работает стабильно и быстро.

7 этап - натяжка на cms и запись видео урока

Превратили вёрстку в динамичный сайт. Настроили интуитивную админ-панель для управления контентом без программистов. Менеджеры «Полипласт» смогут сами менять цены, добавлять товары и документы. Интегрировали формы обратной связи с почтой. Протестировали все функции. Сайт готов к наполнению. Это обеспечивает полную автономность бизнеса. Всё работает быстро и стабильно.

Другие проекты

Aluma Boats

Алюмтек АЗС

НЛСИ

МИК