Red Dot

Веб-шум річкової хвилі: про проєкт Riversssounds

Якщо не виходить по-справжньому сходити на природу, то можна онлайн. Уявіть, що опинилися біля річки, не виходячи з браузера. Стоїте на березі, чуєте звуки течій європейських річок і навіть можете заміксувати з них свій музичний твір. Якщо не можете уявити, тоді ласкаво просимо на сайт проєкту Riversssounds, який отримав Red Dot у цьому році у категорії Web Special, Interactive Platform.

Riversssounds — це онлайн-резиденція для саунд-артистів, створена культурною організацією DZESTRA (Україна), спільно з SEMI SILENT (Румунія) та української саунд-артисткою Ганною Хвиль. Ініціатива виникла, щоб задокументувати звучання річок і нагадати про те, що проходить повз нас в цифрову епоху — про природу і її красу.

Резидентка Катаріна Гривуль під час field recording сессії

Інтерактивна платформа дозволяє слухати результати резиденції та самим впливати на звук. Кожен користувач на сайті стає одночасно і слухачем, і саунд-артистом, який збирає мікс зі звуків, записаних іншими. Переміщаючись курсором по сайту, немов по берегу річки, користувач може регулювати звук і впливати на його характер.

Riversssounds — це «віртуальна подорож», в яку ви відправляєтесь, прослуховуючи польові записи та керуючи ними. У цьому проєкті ми прагнули поєднати художній підхід з елегантною і простою архітектурою. На платформі можна не тільки послухати роботи, але і відкрити для себе нових саунд артистів.

Прелодер сайту

Саунд-пригода на сайті

Сайт архівує саундскейпи, тобто звукові прогулянки учасників резиденції уздовж берегів річок, і збирає їх на сайті в нові сторінки — профайли річок. Кожен профайл присвячений конкретній річці та записам звуків навколо неї. Розуміння масштабу проєкту приходить, коли бачиш контури та координати записаних річок. Riversssounds об'єднав саунд-артистів всієї Європи та дав користувачам можливість зануритися в природну атмосферу через польові записи та просту, але оригінальну механіку взаємодії. Тепер можна відправитися на річку, не виходячи з браузера.

Сторінка вибору річок-саундворків

Щоб забезпечити досвід віртуальної прогулянки, ми звернулися до інтерактивної механіки. Потрапляючи на профайл річки, користувач може рухати курсором по сітці на сторінці. Сектори сітки прив'язані до джерел звуку, до саунд-роботам, записаним в різних місцях біля річки. Рухи курсору змішують звукові записи, зроблені локальними саунд-артистами, і створюють відчуття руху вздовж узбережжя Дністра, Дунаю або, наприклад, Майна. Кожна зона — окреме джерело звуку. Залежно від позиції курсора, гості чують різні пропорції записів. Наприклад, течії річки, звуків комах на берегах, шелесту рослин.

Для більш повного досвіду ми додали декілька фіч. Наприклад, при скроллі чути ефект реверберації, який розмиває звук і імітує віддалення від його джерела.

Сторінка саундворку

Таким чином, будь-хто може створити власний мікс звуків природи і досліджувати його, просто переміщуючи курсор. Але зробити це виявилося не так просто. Ідеї Riversssounds знаходяться на перетині саунд-арту та екологічного активізму. Для їх втілення команді потрібні були айдентіка і веб-платформа, що забезпечує віртуальну подорож по річках, а ще технологія для роботи з аудіо.

Ми подолали неготовність технологій

Робота з аудіофайлами в інтернеті все ще специфічна та складна задача. Всі наявні технології однотипні і не відповідають запитам на широкий функціонал, кроссбраузерность, потокову завантаження аудіо, навантаження на оперативну пам'ять, яку вимагає такий проєкт, як Riversssounds. Щоб реалізувати задумане, ми написали свої кастомні рішення для різних браузерів, на основі стандартних технологій Web Audio Api і HTML5 <audio>.

Візуальна айдентика Riversssounds

Назва онлайн резиденції — Riversssounds, розуміння духу і місії проєкту підштовхнуло нас до ідеї показати «звучання» і «плинність» у візуальному оформленні.

Ключова ідея платформи в тому, що звук/прослуховування/інтерактивність — в центрі досвіду Riversssounds. Це підштовхнуло нас до мінімалістичного і практичного візуального стилю, який не відвертав би візуальними прийомами від саунду і м'яко відсилав до образу річки і води.

Як тільки відчуття проєкту було спіймано, ми приступили до дизайну сімейства логотипів для різних платформ, дизайну палітри проєкту, підбору шрифтів, створення шаблонів для маркетингових матеріалів.

Сторінка резидент_ок, сторінка саундворку та список саундворків

Консистентні логотипи

Проєкту потрібні були логотипи для різних платформ. Тому ми прагнули зробити два універсальних лого, які будуть взаємодоповнювати одно одне та легко поєднуватися з проєктом. Обидва логотипи ґрунтуються на образах звукової хвилі та річкової хвилі.

Букви «sss» в середині назви проєкту самі по собі хвилеподібні, але варто було додати динамічності, щоб посилити цю асоціацію. Так ми створили версію логотипу-знака для соціальних мереж - динамічну і містку. Потім ми розширили цю асоціацію до великого лого з назвою проєкту.

Малий та великий логотипи проєкту

Палітра і зв'язок з природою

У створенні палітри ми хотіли передати «дикість та природність». Холодні тони, нейтральність, спокійні відтінки — це те, що створює асоціативний зв'язок з природою. Все це разом з простими та легкими до читання шрифтами акуратно проводить гостей платформ до її місії.

Ітерації дизайну палітри проєкту

Паралельно з дизайном і розробкою, організатори резиденції проводили активності, пов'язані з промо проєкту: оупен-коли, артист-токі, звукові прогулянки та інші події. Для анонсів та новин проєкту в соціальних мережах потрібен був гнучкий шаблон.

Анонси івентів резиденції у соціальних мережах

Висновок

Для команди Hexagon колаборація з Riversssounds була сповнена випробувань та завдань, тому працюючи з проєктом, ми були сповнені ентузіазму. Попри неготовність технологій і пов'язані з цим проблемами, ми змогли створити онлайн-резиденцію для саунд-артистів майже революційним шляхом. Коли резиденція закінчиться, платформа залишиться доступною для всіх, хто любить мистецтво.

Заборона на офлайн-заходи змушує шукати нові шляхи взаємодії мистецтва з аудиторією. Такі проєкти, як Riversssounds є не тільки прикладом того, як культура може розвиватися в інтернеті, але і дає позитивну відповідь на питання: чи потрібно нам взагалі мистецтво під час кризи. Коли навіть прості речі типу прогулянки стають забороненими та недоступними, культура і мистецтво можуть запропонувати альтернативний вихід і допомогти нам не спасти з розуму.

Ми в Hexagon пишаємося такими проєктами і тим, що з його допомогою стали частиною культурного процесу в Україні та у світі, і прагнемо продовжувати такі колаборації. 

Бонусний відео кейс, який приніс нам Red Dot Award


4312
More by the author More cases by the author
See all
TEDxNaUKMA Identity
Red Dot
ADC UA
Kyiv International Advertising Festival
Ukrainian Design: The Very Best Of
ADC Europe
TEDxNaUKMA Identity
Hexagon
Hexagon for TEDxNaUKMA
926
Doors Closed Website
Red Dot
CSS Design Awards
Doors Closed Website
Hexagon
Hexagon , The Gate Agency for Hexagon
794
Community
Videos
About Us