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

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

3D-шоурум опалубки

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

Задумка: делаем красиво и функционально

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

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

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

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

Сборка оборудования на сайте «Раймет» (by Атвинта)

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

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

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

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

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

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

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

Как делали 3D-модели

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

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

1. Сбор фактуры от заказчика

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

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

Фото от «Опалубка-Домстрой»
Фото от «Опалубка-Домстрой»

2. Разработка «сырой» модели в Blender

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

Нераскрашенная модель с проработанными тенями

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

Проработка деталей на готовой модели. Только посмотрите на эту резьбу!

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

Поэтапная работа над моделью: сырая модель, проработка теней, проработка цвета

3. Работа с фактурой и цветом

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

Алексей Нибо
дизайн-директор

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

Подбор корпоративного цвета

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

Деревянные элементы на модели

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

  • на анимацию для иконок-тизеров и основного слайдера на главной
  • на загрузку на внешнем сайте, чтобы мы могли добавить модели в каталог (те самые 3D, которые может «крутить» пользователь).

4. Анимация для главной страницы и иконок-тизеров

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

Тестовая сборка строительных лесов

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

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

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

Сборка моделей на главной

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

Алексей Нибо, дизайн-директор

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

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

Тизеры разделов по типу продукции

5. Загрузка на Sketchfab

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

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

Использование модели на сайте в интерфейсе

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

Алексей Нибо, дизайн-директор

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

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

3D-бытовка

Что еще поделали по дизайну

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

Ирина Жукова

ведущий дизайнер

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

Мудборд

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

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

Мякиши aka градиентные облака

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

Блок на сайте

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

Объемный логотип компании

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

Схемы, прототипы, UI Kit

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

Структура сайта в Miro

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

Прототипы

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

UI Kit

Подводим итоги: кому стоит использовать 3D на сайте

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

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

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

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

0
42 комментария
Написать комментарий...
Станислав Киселёв

Прикольная штука, молодцы. Уместно(целесообразно) редко, но в некоторых вещах прямо не хватает.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо ) да, как раз в отраслях, где оборудование или конструкции многосоставные отлично ложится

Ответить
Развернуть ветку
Мимо проходивший

Умеете, могёте! Все бы так.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо!)

Ответить
Развернуть ветку
Stanislav Barkov

а это крутая идея, думаю очень даже полезная

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо ) клиенты уже сами по нашим кейсам делают запрос на 3D )

Ответить
Развернуть ветку
Benz.inn

Бл, я эту опалубку проектировал в 2005-7 годах. Замки эти клиновые, щиты. Еще в Компасе

Ответить
Развернуть ветку
Дмитрий Неизвестный

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

мы прямо волну ностальгии запустили😁

Ответить
Развернуть ветку
Дмитрий Неизвестный

вообще странно почему такая подача информации о товарах не стала ещё нормой, при том что скорости интернета позволяют и асболютно изделие проходит этап моделирования.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
Дмитрий Неизвестный

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

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Было бы здорово дать продавцам возможность добавлять товар в таком виде ) раньше еще у Ламоды была виртуальная примерка, тоже классная фича

Ответить
Развернуть ветку
Атвинта digital agency
Автор

класс, сохранилось ?) пришлите посмотреть скрин )

Ответить
Развернуть ветку
Евгений Стагис

выглядит максимально реалистично

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо ) мы по фото собирали и по реальным инструкциям к сборке оборудования ) ну и с проработкой деталей не ленились.

Ответить
Развернуть ветку
Алексей

Отличная реализация!
Вот такое видение ситуации по всем фронтам
Я главный инженер на стройке и через меня проходят в том числе и заявки на оборудование. И вот тут часто возникает ситуация, когда ты не знаешь то или иное в какой то области. А решать вопрос надо. Помню был вопрос по опалубке при строительстве Ленинградской АЭС связанный с ассортиментом заказываемых позиций. Если бы в то время была бы такая визуализация, то не были бы куплены лишние позиции и не пришлось бы дозаказывать другие.
Предложенный формат представления товара позволяет клиенту выбрать именно то, чо необходимо и совместно с сопутствующими товарами.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо за комментарий со стороны строительства!) это как раз та ситуация, где 3D это не просто красиво, но еще и очень применимо для реальных задач на стройке

