Сьогодні фронтенд-розробник або дизайнер не повинен витрачати дні на пошук картинок на фотостоках. ШІ-сервіси створюють унікальні UI-активи та інтерактивне медіа безпосередньо з текстового опису, використовуючи передові дифузійні та генеративні моделі.

Лабораторна робота №3 навчить студентів мислити як арт-директори та технічні художники, які спроможні створити повний пакет візуальних матеріалів для свого майбутнього сайту.

Стек інструментів для роботи

Для забезпечення повністю безкоштовного виконання лабораторної роботи без прив'язки банківських карток чи використання платних API пропонується наступний стек сервісів. Цей перелік не є вичерпаним (можливі зміни в тарифній політиці) і студенти для виконання лабораторної роботи можуть використати аналогічні сервіси з безкоштовними тарифами.

Каталог ШІ-сервісів

Генерація графіки та UI-елементів

• Gemini Flash Image. Швидка та оптимізована модель в середовищі Gemini, яка ідеально підходить для миттєвої генерації ідей, концептуального брейнштормінгу та прототипування елементів вебдизайну в реальному часі.
• Leonardo AI. ШІ-платформа для генерації високоякісних фотореалістичних зображень, ілюстрацій, концепт-артів, логотипів, іконок та UI-графіки за текстовими описами. Сервіс має безкоштовний тариф з щоденним нарахуванням токенів, що надає можливість використовувати його для навчання, експериментів з промптами та створення вебдизайну.
• Ideogram AI. ШІ-сервіс для генерації фотореалістичних зображень, ілюстрацій, логотипів, постерів та рекламної графіки за текстовими описами. Вирізняється високою якістю створення зображень з текстом (написи, логотипи, банери), що є складним завданням для багатьох інших генераторів.
• Freepik AI. Створення професійних зображень з високою якістю та видатною деталізацією, збалансованою анатомією, читабельним текстом та високою творчою точністю за лічені секунди.

Векторизація та оптимізація активів

• Recraft.ai. Безкоштовний редактор векторної графіки для створення повноцінних векторних зображень з можливістю експорту в формат SVG. Генерація іконок, логотипів, та ілюстрацій в єдиному й послідовному фірмовому стилі.
• Inkscape. Безкоштовний професійний редактор векторної графіки з відкритим кодом. Чудова кросплатформна альтернатива платним інструментам, що використовується для точного ручного та автоматичного трасування растрових ШІ-генерацій в чистий SVG-формат.
• Figma (з плагіном Image Tracer). Професійний індустріальний шлях для швидкої конвертації растрових ШІ-іконок в масштабований векторний формат SVG безпосередньо всередині робочого простору UI/UX-дизайнера.
• Autotracer.org. Спеціалізований безкоштовний веб-сервіс для миттєвого онлайн-трасування растру у вектор без необхідності реєстрації.

Генерація відео (Промо-ролики, Hero-backgrounds)

• Luma Dream Machine. Сервіс для високоякісної генерації відео на основі текстових запитів або статичних зображень. Платформа стала популярною завдяки своїй здатності створювати плавні, кінематографічні ролики з реалістичною фізикою та точним відтворенням рухів камери.
• PixVerse. Потужна мультимодальна платформа для генерації та автоматизації відео. Надає можливість швидко перетворювати текстові промпти або статичні зображення на деталізовані відеоролики високої якості з кінематографічними ефектами.
• Kling AI. Революційна мультимодальна ШІ-платформа нового покоління для генерації кінематографічного відео, зображень та звуку. Інструмент здатний за один запит згенерувати цілісну послідовність тривалістю до 15 секунд, що складається з кількох різних планів (до 6 змін кадрів) з безшовними кінематографічними переходами.
• Runway ML (Gen-2). Ключова нейромережна модель для створення кінематографічного фонового веб-відео за текстовим запитом (Text-to-Video).
• Pika Labs. Провідний інструмент для інтелектуальної анімації статичних ШІ-зображень (Image-to-Video) та створення зациклених веб-лупів.
• CapCut AI. Хмарна відеомонтажна платформа з інтегрованими ШІ-функціями для автоматичного створення промо-роликів, генерації ШІ-субтитрів та реалістичної озвучки тексту (Text-to-Speech).

