Корпоративный сайт для «Промцветметалл»
Разработали сайт компании по порошковой покраске металла: с разделением контента для бизнеса и частных клиентов, калькулятором стоимости и примерами работ.
Задача
«Промцветметалл» занимается порошковой покраской металлических изделий.
Компания работает и с частными заказами на одну деталь, и с серийными партиями для бизнеса. Этим заказчикам нужны разные сведения и разная степень подробности — при разработке требовалось учесть обе аудитории.
Вместо прежнего лендинга требовалось разработать полноценный сайт, подготовленный к рекламе и поисковому продвижению по отдельным услугам. Посетитель должен быстро находить цены, сроки и условия заказа, смотреть похожие работы и рассчитывать предварительную стоимость.
Что сделали
- Аналитика и проектирование
- Структура и прототипирование
- Веб дизайн
- Интерактивные элементы
- Frontend
- Backend и CMS
- Калькулятор и каталог RAL
- Наполнение
- Базовая SEO-оптимизация
Разные сценарии просмотра и чтения
Частный клиент хочет покрасить конкретную вещь. Ему нужно понять условия заказа, не погружаясь в технологию порошковой покраски.
Поэтому страницы для частных клиентов сделали более наглядными, а тексты — понятными. Добавили больше карточек с изображениями изделий, примеров работ, вариантов цвета и сравнений до и после покраски. Они помогают представить результат и перейти к обсуждению заказа.
Бизнес-заказчики обычно уже знакомы с порошковой покраской и имеют определённые требования к покрытию. При выборе исполнителя им важно убедиться, что компания понимает порядок подрядных работ и сможет встроиться в их производственный процесс.
Для этой аудитории подготовили более подробные тексты: о подготовке металла, маскировке рабочих поверхностей и согласовании образца. Отдельно раскрыли приёмку и отгрузку партий по графику. Такие детали показывают, что исполнитель знаком с требованиями заказчика и готов обсуждать конкретные условия сотрудничества.
Оценить стоимость до обращения
Таблица расценок даёт лишь исходные данные: заказчику приходится самому определять способ расчёта, учитывать размеры и количество изделий, прибавлять стоимость дополнительных работ. Мы перенесли эту логику в калькулятор с готовыми формулами. Посетитель получает предварительную стоимость заказа, а допустимые размеры учитывают ограничения печи.
Это дополнительный повод задержаться на сайте и подробнее рассмотреть предложение перед обращением. Калькулятор помогает отвечать на запросы о стоимости покраски. Вместе с ценами, условиями и примерами работ он делает содержание полезнее для посетителя и создаёт основу для поискового продвижения.
Портфолио, связанное с услугами и цветами
Для портфолио мы собрали фотографии выполненных заказов и дополнили их описаниями: что покрасили, какие работы выполнили, в каком объёме и за какой срок. Каждой работе назначили категорию изделий и цвет RAL.
По этим параметрам пользователь может отфильтровать список и найти похожие заказы. Эти же связи используются на других страницах сайта.
Например, на странице покраски ограждений показываются ограждения, покрашенные «Промцветметаллом». На странице RAL 9005 — изделия, покрашенные компанией именно в этот цвет. Пользователь сразу видит подходящие примеры, не перебирая все работы.
С нуля разработали полноценный сервис подбора цвета: с каталогами RAL, поиском визуально похожих оттенков, примеркой на металле и подбором цвета по фотографии.
Сервис помогает привлекать новых посетителей из поиска и выбирать покрытие тем, кто уже пришёл за покраской. Им удобно пользоваться и при повторных заказах, и на встрече с клиентом — сравнить оттенки, показать примеры и обсудить варианты.
Подробнее о сервисе подбора RALТехническая часть
Адаптивность. Сайт разработан для десктопов, планшетов и мобильных устройств с сохранением структуры и ключевых сценариев на разных разрешениях.
Инфраструктура. Данные размещены на инфраструктуре в России. Настроено ежедневное внешнее резервное копирование материалов сайта.
SEO-подготовка. Проработана структура страниц услуг, категорий и цветов RAL под разные поисковые запросы. Подготовлены уникальные тексты, настроены метаданные, канонические адреса и описания изображений. Страницы связаны с подходящими примерами работ и материалами для дальнейшего изучения.
Стек. Next.js 16, React 19 и TypeScript, собственные CSS-стили и Tailwind CSS. Для трёхмерного предпросмотра в калькуляторе используется Canvas-модуль.