Использование трехмерной анимации на сайтах — один из основных трендов web-дизайна. Мы выбрали топ-5 сайтов с удачными визуальными решениями, которые помогут удержать внимание пользователя.
5. 3D-рендер реалистичных объектов. Resonant Link
Сайт компании, которая занимается разработкой и продажей экологически безопасных аккумуляторов.
Благодаря минимализму в дизайне остальных разделов внимание пользователя концентрируется на анимациях. На них же завязаны все внутренние страницы сайта.
С помощью анимированных 3D-моделей производитель показывает не только процесс использования аккумуляторов, но и их расположение в различных девайсах. Грамотная работа со слоями и тенями и высокая детализация делает объекты реалистичными.
4. Эффект присутствия. Borderless
Для презентации своих VR-очков Borderless во многом опирается на приемы, используемые компанией Apple. Они не рассказывают о продукте, а показывают его внешний вид, функции и возможности.
Во главе угла стоит фотореалистичное изображение очков. Их можно и рассмотреть, и «опробовать» в действии: при скролле страницы проигрывается анимация, во время которой очки «надевают» на пользователя и погружают в VR пространство.
3. Виртуальная экскурсия. Pilot.Auto
Оборудование для автопилота автомобилей — продукт, про который сложно рассказать обычному пользователю, не углубляясь в технические тонкости. Зато можно визуализировать.
При скролле страницы проигрывается сцена, наглядно показывающая работу автопилота в городской среде. А демонстрация поведения автомобиля в различных ситуациях (например, когда дорогу переходят пешеходы) показывает безопасность технологии.
Схематичное изображение объектов дает возможность наблюдать за процессами, происходящими на экране. Для акцента на важных для повествования элементах сайт использует контрастные яркие цвета, выбивающиеся из общей цветовой гаммы.
2. Макро эффект. B&VIIT
Сайт разработанный корейской компанией, занимающейся диагностикой болезней глазного яблока с помощью искусственного интеллекта.
Анимации на сайте не только визуализируют процессы, которые происходят в процессе диагностики, но и демонстрируют высокий уровень профессионализма работников компании.
В основе оформления сайта — изображения маленьких объектов крупным планом и внимание к деталям: начиная от игры света в каплях воды, заканчивая радужкой и зрачком, реалистично реагирующих в процессе «проверки» глаза.
Анимация в режиме реального времени. Unseen
Unseen занимаются созданием моушн-дизайна и свой сайт оформили в соответствии со своим направлением.
С большинством элементов на странице можно взаимодействовать: камера меняет угол в зависимости от движения курсора; текст меняет цвет и форму при наведении; на воде остаются реалистичные разводы.
Для галереи используется эффект параллакса. С его помощью пользователь продвигается по «коридору» из которого можно «провалиться» в кейс проекта, представленного большим количеством анимированных экранов.
Понравилась подборка? Если хотите узнать, как создаются подобные эффекты, напишите в комментариях. Мы подготовим обзор сервисов и решений, которыми пользуются наши дизайнеры.
Если у вас есть задача разработать сайт или мобильное приложение, то напишите в Телеграм, мы это обсудим: https://t.me/sashadzen
Заказать разработку сайта, веб-сервиса или мобильного приложения на нашем сайте: https://vk.cc/cuglQZ
Партнерская программа, где мы платим от 10 000 до 200 000 рублей за контакты тех, кому нужен дизайн или разработка: https://vk.cc/cuglXT
Телеграм-канал Саши Комбарова про управление агентством, проектами, людьми: https://t.me/sasha_kombarov
Телеграм-бот, который бесплатно выдает чек-листы, памятки и регламенты по управлению, маркетингу, аналитике, дизайну и разработке: https://t.me/regulations_pyro_bot
Я хочу узнать, как это влияет на продажи. Есть цифры? Например, вот был раньше сайт Х по продаже аккумуляторов с такими-то показателями, потом мы сделали 3D-визуализации работы аккумуляторов, с помощью которых показали, почему они надежнее чем у конкурентов и дольше работают — показатели стали такими-то.
А то вы красивых картинок намоделите, поахаете, премии друг другу вручите, а что бизнесу с этого?
Наверное, тут больше важен первоначальный хайп, PR.
Либо, если вы — студия, которая делает подобные эффекты на заказ, то иметь такое на сайте — must have.
Помню, что пару-тройку лет назад Apple форсил 3D-модели ноутов и Mac Pro на сайте, которые можно «примерить» на столе и под ним, а IKEA — диванов и прочей мебели, чтобы понять, как она встанет по месту.
Но, судя по тому, что из конкурентов массово никто подобное не внедрил, пользуются такими фишками единицы покупателей и на продажи это влияет слабо.
Всегда умиляюсь, когда приводят в пример Эпол и других гигантов. Проблема в том, что 98% студий НИКОГДА не будут работать с продуктами хотя бы примерно такого уровня. Они будут делать сайты для заводов металлочерепицы, интернет-магазинов шин, логистических компаний ООО "Восток-запад". Отсюда и появился вопрос, есть ли кейсы, как 3D-свистоперделки реально меняют пользовательское поведение. Маккинзи я сам могу почитать, только какое это имеет отношение к нашим широтам?
Если к нам обратится ООО "Восток-запад" с запросом на 3d визуализацию металлочерепицы, мы с удовольствием сделаем такой проект. И если статистика после реализации будет не под NDA, то напишем статью с исследованием изменения реальных показателей бизнеса)
Хайп и PR тоже можно использовать на пользу бренда.
Apple и IKEA помимо использования 3D моделей используют другие инструменты для продвижения бренда, которые не используют их конкуренты, однако это не говорит о том что они неэффективны.
Все зависит от амбиций конкретной компании и готовности к экспериментам.
Apple и IKEA к ним готовы.
Отличный вопрос, Федор.
На тему того, как дизайн влияет на продажи есть целое исследование, можно тут ознакомиться : https://www.mckinsey.com/capabilities/mckinsey-design/our-insights/the-business-value-of-design
От себя можем добавить, что помимо дизайна, нужно учитывать другие немаловажные факторы, которые влияют на продажи: как в целом происходит взаимодействие с клиентом, насколько быстро обрабатываются запросы, каким образом построена система продвижения сайта и т.д.
Мне ChatGPT такие ответы пишет.
ChatGPT учится на ответах пользователей, в том числе и на наших.
Прикольная подборочка. Больше всего сайт Borderless понравился. Залип)
Мы тоже залипли, пока делали подборку
Классные проекты! Представляю, сколько сил и времени было потрачено на их реализацию
Специально подсчитали вместе с дизайнерами, сколько в среднем занимает создание анимированного 3D-объекта для сайта.
Если берем уже готовую модельку, то на создание сцены можно потратить от 3 часов и более.
Если делаем все с нуля — не меньше 5 часов уйдет только на создание модели.
А мне казалось все намного проще и быстрее делается :0
Спасибо, что поделились!
Не за что, всегда рады поделиться полезной информацией)
бедные пользователи и их браузеры
Согласны, такие анимации сильно нагружают устройства. Именно поэтому остальной сайт зачастую делается в минималистичном стиле.
вауу анимации макросъёмки это что то невероятное
я все же залип...:3
Челлендж "не залипнуть" в данном случае просто невыполним)
Очень классные анимации, хочу так же научиться!
Что за сервисы?
В работе с 3D анимацией могут использоваться разнообразные сервисы. Самые простые можно попробовать сделать на сайте https://spline.design/. Если вас интересует реализм, то лучше обратиться к программе Blender. Уверены, у вас все получится!