Текстові мета-промптери

• ChatGPT, Google Gemini, Claude.ai

Ключові концепції веб-генерації

Сучасний веб-дизайн вимагає високої швидкості виходу продукту на ринок та максимальної унікальності контенту. Використання генеративного ШІ повністю закриває три ключові UI/UX потреби: швидке створення ізольованої графіки, генерацію масштабованих елементів та інтеграцію динамічного медіаконтенту.

Інтерфейсні активи. Будівельні блоки інтерфейсу

Інтерфейсні активи (UI Assets). Набір готових візуальних елементів інтерфейсу (іконок, кнопок, форм, зображень, компонентів та стилів), які використовуються для створення послідовного, зручного та привабливого дизайну цифрових продуктів. Вони мають конкретне технічне призначення та обмеження за вагою й роздільною здатністю.

• Іконки — позначки для кнопок, меню, налаштувань, дій користувача.
• Кнопки — графічне оформлення елементів керування (звичайні, активні, при наведенні, вимкнені стани).
• Елементи форм — поля введення, перемикачі, прапорці, списки вибору.
• Ілюстрації та зображення — декоративна графіка, персонажі, фонові малюнки.
• Логотипи та брендові елементи — фірмові символи, патерни, кольорові стилі.
• Компоненти інтерфейсу — картки товарів, навігаційні панелі, меню, спливаючі вікна, повідомлення.
• Шрифти та типографічні стилі — налаштування заголовків, текстів, підписів.
• Анімації та мікровзаємодії — ефекти натискання кнопок, завантаження сторінки, переходи між екранами.

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

В сучасній веброзробці інтерфейсні активи часто зберігаються в дизайн-системах або UI-наборах (UI Kits) готових елементів, які можна повторно використовувати в різних проєктах.

Ізоляція об'єкта

Ізоляція об'єкта (Asset Isolation). Процес автоматичного або ручного відокремлення окремого об’єкта від його фону або інших елементів зображення, щоб цей об’єкт можна було використовувати незалежно в іншому дизайні. Тобто, це "вирізання" потрібного елемента з зображення та створення окремого графічного ресурсу з прозорим або новим фоном.

• У вебдизайні — вирізання товару з фотографії для розміщення на сайті або банері.
• В створенні інтерфейсів — виділення окремих іконок, ілюстрацій чи графічних елементів для повторного використання.
• В маркетингу — заміна фону рекламних фотографій, створення промоматеріалів.
• В 3D та комп’ютерній графіці — відокремлення об’єктів для подальшої обробки або анімації.

Ізоляція об’єкта може виконуватися:

• Вручну за допомогою інструментів виділення, масок і контурів в графічних редакторах.
• Автоматично за допомогою ШІ. Алгоритми розпізнають об’єкт (людину, предмет, тварину, продукт) і видаляють фон за кілька секунд.

Після ізоляції об'єкта користувач отримує:

• Об’єкт з прозорим фоном (наприклад, формат PNG або SVG) на окремому шарі в графічному редакторі.
• Можливість змінювати фон, розмір, колір або розташування об’єкта без впливу на інші частини зображення.

Стилістична єдність

Стилістична єдність (Visual Consistency). Узгоджене використання кольорів, шрифтів, іконок, компонентів та інших елементів дизайну, яке забезпечує цілісний і зрозумілий вигляд цифрового продукту. Весь дизайн виглядає, як створений за єдиними правилами.

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

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

Зазвичай стилістична єдність забезпечується за допомогою

• Дизайн-систем.
• UI-наборів (UI Kits).
• Посібників зі стилю.
• Бібліотек повторно використовуваних компонентів.

Рендеринг тексту

Рендеринг тексту (Text Rendering) — це здатність моделей генерувати текст в складі зображення так, щоб він був правильним, читабельним і візуально узгодженим з дизайном. Тобто, це вміння штучного інтелекту “намалювати” літери, слова та написи на зображенні без помилок і спотворень.

