МК «Магна»
МК «Магна»
- МК «Магна» покупает у поставщиков и реализует напрямую клиентам фасованное химическое сырье и реактивы. Например, серную или соляную кислоты, аммиачную воду или гидрохлорид натрия (тот самый, что входит в состав большинства отбеливателей).
Отличие заказчика от конкурентов — в полном цикле:
- для производства реактивов — свое производство и налаженные связи с крупнейшими заводами-производителями химических веществ в России;
- для розлива по тарам — нужные сертификаты на руках, заработанные честным трудом и компетенциями сотрудников компании;
- для транспортировки — своя производственная база, собственный транспорт под любое вещество, за счет чего закрывается сложная логистика (например, поставки в далекую Якутию);
- для клиентов — работа по заявкам: в «Магне» поставляют не только позиции из каталога, но и работают по ТЗ — могут сделать состав с нужным процентным содержанием любого вещества по заявке клиента.
Аналитика и прототипы
- Кто мы?
- Что мы делаем?
- Как мы это делаем?
Фактически у нас вырисовывалась логичная структура лендинга, но с функционалом каталога. Интересности начались на дизайне, который проходил в несколько последовательных этапов.
Дизайн
Этап 1. Брейншторм и концепция
Чтобы получить итоговый скетч со взаимосвязями между его элементами, сначала мы:
- отрисовали схему процесса поставки и его объектов в xmind;
- прикинули примерное расположение элементов в Figma с помощью объемных фигур.
Этап 2. Визуализация идеи
Этап 3. Собираем 3D, доделываем дизайн-концепцию
С обеими концепциями пошли на звонок с заказчиком. И внезапно на демонстрации дизайна по стилистике заказчику зашла альтернативная версия. Но промоблок с использованием 3D из основной он попросил оставить. Не вопрос — объединили и получили итоговый вариант дизайна.
Этап 4. Детальные страницы товаров
Мы предложили выводить на детальной странице товара фотографию тары, в которой этот товар доставляется: пользователь может посмотреть, какие варианты тары доступны для каждого конкретного товара. Поверх фото с тарой решили выводить формулу вещества контрастным красным цветом — так сложнее перепутать карточки двух товаров, открытых в параллельных вкладках.
Сборка
Этап 1. Перенос 3D-модели на вёрстку
Там, где есть 3D-модели, всегда возникает вопрос — а как перенести их на верстку так, чтобы браузер пользователя в итоге показывал их такими же, как в программе, где они создавались.
На других проектах с 3D-моделями — например, на сайте «Жокей», где каждая упаковка кофе сконструирована нами вручную максимально реалистично — мы использовали библиотеку Three.js. Она легковесная, кроссбраузерная и шикарно работает для отображения анимированной компьютерной 3D-графики.
Одно «но» — несмотря на все плюшки Three. js, модель пришлось бы подгонять: менять настройки теней и цветов, чтобы рендеринг браузера (то, как он показывает модель) совпадал с рендерингом программы, где 3D создана. А это — затраты времени и денег на проекте, порой довольно серьезные.
На этом проекте мы поступили иначе, использовав инструмент Spline. Это бесплатный и довольно свежий редактор для 3D-моделирования с набором функций, с которыми легко создавать 3D-сцены, моделировать 3D-объекты и редактировать их. Причем, сразу в браузере. Иными словами, здесь можно быстро донастроить модель так, чтобы забрать её на вёрстку.
По крайней мере, на сайте Spline так было написано. А на деле возникли проблемы:
- не слишком очевидно, как выставлять свет;
- требуется подгонка сцены, чтобы модель не искажалась;
- необходимость уменьшать размер модели (она получается слишком тяжелой — на сайте бы не загрузилась);
- изначально модель была черно-белой, нам нужно было как-то добавить цвета;
- сама модель в Spline супер-чувствительная к движению мышки: при любом лишнем усилии её вертит, как космонавта на центрифуге.
Этап 2. Улучшайзинг
Пришлось всё брать в свои руки — например, для страницы «О компании» я набросала три варианта сочетания блоков, подобные которым мы уже реализовали на главной. Результат, конечно, потом переработали почти до неузнаваемости, но это стало хорошим стартом.
Верстальщику остаётся только получить экспортированный архив и подключить его на сайт при помощи специального инструмента @splinetool/runtime.
Однако, у нас возникла сложность с тем, что на модели есть тултипы (те самые пины и всплывашки к ним), содержимое которых должно редактироваться из админки. А это значит, что внутри Spline их разместить не получится. Да, @splinetool/runtime даёт возможности для взаимодействия JavaScript на сайте с моделью, но там не всё так гладко, как хотелось бы. Пришлось повозиться. Но в итоге получилась красотишка.
Для эффектности я добавил зацикленную анимацию пульсирования с небольшой амплитудой и увеличение центральной точки по наведению.