ИНЖЕНЕРНЫЕ СИСТЕМЫ
Теплоград-Каменск
Большой каталог. Понятный путь к решению.
Сайт компании, которая поставляет оборудование и выполняет инженерные работы. Каталог, подробные товары и страницы услуг объединены в одном интерфейсе.
01 / КОНТЕКСТ
Оборудование и инженерные работы — в одной системе
Посетители приходят с разными задачами: найти конкретное оборудование, разобраться в предложении компании или заказать работы для своего объекта. Структура сайта разводит эти сценарии и сохраняет переходы между ними.
Выбрать оборудование
Категория → список товаров → характеристики → корзина.
Найти услугу
Направление → тип объекта → описание работ → обращение.
Познакомиться с компанией
Опыт, выполненные объекты и контактная информация.
02 / КАТАЛОГ
Много позиций. Последовательная система выбора.
Категории, поиск, сортировка и фильтры по производителю, стоимости, наличию и техническим параметрам помогают сузить выбор. Карточки показывают цену, артикул и основные характеристики оборудования до перехода на страницу товара.
Понятная иерархия
Разделы оборудования помогают перейти от широкого ассортимента к нужному типу товара.
Информация до перехода
Цена, наличие и технические параметры вынесены непосредственно в карточки.
03 / ВЫБОР ОБОРУДОВАНИЯ
Вся важная информация — рядом с товаром
Страница товара объединяет изображение, стоимость, наличие и технические характеристики. Описание и документация выделены отдельно, а блок аналогов поддерживает дальнейший выбор. Покупка в один клик и консультация предусмотрены как дополнительные сценарии.
04 / ОФОРМЛЕНИЕ
От выбранного оборудования — к заказу и монтажу
В макете корзины собраны выбранные позиции, количество и итоговая стоимость. Форма уточняет контакты, адрес доставки, способ оплаты и необходимость монтажа — товарный сценарий связан с услугами компании.
05 / УСЛУГИ
Каждому направлению — своё понятное представление
Услуги раскрыты отдельной системой страниц. Общий раздел помогает выбрать направление: водоснабжение, канализацию, отопление, газификацию, проектирование или сервис. Внутренние страницы объясняют предложение применительно к конкретному объекту.
06 / ВНУТРЕННИЕ СТРАНИЦЫ
Разные объекты. Единая логика подачи.
Газификация и водоснабжение представлены отдельно для частных домов и предприятий. Общая структура сохраняет узнаваемость сайта, а заголовки, изображения и содержание раскрывают конкретный вид работ.
07 / СЦЕНАРИЙ ОБРАЩЕНИЯ
Показать услугу — от сути работ до примеров
Внутренняя страница последовательно раскрывает направление: первый экран, преимущества, содержание работ и выполненные объекты. Крупные изображения дают контекст, а обращение за консультацией завершает знакомство с предложением.
08 / КОМПАНИЯ
За оборудованием стоит команда специалистов
Раздел о компании дополняет каталог информацией о самом поставщике. История, фотографии, выполненные работы и контакты помогают посетителю оценить предложение перед обращением.
09 / МОБИЛЬНАЯ ВЕРСИЯ
Каталог и услуги — на экране смартфона
На экране смартфона сохранены основные сценарии: знакомство с компанией, просмотр товаров и выбор услуги. Фильтры открываются отдельной панелью, а категории и направления работ собраны в компактные раскрывающиеся меню.
10 / РЕАЛИЗАЦИЯ
Фронтенд на React
Сайт реализован на React. В интерфейсе связаны каталог оборудования, подробные карточки, корзина и страницы услуг. Повторяющиеся элементы сохраняют единую визуальную логику на разных этапах пользовательского пути.
Товарный сценарий
Каталог → просмотр товара → корзина → данные заказа.
Сервисный сценарий
Направление → страница услуги → знакомство с работами → обращение.
11 / ИТОГ
Сложное предложение — в понятном интерфейсе
Теплоград представлен одновременно как поставщик оборудования и исполнитель инженерных работ. Кейс показывает, как большой ассортимент и разные услуги складываются в последовательную структуру сайта.