Раніше моделі генерації зображень часто погано відтворювали текст: літери були нечіткими або деформованими, слова містили помилки чи випадкові символи, написи не відповідали заданому шрифту або стилю.

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

Сучасні моделі поєднують

• Розуміння текстового запиту (prompt) — модель аналізує, який напис потрібно створити.
• Просторове розміщення елементів — визначає місце, розмір і орієнтацію тексту.
• Генерацію графіки — створює літери як частину зображення з врахуванням стилю, кольору та композиції.

В деяких моделях застосовуються спеціальні механізми, які покращують розпізнавання символів і збереження правильного написання тексту. Приклад запиту: «Створи постер для кав’ярні з написом "Ранкова кава" в сучасному мінімалістичному стилі».

Хороший рендеринг тексту означає, що модель створить:

• Чіткий напис "Ранкова кава" без помилок.
• Правильні пропорції літер.
• Гармонійне розташування тексту на постері.
• Стиль, який відповідає загальному дизайну.

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

Дифузійні процеси

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

Навчання моделі.

• Реальні зображення поступово зашумлюються.
• Модель навчається розуміти, як повернути зображення до початкового вигляду.

Генерація нового зображення.

• Створюється випадковий шум.
• Модель багаторазово прибирає шум.
• На кожному етапі враховується текстовий опис, стиль та інші параметри.
• Формується фінальне зображення.

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

Приклади популярних дифузійних моделей: Stable Diffusion, Adobe Firefly, DALL·E.

Векторний стандарт

Векторний стандарт (Vector Standard). Спосіб представлення графіки за допомогою математично описаних об’єктів (ліній, кривих, фігур), що надає можливість масштабувати зображення без втрати якості. Стандартом для сучасного фронтенду є формат SVG (Scalable Vector Graphics). Векторні файли важать в рази менше, не втрачають чіткості при масштабуванні на Retina-дисплеях і легко стилізуються через CSS. Тому етап трасування (растр --> вектор) є обов'язковим технічним кроком.

Основні характеристики векторної графіки

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

Найпоширеніші векторні формати

• SVG (Scalable Vector Graphics) — відкритий стандарт для вебграфіки.
• AI — формат редактора Adobe Illustrator.
• EPS — формат для поліграфії та обміну векторними даними.
• PDF — може містити як векторну, так і растрову графіку.

Приклади використання: логотипи та іконки, елементи інтерфейсу, схеми та інфографіка, ілюстрації для вебсайтів, друк великого формату.

Відео-бекграунд

Відео-бекграунд (Video Background) — це технологія використання відеоролика як фонової частини вебсторінки, мобільного застосунку або цифрового інтерфейсу. Замість статичного зображення на задньому плані відтворюється коротке відео, яке створює динамічний візуальний ефект. Відео-бекграунд є "живим фоном", який додає сайту рух, атмосферу та емоційне сприйняття.

Відео-бекграунд використовується в багатьох випадках

• Перші сторінки сайтів (Hero Section) — для створення сильного першого враження.
• Портфоліо та творчі проєкти — для демонстрації робіт або стилю автора.
• Сайти компаній і брендів — для передачі атмосфери, цінностей або процесів роботи.
• Рекламні та презентаційні сторінки — для привернення уваги користувачів.

Основні вимоги до Відео-бекграунда

• Ненав’язливість — відео не повинно відволікати від основного контенту.
• Висока якість та оптимізація — необхідно забезпечити гарну картинку за невеликого розміру файлу.
• Циклічне відтворення (loop) — відео зазвичай повторюється без помітних переходів.
• Автоматичне відтворення без звуку — звук зазвичай вимикається, щоб не заважати користувачу.
• Адаптивність — відео має коректно відображатися на різних пристроях та розмірах екранів.
• Контрастність тексту — поверх відео текст і кнопки повинні залишатися добре читабельними.

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

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

Покроковий хід виконання роботи

Лабораторна робота виконується на основі вебпроєкту, розробленого під час попередніх лабораторних робіт. Завдання полягає в створенні єдиного набору UX/UI-активів для майбутнього вебсайту:

Логотип → Набір іконок → Hero-банер → Відео/Відеофон.

Для кожного активу необхідно:

• Визначити його призначення у вебінтерфейсі.
• Сформувати промпт.
• Виконати генерацію.
• Проаналізувати результат.
• За необхідності виконати повторну генерацію.
• Оптимізувати актив для веб.
• Зберегти його у відповідному форматі.
• Додати результат до Промпт-паспорту.

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

Каталог ШІ-сервісів

Етап 1. Формування візуальної концепції вебпроєкту

Перед генерацією окремих активів необхідно визначити єдину візуальну концепцію майбутнього сайту.

Використати результати Лабораторних робіт №1 та №2: назву проєкту, тематику, цільову аудиторію, стиль комунікації та кольорову палітру.

1. Визначити параметри візуального стилю
   • Основний та додатковий кольори (наприклад, темно-синій, голубий, білий).
   • Стиль графіки (наприклад, плоска, векторна).
   • Форму основних елементів (наприклад, плоскі, заокруглені).
   • Стиль іконок (наприклад, тонкі лінії, заокруглена геометрія).
   • Типографічний характер (наприклад, строгий академічний)
   • Співвідношення геометричних та органічних форм.
2. Створити візуальний напрям. Для генерації ідей можна використати ChatGPT або Gemini як мета-промптер.
3. Приклад промпту

Дій як старший UI/UX арт-директор. Проаналізуй мій веб-проект і створи візуальний напрямок для його інтерфейсу.
Проект: [назва та короткий опис проекту]
Цільова аудиторія: [цільова аудиторія]
Фірмові кольори: [кольори]
Визначити:
1. візуальний стиль;
2. стиль логотипу;
3. стиль значка;
4. стиль зображення героя;
5. освітлення;
6. форми;
7. стиль фону;
8. типографічний символ;
9. правила візуальної узгодженості.
Візуальна мова має бути придатною для сучасного адаптивного веб-сайту в 2026 році. Надай результат як стислу специфікацію візуального дизайну.

4. Зберегти отриману специфікацію в Промпт паспорті.

Етап 2. Вибір ШІ-сервісу для генерації графіки

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

Для виконання лабораторної достатньо вибрати один основний сервіс та, за необхідності, один додатковий.

• Ideogram. Логотипи, банери та зображення. Доцільно використовувати насамперед тоді, якщо в графічному активі важливим є читабельне текстове оформлення.
• Leonardo AI. Ілюстрації, концепт-арт, графічні елементи та різні стилі.
• Canva AI. Створення графіки та подальше компонування у веб матеріали. Має AI Logo Generator для генерації логотипів за текстовим описом.
• Adobe Express. Просте створення логотипів, графіки та подальше редагування. Має безкоштовний план і окремий AI Logo Generator. Згенерований логотип можна додатково редагувати та експортувати в форматі PNG з прозорим фоном.
• Gemini, ChatGPT. Швидке створення та редагування зображень безпосередньо в чаті з опцією "Створити зображення".

Етап 3. Створення логотипа

Логотип є першим візуальним активом сайту, оскільки саме він задає основу стилю наступних елементів.

1. Сформувати промпт за прикладом

Create a minimalist vector logo for a modern web application called "[BRAND NAME]".
Concept: [короткий опис ідеї бренду].
Create a simple geometric symbol that represents [основна ідея].
Use the brand colors: [HEX colors].
Modern clean sans-serif typography.
Flat vector style.
Balanced geometric proportions.
Simple recognizable silhouette.
White background.
Professional UI/UX asset.
Suitable for a responsive website and mobile application.
No photorealism, no complex background, no unnecessary decorative elements.

2. Якщо сервіс добре працює з текстом, назву бренду можна включити безпосередньо в промпт.
3. Створити кілька варіантів, не менше 3–5 концепцій. Необхідно порівняти:
   • форму;
   • читабельність;
   • відповідність тематиці;
   • кольори;
   • масштабованість;
   • можливість використання на світлому та темному фоні.
