Москва
Кемерово

Как 3D влияет на проект: подходы, бюджет и выгода для бизнеса

сложность:  

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

Зачем на сайт вставлять 3D модели

Мотивация использования чего угодно в интерфейсах — маркетинг.

Например, качественный UI/UX нужен, чтобы лучше продавать. На удобном сайте клиент легко найдет нужные товары и быстро оформит заказ. Если интерфейс не вызывает раздражения, он будет возвращаться на него, а не отправится на поиски более комфортной альтернативы среди конкурентов.

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

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

Алексей Нибо

Дизайн-директор

Digital агентство Атвинта

3D-модель опалубки для каталога на сайте

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

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

Взаимодействие с тизерами в интерфейсе

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

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

Алексей Нибо

Дизайн-директор

Digital агентство Атвинта

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

Как сделать 3D модель на сайте?Предварительный скетч персонажа
Как разместить 3D модель на сайте?Готовая модель, с которой начал работу дизайнер
Финальный 3D-доктор для нашего проекта

Как 3D влияет на стоимость проекта

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

3D моделирование на сайтеСборка модели в Blender

Часто мы становимся первыми в мире, кто для маркетинговых целей моделит тот или иной объект, например, метеорологическое оборудование. В этих случаях бюджет на сайт может увеличиться на 20% и более.

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

Алексей Нибо

Дизайн-директор

Digital агентство Атвинта

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

3D-оригами для нашего проекта

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

Узнайте также о разработке дашбордов — еще одном инструменте дизайнеров

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

Иконки-тизеры

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

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

Как добавить 3D на сайт?Примерка 3D в дизайн-концепции, для которой мы использовали готовые модели из базы элементов Figma. После презентации идеи заказчику приступили к разработке собственных объектов

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

Как добавить 3D модель на сайт

Один из вариантов — использование готовых моделей, которые в дальнейшем можно переработать для своего проекта. На площадках можно купить модели и легально использовать их в своих проектах. 

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

На сайте родильного дома мы использовали готовую модель младенца. Проект получил 2 серебра в номинациях конкурсов «Золотой сайт» и «Рейтинг Рунета».

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

Добавить 3D модель на сайт3D-спецтехника, которую мы доработали под свои нужды

Плюсы подхода — экономия времени и средний уровень кастомизации при минимальных затратах. Минусы — не все в этом мире «покупается», то есть не все предметы уже отрисованы за нас.

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

Вставить 3D модель на сайтЧертеж метеорологического оборудования

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

  1. Моделинг (обычно самая трудозатратная часть, так как часто в проектах требуется детальная проработка моделей);
  2. Освещение (чтобы модель выглядела натурально, необходимо правильно выставить свет);
  3. Текстурирование и цвет (окрашивание модели и придание ей нужной фактуры);
  4. Анимация (сбор кадров для видео, тоже может занять значительное количество времени, если запланирован сложный сюжет);
  5. Рендер (создание финального видео, которое отправляется на верстку);
  6. Отладка на этапе верстки (сложным моделям могут потребоваться правки уже в контексте готового интерфейса).
Поэтапная работа над моделью

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

Алексей Нибо

Дизайн-директор

Digital агентство Атвинта

Подведем итоги 

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

Сборка метеорологического оборудования для нашего проекта

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

Оцените пост:
0
Не очень

Читайте также

Читать весь блог
персонажи в интерфейсе, атвинта

Маскоты в интерфейсах: как улучшить пользовательский опыт с помощью персонажа

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

23 марта 2023
проектирование и дизайн интерфейса

Same day доставка в США

Проектирование и дизайн интерфейса для американского стартапа GoFlyy, запущенного в Лос-Анджелесе, Нью-Йорке и Сиэтле