МК «Магна»
МК «Магна»
- МК «Магна» покупает у поставщиков и реализует напрямую клиентам фасованное химическое сырье и реактивы. Например, серную или соляную кислоты, аммиачную воду или гидрохлорид натрия (тот самый, что входит в состав большинства отбеливателей).
Отличие заказчика от конкурентов — в полном цикле:
- для производства реактивов — свое производство и налаженные связи с крупнейшими заводами-производителями химических веществ в России;
- для розлива по тарам — нужные сертификаты на руках, заработанные честным трудом и компетенциями сотрудников компании;
- для транспортировки — своя производственная база, собственный транспорт под любое вещество, за счет чего закрывается сложная логистика (например, поставки в далекую Якутию);
- для клиентов — работа по заявкам: в «Магне» поставляют не только позиции из каталога, но и работают по ТЗ — могут сделать состав с нужным процентным содержанием любого вещества по заявке клиента.
Аналитика и прототипы
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6164-6538-4139-b032-623161323431__-__empty__-1.jpg)
- Кто мы?
- Что мы делаем?
- Как мы это делаем?
Фактически у нас вырисовывалась логичная структура лендинга, но с функционалом каталога. Интересности начались на дизайне, который проходил в несколько последовательных этапов.
Дизайн
Этап 1. Брейншторм и концепция
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3533-3134-4836-b736-313361303961__-__empty__photo.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)
Чтобы получить итоговый скетч со взаимосвязями между его элементами, сначала мы:
- отрисовали схему процесса поставки и его объектов в xmind;
- прикинули примерное расположение элементов в Figma с помощью объемных фигур.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3537-3833-4136-b963-373562336434__-__empty_________-min.png)
Этап 2. Визуализация идеи
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6132-3334-4162-b161-343431386638__-__empty__-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6339-3433-4463-b932-383637336235__-__empty__screenshot_2023-03-2.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3237-3265-4930-b039-343334653733__-__empty__screenshot_2023-03-2.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3935-3936-4639-a266-393963393565__-__empty__image_327.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3533-3134-4836-b736-313361303961__-__empty__photo.jpeg)
Этап 3. Собираем 3D, доделываем дизайн-концепцию
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)
С обеими концепциями пошли на звонок с заказчиком. И внезапно на демонстрации дизайна по стилистике заказчику зашла альтернативная версия. Но промоблок с использованием 3D из основной он попросил оставить. Не вопрос — объединили и получили итоговый вариант дизайна.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3261-6439-4436-a136-346363653161__-__empty_______-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3533-3134-4836-b736-313361303961__-__empty__photo.jpeg)
Этап 4. Детальные страницы товаров
Мы предложили выводить на детальной странице товара фотографию тары, в которой этот товар доставляется: пользователь может посмотреть, какие варианты тары доступны для каждого конкретного товара. Поверх фото с тарой решили выводить формулу вещества контрастным красным цветом — так сложнее перепутать карточки двух товаров, открытых в параллельных вкладках.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6631-6133-4466-b463-626233353334__-__empty______-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6432-6638-4363-b266-323966313834__-__empty___________-min.png)
Сборка
Этап 1. Перенос 3D-модели на вёрстку
Там, где есть 3D-модели, всегда возникает вопрос — а как перенести их на верстку так, чтобы браузер пользователя в итоге показывал их такими же, как в программе, где они создавались.
На других проектах с 3D-моделями — например, на сайте «Жокей», где каждая упаковка кофе сконструирована нами вручную максимально реалистично — мы использовали библиотеку Three.js. Она легковесная, кроссбраузерная и шикарно работает для отображения анимированной компьютерной 3D-графики.
Одно «но» — несмотря на все плюшки Three. js, модель пришлось бы подгонять: менять настройки теней и цветов, чтобы рендеринг браузера (то, как он показывает модель) совпадал с рендерингом программы, где 3D создана. А это — затраты времени и денег на проекте, порой довольно серьезные.
На этом проекте мы поступили иначе, использовав инструмент Spline. Это бесплатный и довольно свежий редактор для 3D-моделирования с набором функций, с которыми легко создавать 3D-сцены, моделировать 3D-объекты и редактировать их. Причем, сразу в браузере. Иными словами, здесь можно быстро донастроить модель так, чтобы забрать её на вёрстку.
По крайней мере, на сайте Spline так было написано. А на деле возникли проблемы:
- не слишком очевидно, как выставлять свет;
- требуется подгонка сцены, чтобы модель не искажалась;
- необходимость уменьшать размер модели (она получается слишком тяжелой — на сайте бы не загрузилась);
- изначально модель была черно-белой, нам нужно было как-то добавить цвета;
- сама модель в Spline супер-чувствительная к движению мышки: при любом лишнем усилии её вертит, как космонавта на центрифуге.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3062-3530-4666-b266-316134366135__-__empty__photo1696573570.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6530-3537-4032-b064-663862346435__-__empty__photo.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)
Этап 2. Улучшайзинг
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3533-3134-4836-b736-313361303961__-__empty__photo.jpeg)
Пришлось всё брать в свои руки — например, для страницы «О компании» я набросала три варианта сочетания блоков, подобные которым мы уже реализовали на главной. Результат, конечно, потом переработали почти до неузнаваемости, но это стало хорошим стартом.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6539-3133-4137-a466-343632303961__-__empty_______-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3661-3531-4364-b631-623562613937__-__empty__photo.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3837-6465-4430-b862-366264313065__-__empty________-min.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3839-3939-4133-a662-323236316562__-__empty__-4.png)
Верстальщику остаётся только получить экспортированный архив и подключить его на сайт при помощи специального инструмента @splinetool/runtime.
Однако, у нас возникла сложность с тем, что на модели есть тултипы (те самые пины и всплывашки к ним), содержимое которых должно редактироваться из админки. А это значит, что внутри Spline их разместить не получится. Да, @splinetool/runtime даёт возможности для взаимодействия JavaScript на сайте с моделью, но там не всё так гладко, как хотелось бы. Пришлось повозиться. Но в итоге получилась красотишка.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3065-3135-4939-b638-626631316238__-__empty__photo1696573570_1.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6530-3537-4032-b064-663862346435__-__empty__photo.png)
Для эффектности я добавил зацикленную анимацию пульсирования с небольшой амплитудой и увеличение центральной точки по наведению.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3738-3134-4134-a631-613161323330__-__empty__photo1696573570_2.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6639-3532-4663-b463-636439633065__-__empty__photo1696573570_3.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3838-3765-4665-a164-303334333562__-__empty__photo1696573570_4.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6331-3861-4230-a665-653731353034__-__empty__photo1696573570_5.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild3064-6363-4562-b335-663739313138__-__empty__photo1696573570_6.jpeg)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1707389464/tild6232-3434-4937-a162-323934623738__-__empty__-1.jpg)