В кейсе рассказываем про разработку проекта для гиганта химической отрасли — МК «Магна» — и доказываем, что любые, даже самые сложные и нагруженные 3D-шки могут влегкую жить в промоблоках
МК «Магна»
Сибирикс

МК «Магна»

Scrum и Agile во всей красе: сайт для поставщика химического сырья, который мы создавали поэтапно и гибко

МК «Магна»

Scrum и Agile во всей красе: сайт для поставщика химического сырья, который мы создавали поэтапно и гибко
В детективных историях часто фигурируют химические соединения: то цианистый калий кому-нибудь насыпят в стакан, то хлороформом лишат сознания, то фосфором намажут для устрашения. Но химия нужна не только для эффектных поворотов сюжета, но и для самых разных производств. Когда все необходимые реагенты можно приобрести у одного поставщика — это настоящий химический «бестселлер». И у него есть имя — МК «Магна».
  • МК «Магна» покупает у поставщиков и реализует напрямую клиентам фасованное химическое сырье и реактивы. Например, серную или соляную кислоты, аммиачную воду или гидрохлорид натрия (тот самый, что входит в состав большинства отбеливателей).

Отличие заказчика от конкурентов — в полном цикле:

  • для производства реактивов — свое производство и налаженные связи с крупнейшими заводами-производителями химических веществ в России;
  • для розлива по тарам — нужные сертификаты на руках, заработанные честным трудом и компетенциями сотрудников компании;
  • для транспортировки — своя производственная база, собственный транспорт под любое вещество, за счет чего закрывается сложная логистика (например, поставки в далекую Якутию);
  • для клиентов — работа по заявкам: в «Магне» поставляют не только позиции из каталога, но и работают по ТЗ — могут сделать состав с нужным процентным содержанием любого вещества по заявке клиента.

Для проекта эти особенности превратились в задачи-вызовы:
1
Полный цикл, тара и логистика — как компактно и понятно рассказать про это на сайте?
2
Специфические товары — как выводить в каталоге жидкости и порошки, да ещё и с очень разными характеристиками?
3
Работа по заявкам по некоторым товарам — как реализовать ее в каталоге?
4
Множество поставщиков и налаженная логистика — как сделать так, чтобы заказчик выглядел не перепродажником и не траспортной компанией, а серьезным игроком рынка с полным циклом?
Чтобы решить это уравнение с четырьмя неизвестными, мы взялись за работу по Scrum — фреймворку, который предполагает делить большие проекты на мелкие части и двигаться от старта к результату небольшими этапами (спринтами), наращивая функциональность конечного продукта.

Аналитика и прототипы


Елена
Продакшн-директор
— На этапе аналитики и прототипирования всё шло гладко: проект был под присмотром у одного из менеджеров студии, я немного помогала аналитикам с персонами и химическими фишками — благо, 5 лет ХимФака не забываются просто так.
На главной странице заказчик хотел последовательно показать пользователю ответы на вопросы:
  1. Кто мы?
  2. Что мы делаем?
  3. Как мы это делаем?

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

Дизайн

Этап 1. Брейншторм и концепция

Как показать пользователю, что у компании полный цикл? Можно написать много текста. Можно впихнуть в слайдер бесконечные фотографии. Но можно и иначе: на брейншторме мы придумали 3D-модель с полигональными фигурами в бело-красных цветах брендбука заказчика.

Наталья
Руководитель проекта
— В промоблоке мы хотели показать, что из себя представляет понятие «сервис поставки»: что в него входит и что это значит для клиента «Магны». Идей было много, в итоге остановились на варианте 3D-схемы c элементами цепочки поставки в виде полигональных фигур.

Елена
Продакш-директор
— Пока рисовали дизайн блоков на главной странице, думали над реализацией 3D в промоблоке: а точно ли стоит тратить на моделлинг время, ведь заказчику идея может не зайти? Решили, что сначала стоит показать ему скетч и узнать, как он отнесётся к идее.

Чтобы получить итоговый скетч со взаимосвязями между его элементами, сначала мы:

  1. отрисовали схему процесса поставки и его объектов в xmind;
  2. прикинули примерное расположение элементов в Figma с помощью объемных фигур.
Дополнительно к скетчу подобрали референсы со стилистикой 3D-объектов и пошли на звонок с клиентом. Идея понравилась — можно работать дальше.

Этап 2. Визуализация идеи

Утвержденная идея — хорошо, но нам нужна была конкретика.

Елена
Продакш-директор
— Прежде, чем идти дальше, мы нарисовали дополнительный скетч на бумаге, где показали механику работы промоблока более детализированно. Для этого согласовали с клиентом, какие КОНКРЕТНО тары и транспорты, склады и помещения будут на нашей 3D-модели, а после утвердили детализированную схему.
На этом же этапе мы сразу задумались над отображением всевозможной тары и транспорта из арсенала заказчика на 3D-модели — изучили реальные объекты и попытались перенести их на модель. Для моделирования использовали Blender.

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

Этап 3. Собираем 3D, доделываем дизайн-концепцию

Готовим визуал макета для презентации заказчику: для этого финально выставляем свет внутри Blender для адекватного отображения модели, выгружаем ее и поверх изображения в промоблоке прямо в Figma добавляем пины на каждый объект — для демонстрации дизайна заказчику этого достаточно.

Елена
Продакш-директор
— Параллельно с основной концепцией мы разработали альтернативную — без 3D-моделей, но с лаконичными и четкими UX-описаниями в лучших традициях продающих промостраниц.

