Виртуальный склад на сайте: как с помощью 3D познакомить клиента со сложным продуктом

Для поставщика опалубки «Атвинта» сделала сайт с 3D-каталогом. В статье рассказываем, как добиться высокой детализации моделей и дать клиентам потрогать товар в онлайне.

*Дисклеймер: в этой статье много картинок, если захотите рассмотреть их в хорошем качестве — кликните на них

К нам в агентство обратился крупный поставщик опалубки и комплектующих — компания «Опалубка-Домстрой». Заказчик хотел сделать новый сайт с понятным и эффектным каталогом.

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

Например, ранее мы рассказывали про разработку сайта для поставщика метеорологического оборудования:

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

В этом проекте мы с помощью 3D реализовали анимацию со сборкой сложного оборудования.

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

Использование 3D — отличное решение для этого бизнеса. На этапе аналитики мы выяснили, что опалубка — это очень конкурентная ниша, поэтому компании было необходимо отстроиться от других поставщиков.

Мы добились этого с помощью:

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

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

До «Опалубка-Домстрой» мы уже делали сборку оборудования в 3D, так что у нас был четкий и налаженный процесс в этой части работ по дизайну.

Разработка моделей опалубки проходила в несколько этапов.

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

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

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

Так как 3D-модели шли в каталог, мы прорабатывали их вплоть до винтиков. Так клиент может сформировать правильные ожидания от товара и предварительно «пощупать» оборудование перед покупкой.

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

Из серого объекта модель обрастает реалистичными деталями и становится похожа на свой настоящий прототип. Мы окрашивали модели под фирменный цвет заказчика.

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

После финального утверждения модели шли:

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

Заказчик передал инструкции по сборке и, следуя техническим документам, мы упростили движение и сделали анимацию менее подробной. Таким образом, клиенты видят не только копию оборудования, но и процесс сборки, который предстоит провести на объекте.

Еще один нюанс при работе с 3D — загрузка готовых анимированных видео на сайт. Задача дизайнеров — найти компромисс между весом видеофайла и эстетикой визуала.

В нашем проекте средний размер видео равен 260 кб — это оптимальный объем для демонстрации движения и рабочей скорости загрузки страницы.

После рендера видео анимированных 3D-моделей передавались на верстку разработчикам.

Для иконок-тизеров мы сделали более простую анимацию с поворотом продукции на несколько кадров.

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

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

Загруженную на Sketchfab модель разработчикам оставалось интегрировать в каталог с помощью предпросмотра.

Вот несколько ссылок на модели на Sketchfab — можете рассмотреть их:

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

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

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

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

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

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

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

На основе аналитических исследований подготовили структуру сайта, соответствующую требованиям SEO и запросам пользователей.

Схема пригодилась в работе проектировщиков и помогла разработать прототипы будущего сайта.

Для верстки собрали подробный UI Kit, с которым легко работать frontend-разработчику.

Прием со сборкой и 3D идеально подходит для демонстрации строительных конструкций, промышленного оборудования и другой многокомпонентной продукции. Это выделяет компанию на фоне конкурентов и создает вау-эффект среди потенциальных клиентов.

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

Если хотите узнать о работе с 3D в контексте образовательного сайта, читайте еще одну нашу статью:

От Растишки к оригами-дракону: как трансформировать идею заказчика в креативную концепцию

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