Торг-Снаб
Выстроить структуру и оформление так, чтобы посетитель быстро находил нужную информацию и мог перейти к следующему шагу.
Что требовалось решить
Создать современный сайт промышленного поставщика с индивидуальным дизайном и подробным каталогом. Помочь посетителю находить комплектующие по типу оборудования, серии, модели и техническому обозначению, изучать спецификации и готовить запрос. Перенести и систематизировать большой объём исходных технических данных, сохранить контакты компании и заложить основу для будущего SEO-продвижения.
Что сделали в проекте
Ключевые экраны проекта
Каталог / раздел
Реальный экран проекта. Откройте изображение, чтобы подробно рассмотреть интерфейс.
Увеличить скриншот ↗Карточка товара / интерфейс
Реальный экран проекта. Откройте изображение, чтобы подробно рассмотреть интерфейс.
Увеличить скриншот ↗Дополнительный экран
Реальный экран проекта. Откройте изображение, чтобы подробно рассмотреть интерфейс.
Увеличить скриншот ↗Проект после запуска
Опубликован самостоятельный сайт-каталог с индивидуальной темой, интерактивной 3D-сценой, 625 карточками и справочными страницами, поиском и техническими таблицами. Посетитель может пройти от семейства насосов к конкретной позиции и подготовить запрос поставщику. SEO-подготовка завершена; поисковое продвижение на этом этапе не выполняется.
Сайт поставщика промышленного оборудования со своей визуальной идеей
ООО «Торг-Снаб» из Новочеркасска поставляет запасные части, узлы и комплектующие для промышленных насосов. В таком проекте сайт должен решать сразу две задачи: представлять компанию и помогать специалисту найти нужную деталь среди множества серий, исполнений и каталожных обозначений. Мы разработали для этого самостоятельный сайт-каталог на WordPress и WooCommerce с полностью уникальной темой оформления.
Работу начали со структуры и сценария обращения. Посетитель может прийти с названием семейства насосов, точной моделью, номером чертежа или общим перечнем деталей для ремонта. Поэтому путь по сайту выстроен от типа оборудования к серии, затем к карточке и спецификации. В описаниях сохранена роль компании как поставщика: сайт рассказывает о подборе и поставке комплектующих, а условия заказа уточняются по конкретному запросу.
Уникальный дизайн и цельный образ компании
Для «Торг-Снаб» мы создали индивидуальный визуальный стиль с тёмными графитовыми поверхностями, тёплым светлым фоном и оранжевыми акцентами. Крупная типографика, свободные отступы и выразительные изображения поддерживают промышленную тематику и помогают быстро различать заголовки, технические сведения и действия.
Разработали векторный логотип с шестерёнкой и рабочим колесом, согласовали пропорции названия и подписи, подобрали шрифт Manrope. Шапку, навигацию, карточки каталога, страницы комплектующих, контактные блоки и подвал собрали в единую систему. При прокрутке шапка становится компактнее, сохраняя доступ к меню и контактам.
Отдельно подготовили 32 оригинальные визуализации насосных деталей и узлов. Они оформлены в общей стилистике и подбираются по типу комплектующих. Изображения помогают ориентироваться в каталоге, а в карточках прямо поясняется: это визуализация типа деталей, конкретное исполнение согласовывается по спецификации.
3D-сборка насоса на первом экране
Главным визуальным акцентом стала пространственная анимация центробежного насоса. Корпус, рабочее колесо, крышка, вал и подшипниковый узел последовательно собираются в единый агрегат. После сборки насос поворачивается на 360 градусов, позволяя рассмотреть форму и взаимное расположение элементов, затем цикл повторяется.
Это интерактивная трёхмерная сцена с материалами металла, литой поверхностью, освещением и тенями. Она раскрывает тематику компании уже при первом знакомстве с сайтом и делает главный экран запоминающимся. Композицию и движение настроили так, чтобы детали оставались в кадре во время всего цикла сборки.
Анимацию можно поставить на паузу. Когда блок уходит за пределы экрана или вкладка становится неактивной, отрисовка останавливается. Для устройств без поддержки WebGL, режима экономии трафика и сценариев с отключённой анимацией предусмотрена статичная иллюстрация. Так выразительный первый экран сочетается с вниманием к ресурсам устройства и предпочтениям посетителя.
625 страниц каталога и более пяти тысяч строк спецификаций
К завершению этапа разработки в каталоге опубликованы 625 карточек и справочных страниц. Ассортимент организован в 10 основных разделов и 38 групп. В новых и дополненных технических таблицах размещено 5 267 строк спецификаций: наименования деталей, каталожные обозначения и номера чертежей, а там, где исходные данные позволяли это подтвердить, — материалы и справочная масса.
Эти показатели отражают разные уровни наполнения: 625 — число страниц каталога, а 5 267 — число строк в новых и расширенных спецификациях. Несколько исполнений или деталей могут быть представлены на одной странице. Такой подход сохраняет понятную структуру и даёт специалисту возможность сравнить позиции в пределах одной модели.
Каталог охватывает консольные и циркуляционные, многоступенчатые и энергетические, химические, нефтяные, объёмные, дренажные, грунтовые и песковые насосы, а также импортные серии. Отдельно организованы уплотнения, муфты и детали компрессоров. Среди семейств — К, 1К, 2К, КМ, ЦНС, ЦНСг, НК, НКВ и другие обозначения, с которыми работают специалисты по снабжению.
Во время заключительного расширения добавили 224 страницы и дополнили 136 существующих. Повторяющиеся материалы объединили, а различия между исполнениями сохранили в таблицах и пояснениях. Общий индекс серий помогает перейти к нужной группе, даже если она расположена глубоко в структуре.
Перевод технических материалов в удобный веб-каталог
Большая часть работы с содержимым проходила до публикации. Мы разобрали две таблицы XLS/XLSX и 129 сканированных страниц из четырёх PDF, сопоставили обозначения и дополнили материалы доступными техническими перечнями. Разрозненные записи превратились в структурированные карточки и таблицы, доступные прямо на сайте.
Для страниц подготовили собственные описания с позиции поставщика: какие узлы относятся к семейству, на что обратить внимание при подборе и какие сведения понадобятся для запроса. Там, где это уместно, объяснили роль маркировки, монтажных размеров, материала, направления вращения и конкретного исполнения оборудования.
Данные проверяли на повторы и противоречия. Неоднозначно распознанные обозначения и расходящиеся значения массы оставили на дополнительную сверку. Архивные цены не переносили как актуальные. В результате каталог даёт полезную основу для обращения, а точная применимость, комплектация, стоимость и срок подтверждаются при согласовании спецификации.
Поиск, технические таблицы и понятная навигация
В общем каталоге предусмотрен поиск по модели, марке и наименованию детали, а также переходы по разделам и сериям. Внутри технических таблиц работает отдельный поиск по названию, модели или номеру чертежа. Он помогает быстро выделить нужные строки в длинном перечне без ручного просмотра всей спецификации.
Карточка объединяет изображение, описание, технический перечень, рекомендации по подготовке запроса и переход к подбору. Хлебные крошки показывают положение страницы в каталоге; связанные позиции и ссылки на раздел позволяют продолжить поиск. Рядом с таблицами размещены подсказки о данных, которые стоит приложить к обращению: маркировке, чертеже, количестве, материале и условиях эксплуатации.
На мобильных устройствах широкие таблицы прокручиваются внутри своего блока. Страница при этом сохраняет нормальную ширину, а текст, меню, контакты и кнопки остаются доступными. Отдельно проверили интерфейс на узких экранах, включая ширину 320 и 390 пикселей.
Путь от найденной детали к запросу поставщику
Для промышленного снабжения важна точность исходной информации. Мы связали карточки с формой подготовки запроса: название выбранной позиции передаётся в обращение, посетитель добавляет контактные данные и комментарий. Затем открывается его почтовая программа с подготовленным письмом; чертежи и фотографии можно приложить перед отправкой.
На сайте доступны оба телефона компании и электронная почта. В форме предусмотрено отдельное согласие на обработку персональных данных. Разместили политику обработки данных, текст согласия и условия поставки, а также понятное описание этапов работы: запрос, уточнение и подбор, согласование, поставка.
Контакты и реквизиты собрали на отдельной странице с Яндекс Картой. Сохранили реальные данные организации и банковские реквизиты, привели в порядок подвал и переходы к контактам. Старый адрес контактной страницы перенаправляется на действующий, чтобы существующие ссылки продолжали работать.
Подготовка к SEO-продвижению
В рамках этого проекта выполнена SEO-подготовка сайта. Само поисковое продвижение на данном этапе не ведётся. Мы сформировали техническую и содержательную основу, на которой можно строить дальнейшую работу с поисковым спросом.
- Подготовили отдельные заголовки title и описания description для рабочих страниц.
- Добавили содержательные SEO-тексты для 48 категорий — основных разделов и вложенных групп.
- Настроили канонические адреса страниц и проверили дубли метатегов.
- Согласовали структурированные данные Rank Math с адресами сайта и метаданными страниц.
- Привели в порядок XML-карты сайта и включение категорий в sitemap.
- Закрыли от индексации результаты поиска и пустые категории, исключили лишние служебные страницы.
- Проверили перенаправления, навигационные связи и оформление ссылок при публикации в социальных сетях.
Финальный публичный аудит охватил 679 страниц. В рамках проверенных критериев не выявлены ошибки и дубли title/description. Это результат проверки качества запуска; позиции в поиске, рост трафика и обращения предстоит оценивать отдельно после начала продвижения и накопления данных.
Техническая основа и дальнейшее развитие
Индивидуальную тему сделали самостоятельной. После проверки зависимостей из рабочей конфигурации убрали прежние конструкторы страниц, слайдер и другие неиспользуемые плагины. Шрифты и библиотека трёхмерной сцены размещены на собственном сервере, изображения интерфейса подготовлены в WebP, а версия адресов CSS и JavaScript обновляется при изменениях файлов.
Перед заменой оформления и массовыми изменениями содержимого сохранили резервные копии. После публикации проверили основные типы страниц, поиск, таблицы, навигацию, контакты, анимацию и мобильное отображение. Товарные карточки и категории доступны для дальнейшего редактирования через WordPress.
В результате «Торг-Снаб» получил цельный сайт для промышленного снабжения: с собственным дизайном, выразительной 3D-сценой и подробным техническим каталогом. Он помогает посетителю перейти от знакомства с компанией к конкретной модели, обозначению детали и подготовке запроса. Следующие этапы могут включать SEO-продвижение, расширение технических данных и развитие обработки заявок.