Как делать сайты с 3D — Дизайн на vc.ru
В этот раз расскажем, как можно использовать 3D для сайтов. Как создавать трехмерные объекты, на что смотреть при разработке дизайна с 3D, как оптимизировать работу таких сайтов и пару слов о WebGL. Статья поможет более корректно ставить задачи 3D-шникам.
9427 просмотров
Для начала объясним, зачем вообще так заморачиваться:
Текст — это когда ты заставляешь человека строить образ в своей голове, опираясь на груду букв, которую ты ему любезно предоставил. Гораздо более гуманно этот образ дать готовым. Для этого мы используем в создании дизайна медиа: 3D, видео, фото, иллюстрации и тд. Заботливый и удобный интерфейс помогает пользователю и не принуждает его работать.
3D — это не про промо, а про смысл
3D как и текст — сугубо сервисная вещь. Как его использовать и применять ли вообще — вопрос UX. Например в этом сайте трехмерные модели нужны для того, чтобы показать конкретные объекты-триггеры и удовлетворить информационный запрос ЦА.
Подготовка
Концепт нужно довести до состояния, когда там есть все, кроме 3D;
Подготовить макеты страниц, на которые нужно 3D;
- Подготовить файлы с пустым альфа-каналом, чтобы можно было сделать видеорендер и примерить его;
Создать среду и ограничения. Определяемся, какой объект должен быть, его вид и характеристики. С участием фронтендеров определяем максимум, который вывезет будущий сайт;
Отдаем 3D-шнику, он готовит модели. Только получив их, можно переходить к обсуждению анимаций.
По большому счету есть два ключевых ограничения, о которых надо думать на этапе подготовки:
- Коммуникационная задача сайта вообще и 3D в частности;
- Техническая реализация.
Также на этапе подготовки нужно будет решить, будут ли в интерфейсе реальные модели или нет. Ведь…
есть два стула:
— на одном реальные модели
— на другом фейки: видео- и фоторендеры
У фейкового 3D есть плюсы: не нужно решать вопрос с экспортом реальных моделей в интерфейс. Но есть и минусы. Например весьма ограниченная интерактивность у видеорендеров — их можно проиграть только вперед. И неприемлемый размер страниц, содержащих секвенции. Весят секвенции очень много.
Давайте сразу разберемся с тем, что делать, если вы будете встраивать фейковые модели. Если коротко, то эта работа аналогична встраиванию видео. Специалист по 3D готовит модели и сцены с ними, рендерит это в видео и уже его вы и встраиваете. Как это делать, напомню, подробно расписано в другой нашей статье на VC.
Однако добавим: чем меньше цветов и перерисовок экрана, тем лучше можно будет оптимизировать видеорендер для встраивания.
Работая с 3D-визуализациями, добиться этого проще, чем при встраивании реальных съемок. Можно сделать всё монохромным, или сделать значительную часть кадра статичной. Это сократит площадь перерисовок и сделает такой видеорендер легким.
Такие рендеры очень любят кодеки, и замечательно сжимают. Сравните с видеосъёмкой. Несмотря на то, что это таймлапс имеет большое количество статичных пикселей (синяя линия а графике), разница в оптимизации огромна — 3D выигрывает с отрывом (оранжевая линия). Снова покажем скрины с графиками оптимизации видеороликов и 3D-рендеров с помощью кодеков.
Реальные 3D-модели в интерфейсе
Реальные модели в интерфейсе сайта — это технология WebGL. С ее помощью можно по-настоящему встроить 3D-модель в сайт и делать с ней что угодно. Для работы вам понадобятся библиотеки:
three.js — большая, красивая, сочная, но может показаться сложной для начинающих. regl — поменьше, чем three.js, но проще для освоения.
Сочетание WebGL и указанных выше библиотек позволяют получить в интерфейсе настоящую интерактивность, дают множество визуальных эффектов, позволяют формировать впечатляющий пользовательский опыт.
При этом можно решать не только промо-задачи, но и иллюстрировать сложные для понимания вещи: интерактивную инфографику, модели механизмов, оборудования, сооружений.
Пример интерактивного повествования — сайт НИИ ТП Роскосмоса. С помощью ряда сцен рассказываем об услугах компании, ее якорных проектах и принципах работы некоторых систем. Никаких текстов, минимум напряжения для юзера
У WebGL есть особенности:
- Модели не будут выглядеть как на рендере. Хайполи поместить в интерфейс будет сложно;
- Чтобы применять настоящие модели, нужно правильно их проектировать с оглядкой на интерфейс, правильно моделить и анимировать. И дизайнер, и моделлер должны понимать, что далеко не все 3D-модели будут работать в вебе;
- С помощью WebGL можно не только работать с 3D-моделями, но и делать реалистичную физику и наделять ею например курсор или другие элементы сайта;
- WebGL позволяет создавать 3D эффекты: шейдерные переходы и искажения, эффекты глубины и много что еще.
Чтобы избежать проблем нужно получить решения от фронтендеров еще до того, как дизайнер загрузил всех и презентовал концепт заказчику.
Оптимизируем 3D-модели
Для понимания: в WebGL все изменения происходят с помощью JavaScript. А он исполняется на устройстве пользователя, да еще и в браузере. Разные браузеры работают по-разному. И если речь идет о сложной трехмерной модели: органика с анимациями, скелетная анимация, механизмы/оборудование, то оптимизировать следует на этапе дизайна. Дизайнеру нужно учитывать возможный объем файла, количество сцен, насколько сложное освещение в сцене потребуется. Когда сцена и объект хорошо продуманы, то технически всё можно сделать проще, ведь не во всех ракурсах нужна 100% детализация, не все элементы нужно прорабатывать и анимировать.
При анимации надо стремиться к наименьшему числу перерисовок. Масштаб перерисовки — количество пикселей, которые сменяются на мониторе. Чем меньше операций перерисовки, тем лучше.
Изначально подробная модель карьерного самосвала была радикально упрощена. Правда, в итоговый сайт эта сцена не попала
Работая над оптимизацией 3D, приходится бороться за каждый килобайт. 2 мб — это уже очень много. А ведь моделей может быть несколько на одной странице.
Что еще влияет на вес модели в интерфейсе:
Чем меньше площадь модели на экране, тем лучше. Если площадь велика, то на слабых машинах такой сайт будет заметно тормозить;
Экранное сглаживание (anti-aliasing). На некоторых браузерах для сглаживания используется неоптимальные алгоритмы. Поэтому браузер увеличивает изображение: он отрисовывает больший, чем надо слой и таким образом тратит ресурсы процессора на антиалиасинг.
Это, кстати, легко проверить — уменьшаем размер окна, и все анимации работают плавнее.
Работа с заказчиком
Все, что связано с 3D чрезвычайно больно и дорого править. Поэтому следует придерживаться нескольких простых правил:
— Использовать кастомные референсы
— Не показывать графику отдельно от дизайна сайта
— Всё примерять на дизайне сайта
Каждый свой шаг нужно утверждать с заказчиком. Чтобы потом после массы затраченных ресурсов не сидеть и не портить свою работу. Пример такого подхода — концепт ниже. Первая его часть это очень схематичные, не проработанные визуализации, которые позволили при небольших затратах дать клиенту максимум понимания, как всё будет выглядеть и работать. Во второй части ролика видны уже чистовые модели и анимации.
Концепт для компании Сибирский антрацит. Презентует проект строительства Северомуйского тоннеля-2
Кейс с «мясом» и подводными камнями
Это сайт мы уже показывали в статье про создание интерфейсных видео.
Теперь расскажем про него чуть подробнее.
Сначала хотели ставить 3D. После того, как разработали модели, стало ясно, что они велики по объему. Но мы этот нюанс проигнорировали, понадеявшись на то, что все проблемы решит WebGL. Не решил, и в ходе работы мы от него отказались, заменив реальные 3D-модели видеорендерами.
Видео тоже были очень большим. Активировались они при наведении, назад не проигрывались. То есть часть интерактивности мы принесли в жертву оптимизации. В конечном счете на каждую сцену требовалось два видео и по одному — на анимацию появления. На шесть сцен получилось 18 роликов. Это много, и далее встал вопрос, как это всё сжать.
Использовали кодеки H.264-265 и Vp9. Оказалось, что Vp9 врёт цвета, но ролики получались маленькими. А H.264-265 давали верные цвета, но видео получались тяжелыми. Перешли к сокращению количества кадров, и всё равно пришлось заниматься ручной подгонкой битрейта и кодеков. В итоге мы просто колоссально намаялись. Да, сайт получился и красивым, и быстрым, и всех устроил, но этого вала работы можно было избежать, спроектировав его иначе.
Если интересно узнать про WebGL подробнее, то есть вот такая лекция. Но она уже больше для программистов
Разработка 3D моделей, сайтов, визуализаций
Вы можете мыслить шире, полнее и объёмнее, воплощая бизнес-идеи с использованием 3D-технологий.
Хорошим примером таких идей могут служить 3D-симуляторы сложного оборудования, которые позволяют сэкономить значительные средства при обучении специалистов, обеспечив доскональное знание установок перед началом их реальной эксплуатации.
Демонстрация будущих строений, домов, машинерии, географических памятных мест (виртуальные туры), конструкторы — везде 3D-графика может служить не только хорошим механизмом для развлечений, но и придать Вашему продукту иное качество. Соединяя 3D с доступностью через обычные средства веб-сёрфинга, можно получить впечатляющие результаты.
Предлагаем обращаться для обсуждения будущих проектов в 3D. Мы работаем с WebGL (Web-based Graphics Library) — кроссплатформенный API для 3D-графики в браузере.
Разрабатываем экранные, мобильные, AR, VR, XR 3D симуляторы. Проведём тесты, оценим возможности решения, выполним работу.
Оставить заявку на разработку 3D
Как к Вам обращаться
Ваше сообщение*
Как с Вами связаться
Вы подтверждаете, что ознакомились с положением о защите персональных данных и даете согласие на их обработку*
В порядке и на условиях, определённых Федеральным законом от 27 июля 2006 года № 152-ФЗ «О персональных данных». Согласие на обработку следующих моих персональных данных: фамилии, имени, отчества, года, месяцы, даты и места рождения, пола, гражданства, места жительства, в том числе сведения о регистрации по месту жительства, месту пребывания, места работы, социального положения (статуса), реквизитов документа, удостоверяющего личность. Обработка моих персональных данных Оператором осуществляется исключительно в целях защиты моих прав на регистрацию доменного имени, услуги по созданию и продвижению сайтов, услуги по размещению рекламных компаний в интернет и обеспечения соблюдения законов и иных нормативных правовых актов, связанных с предоставлением этих услуг.
Я предоставляю Оператору право осуществлять следующие действия с моими персональными данными: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, блокирование, уничтожение персональных данных, передача персональных данных между:
— Оператором ООО «КликОН», в котором мне будут осуществляться вышеперечисленные услуги ;
— Оператором АНО «Региональный Сетевой Информационный Центр», осуществляющим непосредственную регистрацию доменных имён ;
Мне гарантируется конфиденциальность моих персональных при обработке их и хранении не дольше срока, предусмотренного нормативными актами.
Настоящие согласие данное мной и действует бессрочно.
Я оставляю за собой право отозвать своё согласие посредством составления соответствующего письменного документа, который может быть направлен мной в адрес Оператора по почте заказным письмом с уведомлением о вручении либо вручен лично под расписку уполномоченному представителю Оператора.10 передовых способов использования 3D в веб-дизайне │Elementor
Очаруйте своих пользователей 3D-дизайном на своем веб-сайте и улучшите конверсию.
3D-веб-дизайн может помочь вам выделиться, создать более привлекательный интерфейс и вызвать эмоции, но к нему нужно подходить ответственно, чтобы избежать проблем с производительностью. Узнайте, как.
В 3D или не в 3D? Это вопрос, который мы должны задать себе.
3D-технологии и дизайн прочно вошли в нашу жизнь. Это в фильмах, играх, телешоу, смартфонах, принтерах, AR и VR.
Но есть ли ему место в веб-дизайне? И если да, то в какой степени? Можем ли мы создать веб-сайт полностью в 3D? Возможно нет.
Во-первых, большинство веб-сайтов не должны ощущаться как захватывающий мир, в котором можно заблудиться. Если цель состоит в том, чтобы побудить посетителей к действию, вам нужно разработать для них простые пути.
Еще вопрос производительности. Ваш телевизор может не быть перегружен 3D, но это может сказаться на веб-хостинге, особенно если 3D-рендеринг создается внешним плагином или API. И каждые 9Согласно последним данным, когда речь идет о ваших посетителях, на счету 0013 доля секунды.
Но это не значит, что 3D не место в веб-дизайне. На самом деле, с 3D можно сделать очень многое, и с ним можно работать в самых разных направлениях.
Давайте посмотрим, какие виды 3D лучше всего подходят для Интернета, как с ними работать, а затем посмотрим на 10 замечательных примеров веб-сайтов, использующих 3D сегодня.
Содержание
- Что такое 3D в веб-дизайне?
- История 3D-веб-дизайна
- Преимущества 3D в веб-дизайне
- 10 потрясающих примеров использования 3D в веб-дизайне
Что такое 3D в веб-дизайне?
Все средства трехмерного веб-дизайна заключаются в том, что мы размещаем объекты вдоль осей x, y и z.
Самая распространенная интерпретация 3D-дизайна — это то, что мы видим на сайте Apple:
Стили iPhone 12 на этом главном изображении существуют в трех измерениях. В графике нет движения, и тем не менее мы все еще видим, что в ней есть глубина.
Тем не менее, главное изображение на веб-сайте Ричарда Санчо также является тем, как выглядит веб-дизайн в 3D:
Нет видимых 3D-объектов.
Однако ясно, что плавающие (и интерактивные) цветные шары за текстом перемещаются в другой плоскости (или плоскостях).
Таким образом, в отличие от 2D-веб-дизайна, когда вы делаете свои проекты и объекты шире или выше, 3D-веб-дизайн позволяет добавлять им глубину, а также перемещать их вперед и назад.
История трехмерного веб-дизайна
В 1950-х и 60-х годах был разработан ряд компьютерных программ, способных выполнять трехмерное компьютерное моделирование. Программное обеспечение Robot Draftsman Ивана Сазерленда, также известное как Sketchpad, было первым, когда-либо использовавшим графический интерфейс пользователя (GUI), и оно проложило путь для автоматизированного проектирования (CAD).
Хотя сегодня САПР в основном используется для создания 3D-визуализации таких вещей, как здания, продукты и другие физические объекты, легко увидеть, как эти более ранние технологии проложили путь для современного 3D-дизайна веб-сайтов.
Одна из причин, по которой мы не видим, чтобы 3D доминировало в списках тенденций веб-дизайна, заключается в том, что его не всегда было так просто создать.
1994 — Представлен язык разметки виртуальной реальности (VRML)
VRML появился на заре Интернета. Это формат файла, также называемый «миром» (.wrl), который позволяет дизайнерам создавать трехмерные объекты и сцены.
1997 — Flash вступает в игру
Чтобы использовать трехмерную графику и анимацию Flash на веб-сайте, разработчик должен был получить лицензию на программное обеспечение Flash, закодировать его с помощью ActionScript, а затем встроить на веб-сайт. Это потребовало много работы, а также серьезно сказалось на времени загрузки веб-сайта, особенно в дни коммутируемого доступа.
2001 — X3D становится преемником VRML
Сегодня X3D является бесплатным открытым стандартом, поддерживаемым консорциумом Web3D. Его можно использовать для различных 3D-приложений: САПР, геопространственной визуализации, анимации человека, дополненной и виртуальной реальности, 3D-печати, медицинского обучения и, конечно же, веб-дизайна.
Более того, он не зависит от плагина для запуска в браузере.
2010 — Скевоморфизм набирает популярность
Скевоморфизм был тенденцией дизайна, используемой для того, чтобы интерфейсы и/или их элементы выглядели как реальные объекты, на которых они основаны. Эта тенденция продлилась недолго, поскольку не давала много дополнительных преимуществ, кроме крутого вида. В результате плоский дизайн доминировал в тенденциях веб-дизайна в течение следующих нескольких лет.
2011 — Представлен WebGL
WebGL — это бесплатный API, который позволяет дизайнерам и разработчикам создавать трехмерную графику, которая работает в большинстве современных веб-браузеров. Единственная проблема с WebGL заключается в том, что его сложно использовать. Вы должны использовать JavaScript, Java или Objective C вместе с GLSL для программирования 3D-графики.
2012 — Опубликована статья NYT Snow Fall
Параллаксный веб-дизайн уже давно используется в дизайне видеоигр.
Однако только в 2012 году, когда New York Times опубликовала свою мультимедийную статью о снегопаде, мы действительно начали видеть, как эффект искусственной трехмерной прокрутки закрепился в Интернете.
2014 — Google разрабатывает свою систему дизайна материалов
Дизайн материалов был создан по ряду причин. Однако одним из его самых больших вкладов в веб-дизайн было то, что он придал странице глубину и тактильность, что помогло улучшить удобство использования. Хотя у системы дизайна были свои проблемы, она оставила неизгладимое впечатление на мир веб-дизайна, и ее частички все еще можно увидеть сегодня в многоуровневом дизайне 2.0 и затенении.
2021 — Выбери свой яд
На сегодняшний день существует ряд приложений, которые позволяют веб-дизайнерам создавать индивидуальные и сложные 3D-проекты: также различные технологии AR и VR, которые вы можете использовать для создания 3D-рендеринга для этих конкретных случаев использования.
Если вы не пытаетесь создавать целые трехмерные миры, рассмотрите возможность использования инструментов стиля Elementor, чтобы добавить глубины компонентам вашего веб-сайта, и эффектов движения, чтобы оживить ваши проекты.
Преимущества 3D в веб-дизайне
Тенденции в дизайне приходят и уходят. Итак, вы должны спросить себя: является ли 3D техникой дизайна или тенденцией, в которую стоит инвестировать?
Вот несколько причин, по которым вы можете начать использовать его в своей работе:
Отличается от плоского дизайна.
Просто убедитесь, что это сделано со вкусом и в соответствии с принципами веб-дизайна. Если 3D-сцены или объекты не имеют смысла и используются только как уловка для привлечения внимания, они сделают ваш сайт выделяющимся — только по неправильным причинам.
Вы можете создавать более привлекательные интерфейсы
Существуют различные способы использования 3D в веб-дизайне. Например:
- Для создания у посетителей впечатления от погружения в мир, когда они впервые заходят на сайт
- Для оживления самых важных графических изображений
- Для предоставления посетителям более подробного обзора или 360-градусного просмотра продуктов
Автор Переместив нужные элементы веб-дизайна на третью плоскость, вы создадите более привлекательный опыт для своих посетителей.
Прикасаясь к чувствам посетителей, вы подключаетесь к их эмоциям
Наши чувства тесно связаны с нашими эмоциями, и осязание ничем не отличается. Хотя посетители, очевидно, не могут физически прикоснуться к 3D-сайту, он, тем не менее, дает ощущение тактильности, чего не может плоский дизайн.
Поскольку прикосновения часто помогают людям чувствовать себя более связанными с другими и углубляют их опыт взаимодействия с миром, мы можем предположить, что взаимодействие с 3D-элементами на веб-сайте также может приблизить посетителей к бренду. Даже если это не так, тактильный характер дизайна оставит у них неизгладимое впечатление.
Это может улучшить вашу оптимизацию коэффициента конверсии
3D веб-дизайн имеет массу практических применений. Например, вы можете добавить на веб-сайт 3D-визуализацию продуктов, свойств и событий.
Мы уже знаем, как трудно потребителям покупать определенные дорогостоящие товары в Интернете, не увидев их лично.
Добавив их реалистичные изображения на веб-сайт, вы поможете им принять решение быстрее и проще. А с более уверенными и довольными покупателями вы, вероятно, получите больше конверсий.
10 удивительных примеров 3D-дизайна в веб-дизайне
Даже если 3D-дизайн сейчас не везде в Интернете, это определенно стоящая тенденция, если вы найдете правильный способ реализовать ее для веб-сайта вашего клиента.
Если вы ищете вдохновения, ознакомьтесь со следующими творческими примерами 3D-дизайна в веб-дизайне. Когда вы закончите, перейдите к нашему анимированному веб-сайту. Не во всех примерах используется 3D, но те, которые используются, нельзя пропустить!
1. Роберт Бюргель
Мы уже второй раз упоминаем в этом блоге агентство графического дизайна Роберта Бюргеля. Впервые он появился в нашем списке лучших сайтов-портфолио. На этот раз это из-за исходного изображения героя на главной странице.
На черном знамени вырезано имя Роберта.
Эти буквы видны только тогда, когда за ними на заднем плане проплывают неоновые рыбы. Это дает главному изображению ощущение, что вы смотрите на аквариум, и это дизайн, который вы не скоро забудете.
2. Академия Flux
Академия Flux — это место, где веб-дизайнеры учатся проектировать и совершенствуют свои навыки с помощью курсовой работы. Хотя на домашней странице есть несколько 3D-график, первая из них самая интересная.
Когда посетитель прокручивает страницу вниз, все плавающие значки, связанные с дизайном, падают вниз в голову статуи. Это действительно хорошая метафора того, чем занимается компания.
Что еще примечательно в этом примере, так это то, что 3D-графика относительно проста. Плоские иконки. Статуя. Иллюстрированные сферы и лица. Это просто показывает вам, что с правильными эффектами затенения и движения вы можете получить очень интересный 3D-опыт.
3. Dasher & Crank
Не только креативные агентства могут использовать 3D.
Просто взгляните на это изображение героя на сайте Dasher & Crank.
Много раз на веб-сайтах ресторанов вы видите их блюда и предметы, сфотографированные сверху, что придает им плоский вид. Даже те, что видны со стороны, часто не имеют ощутимого реализма, потому что они сфотографированы в контексте чьих-то рук, тарелки или ресторанного фона.
Но на этом сплошном розовом фоне сэндвичи с печеньем-мороженым красиво выделяются как трехмерные объекты — благодаря чему они выглядят достаточно хорошо, чтобы их можно было протянуть и откусить.
4. Контра «Государство Независимости 2021»
Вспомните, когда вы в последний раз садились читать отчет или электронную книгу в Интернете. Может быть болезненно пытаться продираться через абзац за абзацем, пытаясь найти данные, которые наиболее важны для вас. Кроме того, многие из них сохраняются в формате PDF, что может быть случайным.
Но отчет Contra «Состояние независимости 2021» — отличный пример того, как 3D может изменить процесс чтения и обучения, если вы используете его в достаточном количестве.
Повсюду есть небольшие дозы 3D-объектов, таких как капли и монеты. Однако большая часть 3D-рендеринга используется для визуализации данных и цитат фрилансеров в отчете.
5. Самсунг
Apple — не единственная компания, выпускающая смартфоны, использующая 3D для привлечения внимания к своей продукции. Целевая страница Samsung для Galaxy Z Fold оживляет продукт с самой секунды, когда кто-то заходит на сайт.
Обратите внимание, что изображение на начальной странице загрузки представляет собой вращающееся трехмерное изображение телефона. Когда они попадут на сайт, посетители увидят реальный телефон со всех сторон, а также то, как он выглядит, когда открывается и закрывается.
Покупателям, интересующимся, как будет выглядеть складной смартфон, не нужно будет идти в магазин, чтобы выяснить это, так как 3D-рендеринг прекрасно их представляет.
6. Музей Мира
Британский музей в партнерстве с Google Cultural Institute создал этот микросайт для Музея мира.
Он был разработан с использованием WebGL компанией WEIR+WONG и представляет собой поистине уникальный способ визуального проектирования временной шкалы и размещения в ней большого количества данных.
У музея по-прежнему есть постоянный сайт, на котором посетители могут узнать больше о своих коллекциях и экспонатах. Однако вместо того, чтобы демонстрировать предметы из своих коллекций на веб-сайте, эта трехмерная временная шкала помещает их в категорию и временные рамки, из которых они происходят.
Вместо того, чтобы заставлять посетителей пассивно следить за временной шкалой или просматривать ваш инвентарь, трехмерное представление, подобное этому, превращает его в более активный опыт.
7. Шоколадница KITKAT
The KITKAT Chocolatory — это веселый и захватывающий 3D-сайт. И это совершенно не похоже на другие сайты KITKAT. Почему это? Ну, это не сайт для людей, которые хотят узнать больше о бренде KITKAT и его продуктах.
Бразильские покупатели, которые любят продукцию KITKAT, могут ознакомиться и заказать новейшие шоколадные конфеты от кондитерской компании.
Они также могут украсить упаковку своей продукции своими личными фотографиями.
Такой бренд и опыт заслуживают уникального трехмерного мира.
8. Капсулин Zero Impact
С самого начала очевидно, что мы должны следить за иллюстрацией и нарисованным от руки эскизом кофейной капсулы, когда она падает на веб-сайт Capsul’in Zero Impact. Это блестящее 3D-изображение, созданное дизайнерами Index.
Сначала мы видим его как иллюстрированную кофейную капсулу. Вскоре после этого дизайнер лишает его маркировки и, в конце концов, анализирует каждую из его отдельных частей. Вместо того, чтобы использовать 3D-капсулу в качестве бесполезного дизайнерского решения, ее внешний вид меняется по мере того, как история продукта и его характеристики раскрываются на странице.
9. TAG Heuer
TAG Heuer — бренд, известный своими стильными часами. Хотя существует множество способов сделать веб-сайт стильным и элегантным, ничто не сравнится с демонстрацией ваших продуктов во всем их великолепии в 3D.
Именно этим и занимается TAG Heuer.
На этих фотографиях мы видим красивые часы в рамке на абсолютно белом и черном фоне. В некоторых случаях это просто фото часов. В других присутствует небольшой эффект параллакса. Есть также случаи, когда мы видим часы в движении, например, когда застежка открывается и закрывается.
Это не 3D-техника, которую могут использовать только люксовые бренды. Небольшие бренды также могут использовать 3D-визуализацию продуктов для более эффективной продажи своей продукции в Интернете.
10. Мазда
То, что сделала Mazda, очень похоже на то, что делают компании электронной коммерции, меняя цвета фотографий продуктов в зависимости от выбора клиента. Тем не менее, Mazda не просто позволяет клиентам увидеть свои настройки на 2D-модели.
Этот 3D-визуализатор позволяет клиентам перемещаться снаружи автомобиля, а также вращаться внутри, чтобы поближе рассмотреть модель и то, как на нее влияет выбор цвета.
В любое время, когда у вас есть сайт, на котором продается дорогой продукт или даже сайт, на котором покупателю действительно нужно его опробовать перед покупкой, подобный 3D-инструмент для покупок будет огромным преимуществом.
Используйте 3D-веб-дизайн с умом, чтобы поразить своих посетителей
Неважно, насколько велики или малы ваши 3D-проекты. Самое важное, что нужно помнить при использовании 3D в веб-дизайне, это то, что оно улучшает опыт. Вы хотите, чтобы посетители были поражены тем, что они увидели, и не задавались вопросом, почему они потратили несколько минут на просмотр 3D-анимации только для того, чтобы понять, что важные вещи находятся внутри веб-сайта.
Также помните о том, как 3D влияет на производительность ваших веб-сайтов. Если посетителям придется ждать более нескольких секунд только для того, чтобы веб-сайт загрузил всю вашу 3D-работу, они могут никогда ее не увидеть.
Тем не менее, сегодня мы видели несколько удивительных примеров веб-дизайна в 3D. Вдохновитесь тем, что они сделали, и вы сможете придумать что-то действительно замечательное для своих клиентов, а также полезное и интересное для их посетителей.
Ищете свежий контент?
Получайте статьи и идеи из нашего еженедельного информационного бюллетеня.
Вводя свой адрес электронной почты, вы соглашаетесь получать электронные письма Elementor, в том числе маркетинговые электронные письма,
и соглашаетесь с нашими Условиями и положениями и Политикой конфиденциальности.
Бьянка Белман-Адамс
Бьянка является директором по контенту в Elementor и имеет более чем 10-летний опыт работы в области брендинга, операций, маркетинга, дизайна и стратегии. Она родом из Южной Африки, обладательница бронзовой премии Loerie Award и любит все, что связано с Marvel и «Звездными войнами».
Вам также может понравиться
Комментарии
Запустите свой облачный веб-сайт
10 потрясающих примеров 3D-сайтов (и как они создаются)
Ваш браузер не поддерживает это видео чтобы начать работу с 3D в веб-дизайне. Плоский дизайн когда-то доминировал в Интернете. Его стандартные сетки текста и визуальных элементов, безусловно, делают его практичным и удобным для пользователя подходом, но веб-дизайн может быть намного больше, чем продуманное расположение столбцов и строк.
Добавление 3D-элементов к вашему веб-дизайну — отличный способ создать незабываемый интерактивный опыт, а современные инструменты веб-дизайна без кода теперь доступны как никогда раньше. Мы собрали несколько интересных примеров 3D-сайтов, чтобы показать, как применять эффект, а также различные инструменты и методы, которые можно использовать для его воссоздания.
Использование 3D на вашем веб-сайте
Трехмерная анимация и другие трехмерные изображения могут многое добавить. Помимо создания мгновенной интерактивности и интриги в вашем дизайне, они помогают привлечь внимание к визуальным элементам и тексту, на которых вы хотите, чтобы посетители сосредоточились. Важные части веб-сайта, такие как обмен сообщениями, информация о продукте и другая информация, могут быть развернуты в трехмерном виде, который намного интереснее и увлекательнее, чем стандартный плоский веб-дизайн.
Тем не менее, стоит отметить, что, хотя 3D-сайты хорошо работают при высоких скоростях Интернета на современных ноутбуках и мобильных устройствах, они могут немного глючить на более медленных и старых устройствах.
Веб-сайт не обязательно должен быть полностью трехмерным — вместо того, чтобы создавать полностью захватывающий трехмерный мир, вы все равно можете экономно использовать трехмерные элементы для достижения большого эффекта.
[изображение/графика, относящиеся к вышеуказанному]
Хотя большая часть Интернета укладывается в аккуратные рамки двух измерений, 3D-сайты выходят за рамки сетки, создавая захватывающий опыт, который кажется захватывающим и новым.
Essential 3D Website Tools and Resources
Независимо от того, являетесь ли вы экспертом по анимационному дизайну, хорошо разбирающимся в JavaScript и React, или кем-то, кто более комфортно работает в пространстве без кода, существует множество различных приложений, которые вы можете использовать для создания трех -размерные веб-дизайны. Вот несколько наиболее популярных приложений для трехмерного моделирования, которые стоит изучить:
- AutoCAD
- Blender
- SketchUp
Vectary
Многие дизайнеры также считают, что библиотеки моделирования необходимы для создания многомерных веб-сайтов.
Некоторые из достойных 3D-библиотек, которые стоит проверить, включают cgTrader, SketchFab, 3DExport и Vue.js. Вы можете просматривать некоторые из них непосредственно внутри Vev или загружать свои собственные файлы . файлы glb с по позволяют легко создавать трехмерные веб-приложения .
Конечно, есть способы создать иллюзию объемности без создания сложной графики. Компенсация скорости прокрутки элементов, добавление теней и работа со светом — все это способы создания 3D-визуализации. С помощью этих методов можно подделать размерность: 910 Потрясающие примеры 3D-сайтов
Давайте заглянем за пределы плоского пространства традиционного веб-дизайна и покажем вам, что возможно с несколько примеров 3D-сайтов.
[изображение/графика, относящиеся к вышеизложенному]
Chirpley
Chirpley связывает бренды с микроинфлюенсерами через свою торговую площадку на основе искусственного интеллекта. Они предлагают нетрадиционный способ маркетинга, и этот веб-сайт компании освобождается от условностей благодаря дизайну, полному трехмерных мультяшных изображений.
На этом сайте появляется красная птица. Этот причудливый пернатый талисман находится в центре их фирменного стиля, и его внешний вид повсюду уравновешивает более техническую информацию, объясняющую, как работает их продукт.
Ваш браузер не поддерживает это видео.Благодаря красочному дизайну, наполненному игривыми визуальными эффектами, Chirpley рассказывает о сложностях того, что они делают, так, что это кажется забавным. Если вы ищете примеры 3D-сайтов, в которых много брендинга, вам следует отправиться на Chirpley.
Восхищайтесь, удивляйтесь
Это путешествие по веб-сайту электронной коммерции De Bijenkorf начинается с пчелы. Искры мерцают, когда он парит и мчится через густой лес, достигая спрятанных сокровищ, которые являются их продуктами. За большей частью этого дизайна стоит WebGL, библиотека веб-графики Javascript, предназначенная для интерактивных трехмерных изображений в Интернете.
Ваш браузер не поддерживает это видео Это всеохватывающий опыт, основанный не только на трехмерных изображениях, которые все глубже и глубже погружают вас в лес и к предметам, которые они продают, но и на звуке.
Звук кваканья лягушек, щебетания насекомых и журчания воды дополняет атмосферу леса.
De Bijenkorf представляет собой не просто веб-сайт розничной торговли, но предлагает захватывающий пользовательский опыт. Это был один из самых сюрреалистичных 3D-сайтов, которые мы нашли, и мы надеемся, что у вас также будет возможность испытать его магию.
Uplinq.ai
Uplinq модернизирует бухгалтерский учет за счет автоматизации. По всему этому пространству изображения машин меняются местами при прокрутке. Благодаря блестящему металлу, трубам, шестерням, роботизированным рукам и другим движущимся частям эти анимации напоминают о технологиях и механизации, что идеально вписывается в то, что делает Uplinq.
Нередко веб-сайты компаний SaaS имеют стандартную сетку с несколькими разбросанными кнопками призыва к действию. Использование Uplinq трехмерных изображений придает этому дизайну футуристический пользовательский интерфейс, который отличает его от других.
Peter Tarka
Peter Tarka специализируется на трехмерных иллюстрациях, полных сложных деталей, приятных глазу цветов и форм.
Он работал с некоторыми крупными клиентами, включая Spotify и Electronic Arts, а также делал анимацию для Uplinq.ai в нашем последнем примере. Это витрина, полная замечательных цифровых изображений и иллюстраций, демонстрирующая возможности использования фреймворков веб-разработки, таких как Next.js, и программного обеспечения для анимации Cinema 4D.
Замечательно то, что Питер не обрушивает на вас весь свой художественный талант сразу. При наведении курсора на каждый квадрат проекта материализуется предварительный просмотр. Эти проблески демонстрируют его работу быстро и непосредственно.
Имея портфолио, очень важно демонстрировать свои лучшие работы и чтобы они были постоянными. Питер приходит с фантастической галереей проектов, каждый из которых отражает его таланты и чувство воображения. Если вы иллюстратор, UX-дизайнер или работаете в какой-либо другой визуальной области, портфолио Питера — один из самых художественных примеров 3D-сайтов, которые мы видели, и вам стоит ознакомиться.
Enric Moreu
Голубое небо с угловатыми облаками и одинокая фигура, стоящая на парящем участке земли, открывает это цифровое резюме для Eric Moreu . Прокрутка вниз вращает этот парящий остров, приводя вас к следующей красочной сцене, подвешенной в воздухе. Там не так много текста или объяснений, но каждый раздел сообщает что-то о его прошлом и технических навыках с помощью умных иллюстраций. Если вы ищете примеры 3D-сайтов, использующих Blender, это отличный пример визуальных элементов, которые вы можете создать с его помощью.
Clou
Архитектура объединяет физические формы с пространством. Этот веб-сайт для китайской архитектурной фирмы Clou Architects работает с формой и пространством в цифровой сфере с помощью этой вращающейся карусели проектов. Микровзаимодействия идут впереди, и при наведении курсора на каждый слайд он смещается, и в центре появляется увеличенная фотография.
Clou Architects не так полностью иммерсивны, как другие примеры 3D-сайтов, которые мы обсуждали.
Хотя этот дизайн предлагает только трехмерные визуальные эффекты на первом экране, это введение позволяет раскрыть их архитектурную работу изобретательным и привлекающим внимание способом.
Портфолио Kamboko
Благодаря облегченной цветовой палитре, сглаженным краям и плавной анимации, это портфолио дизайна от Kamaboko мягко направляет вас в трехмерное представление студенческого жилого пространства. Опыт Камабоко в таких приложениях, как WebGL, анимация GSAP и Blender, ярко проявляется в этом иммерсивном портфолио. Нам нравится видеть примеры 3D-сайтов, которые отправляют вас в путешествие, и Kamaboko преуспевает в этом дизайне, богатом деталями.
Он начинается с широкоугольного снимка, а прокрутка приближает вас к нему. Хорошо использовать перспективу, когда ваш взгляд меняется, когда вы исследуете это пространство и узнаете больше о Камабоко как о человеке и дизайнере.
Ваш браузер не поддерживает это видео Если вы визуальный дизайнер, то, как вы создаете свой собственный веб-сайт, должно свидетельствовать о ваших навыках и талантах.
Одного этого портфолио достаточно, чтобы продемонстрировать суперспособности Камабоко как дизайнера.
Cat Genius
Это, безусловно, один из самых творческих и забавных примеров 3D-сайтов, с которыми мы сталкивались. Cat Genius вдохновленная дополненной реальностью игра от компании по производству кормов для домашних животных Opti Life, в которой вы управляете котом Симбой и ищете миску с едой. По пути вам будут задавать вопросы о кошках, и каждый правильный ответ приближает вас к обеду. Если вы дойдете до конца, вы получите код скидки.
Мы поклонники брендов, которые находят творческий подход, предлагая своим клиентам такие вещи, как коды скидок. Opti Life превращает получение одного из них в образовательный и развлекательный опыт.
SBS
Этот захватывающий интерактивный дизайн для Sopra Banking Software с изображением города, сияющего фиолетовым, желтым и синим, напоминает начало научно-фантастического фильма. Эта визуальная эстетика так хорошо отражает сферу финансов и высоких технологий, в которой они работают.
Пролетая над зданиями, вы попадаете на разные ориентиры. Каждый из этих пунктов объясняет что-то, связанное с банковским делом и программным обеспечением Sopra. Существует множество контента, и это анимированное путешествие разделено таким образом, чтобы его было легко исследовать и испытать.
D2’s 30 До 30 лет
Как уже упоминалось, использование функций 3D-дизайна на вашем веб-сайте не должно быть всеобъемлющим. Тонкие трехмерные элементы могут создать не меньшее впечатление. Этот пример сделан в Веве D2 для их 2022 30 До 30 лет отчет открывается анимированным 3D-глобусом с изображениями, демонстрирующими номинантов.
Помимо включения одной из самых оригинальных каруселей 3D-изображений, которые мы когда-либо видели, включение кликабельных горячих точек на фотографиях привлекает внимание пользователей с самого начала. Этот интерактивный подход позволяет вам раскрывать больше информации о номинантах, нажимая на горячие точки, создавая ощущение волнения, а также избегая слишком большого количества текста.