Yuumpk.ru

Информация о проекте

Компания «Южно-Уральская Металлопромышленная Компания» (ЮУМПК) занимается оптовой и розничной продажей металлопроката. На момент обращения у клиента был только сайт-визитка на конструкторе, который не позволял масштабировать ассортимент, управлять каталогом и интегрироваться с 1С. Основной задачей стал запуск полноценного интернет-каталога с тысячами позиций, удобной фильтрацией и современным дизайном.

Цели создания сайта:

• Разработать уникальный дизайн и логотип, отражающие специфику металлопроката и премиальный уровень компании.
• Создать структурированный каталог с возможностью выгрузки товаров из внешних источников (парсинг) и гибкой системой фильтрации.
• Выбрать CMS, позволяющую в будущем интегрироваться с 1С и самостоятельно управлять контентом (остановились на 1С-Битрикс).
• Обеспечить адаптивную верстку и корректное отображение на всех устройствах.

Решение
Проект начался с детального обсуждения целей и выбора технологического стека. Клиент изначально рассматривал Modx, но после консультации остановился на 1С-Битрикс (редакция «Малый бизнес») — это решение обеспечивало встроенный торговый каталог, мощные фильтры и возможность простой интеграции с 1С в будущем.

Параллельно с проектированием сайта мы запустили разработку логотипа. Дизайнер предложил несколько вариантов, в основе которых — силуэт гор и квадратного профиля в проекции, символизирующий Урал, рост и надежность. После нескольких итераций клиент утвердил логотип с полным названием компании и графическим знаком, получив все необходимые форматы (svg, png, ai) для использования на сайте и в полиграфии.

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

Дизайн-этап оказался самым дискуссионным. После утверждения прототипов мы отрисовали все страницы в Figma. Клиент обратил внимание, что в масштабе 100% на его экране сайт выглядит слишком крупным, теряется информативность. Вместо простого уменьшения шрифтов мы пересобрали сетку, сузив контейнер контента с 1400px до стандартных 1170px, и скорректировали отступы. Это позволило сохранить визуальную целостность и сделать сайт комфортным для восприятия. Дополнительно мы доработали главную страницу: добавили кликабельные разделы, стрелку-якорь, настроили отображение новостей и футера. Всего было согласовано более 30 уникальных страниц, включая каталог с тремя вариантами отображения (блоками, списком, таблицей), карточки товаров, услуги, справочники и калькулятор металлопроката.

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

Программирование на Битрикс потребовало кастомизации типовых компонентов. Мы настроили инфоблоки для каталога, услуг, новостей, справочников. Реализовали «умный фильтр» по свойствам товаров (диаметр, марка стали, толщина и т.д.) — фильтр работает через генерацию отдельных страниц, что важно для SEO. Также настроили похожие товары, корзину и формы заказа с отправкой писем на sales@yuumpk.ru.

Ключевым вызовом стало наполнение каталога. У клиента не было готовой базы товаров, поэтому мы разработали парсер для сайта-донора (metallurg-moskva.ru). Парсер собрал более 2700 товаров с их свойствами, ценами, описаниями и изображениями, сохранив иерархию разделов. Клиент получил Excel-выгрузку, отфильтровал ненужные позиции, после чего мы загрузили данные в Битрикс. Это позволило запустить сайт с полным каталогом, не тратя месяцы на ручное заполнение.

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