4. Вибрати фінальний варіант. Обраний логотип завантажити в форматах:
   • PNG для презентації та попереднього використання. Рекомендується зберегти версію логотипа на прозорому фоні.
   • Якщо сервіс надає можливість отримати векторний результат, зберегти також і в форматі SVG. Це основний вебформат логотипа.
   • Якщо ШІ створив лише в форматах PNG/JPG, виконати наступний етап — векторизацію.
5. Зберегти logo.png та logo.svg (якщо є така опція).

Етап 4. Векторизація та оптимізація логотипа

Для вебпроєкту логотип варто мати в форматі SVG, оскільки SVG масштабується без втрати якості та може стилізуватися за допомогою CSS. Інструменти для векторизації: Inkscape, Figma з відповідним плагіном, Autotracer.

Загальний алгоритм векторизації картинки

• Імпортувати зображення в форматі PNG. Це зазвичай має бути ілюстративне зображення з чіткими лініями, малою кількістю кольорів, наявністю розмежлваних ділянок.
• Виконати трасування.
• Видалити зайвий фон, перевірити контури та видалити зайві елементи.
• Імпортувати в формат SVG.
• Перевірити логотип в різних масштабах.
• Зберегти logo_1.svg.

Етап 5. Створення набору іконок

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

1. Створити 3–5 іконок для основних функцій вебпроєкту. Наприклад, Security, Speed, Analytics, E-mail.
2. Приклад промпту

Create a consistent set of 3 minimalist vector icons for a modern website.
Icon 1: cybersecurity and data protection.
Icon 2: high performance and speed.
Icon 3: analytics and data visualization.
Style: minimalist line art, rounded geometric shapes, uniform stroke width, same visual proportions, consistent perspective, [brand colors], white background, centered composition, professional UI icon set.
No text. No gradients. No shadows. No 3D effects. No photorealism.

3. При створенні серії іконок не потрібно щоразу вигадувати новий стиль промпту. Незмінними повинні залишатися стиль, товщина ліній, палітра, форма, рівень деталізації та фон. Змінюється лише опис конкретної іконки.
4. Зберегти icons_set.svg або окремими файлами icon-security.svg, icon-speed.svg, icon-analytics.svg.
5. Додатково зберегти PNG-версії для презентації icon-security.png, icon-speed.png, icon-analytics.png.

Етап 6. Створення Hero-банера

Після створення логотипа та іконок створити головний візуальний образ першого екрана сайту (Hero Image).

На цьому етапі необхідно використати текстовий офер, сформований в Лабораторній роботі №2.

1. Визначити композицію. Необхідно передбачити місце для H1, підзаголовка, CTA. Тому в промпті використовується поняття "вільний простір / негативний простір" (copy space/negative space).
2. Приклад промпту

Create a high-quality hero image for a modern responsive website. 
Subject: [детальний опис тематики вебпроєкту].
Visual style: modern 3D illustration, clean minimal composition, premium digital aesthetic, brand colors: [HEX colors], soft studio lighting, subtle depth,
high visual quality.
Composition: 16:9 aspect ratio, main visual object positioned on the right, large clean negative space on the left for website headline and CTA, clear visual hierarchy, balanced composition.
No text. No logo. No watermark. No unnecessary objects.

3. Перевірити композицію
   • Чи достатньо місця для тексту?
   • Чи не перекриває об'єкт майбутній заголовок H1?
   • Чи контраст є достатнім?
   • Чи добре виглядає зображення в широкому форматі.
4. Зберегти hero_bg.png або hero_bg.jpg
   • Рекомендований базовий формат PNG, якщо потрібна максимальна якість.
   • JPG/WebP доцільні для оптимізованої вебверсії фотографічного або складного растрового зображення.
   • Основна робоча версія повинна зберігатися у високій якості, а для веб можна створити оптимізовану копію.

Етап 7. Створення відео для вебпроєкту

Фінальним медіаактивом є коротке відео, яке може використовуватися як Hero фон, промо-ролик, демонстрація продукту, декоративна анімація.

