Дизайн для поставщика промышленных станков
Meatec Engineering занимается поставками передовых технических и технологических решений в области механической обработки для предприятий РФ и СНГ. То есть станков и их комплектующих.
Чтобы эффективно продавать оборудование, нужны удобный каталог, коммерческий сайт и маркетинговые материалы (шаблон презентации, письма, графика).
Бизнес-задача
Создать комплексную платформу для взаимодействия с клиентами, предоставления информации и стимулирования продаж.
Раньше сайт выглядел вот так
Дизайн-задачи
Разработать интерфейсы электронного каталога, коммерческого сайта, шаблоны коммерческих презентаций и подписей для писем.
Результат
Заказчик получил полный комплект необходимых для продукта элементов дизайна: каталог продукции, коммерческий сайт, графдизайн для маркетинга.
Всё в одном стиле, консистентно, на общей библиотеке компонентов. Это удобно пользователям, разработке и выгодно бизнесу.
Е-каталог розничной продукции
- Общая структура и навигация
- 6 уровней каталога со специфическими механиками
- Поиск
- Карточка товара с 6 табами характеристик, галереей, сценариями избранного, байблоком, формой обратной связи.
- Сборки: сложный конфигуратор-конструктор
- Корзина
- Оформление заказа
Главная страница каталога (первый уровень)
Корпоративный сайт
- Общая навигация
- Каталог оборудования
- Три уровня каталога
- Страница оборудования
- Таблицы конфигураций
- Заявка на оборудование
- Шаблон контентной страницы (статья)
- Шаблон навигационной страницы (карточки)
- Новости
- Сертификаты (шаблон страницы-галереи)
- Каталоги (шаблон страницы с материалами)
- Контакты
- Форма обратной связи
Корпоративный сайт. Контакты
Личный кабинет
- Заказы
- Поддержка
- Настройки
- Подбор Аналогов
- История просмотров
- Авторизация и регистрация
Личный кабинет. Подбор аналогов
Другое
- Дизайн шаблона подписи для электроных писем (десктопная и мобильная версии)
- Дизайн шаблона коммерческих презентаций
- Графический дизайн главной страницы и ключевых изображений корпоративного сайта и каталога продукции.
Главная страница корпоративного сайта
Каталог
Проработали 6 уровней e-каталога со специфическими механиками поиска для каждого.
Второй уровень каталога
Третий уровень каталога
Четвертый уровень каталога
Пятый уровень каталога
Шестой уровень каталога
Карточка товара
Сложной продукции - сложная карточка товара.
Карточка товара
Шесть табов характеристик, галерея с чертежами, множество состояний бай-блока, в зависимости от доступности товара.
Сборки
Товары заказчика — это конструктор, из которого собирается сложное оборудование.
Чтобы пользователь мог собрать работающую конфигурацию, с учётом совместимости элементов, сделали специальный инструмент «сборка».
Сборка добавлена
Личный кабинет
Чтобы пользователь мог эффективно решать свои задачи, сделали достаточно развёрнутый для e-com личный кабинет. С техподдержкой по заказам и подбором аналогов, на случай недоступности компонентов на внутреннем рынке.
Коммерческий сайт
Каталог - основной инстурмент поиска и заказа оборудования. Но для продаж нужен отдельный коммерческий сайт.
Сделали его в едином стиле с каталогом, на той же библиотеке компонентов, что обеспечивает консистентность для пользователя и удобство для разработки.
Новости
Сертификаты
Чтобы заказчик мог развивать дальше сайт самостоятельно, особый акцент сделали на шаблонах типовых страниц.
Контентная страница
И еще один каталог
Коммерческий сайт включает в себя ещё один каталог: оборудование, которое поставляется под заказ. Например — станки с ЧПУ.
Оборудование для обработки металла
Проработали навигацию и сделали особые карточки товаров под такие задачи.
Оборудование. Третий уровень
Шаблоны презентаций
Чтобы все материалы заказчика были в едином, узнаваемом стиле, сделали также шаблоны презентаций.
Шаблоны писем
Не забыли и про почту: в 2026-м году инструмент особо актуален. Проработали дизайн подписи для десктопной и мобильной версий.
Шаблоны писем
Нюансы процесса
Проект выполняли на дизайн-системе Bootstrap 5.3
Старались минимально кастомизировать компоненты, чтобы не усложнять жизнь разработке. На уровне библиотеки выполнили минимально необходимую кастомизацию в соответствии с пожеланиями заказчика.
Компоненты
Для отдельных сложных элементов разработали отдельно серию локальных компонентов. Работали в тесном контакте с разработкой, чтобы все наши решения были проверенно реализуемыми.
Ускорили согласование концептов при помощи ИИ
Один из самых затратных этапов производства — согласование концептов.
Чтобы прийти к решению, которое дальше надо развивать на проектировании, нужно нарисовать много вариантов, большая часть которых нужна чтобы обсудить — и отказаться.
Тут-то мы и применили ИИ. На этом шаге важно не правильно собрать компоненты и проработать все нюансы состояний, а быстро визуализировать множество вариантов.
Решили эту задачу при помощи Figma Make:
- Мы придумывали концепции и словами и схемами описывали их ИИ.
- Figma Make быстро выдавал визуализации.
- Согласовывали с закачиком, выбирали рабочие варианты.
- На их основе создавали полноценные макеты уже силами человека-дизайнера.
Согласование концептов при помощи ИИ
Нюансы процесса
Некоторые цифры
Предложили
6 вариантов
концептуального решения
Отрисовали
в 12 стилях
главную страницу
Спроектировали
25 страниц
в различных состояниях
Вам нужен интерфейс?
Заказать дизайн
Напишите нам на we@sobakapav.ru
Что мы можем сделать?
UX-дизайн под ключ, редизайн интерфейса, продуктовые исследования и многое другое.
UX/UI-дизайн под ключ
Когда нужна эта услуга
Интерфейс устарел или крайне неудобен. Либо нуждается в переделке, потому что поменялись бизнес-процессы, рынок или целевая аудитория. Либо вы создаете новый продукт и ему нужен новый интерфейс.
Что вы получите
Вы получите готовые к разработке макеты интерфейса. В них будет полностью отражен путь пользователя по каждому сценарию взаимодействия с системой. Результат будет выгоден для бизнеса и бережен к ресурсам разработки.
Отзыв заказчика
Мы запускали достаточно сложный проект - разработку UX/UI, графического дизайна и общей визуальной логики для электронного каталога режущего инструмента, а также статичного сайта с описанием направлений деятельности компании.
Для нас это была не просто дизайнерская задача. Нужно было перевести довольно технический, инженерный продукт в понятный и современный пользовательский интерфейс, при этом сохранить профессиональную глубину и корректность подачи информации.
Что особенно отметил в работе команды:
- быстрое погружение в специфику металлообработки и инструментального бизнеса;
- умение задавать правильные вопросы, а не просто выполнять ТЗ;
- структурный подход к UX -сначала логика и сценарии использования, потом визуал;
- аккуратная работа с деталями, типографикой и системой элементов каталога;
- спокойная и конструктивная коммуникация на протяжении всего проекта.
Отдельно ценю, что команда не пыталась делать «дизайн ради дизайна». Было видно стремление сделать рабочий инструмент - понятный клиентам, удобный в дальнейшем развитии и масштабировании.
В результате мы получили основу цифровой экосистемы, которую можно последовательно развивать: каталог, сайт и дальнейшие цифровые продукты уже строятся на единой логике и визуальном языке. Спасибо команде за профессиональный подход и вовлеченность в проект.
Рекомендую как партнёров для задач, где важна не только графика, но и понимание продукта, бизнеса и пользователей.
Слово директора
Нам со своей стороны тоже было очень приятно работать с вами. Мы любим решать интересные и не стандартные задачи (6 уровней каталога — это нечто!)
Нам нравится, когда заказчик очень заинтересован в том что делает и вдумывается в мельчайшие детали проекта. Именно такой подход помогает делать классные продукты для пользователей и дает нам возможность писать отличные кейсы :)