Как мы на сайте метеостанцию «собирали»: 3D-моделирование по реальным техническим чертежам

Digital-агентство «Атвинта» рассказывает, как через дизайн интересно презентовать каталог оборудования на сайте.

Стильно представить каталог оборудования — та еще задача. Особенно, если это оборудование промышленное, или… метеорологическое. На видео выше — сайт, который мы сделали для нашего клиента «Раймет» — компании, которая занимается оборудованием для измерения погодных условий.

А так сайт заказчика выглядел раньше:

В этой статье — о создании нового сайта «Раймета» и о том, как стильно презентовать сложный продукт, не забыв про задачи бизнеса и потребности пользователя.

Компания «Раймет» — лидер в своей нише. У нее заказывают оборудование «Газпром авиа», «Российские космические системы», госкорпорация «Росатом», университеты, проводящие исследования в области метеорологии. Также «Раймет» оснащал Ленинградскую АЭС-2 и горнолыжный комплекс «Альпика» на Розе Хутор в Сочи.

Большинство клиентов — это наработанная база государственных заказчиков. На них приходится около 70% сделок, а оставшиеся 30% — на коммерческие компании. Также «Раймет» ежегодно посещает выставки, где нужно выгодно представлять компанию потенциальным клиентам.

Старый сайт давно нуждался в модернизации. Отметим основные проблемы:

Совсем не то, что можно гордо анонсировать на выставках и форумах, так что старый сайт отправился в утиль, а мы взялись за разработку.

Часто поставщики оборудования на главной сразу размещают каталог. Обычно клиент уже знает, какое оборудование ему нужно, а на сайт приходит присмотреться к ассортименту. Быстро отдать пользователю каталог здесь вполне уместное решение.

Только одна проблема — производители дают поставщикам некрасивые фото, да еще и не в лучшем качестве.

Делать это лицом компании — не самый элегантный выход. Мы же оставили быстрый доступ к каталогу и поместили на главную эффектную анимацию сборки оборудования и ссылки на разделы с товаром.

Так закрываются две задачи:

Также в каталог можно перейти по ссылке в верхней части сайта или найти определенное оборудование через поиск.

Большинство пользователей сайта — это служащие госсектора, а в их кабинетах часто стоят старые компьютеры с медленным интернетом. Так что сделали ставку на простоту сайта и его быструю загрузку.

С помощью метеорологического оборудования специалисты собирают данные о погоде, которые используются в разных сферах от военной промышленности до сельского хозяйства.

Например, так выглядит метеорологическая станция:

Она определяет атмосферное давление, скорость и направление ветра, количество осадков, относительную влажность. И вот про это сложное технологическое нечто нам предстояло стильно и интересно рассказать в дизайне.

Казалось бы, для творчества и креатива места тут немного, но мы использовали свежий в веб-дизайне прием — построили сайт на основе чертежных линий.

Четкие графичные линии — идейная основа и отсылка к направлению деятельности «Раймета». Такой прием актуален и для производственников, и для промышленников, и других поставщиков оборудования.

Основной акцент сделан на анимированные 3D-модели метеорологического оборудования. Этим сайт визуально удивляет и вовлекает пользователя — хочется пролистать все слайды и посмотреть каждую из 11 сборок.

Оборудование моделировали с нуля. Для этого запросили у клиента фотографии самых ходовых позиций по каждой категории с разных ракурсов.

Однако для референса этого было недостаточно. Дело в том, что мы планировали сделать глубокую детализацию, чтобы каждый винтик закручивался на свою гайку, и даже наклейки от производителя находились на правильном месте.

Из десятков мелких проработанных деталей собирается сложный аппарат — должно смотреться впечатляюще. Такой подход дает натуральный эффект, чего не вышло бы с упрощенными моделями.

Чтобы добиться такой детализации, мы нашли реальные чертежи метеорологического оборудования в интернете. Они вместе с фотографиями стали основой для моделирования.

Модели создавали в Blender. В программу загружали фотографии с чертежами и по ним вырисовывали каждую деталь, начиная с крупных и заканчивая самыми мелкими. Степень детализации требовалась высокая, поэтому, например, на болтах отобразили даже резьбу.

Когда все детали были готовы, проводилась финальная сборка модели и проверка на вывернутые нормали, артефакты или детали, лежащих в разных плоскостях.

На видео планировали показать сборку оборудования, так что анимация состояла из поэтапного объединения разрозненных деталей в один объект.

Исключение — метеорологический зонд с седьмого слайда. В его схеме было совсем немного деталей, поэтому мы придумали, что он будет надуваться и подниматься в воздух. Получился не менее интересный слайд с оборудованием в действии.

Так как анимацию нужно было сделать в сжатые сроки, мы выбирали софт, который бы экономил время на рендеринге. Остановились на движке EEVEE, потому что его алгоритмы справляются с этим быстрее других программ. Однако у движка есть и недостатки, которые мы обошли отдельными решениями.

Например, EEVEE не так хорош в отработке теней. Чтобы решить эту проблему, мы отдельно рендерили предметы и тени. На следующем этапе, когда из двух видео собирали одно, слой тени регулировался по нужным параметрам.

Еще одно слабое место EEVEE — отражения, а у оборудования на десятом слайде как раз есть матовое стекло, так что куски с отражениями мы отрендерили на другом движке.

После работы со слоями тени и приборы сводились в одно видео с прозрачным фоном, а дальше — верстка и встреча с пользователями на запущенном сайте.

Нужно было облегчить анимацию так, чтобы главная и каталог быстро загружались и работали даже на слабом компьютере. Для этого слайды оформили как микс из изображений и коротких легких видео.

Визуал визуалом, а о коммерческих потребностях тоже нужно позаботиться. Главное на сайте поставщика — удобный каталог и инструменты оформления заказа.

В каталоге мы реализовали удобную навигацию, которая учитывает возможные сценарии пользователя. Каталог делится на 11 разделов по основным видам продукции. Где это требовалось, добавили разбивку на подгруппы по критериям. Например, в разделе датчиков:

Задача метеорологического оборудования — измерять. А значит, ему понадобится описание, технические данные и прилагающаяся документация. По этим категориям мы и структурировали информацию о приборах в карточке.

Заказы в компании оформляют через менеджера, поэтому корзина на этом сайте не нужна. Вместо этого реализовали кнопку «Отправить запрос» в карточках товара. Она перекидывает на форму заявки, с которой далее работают менеджеры. Также на оформление заявки можно перейти сразу с главной страницы, нажав на ссылку в верхней строке.

Стильные решения в дизайне сайтов доступны любому бизнесу, однако в погоне за впечатляющим визуалом не стоит забывать о функциональности и задачах ресурса.

Мы реализовали и эффектную главную страницу, и хорошее юзабилити, и удобный дизайн. При этом сайт учитывает особенности материальной базы пользователей, и даже «тяжелые» элементы вроде анимации не мешают его быстрой загрузке.