Digital-досвід для українського дрона-перехоплювача нового покоління
«Зірковий» продукт української армії
ZIRKA — український дрон-перехоплювач, створений для боротьби з ударними БПЛА типу «Шахед». Його ключова особливість — здатність автоматично виявляти та супроводжувати ціль, знижуючи вплив людського фактора на найкритичніших етапах: виявлення, наближення та ураження.
Перед командою Qream стояло завдання показати ключові переваги виробу, масштаб загрози, яку російські ударні БПЛА становлять для світу, а також роль перехоплювача в загальній системі ППО. Сайт мав одночасно звертатися до оборонних партнерів у Європі та країнах НАТО, приватних інвесторів у сфері defense і представників українських військових структур.
Новий погляд на презентацію дрона-перехоплювача
Більшість сайтів у сфері miltech виглядають схоже: корпоративний стиль, статичні зображення, технічна документація. Вони скоріше нагадують пресреліз або онлайн-каталог, ніж продукт передових технологій.
Нам хотілося піти іншим шляхом і створити досвід, який занурює в продукт і передає потужність Zirka. Не просто пояснювати принцип роботи дрона, а побудувати візуальну історію, де юзер може відчути технологію ще до ознайомлення з її деталями.
Поєднуємо айдентику Zirka з новим UI
Бренд уже мав сильну основу: логотип, фірмовий помаранчевий колір і типографіку. Ми не прагнули змінити айдентику — лише хотіли підсилити характер і зробити бренд більш технологічним та мілітарним для digital space.
Тому для фото створили новий стиль обробки зображень, натхненний сучасними військовими інтерфейсами. Помаранчевий фільтр зробив візуали більш впізнаваними та додав їм технологічності.
Дрон стає символом hero-секції
Знайомство з Zirka починається з wow-ефекту. Замість звичайного рендера ми розмістили 3D-модель перехоплювача в нічному середовищі — саме в тих умовах, для яких він створений.
Візуальна ідея побудована на простому контрасті: темрява символізує загрозу, а Zirka стає джерелом світла, яке її прорізає. Світлові промені навколо моделі та підсвічений силует допомагають відчути масштаб і силу продукту ще до усвідомлення його можливостей.
Перетворюємо характеристики у візуальні метафори
Робити технічні характеристики списком — надто базовий підхід для нас. Тому ми оформили їх як візуальні елементи, знайомі з військових систем.
Кожна характеристика дрона представлена своїм елементом: система наведення, індикатори радіуса дії, навігаційні орієнтири тощо. Секція більше відтворює участь у бойовій місії, а не технічну документацію.
Більше 3D — більше враження
Одна з найефектніших частин сайту — секція з 3D-характеристиками. Ми створили кінематографічну сцену, сфокусовану на русі та технологічності.
Камера рухається вздовж дрона, а світло поступово відкриває його конструкцію та інженерні деталі.
Дрон як частина великої системи
Окрема секція присвячена ролі ZIRKA в системі перехоплення повітряних цілей. Ми створили інтерактивну сцену, де користувач може дослідити різні елементи системи та зрозуміти їхній функціонал.
Перемикаючи картки, користувачі активують нові сценарії, разом з якими змінюються освітлення та фокус сцени. Так технічна інформація сприймається набагато легше.
Тестуємо межі стандартів Webflow
Розробка такого рівня інтерактивності у Webflow мала свої обмеження. Ми працювали з обмеженим бюджетом, стислими термінами та сайтом, який вимагав багатьох кастомних рішень.
Найскладніше було знайти баланс між перформансом і дизайн-амбіціями. У результаті вдалося поєднати 3D, анімацію та інтерактивність у єдиний досвід, що передає цінність Zirka.
