Нетрадиционная веб-навигация, иммерсивный UI/UX

Беатрис Баззан, Джованни Ковре, Лоренцо Ди Леонардо, Франческа Гранзотто

1 — Портфолио Антона Чалова

http://chalovak.tv

На сайте собраны некоторые работы Антона Чавлова, старшего арт-директора группы BBDO, расположенной в Москве.

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

Основной технологией, используемой для создания этого эффекта, является Socket.IO, библиотека JavaScript, которая обеспечивает двустороннюю связь между веб-клиентом и сервером в реальном времени и работает в сочетании с Node.js.

2 — ТИМ | История подключения

http://archiviostoricoexperience.gruppotim.it/en/

TIM|The History of Connection — проект, созданный Monogrid, цифровой интерактивной студией, базирующейся в Милане. Веб-сайт был создан как цифровая версия «Archivio Storico Telecom», физического архива, в котором собрано документальное наследие итальянских телекоммуникационных компаний. Сайт представляет собой интерактивную хронологию, демонстрирующую технологические достижения, лежащие в основе эволюции телекоммуникаций.

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

Компания Monogrid разработала веб-сайт в WebGL, чтобы предложить плавный и захватывающий опыт работы на настольных компьютерах, мобильных устройствах и планшетах. На некоторых объектах было реализовано физическое моделирование в реальном времени, чтобы оживить их и предложить увлекательное взаимодействие. Специальные звуковые эффекты улучшают путешествие и вовлекают пользователя.

3 — Нулевой момент

http://moment-zero.com

Земле примерно 4,54 миллиарда лет. На протяжении веков он подвергался тектоническим движениям и землетрясениям. Геологическая служба США (USGS) записывает всю сейсмическую активность по всему миру с 1970 года. Нулевой момент — это погружение в эти данные, которые абстрактно визуализируются с использованием виртуальной или 360°. Данные извлекаются из веб-каталога землетрясений Геологической службы США с помощью API, а реализация Charcoal только для фреймворка запускается за кулисами, чтобы передать пользовательский набор данных в пользовательский интерфейс. WebGL и гироскоп используются для создания игрового опыта. Внутри сайта также используется библиотека jQuery.

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

4 — Кочевое племя

https://2019.makemepulse.com

Этот сайт представляет собой новогоднюю открытку, разработанную агентством makemepulse в виде интерактивной сказки. Интерфейс и оформление полностью подчинены визуальному стилю модерн. Графический дизайн полностью выполнен в 3D и черпает вдохновение из правил мира комиксов.

Сказка состоит из 6 основных глав:

  • Incipit — в воображаемом мире племя жило в мире с природой, но год заканчивается и племя вынуждено переселиться на другой остров.
  • Последние штрихи — племя наносит последние штрихи фруктам и цветам земли.
  • Прощальные слова — можно услышать последние звуки того мира.
  • Путешествие — пользователь может следовать за племенем, управляя величественными птицами.
  • Новое приключение — краткий обзор новой земли.
  • Поздравительная открытка — наилучшие пожелания в новом году.

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

Опыт в основном состоит из WebGL и WebAudio, а для внешней интеграции используется фреймворк vue.js.