С обеими концепциями пошли на звонок с заказчиком. И внезапно на демонстрации дизайна по стилистике заказчику зашла альтернативная версия. Но промоблок с использованием 3D из основной он попросил оставить. Не вопрос — объединили и получили итоговый вариант дизайна.
На этом же этапе мы «отшлифовали» все 3D-объекты модели — прежде чем запускать её в верстку, крайне важно было убедиться, что они верные и максимально схожи с реальными.

Наталья
Руководитель проекта
— Большое спасибо заказчику за то, что он подобрал для нас реальные фотографии для каждого из объектов модели из промоблока: от всевозможной тары до грузовиков и цистерн. Это очень ускорило процесс работы. Схожесть здесь была крайне важна — например, бочки бывают разные, но химию возят именно в таких.

Этап 4. Детальные страницы товаров

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

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

Сборка

Этап 1. Перенос 3D-модели на вёрстку

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

На других проектах с 3D-моделями — например, на сайте «Жокей», где каждая упаковка кофе сконструирована нами вручную максимально реалистично — мы использовали библиотеку Three.js. Она легковесная, кроссбраузерная и шикарно работает для отображения анимированной компьютерной 3D-графики.

Одно «но» — несмотря на все плюшки Three. js, модель пришлось бы подгонять: менять настройки теней и цветов, чтобы рендеринг браузера (то, как он показывает модель) совпадал с рендерингом программы, где 3D создана. А это — затраты времени и денег на проекте, порой довольно серьезные.

На этом проекте мы поступили иначе, использовав инструмент Spline. Это бесплатный и довольно свежий редактор для 3D-моделирования с набором функций, с которыми легко создавать 3D-сцены, моделировать 3D-объекты и редактировать их. Причем, сразу в браузере. Иными словами, здесь можно быстро донастроить модель так, чтобы забрать её на вёрстку.

По крайней мере, на сайте Spline так было написано. А на деле возникли проблемы:

  • не слишком очевидно, как выставлять свет;
  • требуется подгонка сцены, чтобы модель не искажалась;
  • необходимость уменьшать размер модели (она получается слишком тяжелой — на сайте бы не загрузилась);
  • изначально модель была черно-белой, нам нужно было как-то добавить цвета;
  • сама модель в Spline супер-чувствительная к движению мышки: при любом лишнем усилии её вертит, как космонавта на центрифуге.
Сцена с моделью в Spline и настройки света

Глеб
Дизайнер
— Для более реалистичного освещения пришлось поработать с настройками источников света. Я сделал 4 источника: 2 источника давали реалистичную тень, а другие 2 — выполняли роль подсветки.
На готовой модели в промоблоке планировались пины — точки, по клику на которые появлялся бы попап с подробностями о каждом объекте на схеме. Встал вопрос, как добавить их внутри Spline.

Елена
Продакш-директор
— Чтобы сэкономить время, в первом релизе мы пошли на хитрость — сделали 3D с видео, которое проигрывается, а после него появляется статичная картинка с пинами, которые мы настроили через админ-панель. Уже получилось очень красиво. Запустили первую версию сайта и ушли на второй этап разработки.

Этап 2. Улучшайзинг


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

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

Дмитрий
Разработчик
— Из интересного на сборке бэкенда — форма заявки с интеграцией с DaData. Если начать вводить название компании, то форма сразу предложит список реальных компаний. Если компания не нашлась, то заявку отправить не выйдет. Сделано, чтобы отсеять несерьезные заявки в духе «мне просто спросить» или «мне 1,5 литра кислоты, я физлицо». При отправке заявки в базе данных сохраняется и компания, и ИНН.
Параллельно с внутренними страницами и другими доделками мы работали над 3D-моделью.

Елена
Продакш-директор
— Нам предстояло перенести уже реальную 3D-модель, а не видео с ней, в промоблок. В какие-то моменты казалось, что идея — неподъемная: 3D-шки на сайтах часто тормозят, чем сильно портят юзабилити и общее впечатление пользователя. Чтобы зарядить команду, я нашла референс, где всё «летает» — и мы пошли работать.
При переносе модели из Spline на сайт не обошлось без интересностей — например, API оказалось довольно ограниченным и работающим «через одно место». Задачкой со звездочкой оказались и пины с их всплывающими окошками по клику.

Дарья
Разработчик
—  Особенность Spline в том, что он даёт дизайнеру довольно большие возможности в плане анимации. В том числе интерактива.

Верстальщику остаётся только получить экспортированный архив и подключить его на сайт при помощи специального инструмента @splinetool/runtime.

Однако, у нас возникла сложность с тем, что на модели есть тултипы (те самые пины и всплывашки к ним), содержимое которых должно редактироваться из админки. А это значит, что внутри Spline их разместить не получится. Да, @splinetool/runtime даёт возможности для взаимодействия JavaScript на сайте с моделью, но там не всё так гладко, как хотелось бы. Пришлось повозиться. Но в итоге получилась красотишка.
Пины пришлось размещать прямо в сцене — для этого дизайнер добавил в Spline геометрические объекты в виде кругов с точкой по центру. Одна беда — изначально они были 3D-шными и смотрели в сторону, как и вся модель.
Пины смотрят в сторону, а должны быть плоскими

Глеб
Дизайнер
—  Чтобы объекты выглядели как 2D-элементы, я убрал взаимодействие со светом и тенью, задал чистый цвет и выставил параметр «Смотреть в камеру». Благодаря этому при любом ракурсе пины направлены в сторону зрителя.

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

.


Елена
Продакш-директор
— Для меня этот проект — лишнее доказательство того, что нет ничего невозможного: любые, даже самые сложные и нагруженные 3D-шки могут влегкую жить в промоблоках, и не только. А главное, сколько азарта от процесса и какое огромное удовольствие смотреть на результат работы всей команды. Мой внутренний химик в восторге :)

Готовый проект