Для поставщика опалубки «Атвинта» сделала сайт с 3D-каталогом. В статье рассказываем, как добиться высокой детализации моделей и дать клиентам потрогать товар в онлайне.
3D-шоурум опалубки
*Дисклеймер: в этой статье много картинок, если захотите рассмотреть их в хорошем качестве — кликните на них
Задумка: делаем красиво и функционально
К нам в агентство обратился крупный поставщик опалубки и комплектующих — компания «Опалубка-Домстрой». Заказчик хотел сделать новый сайт с понятным и эффектным каталогом.
Немного контекста: опалубка — это конструкция, которую используют в строительстве для заливки бетона и других материалов. Тематика специфичная, но нас сложными сооружениями не напугаешь, наоборот, только дай поработать над нестандартными продуктами.
Например, ранее мы рассказывали про разработку сайта для поставщика метеорологического оборудования:
В этом проекте мы с помощью 3D реализовали анимацию со сборкой сложного оборудования.
Сборка оборудования на сайте «Раймет» (by Атвинта)
Именно этим кейсом и другими похожими референсами вдохновились в «Опалубка-Домстрой». Нам предстояло сделать на сайте похожие модели и использовать их не только для главной, но и в каталоге, чтобы пользователь мог сам посмотреть опалубку и другие продукты.
Использование 3D — отличное решение для этого бизнеса. На этапе аналитики мы выяснили, что опалубка — это очень конкурентная ниша, поэтому компании было необходимо отстроиться от других поставщиков.
Мы добились этого с помощью:
- современного и стильного сайта с user friendly интерфейсом (у большинства поставщиков в строительной сфере морально устаревшие и неудобные сайты)
- эффектной дизайн-концепции (визуальный вау-эффект добавляет баллы в копилку пользовательского опыта)
- 3D-моделей опалубки в каталоге (мы реализовали реалистичные модели оборудования, посмотрев которые, клиент может в онлайне оценить качество продукции).
Рекомендуем обратить внимание на эти приемы всем промышленникам, строительным поставщикам и предприятиям из смежных областей. По нашему опыту, у большинства таких компаний устаревшие сайты, из-за чего они упускают дополнительный трафик и заказы из сети.
Старые нефункциональные сайты не вызывают доверия, если у компании нет громкого узнаваемого имени на рынке.
В этой статье мы отдельно расскажем про работу с 3D. Вы узнаете, как использовать этот инструмент не только для визуала, но и расширения функциональности сайта за счет прямого взаимодействия пользователя с моделями.
Как делали 3D-модели
До «Опалубка-Домстрой» мы уже делали сборку оборудования в 3D, так что у нас был четкий и налаженный процесс в этой части работ по дизайну.
Разработка моделей опалубки проходила в несколько этапов.
1. Сбор фактуры от заказчика
Фото оборудования, чертежи, техническая документация, инструкции по сборке — все это пригодилось дизайнеру, чтобы создать реалистичные копии оборудования.
Мы сделали упор на реалистичность, потому что модели должны были попасть в руки клиентам — сейчас на их основе пользователи принимают решение о покупке или аренде конструкций. В каталоге они как на складе могут рассмотреть модели со всех сторон.
2. Разработка «сырой» модели в Blender
Этап, на котором дизайнер создает первичную модель без цвета и фактуры. Секрет успеха здесь в детализации — чем лучше проработаны мелкие нюансы, тем эффектнее и реалистичнее смотрится модель.
Так как 3D-модели шли в каталог, мы прорабатывали их вплоть до винтиков. Так клиент может сформировать правильные ожидания от товара и предварительно «пощупать» оборудование перед покупкой.
При согласовании моделей с заказчиком мы корректировали габариты, масштабы и геометрию конструкций, пока финальный вариант не становился максимально похожим на свой реальный прототип.
Поэтапная работа над моделью: сырая модель, проработка теней, проработка цвета
Работа с фактурой и цветом
Из серого объекта модель обрастает реалистичными деталями и становится похожа на свой настоящий прототип. Мы окрашивали модели под фирменный цвет заказчика.
В 3D объект имитирует условия окружающей среды — на него падает свет и материал не всегда отражает цвет в точности, как это предполагает брендбук. Поэтому мы сделали несколько вариантов синей краски и предлагали заказчику выбрать рендер, наиболее подходящий компании по цвету
Кроме цвета, на некоторых объектах мы подробно прорабатывали и фактуру. Чтобы добиться правильного вида фанеры, заказчик предоставил нам реальные фотографии деревянного материала, и на их основе дизайнер создал корректную текстуру.
После финального утверждения модели шли:
- на анимацию для иконок-тизеров и основного слайдера на главной
- на загрузку на внешнем сайте, чтобы мы могли добавить модели в каталог (те самые 3D, которые может «крутить» пользователь).
4. Анимация для главной страницы и иконок-тизеров
Принцип реалистичности соблюдали и на этом этапе. Например, изначально мы сделали слишком подробную покадровую сборку строительных лесов. Во время согласования выяснилось, что при доставке оборудование приходит частично собранным, и на деле некоторых этапов монтажа, которые мы отразили, нет.
Тестовая сборка строительных лесов
Заказчик передал инструкции по сборке и, следуя техническим документам, мы упростили движение и сделали анимацию менее подробной. Таким образом, клиенты видят не только копию оборудования, но и процесс сборки, который предстоит провести на объекте.
Еще один нюанс при работе с 3D — загрузка готовых анимированных видео на сайт. Задача дизайнеров — найти компромисс между весом видеофайла и эстетикой визуала.
В нашем проекте средний размер видео равен 260 кб — это оптимальный объем для демонстрации движения и рабочей скорости загрузки страницы.
Сборка моделей на главной
Чем меньше пикселей одновременно движется в кадре, тем меньше будет размер файла. Мы не стремились сократить все по максимуму, но ограничивали количество кадров по внутреннему регламенту и старались не шевелить много элементов одновременно. Это непростая задача, учитывая высокий уровень детализации моделей.
После рендера видео анимированных 3D-моделей передавались на верстку разработчикам.
Для иконок-тизеров мы сделали более простую анимацию с поворотом продукции на несколько кадров.
Тизеры разделов по типу продукции
Загрузка на Sketchfab
Sketchfab — это онлайн-сервис, где авторы могут публиковать свои 3D-модели и размещать их предпросмотр на внешних источниках. Мы использовали эту возможность, чтобы добавить модели опалубки в каталог для пользователей.
С загрузкой не все так просто — у ресурса есть свои требования к моделям, так что нам пришлось оптимизировать объекты для публикации.
Использование модели на сайте в интерфейсе
Если в видео на вес файла влияет число кадров и не важны характеристики модели, то здесь в игру включается количество полигонов, из которых состоит модель. Чтобы соблюсти требования Sketchfab, в некоторых случаях мы упрощали геометрию оборудования и таким образом уменьшали вес 3D-моделей.
Загруженную на Sketchfab модель разработчикам оставалось интегрировать в каталог с помощью предпросмотра.
Вот несколько ссылок на модели на Sketchfab — можете рассмотреть их:
Что еще поделали по дизайну
Общее направление дизайн-концепции сайта задают 3D-модели. Чтобы лучше понять предпочтения заказчика, мы собрали мудборд с примерами.
После обсуждения мудборда мы поняли, что заказчика привлекает простота, лаконичность, минимализм и воздушность. Эти принципы мы положили в основу дизайн-концепции.
Композиция дополнена мягкими формами, типографикой и интересными решениями в рамках анимации интерфейсов.
Например, за курсором на сайте движутся мягкие градиентные облака, которые добавляют интерфейсу легкости и воздуха. В команде этот эффект ласково назвали «мякишами».
Блок «Склад и производство», который хотел подчеркнуть заказчик, тоже сопровожден анимацией — фото склада передвигается по вертикали дублирует направление движения курсора.
Также мы оживили логотип компании — на новом сайте он крутится вокруг себя в прелоадере при загрузке страниц.
На сайте есть еще множество плавной ненавязчивой анимации, которая дополняет пользовательский опыт и помогает расставить акценты для более очевидного взаимодействия с интерфейсом. Например, на элементах навигации, пролистывании галереи и других объектах.
Схемы, прототипы, UI Kit
На основе аналитических исследований подготовили структуру сайта, соответствующую требованиям SEO и запросам пользователей.
Схема пригодилась в работе проектировщиков и помогла разработать прототипы будущего сайта.
Для верстки собрали подробный UI Kit, с которым легко работать frontend-разработчику.
Подводим итоги: кому стоит использовать 3D на сайте
Прием со сборкой и 3D идеально подходит для демонстрации строительных конструкций, промышленного оборудования и другой многокомпонентной продукции. Это выделяет компанию на фоне конкурентов и создает вау-эффект среди потенциальных клиентов.
Кроме визуальных задач, 3D может решать и функциональные задачи сайта. Например, обычный каталог модели превращают в виртуальный склад, где пользователь может детально рассмотреть продукцию и оценить ее качество.
А также подписывайтесь на нас, чтобы узнать больше о нюансах этого инструмента — мы планируем выпустить обзорную статью по работе с 3D с рекомендациями для заказчиков и дизайн-студий.
Не со всем согласен, но аргументы сильные. Было бы интересно увидеть продолжение.
Хороший пример того, как маленькие решения влияют на итоговый результат.
Хорошо разложено по шагам, стало понятнее, где обычно теряется время.