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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<p>Деревянные элементы на модели</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3D-бытовка
3D-бытовка

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

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

Ирина Жукова

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

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

Мудборд
Мудборд

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

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

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

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

Блок на сайте
Блок на сайте

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

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

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

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

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

<p>Структура сайта в Miro</p>

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

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

Прототипы
Прототипы

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

UI Kit
UI Kit

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

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

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

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

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

8989
41 комментарий

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

7
Ответить

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

2
Ответить

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

3
Ответить

спасибо!)

Ответить

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

3
Ответить

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

Ответить

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

2
Ответить