Кейс · B2B · Станкостроение · 2026
Редизайн сайта завода зубообрабатывающих станков
Редизайн сайта КСМ СПб — петербургского завода, который проектирует, производит и модернизирует зубообрабатывающие станки с ЧПУ. Главная, каталог, карточка станка, мега-меню и мобильная версия.
О проекте ↗
КСМ СПб
ООО «КСМ СПб» с 2004 года проектирует, производит и модернизирует зубообрабатывающие станки с ЧПУ для конических и цилиндрических колёс. Завод вырос из станкоремонтной компании Кировского завода, с 2006 года — партнёр Siemens в станкостроении.
Покупатель такого станка — главный инженер или технолог машиностроительного предприятия. Ему важно быстро понять, подходит ли модель под его деталь: диаметр, модуль, угол наклона, — и отправить чертёж на подбор.
- Клиент
- ООО «КСМ СПб»
- Отрасль
- Станкостроение, зубообработка
- Сайт
- k-sm.ru ↗
- Страницы
- Главная, мега-меню, каталог, карточка станка, мобильная версия
- Что делали
- UX-аудит, прототипы, UI-дизайн, UI-кит, адаптив
- Год
- 2026
моделей станков в каталоге с фильтрами
группы: конические, цилиндрические, специальные
параметров в карточке для инженера
версии — desktop 1920 и mobile 375
Задача и дизайн-решение
Задача
Старый сайт выглядел как визитка: модели станков в длинных списках, характеристики — в PDF, а путь к заявке терялся. Сильные стороны — своё производство, партнёрство с Siemens, опыт модернизации Liebherr и Schiess — почти не были видны.
Что мы сделали
Перестроили сайт вокруг вопроса инженера «подойдёт ли станок под мою деталь». Каталог по типу колёс с фильтрами по диаметру, модулю и ЧПУ; карточка станка с ключевыми параметрами на первом экране, таблицей модельного ряда и запросом КП с чертежом. Добавили мега-меню, блок модернизации, производство, историю и путь «от заявки до первой детали».
Результат
В макетах предусмотрены подбор по параметрам, сравнение моделей и запрос КП с чертежом. Характеристики вынесены в каталог и на первый экран карточки; для мобильной версии сохранены те же сценарии.
Состав работ
- UX-аудит
- Прототипирование
- UI-дизайн
- UI-кит
- Адаптив
Страницы и сценарии
Строгая инженерная сетка, IBM Plex Sans и Plex Mono для параметров, графит и фирменный оранжевый КСМ — только для действий.
01 · Решение
Главная: оборудование и возможности завода
Первый экран с УТП и фактами завода, каталог по типу колёс, популярные модели, флагман КСМ-5880, производство, модернизация и путь «от заявки до первой детали».
k-sm.ru/
02 · Решение
Мега-меню с группами станков и моделями
Три группы оборудования с моделями и ключевыми параметрами, рядом — флагман и быстрый запрос КП. Инженер видит линейку, не открывая каталог.
k-sm.ru/menu
03 · Решение
Каталог: подбор по техническим параметрам
Фильтры по типу колёс и станка, диаметру изделия, модулю и ЧПУ. В карточке модели — три ключевых параметра. Блок «Не уверены в выборе?» ведёт к отправке чертежа.
k-sm.ru/catalog
04 · Решение
Карточка станка: характеристики и запрос КП
Параметры КСМ-LC502 на первом экране, липкие вкладки, таблица модельного ряда, комплектация, документы и запрос КП с чертежом и программой выпуска.
k-sm.ru/machine
05 · Решение
Компоненты интерфейса
Цвета, типографика, кнопки, карточки моделей, таблицы характеристик и формы — компоненты, из которых собираются новые страницы каталога.
k-sm.ru/ui-kit
06 · Адаптив
Каталог и запрос КП на мобильном
Мобильные меню, фильтры и карточка станка сохраняют основные сценарии. Закреплённая кнопка «Получить КП» доступна при прокрутке.
Что предусмотрено в редизайне
Подбор станка
фильтры по диаметру, модулю и ЧПУ вместо длинных списков моделей
Характеристики
ключевые характеристики — на первом экране карточки и в каталоге
Запрос с чертежом
форма с вложением чертежа на главной, в каталоге и в карточке
Производство и опыт
производство, Siemens и модернизация Liebherr и Schiess — на главной
Начнём с вашей задачи