Ответить
Развернуть ветку
Навеки Вечные

Это очень крутой кейс 😍
Работа сделана на высшем уровне. Молодцы!
Такого рода материала должно быть больше на VC.

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо вам за отзыв ) старались как над проектом, так и над статьей - хотелось как можно больше внутренней кухни и процесса показать )

Ответить
Развернуть ветку
Денис Ковальчук / lidzavod.ru

Подскажите а в чем делаете анимацию 3д?

Ответить
Развернуть ветку
Alexey Nibo

В данном проекте на всех этапах использовали Blender. До этого могли работать кто в чем привык (были и 3ds max и Cinema 4D), но сейчас все дизайнеры стараются переучиваться на один пакет, чтобы всем было удобно.

Ответить
Развернуть ветку
Umka Sharafitdinov

Круто сделали! Пилите есчо👌

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Спасибо !) работаем :)

Ответить
Развернуть ветку
надежда бабушкина

Да, крутая штука)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо )

Ответить
Развернуть ветку
Валентин Потапов

Пытались с помощью https://github.com/alicevision/Meshroom построить по фоткам 3d помещения, что бы получилось как у Яндекс.Недвижимости. Не получилось пока нужное качество. Ищу помощь в достижении этой цели.

Ответить
Развернуть ветку
Илья Горбаров

Вопрос совсем не по теме статьи и сформулирован очень общими словами.

Но чтобы вам помочь или натолкнуть на нужные мысли, мы решили спросить у ChatGPT:

Meshroom is a powerful open-source tool for creating 3D models from photographs, but achieving the quality of Yandex.Real Estate's models can be challenging. Here are some tips that may help you improve the quality of your models:

1. Use high-quality images: The quality of your input photos is critical to the quality of the final model. Make sure to use photos taken with a high-resolution camera and good lighting conditions.

2. Increase the number of photos: Using more photos will give the software more information to work with and increase the accuracy of the final model. Try to capture photos from multiple angles and heights.

3. Adjust camera parameters: The camera parameters used for processing the images can greatly impact the quality of the model. You can try adjusting the parameters in Meshroom to see if it improves the results.

4. Post-processing: The final model generated by Meshroom may need some post-processing to refine the details and improve the overall quality. You can use tools such as Blender or MeshLab to edit the model and make any necessary adjustments.

5. Consider using professional services: If you are unable to achieve the desired quality on your own, you may consider using the services of a professional 3D modeling company. They have the expertise and experience to create high-quality 3D models from photographs.

I hope these tips help you achieve your goal of creating a 3D model of a room that is comparable to Yandex.Real Estate's models. Good luck!

Ответить
Развернуть ветку
Валентин Потапов

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

Ответить
Развернуть ветку
Илья Горбаров

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

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

Мы эту библиотеку не используем, не писали про неё в статье и не знаем чем помочь. Поэтому решили спросить у чатгпт, а если ответ был банальный, попробуйте уточнить ваш запрос)))

Ответить
Развернуть ветку
Александр Дизайнер

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

Ответить
Развернуть ветку
Alexey Nibo

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

Ответить
Развернуть ветку
Андрей Котосин

Какой бюджет у данного сайта ? Интересная идея

Ответить
Развернуть ветку
Атвинта digital agency
Автор

конкретно по этому проекту не можем назвать цифры. Если брать сайт с подобной проработкой 3D и каталогом продукции - от 2 млн.

Ответить
Развернуть ветку
Василий

3d можно сделать на любом сайте с любой CMS? Или есть какие-то требования и ограничения?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

Зависит только от компетенции frontend-разработчиков. CMS отвечает за редактирование материалов и их хранение.

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

Ответить
Развернуть ветку
Женя Князев из antro.cx

3D — это здорово, но что по метрикам? Продажи выросли? Или просто красивое?)

Ответить
Развернуть ветку
Атвинта digital agency
Автор

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

Ответить
Развернуть ветку
К М

Это все в Блендере сделано?

Ответить
Развернуть ветку
Атвинта digital agency
Автор

да )

Ответить
Развернуть ветку
Павел Воробьев

Батя грит малаца, хорошо сделали!

Ответить
Развернуть ветку
Атвинта digital agency
Автор

спасибо :)

Ответить
Развернуть ветку
39 комментариев
Раскрывать всегда