Для безкоштовного експерименту можна використати, наприклад, Pika або Runway за наявності доступного безкоштовного (лімітованого) тарифу. Поточні безкоштовні умови потрібно перевіряти перед виконанням роботи. Для простого навчального завдання доцільно також використовувати CapCut для монтажу, субтитрів та озвучення.

Варіант А. Зображення-У-Відео (Image-to-Video)

1. Для навчальної роботи рекомендовано використовувати створений раніше Hero-банер як вихідне зображення.
2. Завантажити hero_bg.png в генератор відео.
3. Приклад промпту

Animate the provided hero image into a subtle cinematic website background. 
Motion: very slow camera movement, gentle floating particles, subtle light movement, smooth depth animation, minimal object motion.
Keep the original composition and colors. Do not change the main objects. Do not add new objects. No text. No logo distortion.
Calm professional motion suitable for a website hero section. Seamless looping feeling. No sudden camera movements.

Головним завданням є не створення ефектного кліпу, а отримання ненав'язливого рухомого фону, який не заважатиме читати текст.

Варіант Б. Коротке промо-відео тривалістю 15–30 секунд.

1. Створити відео зі структурою: 0–5 с. проблема/потреба користувача, 5–15 с. вирішення проблеми, 15–25 с. основні переваги, 25–30 с. заклик до дії.
2. Приклад промпту

Create a 20-second modern promotional video for a web service.
Scene 1 (0–5 sec): Show the user's problem: [опис проблеми].
Scene 2 (5–12 sec): Introduce the solution: [опис вебпроєкту].
Scene 3 (12–18 sec): Show three key benefits: [benefit 1], [benefit 2], [benefit 3].
Scene 4 (18–20 sec): End with a clean visual CTA area.
Style: modern technology, minimalist, professional, consistent with the website brand colors, smooth transitions, clean composition, high-quality commercial web design.
No unnecessary text.

3. Після генерації виконати монтаж у відеоредакторі, якщо це необхідно.
4. Зберегти video_content.mp4. Для вебсайту додатково рекомендується створити оптимізовану версію video_content.webm, якщо обраний спосіб публікації сайту це підтримує.

Етап 8. Оптимізація всіх UX/UI-активів

Перед захистом лабораторної роботи перевірити.

1. Логотип. SVG, прозорий фон, чіткі контури, масштабованість, відсутність зайвих елементів.
2. Іконки. Однаковий стиль, однакова товщина ліній, однакова палітра, формат SVG, відсутність зайвого фону.
3. Hero-банер. Співвідношення 16:9, достатня роздільна здатність, наявність вільного простору, читабельність майбутнього тексту, оптимізований розмір.
4. Відео. 15–30 секунд, плавний рух, відсутність зайвих деталей, формат MP4 або за необхідності WebM, оптимізований розмір файлу.

Етап 9. Перевірка цілісності UI-набору

Розмістити всі створені активи поруч та перевірити їх як єдину візуальну систему для одного вебпроєкту.

• Чи однакова кольорова палітра?
• Чи відповідають іконки стилю логотипа?
• Чи відповідає банер стилю бренду?
• Чи не суперечить відео загальній композиції?
• Чи достатній контраст?
• Чи не перевантажують медіаактиви інтерфейс?

Зміст звіту та технічні фінальні артефакти

В результаті виконання роботи студент формує та завантажує на диск (у власну папку) звіт в форматі PDF.

1. Титульний лист з зазначенням теми, варіанта (назви бізнес-проєкту).
2. Посилання на спільний доступ (з правами перегляду) на створений Google Doc з фінальним контентом.
3. В папці в хмарному сховищі мають міститися наступні технічні артефакти:

UX_UI_Assets/
│
├── logo/
│   ├── logo.svg
│   └── logo.png
│
├── icons/
│   ├── icon-security.svg
│   ├── icon-speed.svg
│   ├── icon-analytics.svg
│   └── icons_set.png
│
├── hero/
│   ├── hero_bg.png
│   └── hero_bg_web.jpg
│
├── video/
│   ├── video_content.mp4
│   └── video_content.webm
│
└── prompt-log/
    └── prompt_log.pdf

