андрей степановЗаказать сайтЗаказать
← к кейсам
корпоративныймногостраничный сайт

tpz.ru
сайт производителя оборудования для энергетики

1 место за мобильную версию и 3 место за каталог продукции. «Электросайт года — 2025»

работа в найме, с 2024 года · визуальный язык бренда сложился до меня — развиваю сайт внутри него

Открыть сайтбоевой сайт, обновляется
Первый экран tpz.ru: тёмно-синий герой с 3D-рендером чипа TOPAZ, бейджи «Россети — аттестовано» и «Минпромторг России — в реестре», кнопки «Наши продукты» и «О компании»

01задача

«ПиЭлСи Технолоджи» — российский производитель оборудования для энергетики под брендом TOPAZ: контроллеры, коммутаторы, устройства телемеханики — больше 200 продуктовых линеек. Среди заказчиков — Россети, ФСК ЕЭС, ММК. Сайт здесь — не витрина, а рабочий инструмент: основной посетитель — инженер-проектировщик или закупщик, который пришёл за конкретной моделью, её характеристиками и кодом для заказа.

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

02роль и рамки

команда

задачи ставит отдел маркетинга · продукт объясняют инженеры

моя роль

дизайн и вёрстка сайта

сроки

с 2024 года · новые разделы каждый квартал

формат

поток задач, а не проект с началом и концом

Визуальный язык бренда сложился до меня — я работаю внутри него и развиваю сайт разделами:

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

03как устроена работа

На примере одной задачи — новой карты заказа:

  1. Постановка

    Задача приходит от отдела маркетинга: переработать интерактивную карту заказа. Выход: рамка задачи и сроки.

  2. Разбор с инженерами

    Как собирается заказная кодировка и как ею пользуются на деле: инженер собирает спецификацию из нескольких позиций, коды уезжают в документ. Выход: сценарий, под который проектируем.

  3. Макет и согласование

    Макет смотрят обе стороны: маркетинг — подачу, инженеры — техническую точность. Выход: утверждённый макет.

  4. Вёрстка и передача

    Собираю страницы по принципу code-first. Новая карта заказа согласовывается с коллегами кликабельной сборкой, не картинками — внедрять можно незамедлительно без расшифровки макетов.Новая карта заказа в кликабельной сборке: выбрана модель TOPAZ TM PM7-W — фото устройства и схематичный чертёж в блоке «Внешний вид», код модификации с кнопкой «Скопировать», кнопка «Добавить в корзину»

04ключевые решения

14 плиток плоским списком

Каталог продукции

Было: 14 плиток плоским списком. Внутри — карточки без ориентиров: чтобы понять, подходит ли устройство, приходилось открывать каждую.

Стало: 18 разделов, слева дерево категорий, вложенность до четырёх уровней: раздел → подраздел → семейство → исполнение. У каждой позиции прямо в списке 2–3 ключевых параметра — температурный диапазон, число портов, поддерживаемые стандарты. Снятые с производства модели не спрятаны, а помечены — с указанием актуального аналога.

Почему так: инженер отсеивает варианты, не открывая карточек: сравнил параметры в списке — и открыл только то, что проходит. Чем меньше кликов до ответа «подходит / не подходит», тем быстрее модель попадает в проект.

Результат: 3 место «Лучший каталог продукции на сайте» — «Электросайт года — 2025».

март 2024

Каталог продукции в марте 2024: плоская сетка из 14 одинаковых плиток без параметров

сейчас

Раздел «Релейная защита и автоматика» сейчас: дерево категорий слева, хлебные крошки, у каждой позиции в списке ключевые параметры — наборы защит, МЭК 61850, ГОСТ

инженерная утилита

Интерактивная карта заказа

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

Было: дерево каталога, развёрнутое сразу на ~120 строк, стандартные системные списки, вместо изображения устройства — надпись «Нет отображения». Готовый код нельзя было даже скопировать кнопкой — только выделить мышью и перенести вручную.

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

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

Новая версия собрана и передана на тестирование коллегам. На боевом сайте пока прежний вид, но в кейсе уже редизайн.

было

Старая карта заказа: дерево каталога развёрнуто на всю высоту, системные выпадающие списки, «Нет отображения» вместо изображения, код заказа — строкой в таблице

стало

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

четыре уровня каталога на 390 px

Мобильная версия

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

Сделано и проверено: на ширине 390 px страница не расползается и ничего не обрезается — горизонтального переполнения нет вообще. Элементов мельче удобного размера для пальца — семь на всю главную. Это не ощущение, а замер: цифры сняты автоматическим прогоном страницы в браузере. Весь каталог с его глубиной остаётся доступным с телефона.

Результат: 1 место «Лучшая мобильная версия сайта» — «Электросайт года — 2025».

Раздел каталога «Релейная защита и автоматика» на экране 390 px: карточки позиций с фото и ключевыми параметрами — наборы защит, МЭК 61850, сертификаты
Карточка «Управляемые коммутаторы POE/POE+» на экране 390 px: галерея, описание, кнопка «Оставить заявку» и таблица характеристик

05что ещё сделано за два года

Сайт постоянно растёт: появляются новые разделы, и каждый я веду от постановки задачи до готовой вёрстки.

  • Раздел «Контрактное производство»: монтаж печатных плат, форма заявки с загрузкой файла

    Контрактное производство — коммерческий раздел с формой расчёта

  • Раздел «Технические консультации»: программы обучения по оборудованию TOPAZ

    Технические консультации — 10 курсов, 864 учебных часа

  • Публичный брендбук TOPAZ: логотип, шрифт, паттерн и шаблоны документов

    Брендбук — фирменный стиль, доступный каждому подрядчику

  • Страница «Решения»: комплексные системы с фильтром по отраслям

    Решения — 11 комплексных систем с фильтром по отраслям

  • Страница контактов: отделы, карта и форма

    Контакты — разделение по отделам, карта, форма

  • Техподдержка и личный кабинет: единое окно заявок, тарифы, FAQ

    Личный кабинет и техподдержка — заявки, тарифы, FAQ

  • Страница новостей: 178 материалов с фильтром по годам 2017–2026

    Медиа: новости — 178 материалов, фильтр по десяти годам

  • Страница видео: ролики по годам с бейджами источника

    Медиа: видео — ролики по годам, бейджи источников

  • Страница рекламных модулей: полосы А4 и выставочные баннеры с фильтром по ориентации

    Медиа: рекламные модули — витрина печатной графики

06результат

«Электросайт года — 2025», XIX международный конкурс отраслевого портала «Рынок Электротехники»: 1 место — «Лучшая мобильная версия сайта», 3 место — «Лучший каталог продукции».Новость об итогах — на tpz.ru.

Баннер из новости tpz.ru: три диплома конкурса «Электросайт года — 2025» и кубок с надписью TPZ.RU
Открыть сайтбоевой сайт, обновляется

Что ещё в работе

  • единый коммерческий шаг — «Запросить расчёт» на главной и в каталоге, формы-брифы вместо «обратной связи»;
  • вернуть в меню «Выполненные проекты»: страница с картой внедрений по восьми федеральным округам существует, но до неё не добраться;
  • вес главной — 25 МБ на десктопе: современные форматы картинок и ленивая загрузка ускорят сайт в разы;
  • починить запросы, которые отдают 404, — из-за них не работают шрифты и анимации по скроллу.