Сайт-каталог Vympel GmbH
Дизайн-концепция, 3D-визуализация оборудования, интеграция онлайн-симулятора и уникальная разработка сайта-каталога Vympel
Группа компаний Вымпел уже четвертое десятилетие разрабатывает и производит инновационные измерительные комплексы и системы автоматизации для газовой промышленности.
Special Kudos. Best Innovation. UI design. UX design.
Honorable Mention
Ключевая идея
Высокоточное оборудование производства Вымпел не имеет аналогов среди других лабораторий. Более того, использование новейших технологий и современных материалов обеспечивает безопасность эксплуатации самых разнообразных газоанализирующих приборов.
Новый сайт-каталог должен в первую очередь отражать эту отличительную особенность компании, оставаясь простым и понятным для пользователя. Это подтолкнуло нас к поиску кардинально новых решений, которые позволили представить информацию о продукции бренда в интерактивном виде.
Вместе с тем, для составления структуры сайта и формировании общей дизайн-концепции нам потребовался глубокий этап аналитики. В большей степени он базировался на исследовании европейского рынка, ведь именно он является целевой аудиторией сайта.
Интерактивный симулятор
Онлайн-симулятор Hygrovision Mini состоит из двух областей. Правая область представлена панелью управления. Здесь пользователь может с помощью специального ползунка изменять температуру зеркала для конденсата в большую или меньшую стороны, а также выбрать один из двух режимов освещения. Левая область содержит видео, которое отражает эти изменения. Симулятор помогает наглядно представить принцип работы анализатора, что делает его понятным для пользователя любого уровня подготовки.
Дизайн
В основе дизайн-концепции лежит детальная визуализации оборудования, которое производит компания. Мы разработали 3D-модели каждого из анализаторов и сделали вовлекающую анимацию на главной странице. Сайт учитывает все варианты пользовательского пути — заказать продукцию Вымпел можно как на главной странице, так и в соответствующем разделе. Более того, представлена возможность детального сравнения характеристик оборудования.
Мы также реализовали систему обучающих видеоуроков и создали интерактивный симулятор модели Hygrovision Mini. С их помощью пользователь может поближе познакомиться с продукцией компании и узнать, как настраивать и использовать анализаторы Вымпел.
Горизонтальный скролл
Главная страница знакомит пользователя с основной продукцией компании. С помощью горизонтального скролла можно последовательно узнать о разных типах анализаторов, а также перейти на страницу товара для получения более подробной информации.
Функционал
Основным отличием этого проекта от всех прочих стало необычное решение по части внутреннего функционала — использовать 1C-Битрикс со стеком на React.js. От Битрикс остались только ядро и админка, предоставляющие удобные способы хранения информации и настройки логики сайта.
Однако все, что касается фронт части, было изменено. Мы полностью отказались от встроенной системы шаблонов и компонентов — каждая страница представлена уникальными блоками.
Теперь фронт реализован посредством REST API. Для того чтобы информация приходила на фронт в удобном для отображения формате, мы реализовали систему моделей и контроллеров, как и сами API, к которым фронт обращается для получения или передачи информации.
Итог
В визуальной составляющей на первый план мы выдвинули главную особенность Вымпел — их уникальное оборудование. Совокупность интерактивных элементов и необычный подход к разработке позволили сделать сайт информативным и визуально привлекательным.