4. Короткий опис обраної веб-концепції та бренду.
5. Розділ 1. Етап мета-промптингу. Лог спілкування з текстовим ШІ. Який запит надсилали до ШІ, та які тексти інженерних промптів для генераторів зображень отримали на виході.
6. Розділ 2. Елементи брендингу та UI-іконки. Демонстрація згенерованих растрових зображень та фінальних SVG-варіантів після векторизації. Порівняльний опис застосованого методу трасування (Figma/Inkscape/Autotracer).
7. Розділ 3. Дизайн першого екрана (Hero Section). Фінальне зображення банера та опис параметрів промпту, що відповідали за створення простору під текст.
8. Розділ 4. Мультимедійний ШІ-компонент. Опис технології створення відео (Runway/Pika/CapCut), обрані параметри руху/озвучки, посилання на медіафайл.
9. Промпт-паспорт (Prompt Log). Демонстрація невдалих спроб генерації (наприклад, візуальні галюцинації ШІ, спотворений текст, зайві кінцівки або шуми на фоні). Студент повинен детально описати, які інструменти інженерії промптів (зміна стилістичних тегів, коригування лапок, введення *Negative Prompts*) виправили помилку моделі.

Критерії оцінювання лабораторної роботи

• Стилістична та колірна єдність графіки. Логотип, набір іконок та банер мають виглядати як елементи єдиного, цілісного UI-набору. Невідповідність кольорів (HEX-кодів) або поєднання кардинально різних стилів (наприклад, плоский вектор поруч з брутальним фотореалізмом) зменшує бал.
• Інженерія промптів та мета-промптинг. Оцінюється якість побудови запитів, використання професійних UI/UX інструкцій, керування освітленням та ракурсом, а також вміння налаштувати текстовий ШІ для отримання точного графічного промпту.
• Технічна якість та веб-оптимізація. Чистота векторних контурів після трасування, відсутність зайвих опорних точок та артефактів підкладки в файлах SVG. Правильний формат, стиснення та роздільна здатність растрових матеріалів.
• UX-параметри відеоконтенту. Відповідність часовому ліміту (15–30 сек), плавність відтворення без стрибків, досягнення безшовності (для лупів) та збереження високого рівня читабельності майбутнього інтерфейсного тексту поверх медіа.
• Аналіз помилок ШІ. Оцінюється здатність аналізувати причини «галлюцинацій» дифузійних моделей та вміння свідомо коригувати параметри генерації.

Контрольні запитання

1. Що таке UI-активи (UI Assets) в контексті сучасного веброзроблення та дизайну?
2. За допомогою якої техніки промпт-інжинірингу можна змусити ШІ згенерувати іконку або логотип, які буде легко вирізати та інтегрувати в макет сайту? Які ключові слова для цього використовуються?
3. Що означає поняття «стилістична єдність» і чому воно критично важливе для комерційного вебсайту?
4. Яким чином дизайнер чи фронтенд-розробник може технічно забезпечити ідентичний стиль для цілої серії іконок переваг, якщо вони генеруються окремими послідовними запитами?
5. Навіщо при генерації великого фонового зображення для головного екрана (Hero-section) в промпт свідомо додають конструкцію «copy space» або «negative space»?
6. Які технічні та художні вимоги висуваються до короткого промо-відео, яке планується використовувати як безперервне відео-бекграунд для першого екрана сайту?
7. Що таке функція Image-to-Video (I2V) в генераторах мультимедіа та в якому сценарії цієї лабораторної роботи її найдоцільніше використовувати?
8. В чому полягає практична цінність ведення Промпт-паспорту (Prompt Log) під час виконання розробником завданий з генерації медіаконтенту?
9. Чому сучасний спеціаліст з вебтехнологій повинен повністю відмовлятися від стандартних стокових фотографій на користь унікальної ШІ-генерації при створенні комерційних вебпроєктів?

Глосарій термінів. Генерація графічних UI-активів та мультимедіа

Рекомендовано для вивчення перед захистом Лабораторної роботи №3