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

У цих реаліях особливо цінними стають знання про те, як просувати збір, щоб він приносив бажаний результат вчасно і в повній мірі. Саме про це і йтиметься у статті.

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

Цього разу пропонуємо зануритися глибше в унікальний кейс — креативну колекцію одягу для спільноти 47 ОМБр «Маґура», зокрема в те, як була реалізована ініціатива з точки зору дизайну, звуку, коду та донесення сенсів.

Як виникла ідея

Колекція IMMORTAL MAGURA створювалась передусім як спосіб зібрати кошти на потреби 47 ОМБр «Маґура» та донести історії героїв до широкої аудиторії, розповідає дизайнер та менеджер проєкту Святослав Тесляк.

Ми хотіли зробити більше, ніж просто одяг — це мала бути колекція з душею, сенсом і сильним візуальним кодом.

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

Футболка «Броня незламності». Staff x 47OМБр «Маґура».

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

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

Про візуальне наповнення сайту, здається, можна говорити годинами. Окреме задоволення глядачеві приносить кольорова палітра та шрифти. Шлях до фінальних кольорів був довгим: спочатку команда обирала темні відтінки — вони задавали глибину та серйозність… але виявилися надто тьмяними. Після кількох ітерацій перейшли до відтінків зеленого, які були взяті з гри Mortal Kombat. Та й цього виявилося замало — хотілося життя та енергії. Тому в останніх ітераціях зʼявились теплі акценти — оранжево-коричневі — які чудово перегукуються з палітрою ілюстрацій та передають мілітарі атмфосферу.

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

Композиційно проєкт втілено через широкий простір, великі шрифти, горизонтальні скроли. Окремо працювали над деталями, які створюють атмосферу:

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

Голос війни та «Маґури»

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

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

Спершу Олег почав роботу з ознайомлення з основною ідеєю, дизайном та інтерактивними елементами сайту. Маючи чітке бачення, згодом перейшов до реалізації. У процесі звертав увагу на тип елементів та тривалість анімацій, і відповідно до цього створював відповідне звучання. Під час роботи записував живі звуки (hover, clicks), працював над їх тембральними характеристиками, створюючи цілісність звучання.

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

Реліз цього сайту надихнув Олега на втілення нової ідеї — записати ще кілька треків у цьому ж стилі й випустити мініальбом, що передає цей вайб. Вірю, що задум отримає великий розголос і допоможе привернути увагу тисяч людей. Успіхів, Олеже!

Невидима частина «Маґури»

«Формат на стику гри, мистецтва і мерчу — це ризик. Ми не знали, як на це зреагує аудиторія», — розповів менеджер та дизайнер проєкту Святослав Тесляк. Разом з тим команда свідомо відмовилась від класичних «банок» і пішла шляхом, який мав усі шанси не спрацювати. Щоб зменшити ризики, вони провели опитування серед підписників 47 ОМБр і молоді — і лише після цього перейшли до розробки.

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

Найбільшим технічним викликом стало зберегти швидкість завантаження попри велику кількість візуальних і звукових ефектів. Рішення? Комбінація CSS-анімацій, бібліотеки GSAP для контрольованої анімації та нових форматів зображень, які зменшили вагу файлів у десятки разів.

Сайт став на 85% швидшим лише завдяки оптимізації зображень. Це дрібниця, яка вирішує все, коли йдеться про досвід користувача.

Навіть такі «непомітні» деталі, як вибір героя на першому екрані, що з’являється в усіх ключових секціях, були продумані до дрібниць. І це саме той випадок, коли UX — це любов до невидимого.

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

Що з того вийшло — дивіться на головній.

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

Окрему увагу команда звернула на ворогів. Придивіться: українські герої мають ідентифікацію 0001, 0002 і так далі — і це не випадково. Таким чином автори хотіли показати, що героїв багато і вони справжні. А от вороги позначені іконкою-хрестом — символічно, коротко, лаконічно. Там, де герой має ім’я і історію — ворог має лише смерть і смішний опис — усе як у житті.

Як не перетворити креатив на попсу

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

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

Крім піксельних ігор та атмосфери ілюстрації команда проєкту надихалася реальними бійцями бригади — та ілюстраціями Вітра Степового (справжнє ім’я художника — Богдан Карпов), який втілив їх у колеції.

Футболка «Стяг свободи». Staff x 47OМБр «Маґура».

Сайт запустили одночасно з колекцією одягу. Лише за перші два дні було продано близько 50%, а за перший тиждень — більше 70% колекції. На сайті вже є позиції, які купили повністю — і це не може не тішити, адже ініціатива сприяє посиленню 47 ОМБр «Маґура» FPV-дронами.

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

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

«Зараз є думка, що треба “танцювати з бубном”, щоб хоч якось зібрати донати на потреби ЗСУ. З багатьох очевидних причин мені це зовсім не подобається, але якщо це допомагає зборам — ок. Для когось “бубон” — це пісні, для когось — картини… У мене — це дизайн чи розробка сайтів для ЗСУ. Віднайдіть або не втрачайте віру у свій “бубон” і, незалежно від того, хобі це, мистецтво чи крінж — не бійтеся з ним танцювати, якщо це закриває збори», — Антон Лукащук.

Натхненник ініціативи В’ячеслав Смірнов («Аркуш») — начальник відділення рекрутингу «47 ОМБр «Маґура».

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

Натхненниця ініціативи Дзвенислава «Маґура» Римар — начальник розвідки механізованого батальйону 47 ОМБр «Маґура».

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

Натхненник ініціативи Роман «Сова» Галенко — оператор ударних «БпАК 47 ОМБр «Маґура».

«Найкращі образи — це життя, це і театр, і кіно, і полотно. Дивіться багато цікавого кіна, там купа натхнення, ну і, по можливості, живіть цікаво. Ну і авжеж гарувати і гарувати — та давати країні вугілля», — Вітер Степовий.

Натхненники ініціативи — екіпаж Bradley 47 ОМБр «Маґура» — Сергій (командир екіпажу)«ЛІ» та Олександр (механік-водій) «Бакал».

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

Натхненниця ініціативи Олена «Риж» Іваненко — стрільчиня, бойова медикиня 47 ОМБр «Маґура».

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

Після цього проєкту я стала ще більш свідомою, наповненою і впевненою в тому, що навіть дизайн — це теж форма спротиву, форма вдячності, і дуже потужна дія», — резюмує Вікторія Гаврилюк.