Познакомиться
с заводом
Производство, история и визуальный образ компании.
Корпоративный сайт / Каталог техники
Сайт завода
«Тонар».
Масштаб в деталях.
Корпоративный сайт с каталогом техники, выразительным промышленным дизайном и фирменной анимацией при прокрутке.
Смотреть анимацию- Клиент
- Машиностроительный завод «Тонар»
- Направление
- Производство транспортной техники
- Продукт
- Корпоративный сайт и каталог
- Проект
- tonar.info
О проекте
Промышленный масштаб. Понятный путь к технике.
«Тонар» — машиностроительный завод и производитель транспортной техники. Для такого проекта важно одновременно показать масштаб предприятия и помочь посетителю разобраться в большом модельном ряде. В центре интерфейса — сама техника: её фотографии, назначение и параметры.
Мы показываем проект через три взаимосвязанных сценария: знакомство с брендом, выбор подходящего направления и обращение за консультацией. Разделы о заводе, сервисах и запасных частях поддерживают эти сценарии и связывают коммерческую часть сайта с информацией о производстве.
Задача проекта
Представить сложный ассортимент так, чтобы посетитель мог начать с отрасли или направления техники и перейти к конкретной модели. При этом сайт должен передавать характер крупного промышленного предприятия и не превращаться в перегруженный справочник.
Важные точки пути — характеристики продукции, наличие, контакты специалистов, дилерские и сервисные разделы. Их нужно связать общей навигацией и понятными переходами.
Логика интерфейса
От интереса
к выбору техники.
Маршрут строится вокруг задач посетителя: понять предложение, изучить параметры и перейти к предметному обсуждению.
Познакомиться
Выбрать
направление
Категории и назначения техники вместо длинного общего списка.
Изучить
модель
Фотографии, параметры и техническая информация в одном месте.
Обратиться
к специалисту
Наличие, консультация и переход к сервисному направлению.
Фирменное движение
Символ бренда.
Целая история внутри.
Медведь становится маской для видео. При прокрутке силуэт увеличивается и раскрывает ролик на весь экран — тот же приём, что и в интерактивной версии проекта.
Тонар в движенииЛистайте вниз
Решение
Сложный продукт.
Ясная структура.
Основу структуры составляют направления продукции, каталог и страницы моделей. Крупные фотографии работают как быстрый ориентир, а параметры помогают перейти от общего интереса к предметному выбору техники.
Информацию о заводе, сервисах и запасных частях раскрывают самостоятельные разделы. Контактные действия расположены рядом с продуктовым содержанием: посетителю не нужно начинать поиск заново после изучения модели.
Дизайн проекта
Каждый экран —
часть общей системы.
Пять экранов интерактивной версии. Изображения показаны полностью; нажмите на любое, чтобы рассмотреть детали.
Первый экран: техника в главной роли
Крупная фотография полуприцепа сразу задаёт масштаб проекта. Контрастный заголовок выделяет направление продукции, а полупрозрачные карточки дают дополнительные точки входа. Главное меню связывает каталог, сервисы, запасные части и информацию о заводе.
Каталог: от направления к конкретной модели
Каталог разделяет ассортимент на направления и категории. Панель параметров располагается рядом с карточками техники: посетитель видит, какие характеристики учитывать при выборе. Изображение, название и основные данные собраны в одном блоке, а действия «Подробнее» и «Узнать наличие» обозначают следующий шаг.
Карточка модели: всё для предметного разговора
Страница модели объединяет фотографии, технические параметры и подробную информацию о технике. Секции помогают последовательно изучить продукт и перейти к обращению за наличием или консультацией. Такой формат поддерживает B2B-сценарий: сначала разобраться в характеристиках, затем обсудить подходящую комплектацию со специалистом.
Сервисы: поддержка после выбора техники
Сервисное направление получает самостоятельную страницу. Информация об обслуживании, точках обращения и дополнительных услугах организована отдельными блоками. Это позволяет представить сайт как единый инструмент для покупателя и владельца техники: от знакомства с моделью до поиска помощи по эксплуатации.
О заводе: производство становится частью истории
Страница завода дополняет каталог фотографиями производства и материалами о компании. Большие визуальные блоки помогают раскрыть промышленный характер бренда. Посетитель знакомится не только с ассортиментом, но и с предприятием, которое стоит за продукцией.
Визуальная система
Сила в форме.
Точность в деталях.
Тёмно-синий связывает сайт с промышленной средой. Светлый фон облегчает работу с данными, а яркий акцент выделяет ключевые действия.
Фотографии техники.
Воздух между блоками.
Уверенная типографика.
Промышленный синий#0B2440
Светлая поверхность#EEF1F4
Акцент действия#51F45F
Как решения работают вместе
В презентации проекта раскрываем ключевые части работы: структуру пользовательских маршрутов, визуальную систему страниц, компоновку каталога и технической информации, а также поведение интерфейса при прокрутке.
Крупные изображения задают масштаб, светлые поверхности отделяют данные от фоновых сцен, а синий и яркий акцент связывают страницы в единую систему. Фирменный медведь становится частью движения: его силуэт раскрывает видео и переводит историю бренда из статичного изображения в полноэкранную сцену.
Итог проекта
Бренд, техника
и сервис —
в одной системе.
Проект объединяет представление завода и продуктовый каталог в одном визуальном языке. Посетитель может познакомиться с производством, изучить направления техники, перейти к модели и найти подходящий способ обращения.
Каталог, технические страницы и сервисная информация поддерживают разные этапы выбора. Фирменная анимация добавляет эмоциональный акцент, а крупные экраны показывают, как дизайн работает вместе со структурой и содержанием.
Следующий проект — ваш
Покажем масштаб
вашего бизнеса.
Обсудим ассортимент, задачи покупателей и нужные функции. Предложим структуру и визуальный подход для вашего проекта.
+7 (993) 342-04-03