Качаем насмотренность: что в сохранёнках у дизайнеров #9

Нетипичная подборка от дизайнеров Purrweb: сегодня смотрим только на сайты с 3D-иллюстрациями. Надевайте сине-красные очки и погнали!

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

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

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

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

Плоские элементы, как кнопки и текст, также повторяют логику нахождения в 3D-пространстве. В этом сайту помогают как анимация, так и параллакс скроллинг, при помощи которого мы путешествуем по второстепенным страницам.

Куда кликать: заходите на главную и следуйте инструкциям на экране.

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

Иллюстрации работают на позиционирование бренда и показывают пользователю, что мы не обычный сервис, а предлагаем что-то крутое и современное.

Куда кликать: на главную страницу.

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

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

Куда кликать: заходите на главную страницу и листайте к портфолио.

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

Куда кликать: на главную.

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

Куда кликать: на страницу этого шлема.

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

Куда кликать: посмотрите эту страницу.

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

Куда кликать: на главную страницу.