Выше спидран [прохождение на скорости] первых сцен истории "A Ve" на yakutsamuraiii.com/a_ve
КАК НАЧИНАЛОСЬ
КАК ЗАДУМЫВАЛ
КАК РЕАЛИЗОВАЛ
ДИЗАЙН-КОНЦЕПЦИЯ
ДИЗАЙН САЙТА
/// Опыт пользователя [UX]
/// Верстка
/// Контент
/// Интерфейс [UI]
ГЕЙМ-ДИЗАЙН
/// Механики
/// История, мир и персонажи
/// Пространство
/// Время
/// Головоломки
/// Баланс
/// Эстетика
САУНД-ДИЗАЙН
КАК НАЧИНАЛОСЬ
Несколько лет назад я придумал научно-фантастическую историю, вдохновившись первым cезоном "Love, Death + Robots" – короткометражные мультфильмы, где каждый эпизод создан в своем анимационном стиле.
Все началось с глупой шутки-рассуждения о возможном будущем, в котором может появиться машина времени, что может повлиять на прошлое. Шутка с годами превратилась в историю, которую я рассказывал близким и друзьям и хотел поделиться ею с еще большим количеством людей. Думаю, в основном это гики, цифровые художники, разработчики и дизайнеры, NFT-артисты и энтузиасты, маркетологи и просто любители креативного и залипательного.
КАК ЗАДУМЫВАЛ
Цель арт-проекта A Ve
рассказать сай-фай историю, показать ее, дать послушать и поиграться с ней тебе – читателю, который в процессе погружения станет зрителем, слушателем и участником. Для этого я синтезирую веб-дизайн с цифровыми артами, саунд-дизайном и гейм-дизайном. Возможно, по дороге ты найдешь вопросы, которые я не планировал задавать, и непонятно даже – нужно ли на них отвечать.
Задуманные концепции / технологии, что применяю
/ представление истории с помощью веб-дизайна, воплощенного в сайте с механикой "скролль, чтобы погружаться в историю и проигрывать ее анимированные сцены" [не для смартфонов, только компьютер].
/ расширение истории цифровыми артами [статичные, видео- и 3D] в формате коллекций NFT [в блокчейне Ethereum] с применением AR-технологии.
/ необычное погружение в историю в результате синтеза сайта и NFT-артов в одну большую композицию c помощью гейм-дизайна, балансирования "композиции" как игры и реализации таких ее элементов, как история, механики, мир, пространство, головоломки и др.
/ более глубокий опыт с саунд-дизайном – историю сопровождает концептуальный электронный саундтрек, созданный на аналоговых синтезаторах.
В результате хочу
/ подарить развлекательный аудио-визуальный опыт необычного формата любому [у кого есть компьютер].
/ устроить иммерсивную цифровую выставку NFT-артов на сайте с участием зрителя, когда с помощью веб-дизайна компьютер пользователя становится частью истории, как в сцене 1 "Are We On Yeddit?"*, когда выдуманный форум по скроллу цепляется к реальной панели управления браузера и многие начинают думать, что с их компьютером реально что-то происходит – можно увидеть на записи экрана ниже. Или когда история становится частью окружения зрителя с помощью AR с 3D-объектами для [почти] любого телефона с камерой .
*Yeddit – пародия на популярный форум Reddit, на котором пользователи публикуют новости, свои мысли, мемы и другой контент, создавая треды обсуждений, аналог русского пикабу.
/ провести интерактивную физическую выставку цифровых артов в Санкт-Петербурге на русском языке и дистанционно в другой точке света на английском, сделав историю более наглядной и понятной за счет иной подачи. Сделать это после выпуска всей 5-ой сцены первой части.
/ объединить артистов и художников со всего мира, сделав в коллабе с ними часть сцен истории [пятая сцена первой части и вся вторая часть].
/ дать фреш эйра NFT:
// реализовать необычную концепцию для NFT, объединив одной историей коллекции цифровых артов в NFT-галерее, где каждая коллекция соответствует одной из 10 сцен истории на анимированном сайте.
// исследовать явление NFT, которое многие считают умершим, хотя сама технология вместе с инструментами продолжает развиваться, пусть трэшовые картинки и хайповые коллекции [как и их отсутствие в последнее время] и подпортили репутацию этого токена.
Сейчас реже можно услышать про взлетевшие сгенерированные коллекции NFT наподобие известных обезьян "Bored Ape Yacht Club". И хотя концептуально бывает интересно увидеть сгенерированные изображения, как большую композицию из вариаций одного персонажа с разными модификациями, но обычно такие картинки по отдельности не представляют художественной ценности. Но существует также 1/1 NFT – 1 работа в 1 единственном экземпляре, которая аналогична физическому произведению "физического" художника, только в цифровом формате.
Цифровые артисты, которые контрактируют арты как невзаимозаменяемый токен [это и есть NFT] в сети блокчейн, могут дополнительно использовать разные возможности и технологии для создания, релиза, представления, продвижения и продажи своих работ. Одной из задач проекта является исследование этих возможностей.
КАК РЕАЛИЗОВАЛ
"A Ve" – это короткая графическая история из двух частей. В каждой части задумано по 5 сцен, т.е. суммарно 10 сцен во всей истории. Главным героем является пользователь, который запустил сайт интерактивного шоу www.yakutsamuraiii.com на компьютере и открыл первый эпизод i первого сезона – "A Ve. Part I".
В поисках интересного формата для представления истории я распределил ее между двумя платформами:
/ разработал сайт с текстом истории, музыкой и анимированными артами.
/ выпустил коллекции NFT-артов в цифровой галерее, которые содержат дополняющую [к сайту] графическую и текстовую информацию из мира истории.
"A Ve" - нечто среднее между историей и игрой, поэтому проект может быть сложно понять, проскроллив сайт без погружения в текст истории и арты [на сайте и в NFT-коллекциях]. Музыка создает полный задуманный опыт!
Для прохождения первой части истории потребуется ~ 30 мин погружения и знание английского [или установка на браузер расширения-переводчика, рекомендую DeepL].
Сайт нужно открыть на компьютере [опыт не для смартфонов] и скроллить, чтобы читать текст истории и погружаться в анимированные графические сцены – сцены проигрываются или собираются по действию "скролл". Часто для описания механики сайта использую "scrolly-telling" [игра слов "story-telling" и "scroll"].
Не спроста отделяю "проигрываются" от "собираются" – у сцен разная механика анимации, определяемая разными концепциями и арт-контентом. Сцену 4 "Are We...Where?" зритель скроллит, чтобы воспроизвести ее кадры один за другим, а сцену 2 "Are We In Sci-Fi Laboratory" скроллит, чтобы собрать ее по кусочкам, словно это бумажный театр или интерактивная детская книжка [кстати, именно этим и вдохновлялся, когда представлял]. Подробнее про анимации с примерами – позже в разделе "Дизайн сайта /// Контент".
Сцены на сайте истории создаются в разных стилях:
/ интерфейс сайта [или UX/UI],
/ анимэ,
/ ар-нуво,
/ 3D реализм,
/ наивный абстракционизм,
/ и другие!
Cценам на сайте соответствуют одноименные коллекции NFT-артов на сервисе Foundation.app. По философии и дизайну сервис скорее похож на стильную цифровую галерею с разными мирами со своими концепциями, артистами и коллабами, чем на классический марткетплейс для торговли NFT.
На текущий момент на сайте вышли 4 сцены [первой части] и первый кусочек ее 5-ой [финальной для первой части] сцены, а в галерее 6 из 20 NFT-артов из каталога первой части.
ДИЗАЙН-КОНЦЕПЦИЯ
Сайт, как и весь проект, несет в себе контраст и одновременно синтез классики и современности.
Классика представляется через угловатые формы и ахроматические цвета. Угловатость можно увидеть в шрифте Cinzel с засечками. Он используется для тайтла проекта "A Ve" и его последующих форм, например, "Are We", которая появляется во время скролла в начале истории. Ахроматические цвета – в темном фоне и белом цвете текста, заголовки отбрасывают свечение, которое через прозрачность переходит из белого в черный.
Современность преподносится через округлые формы и яркие неоновые цвета. Округлые формы – через шрифт Comfortaa для названия сцен и текста истории, а цвета – в розово-фиолетовом тайтле "Are We", фиолетовом цвете ссылок и самих графических сценах. Например, розовый и фиолетовый цвета являются частью дизайн-концепции форума Yeddit [в сцене 1 "Are We on Yeddit?"] и в них же сделан светящийся неоновый пол сай-фай лаборатории [в сцене 2 "Are We In Sci-Fi Lab?"] – видео ниже.
Классика и современность в проекте переплетаются друг с другом, как и угловатые формы шрифта тайтла "Are We" с его яркими неоновыми цветами или закругленный шрифт основного текста с его белым цветом [на темном фоне].
Дизайн-концепция была вдохновлена художественной составляющей заставки к сериалу "Новый Папа" Паоло Соррентино, где католические монахини в белых одеяниях танцуют у светящегося разными цветами неонового креста на темном фоне здания.
Таким образом черный фон сайта соответствует зданию, где нет света кроме неонового креста, а белый светящийся тайтл "A Ve" [становящийся по скроллу фиолетово-розовым] – этому самому кресту.
Шрифт названия сериала вдохновил на подобранный для "A We".
Цвета взяты из айдентики производителя сериала.
Изначально планировал, что все сцены будут сделаны в 3D, а персонажи покрыты светлой мраморной текстурой, передавая вайб монахинь в белом, но от этой идеи пришлось отказаться в пользу 2D-графики из-за трудоемкости реализации.
Хотя один арт истории все же реализован в 3D, а именно сай-фай дрон из сцены 4 "Are We…Where?".
Дизайн-концепция сайта вдохновлена также [пусть и в меньшей мере] астральным миром из игры "Control". В этом мире герою нужно передвигаться по парящим в воздухе блокам, которые имеют текстуру черного мрамора с золотыми прожилками.
Черная текстура блоков из "Control" тоже повлияла на черный фон сайта, а золотые прожилки вместе с религиозной тематикой "Нового Папы" на интерфейс сайта, а именно его курсор.
Курсор имеет форму, похожую одновременно на церковную свечку и прожилку мрамора. Его черно-золотой цвет с легким сияниям тоже имеет связь с этими референсами. Про курсор и его состояния будет дальше – в разделе "Интерфейс".
ДИЗАЙН САЙТА
/// Опыт пользователя [UX], а также зрителя, участника и слушателя
Представляемый* идеальный опыт прохождения** истории:
Интро:
1/ Знакомство с проектом наверху страницы yakutsamuraiii.com/a_ve/
2/ [возможно] Переход по ссылке "Collections" на коллекции NFT на Foundation, чтобы познакомиться с их структурой и контентом.
3/ [возможно] Переход по ссылке "Unlock" на каталог артов, заблюренного текста или других недостающих частей истории.
4/ Возврат на сайт и начало части I по скроллу.
Сцена 1:
5/ Начало сцены 1 по скроллу и прослушивание короткого музыкального [электронного] произведения в качестве саундтрека сцены по нажатию "Play" в плеере.
6/ Сборка сцены 1 [и в целом начало истории] – анимация по скроллу.
7/ Переход на NFT-арт в стиле "UX/UI" с первым постом с тегом "квантовая физика" из сцены 1 на Foundation с дополняющим текстом истории и новой графической информацией, возможностью разблокировать для всех на сайте заблюренный [размытый] текст и открыть другие недостающие кусочки, а также запустить mint [чеканку, выпуск] следующего NFT-арта в Foundation.
Сцена 2:
8/ Возврат на сайт и начало сцены 2 по скроллу, погружение в текстовое описание последствий сцены 1 и включение нового музыкального сопровождения.
9/ Анимация лаборатории с машиной времени – конечно же тоже по скроллу.
10/ Погружение в контекст работы лаборатории с помощью текста, идущего синхронно анимации [какие-то тексты еще недоступны и заблюрены].
11/ Изучение и взаимодействие со сценой после ее сборки – анимации по ховеру и нажатию, отображение по ховеру персонажа его кастомного курсора с дополняющей графической информацией о сцене [пока доступен только кастомный курсор у ученого справа на сайте, т.к. NFT-композиция с ним уже вышла на Foundation].
12/ Переход на NFT-арт [или коллекцию артов] в анимэ-стиле на Foundation с дополняющим текстом истории, рассказывающим о работе сай-фай лаборатории и отношениях ее команды.
13/ [возможно] Покупка арта и в результате разблокировка для всех на сайте размытого текста и новых кастомных курсоров персонажей, а также запуск выпуска следующего NFT-арта с дополняющим текстом и графикой истории.
…
Cцена N...
…
Финальная сцена.
Результат – прохождение на "scrolly-telling" сайте сай-фай истории из 10 сцен в фантех [funtech] аудио-визуальном формате с элементами игры.
При продаже NFT-арта открывается связанный с ним графический, текстовый и другой контент на сайте и новый NFT на Foundation – кусочки большой композиции, образующие полноту и завершенность истории.
Кстати, лучший опыт прохождения истории обеспечивается на iMac с диагональю 27 дюймов и разрешением 5K. Под этот монитор верстался сайт, который хоть и является адаптивным, но все же при просмотре истории на сильно другом формате монитора, задуманный опыт может не передатсья полностью.
* Отношусь к истории как к продукту, а к некоторым его тезисам, как к гипотезам для проверки,
** и как к своеобразной большой головоломке.
/// Верстка
Сайт сверстан на трехколоночной сетке. В центральной колонке располагается ключевой контент, например, тайтл проекта "A Ve", который зафиксирован на экране при скролле и развивается синхронно сценам истории. В правой и левой колонках по их ширине располагаются названия сцен и другие заголовки, текст, плеер. Колонки имеют одинаковую ширину.
Графические элементы сцен старался связать с колонками сетки для усиления структуры сайта. Контент в трех колонках взаимодействует друг с другом, образуя название сцены по скроллу: Scene N в левой колонке + Are We в средней + в правой текст, образующий вопрос про место. Например, "Scene 2: Are We In Sci-Fi Laboratory?".
/// Контент
Элементы контента имеют разный тип и связаны между собой в пространстве и во времени скролла. Элементы повторяются, обеспечивая определенный ритм, который имеет схожее настроение с музыкальным сопровождением сцены. Эти элементы объединяются сценами. Сцены схожи по своей структуре и логике, отличаются артами и комбинацией разных типов информации.
Элементы сцены [в обычном порядке появления]:
/ Название сцены.
/ Музыкальное сопровождение.
/ Текстовое сопровождение.
/ Графическое сопровождение.
Элементы сцен имеют в чем-то схожее, в чем-то различное поведение:
/ Название сцен собирается по скроллу.
/ Сцены 1 и 3 отображают плеер для включения музыки в начале сцены после названия. Сцена 2 – после интро-текста и перед графическим материалом. В сцене 4 плеер является частью арта, отображая связь гулкой басовой музыки со средой, где находится плеер – вода. Сцена 5 содержит несколько арт-кусочков и несколько соответствующих им музыкальных частей – несколько плееров, отображающихся один за другим.
/ Текст в каких-то сценах отсутствует вовсе (как например в сцене 1 и 5), что компенсируется другими элементами, когда, например, арты или музыка рассказывают на своем языке то, что не представлено текстом. Или компенсируется другим дополняющим текстом, который можно найти в описании к NFT-артам в цифровой галерее – ссылку на них можно найти в конце сцены или в случае сцены 5 после каждого ее арт-кусочка. Где-то текст есть, но его может быть совсем мало (как в сцене 3 и 4) или совсем много, как в сцене 2, где идет большое описание последствий в науке и в целом мире после появления загадочного поста пользователя aPaperedDog на Yeddit из сцены 1.
/ Графическое сопровождение, представленное анимированным арт-контентом, помимо того, что нарисовано в разных стилях, имеет разную концепцию, структуру и из-за этого механику анимирования. В сцене 1 представлен интерфейс Yeddit – редизайненного Reddit, который по задумке становится реальной частью бразуера пользователя. Поэтому анимация в этой сцене направлена сначала на сборку этого форума по кусочкам, а затем на интеграцию с браузером пользователя, цепляясь книзу панели управления.
Также на сайте присутствует общий элемент для всех сцен – меняющееся название "A Ve", которое закреплено на экране.
Графическое сопровождение определяет концепцию сцены и ее механику анимации по скроллу и ховеру:
/ Арт без фона стремится стать частью сайта. Например, в анимэ-сцене 2 в лаборатории есть только прозрачный пол, поднимающийся в конце, но нет стен. На сайте частью композиции становится тайтл “Are We”, который зажигается одновременно с завершением сборки сцены и гармонично встраивается к персонажам по центру композиции. Можно увидеть, что исследователь-мужчина держит руки вдоль линий буквы W, а при нажатии на крышку капсулы она отлетит кверху и скатится по букве A как по горочке прямо в портал, где и исчезнет. В сцене 5 много темного пространства сайта и арт объединяется с механиками сайта, образуя гибридную анимацию по скроллу – смена кадров во фрейме на сайте + анимация самого фрейма, и эти анимации знают друг про друга, чтобы создать слаженный эффект.
/ Арт с фоном скорее хочет сделать сайт и его интерфейс совсем незаметными [сайт как плеер]. Например, в сцене 4 не видно фона сайта – все поглотило небо и вода, поэтому рядом с дроном не появляется кнопка + как в предыдущих сценах для открытия его NFT, ссылка появляется уже после его исчезновения в конце сцены. В сцене 3 композиция из трех кадров, фон сайта виден совсем немного и это используется – можно увидеть в промежутке между артами, что тайтл тоже меняется, покрывается глитчами и вибрирует синхронно герою в сцене. Большой арт в этой сцене с большим количеством деталей направил его анимацию на внимательное изучение и поиск деталей за счет увеличения и перемещения кадра словно при чтении комикса.
/// Интерфейс [UI]
При создании интерфейса я придерживался концепции, что сайт – это плеер истории, где вместо кнопки "Play" и автоматического воспроизведения – постоянный скролл.
Сайт реализован так, чтобы пользователь потерял ощущение движения вниз по странице [ведь на самом деле это просто очень длинный лендинг] и не задумывался об этом, как и об интерфейсе, больше погружаясь в роль зрителя и участника, проходящего сцены на экране.
Чтобы реализовать эту концепцию, при разработке сайта закладывались следующие особенности:
/ Интерфейс незаметен – его мало или он инкапсулирован [скрыт].
/ Интерфейс наследует особенности плеера – во время воспроизведения все внимание на сцены, а не на управление сайтом.
Возможности интерфейса:
/ Навигация по сценам и переходы на разные ресурсы заложены в меню, открывающееся по нажатию кнопки + в левом верхнем углу. Кнопка + зафиксирована на экране во время скролла. Можно открыть меню и выбрать нужную сцену для перехода к ней с помощью доскролла до якоря, расположенного в начале нужной сцены [по аналогии с переключением между эпизодами в плеере]. При этом состояния ссылок при наведении ведут себя по-разному – у сцен по ховеру исчезает подчеркивание, а другие ресурсы меняют цвет на черный. Можно увидеть на видео выше.
/ Фиолетовый подчеркнутый текст на самой странице сайта означает возможность перейти по ссылке или доскролл до нужного места.
Частью интерфейса является также упомянутый в разделе "Дизайн-концепция" курсор, который имеет несколько состояний:
\ Обычное состояние.
/ Отраженное по ховеру ссылки или интерактивного элемента.
/// Отображение в виде "бургера" при наведении на кнопку меню "+" в верхнем левом углу сайта.
ГЕЙМ-ДИЗАЙН
Для увлекательного, яркого и глубокого погружения в историю я применяю гейм-дизайн. Считаю, что он подходит не только для создания игрового опыта, но и для улучшения любого другого – цифрового, презентационного, развлекательного, маркетингового и т.д.
Я расскажу про основные элементы гейм-дизайна, которые использовал: механики, история, мир, персонажи, время, пространство, головоломки, эстетика и баланс.
/// Механики
Главными механиками истории являются действия, которые разделяю на базовые и стратегические.
Базовые действия:
/ Scroll to play. Скроллить, чтобы проигрывать сцены истории.
/ Hover to explore. Навести курсор на объекты сцены, чтобы исследовать их и найти новую информацию [текстовую или графическую] или головоломку для ее раскрытия. Призыв к этому действию находится обычно в конце сцены.
"Стратегическим" действием является открытие NFT-арта с новой дополняющей информацией и его покупка коллекционером или артистом, что проявит размытый текст на сайте сразу для всех, откроет новые кастомные курсоры, арты и их анимации, запустит создание следующего NFT-арта в коллекции.
В результате этих действий история проявит недостающие кусочки и соберется как концептуальная головоломка на сайте, в NFT-галерее и финально в голове – такой вижу мотивацию участника.
/// История, мир и персонажи
История линейна. Сюжет происходит в сай-фай мире будущего, а когда я представлял этот мир и время, то думал о Земле через 10 лет – дроны летают, ездят и ходят, ездят электрокары и электробайки, по-прежнему электросамокаты. Этот мир можно увидеть в сцене 3 "Are We In ARt NEvO City?".
Кстати, название города отражает упомянутый выше контраст классики и современности и является игрой слов AR и NEO [символизирующих технологию дополненной реальности и новые технологии в целом] и Art Nouveau [стиль, в котором нарисована арт-сцена, несмотря на то, что буквально переводится как "новейший" или "новое искусство", уже является классикой].
Места действия истории:
/ Браузер пользователя.
/ Сай-фай лаборатория.
/ Город ARt NEvO.
/ Небо и вода.
…
/ Цифровая галерея Foundation.
Главным персонажем является сам зритель. На компьютере зрителя происходит сцена 1, затем он становится гостем лаборатории в сцене 2, а в сцене 3 сидит в своих апартаментах и смотрит на центр города.
Один из персонажей – дрон-исследователь YS в 2-х модификациях. В прежней модификации YS-419 и анимэ-стиле он прилетает в сцене 3, а в новой модификации YS-420 он появляется в 3D-реалистичном обличии в сцене 4. Для усиления наглядности связи между дронами из разных сцен [и в разных стилях] им обоим сделаны винты розового цвета. Названия дронов – пример пасхалки-мема про "преображение".
/// Пространство
В A Ve изменение пространства является одной из моих любимых механик для создания интересного "сдвига" происходящего. Иногда пространство действия находится прямо в браузере пользователя, как в сцене 1 форум Yeddit, что можно найти достаточно иммерсивным. Или 3D-дрон из сцены 4 проникает в реальный мир с помощью AR, что интерактивно в плане создания фото и видео с этим дроном, исследования его модели.
В сцене 5 происходит изменение пространства с добавлением дополнительного измерения, когда по скроллу сменяются не только кадры в рамке, но начинает двигаться и сама рамка синхронно происходящему на кадрах, чтобы итоге создать ощущение, что движется камера, а розовое облако остается слева от нее – по центру ширины экрана.
Кстати, первый кусочек с цианобактериями в сцене 5 – это коллаборация с питерской художницей Саней Диско, а кусочек с рыбками – коллаб с художницей Адель, живущей в Нови-Сад в Сербии. Арт с рыбами еще не вышел, наверху можно увидеть начало его анимирования в режиме редактора сайта.
/// Время
Сцена может длиться несколько миллисекунд [как сцена 3] или лет, между сценами тоже может пройти разное время. Временем и его скоростью управляет пользователь – оуес, по скроллу.
/// Головоломки
A Ve содержит такие важные игровые механики, как головоломки. Они могут быть неявными и явными.
Сама история является большой неявной головоломкой – нужно открывать ее кусочки, чтобы сложить историю как большой пазл и добраться до [надеюсь] яркого финала с [тоже надеюсь] интересным панчем в конце. Да, ничего непонятно, но обещаю, что будет интересно [особенно, когда выйдет больше сцен и их кусочков на сайте и в цифровой галерее].
Пример явной головоломки – на сайте в конце проигрывания ар-нуво сцены 3 появляется подсказка с указанием, что нужно сделать, чтобы найти головоломку. Да, не просто ее решить, а сначала найти и понять, в чем она заключается. Создание этой головоломки на внимательность с поиском одинаковых объектов так и напрашивалось из-за концепции самого арта сцены – изучение большого количества деталей.
Менее явную головоломку можно найти в сцене 1 с заблюренным текстом поста. Можно решить ее полностью и раскрыть текст, купив NFT-арт из первой сцены, а можно ничего не покупать и догадаться о содержании текста по анимациям на самом сайте, соотнеся движение анимированного курсора по этому заблюренному тексту с движением крупного текста на фоне.
/// Баланс
Игры балансируют, чтобы в них было интересно играть – не слишком легко, но и не слишком сложно. Не слишком легко, чтобы пользователь не смог найти доминирующую стратегию и пройти с ее помощью игру без усилий, не получив задуманный создателем опыт. Не слишком сложно – понятно, чтобы вообще была возможность пройти игру.
Я старался сбалансировать уровень раскрытия информации, чтобы зрителю было интересно сложить графическую головоломку-историю. Есть опасения, что если раскрыть слишком много информации, то можно намного раньше догадаться о финале истории. С другой стороны, если предоставить недостаточно информации, то может быть вообще непонятно и неинтересно разбираться. С выпуском нового контента в виде NFT-артов и анимированной графики на сайте уровень раскрытия информации будет увеличиваться.
/// Эстетика
Сцены происходят в одном мире, хотя и выполнены в разных стилях. Стили старался сделать контрастными, при этом повторяя некоторые элементы разных сцен – лейтмотивом через все сцены идут розовый и фиолетовый цвета [например, как в упомянутом выше примере розово-фиолетовых винтов дронов] и наличие логотипа Yakut Samuraiii, который показывает, что сцены объединены одной вселенной. Подробнее про эстетику в разделе "Дизайн-концепция" ранее.
САУНД-ДИЗАЙН
Важной частью истории, объясняющей ее еще лучше, является музыкальное сопровождение.
У каждой сцены есть музыкальный трек, который задает ее настроение и темп, он развивается по ходу истории синхронно тайтлу Are We, зафиксированному на экране при скролле. Например, музыка в сцене 2 отображает суету в сай-фай лаборатории, где готовится запуск машины времени [видео ниже – у него даже есть звук, это единственное такое видео в кейсе], а музыка с перепадами и эффектами в сцене 3 отображает покрытие глитчами и вибрацию сидящего на скамейке.
Каждый трек достаточно короткий и приблизительно соответствует длительности проигрывания графической сцены, поэтому плеер обычно идет после текста, но перед анимированным артом. Первый трек можно найти в начале первой сцены вместе с текстовым пояснением, что музыку нужно запускать, каждый раз когда встречается плеер.
Композиции имеют одинаковый BPM [количество ударов в минуту/темп], который соответствует темпу повествования самой истории. Этот BPM=140, что соответствует стилю техно.
Саунд также является электронным, в нем есть едва заметный поп от Sofi Tukker - Good Time Girl [этот трек играет в заставке к "Новому Папе" и был моим главным референсом], трип-хоп от Massive Attack - Euro Child [звуки из этого трека использовались для создания композиции] и математический рок от Battles. Часть этих треков и исполнителей были рефами в начале работы над музыкой, часть присоединилась в процессе.
Музыка проекта является одним из источников вдохновения для создания артов и погружения помимо референсов на других художников – классических [например, Альфонс Муха для ар-нуво сцены 3] и современных [например, Nancy McKie для яркого и в чем-то детского второго арт-кусочка с рыбками сцены 5].
Некоторые звуки создавались на аналоговых синтезаторах – синтезировались, а какие-то сэмплировались [на микрофон сэмплера записывалась музыка оригинального исполнителя, нарезалась на звуки или drum kits, чтобы использоваться в программировании музыки с помощью секвенсора]. Придерживался подхода, что если записываю отрывки из оригинальных треков, то использую из записей только короткие звуки, а не длинные паттерны из них, хотя многие исполнители, например, в хип-хопе, любят много сэмплировать старую музыку.
На фото синтезаторы Pocket Operator [сокращенно PO], на которых создавалась музыка проекта.
*К аймаку прикреплена шерстинка кота Жоры в память о нем, которая придает мне сил! Сцена 3 посвящена Жоре, о чем написано в описании коллекции сцены на Foundation.
**Можно увидеть за PO-14 и проводом белый прототип оригами-визитки Yakut Samuraiii в форме машинки, подробнее про нее в другом кейсе на Dprofile.
Для создания композиции использовал следующие звуки:
/ Бас синтезирован на аналоговом синтезаторе Pocket Operator 14 "Sub".
/ Металлическая ритм-тарелка [hat] – сэмпл из трека Battles - The Yabba, записан и обработан на сэмплере-синтезаторе Pocket Operator 33 "K.O!".
/ Бас-барабан [бочка] и малый барабан [snare] – сэмплы из трека Massive Attack - Euro Child, PO-33.
/ Клавиши синтезированы на PO-33.
/ Голос, произносящий в финале истории фразы на английском – мой, записан и обработан на PO-33 и пост-обработан в Ableton Live.
/ Эффекты и фильтры применены на PO-33 и в Ableton Live.
Старался финальную версию полностью свести на синтезаторах, чтобы максимально сохранить аналоговый звук и сделать только минимальную цифровую обработку в Ableton Live перед экспортом в mp3-треки [но в итоге многое сделано на этапе пост-обработки и сведения в аблике].
Одноименный трек "A Ve", собранный из кусочков-треков из сцен, можно будет услышать в финале первой части [т.е. пятой сцены] истории и узнать, почему он получился именно таким. Его динамичная концовка вдохновлена треком The Chemical Brothers - We’ve Got to Try. В другом кейсе на Dprofile – про трек "A Ve", который выпустил как сингл, и его обложку в стиле конструктивизм. Там же можно послушать его.
Басовая версия моего голоса, произносящая "Ladies and gentlemen – Yakut...Samuraiii", вдохновлена нео-соул и рэп-исполнителем Channel Tres.
Спасибо за уделенное внимание! Если статья понравилась, буду признателен обратной связи.
Арт-история A Ve доступна на yakutsamuraiii.com как первый эпизод интерактивного шоу от Yakut Samuraiii.
В следующих кейсах – подробнее про каждую сцену иммерсивной арт-истории A Ve.
Свяжитесь для разработки креативной концепции, дизайна, сайта, мобильного приложения и геймификации для вашего бизнеса. Подробнее обо всех услугах.
/ с 💜 к деталям из Санкт-Петербурга, Yakut Samuraiii
