Usual 2 Unusual — ефект спостерігача, вбудований в інтерфейс

Ми зробили дизайн-концепцію на основі суперпозиції з квантової механіки — і це залетіло на Behance.

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

Клієнт і проблема

До нас за новим сайтом-портфоліо звернулась німецька художниця з українським корінням — Irina Mitaenko. Що цікаво: за освітою Ірина — фізикиня, і мистецтво для неї — спосіб метафорично виразити красу математики й фізики. Запамʼятайте цей факт, він ще зіграє.

Її попередній сайт був на Tilda і мав купу проблем. Головна: роботи різного формату, а шаблонні галереї під це не гнучкі — превʼю просто обрізали частину картин.

Ну це як через технічні обмеження Воргол втратив би частину свого супу.

Загалом — те, як ти дивишся на мистецтво, впливає на те, як ти його розумієш. Ми взяли проєкт, бо клієнтка давала творчу свободу і можна було експериментувати. Єдине прохання — передати її маніфест.

Без глядача немає мистецтва.

Перші кроки

Пошук концепції — не та задача, яку можна «сісти й зробити». Зазвичай уся команда стрибає в кол і ми брейнштормимо разом. Так було й цього разу: перебравши варіанти, ми зачепилися за думку, наскільки сучасне мистецтво залежить від глядача.

Моя команда зазвичай прототипує складні інтерфейси — портфоліо художниці ми робили вперше. Тож природно пішли дивитися референси. Передивившись 30+ сайтів-портфоліо художників, ремісників і арт-директорів, ми сформулювали правила майбутнього сайту:

• роботи не повинні ховатися за рамками й елементами інтерфейсу;
• візуал сайту не відволікає від суті — він нейтральний;
• пошук колекцій і робіт має бути зручним;
• концепція будується навколо маніфесту художниці.

Фундаментом стала ця думка — а візуальну мову ми знайшли у фізиці.

Двощілинний експеримент

Уявіть пристрій, що стріляє частинками — електронами чи фотонами — крізь екран із двома щілинами. За ним другий екран, який фіксує, куди частинки прилетіли. Якщо стріляти, не вимірюючи, крізь яку щілину вони летять, — на екрані не дві смуги, як від «кульок», а інтерференційна картина: частинки поводяться як хвилі, що взаємодіють між собою. Досліди Томаса Юнга 1801 року саме так довели хвильову теорію світла.

Але поставте детектор, щоб «підгледіти», крізь яку щілину летить кожна частинка, — і магія зникає. Частинки поводяться як окремі «кульки», на екрані лише дві смуги, жодної інтерференції. Коли ми не спостерігаємо — частинки ніби в суперпозиції: проходять крізь обидві щілини одночасно, як хвилі. Коли спостерігаємо — вони «визначаються» і обирають конкретний шлях.

Коротше, це квантово-механічний трилер.

Ключове: результат залежить від нас — спостерігаємо ми чи ні.

Ідеально римується з маніфестом «без глядача немає мистецтва». А клієнтка-фізикиня — краще попадання складно уявити.

Візуальна концепція

Цю ідею ми передали ховер-ефектом: поки користувач не взаємодіє з контентом, на фоні пʼять колонок, у яких рухаються «частинки». Та щойно курсор торкається картини — частинки шикуються у дві лінії.

А пʼять ліній «частинок» з інтерференційної картини стали основою сітки сайту. Сітка потрібна, щоб розставляти важливі елементи на екрані — так концепція зʼєдналася з технічною фічею, і вийшло чудово.

Головний екран

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

Так народилася ідея показати все одразу. Головна — це полотно, на якому розкладені всі значущі колекції, а глядач сам обирає, куди дивитися. Скролу немає — він тут просто не потрібен. Лише кнопки по кутах екрана: повне портфоліо, про авторку, контакти.

А давня суперечка «який фон кращий» завершилася рішенням віддати вибір глядачеві — світлу й темну теми можна перемикати.

Кастомний код

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

• є два стани: Focused і Relaxed;
• Focused вмикається, коли курсор на роботі — атоми збираються у дві колонки;
• незалежно від стану атоми завжди рухаються, ніколи не статичні.

Спершу дивилися на Particles.js — простий у реалізації, але як готове рішення не дав гнучкості під перші два правила. Тож ми перейшли на GSAP (за основу взяли код Раджата Капура з Made in Webflow), розбили генерацію частинок на колонки, застилізували атоми під себе й повісили рух на курсор. Несподівано найпростішим виявився фінальний крок — анімацію hover-in/hover-out зібрали прямо у Webflow, і вона виглядала точно як задумано.

Мобільна версія

Клієнтка окремо просила, щоб сайт був як слід і на мобільному. Це означало кілька додаткових кроків: mouse-move-анімація головної (полотно рухається за курсором) на десктопі працює ідеально, а на мобільному жахливо глючила. Тож ми підключили interact.js і зібрали схожу взаємодію для тачскріна:

• drag-and-drop із плавною зупинкою;
• межі, що не дають витягнути полотно за екран;
• рух на основі швидкості жесту — реалістична, природна взаємодія.

Бонус: для сторінок із роботами ми інтегрували Swiper.js замість стандартного слайдера Webflow — тому бракувало кастомізації, та й плавність не та. Зі Swiper усе виглядає відполіровано.

Портфоліо

Роботи Ірини — це колекції різних періодів і стилів. Було важливо вибудувати структуру так, щоб глядач легко знаходив своє. За замовчуванням роботи показані візуально — обираєш очима. Але є й вкладка, де вони відсортовані за назвою з превʼю: виручає, коли про роботу дізналися зі статті чи каталогу, де є лише назва.

Самі колекції показуємо слайдером — багато картин нестандартного розміру, тож шаблонна сітка їм не пасує.

Чому ми взагалі за це взялися

У своєму маніфесті Ірина каже: мистецтво для неї — це знаходити незвичайне у звичайному і звичайне в незвичайному. Звідси й назва сайту. І саме тому ми взялися за проєкт: експериментувати, шукати нестандартні рішення звичайних задач — те, чого часом бракує в рутині інтерфейсного дизайну, де 90% патернів придумали до тебе. Ми отримали задоволення, розімʼяли руки й зробили класний сайт.

Результат

Задоволена клієнтка, Honorable Mention на Awwwards і відзнака Interaction на Behance — 784 appreciations і 7 637 переглядів. А головне — живий сайт, де жодна робота більше не ховається за рамками: usual2unusual.com.