Візуальний дизайнер з дизайнерським мисленням

Вступ до дизайн-мислення (приблизно 1 день)

Процес дизайн-мислення з першого погляду

Найважливіші правила та фази дизайн-мислення

Практично-орієнтовані підходи та застосування

5 етапів реального проекту (приблизно 3 дні)

5 етапів реального проекту

Етап дослідження

Методологічний внесок у якісне дослідження

Реалізація через практичні вправи на реальному проекті

Етап синтезу

Методичні вказівки щодо аналізу та синтезу

Реалізація через практичні вправи на реальному проекті

Етап розробки ідеї

Методичний посібник з креативних технік та розробки ідей

Реалізація через практичні вправи на реальному проекті

Етап створення прототипів

Методичні поради щодо візуалізації та прототипування (включаючи макети, манекени, 3D-друк та швидке прототипування)

Реалізація через практичні вправи на реальному проекті

Етап тестування

Методичні вказівки щодо методів тестування та ітерацій, гнучкого підходу

Впровадження через практичні вправи на реальному проекті

Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі

Робота над проектом (приблизно 1 день)

Закріплення вивченого матеріалу

Презентація результатів проекту

HTML та CSS (близько 6 днів)

Вступ до HTML

Базовий фреймворк

Теги для створення тексту (h1-h6, p, br, span)

Команди форматування тексту

Інтеграція графіки

Посилання (внутрішні, зовнішні, телефон, mailto link)

Фавікони

Списки та таблиці

Правильна структура синтаксису

Перевірка за допомогою інструменту валідації W3C

Вступ до CSS

Варіанти інтеграції специфікацій CSS (внутрішній, зовнішній, вбудований стиль)

Основні команди (оформлення тексту, колір шрифту, колір фону)

Контейнери HTML

Використання та стилізація контейнерів

Інтеграція YouTube та Google Maps

Відео та аудіо плеєр

Об'єктна адаптація

VS Code (приблизно 1 день)

Вступ до VS Code

Додаткові розширення для VS Code. (наприклад, Live Server, Emmet Commands, Copilot (AI))

Використання ШІ в поєднанні з VS Code

Техніки макетування (близько 4 днів)

Класи, ідентифікатори, селектори

Ознайомлення з моделлю вставки

Відступи, поля, рамки, рамки-радіуси та їх скорочення

Вступ до Flex-Box

Макети з флекс-боксом

Вирівнювання за допомогою Flexbox

Вступ до системи Grid

Макети з сіткою

Вирівнювання за допомогою системи сітки

Плаваючий текст навколо зображень за допомогою float і clear

Загальні властивості відображення тегів

Фонові зображення

Статуси та значення (приблизно 1 день)

Введення псевдокласів (hover, active, focus, nth-child, first-child, last-child)

Псевдоелементи (::before, ::after, content)

Специфіка (значення кодів)

Позиціонування (приблизно 2 дні)

Вступ до позиціонування

Статичне, абсолютне, фіксоване, липке, відносне

Ліворуч, праворуч, зверху, знизу, z-індекс

Меню, що випадають

:target

:target у поєднанні з меню навігації та модальностями

Форми (приблизно 2 дні)

Вступ до бланків

Набір полів, легенда

Вхідні дані, текстові області, мітки, значення, ім'я, вибірки

Автозаповнення

Дизайн форм за допомогою CSS

Інтеграція php-скрипту в дії зі штучним інтелектом

Ефекти та шрифти за допомогою CSS (приблизно 1 день)

Ефекти переходу CSS

Перехід, фільтр, трансформація

Колірні градієнти, тінь від поля, тінь від тексту

Інтеграція шрифтів з @font-face

Адаптивний веб-дизайн (близько 2 днів)

Вступ до адаптивного дизайну

Медіа-запити, точки зупинки

Пейзаж, портретний режим

Адаптивні зображення з наборами зображень та srcsets

Редагування зображень, стиснення зображень

Створення зображень за допомогою штучного інтелекту

Пошукова оптимізація (приблизно 1 день)

Вступ до SEO

Оптимізація на сторінці та використання текстів, згенерованих штучним інтелектом

Оптимізація продуктивності для покращення SEO та презентація відповідних інструментів

Техніки та взаємодія CSS (близько 2 днів)

Змінні CSS

Темний режим

Обчислення за допомогою CSS

Вступ до CSS анімації

Тривалість, затримка, напрямок, функція таймінгу, кількість ітерацій, режим заповнення

Анімована кнопка бургера

Односторінковий сайт та багатомовність (приблизно 2 дні)

Вступ до односторінкових сайтів

Плавна прокрутка

Інтеграція бібліотеки fontawesome

Робота з графікою SVG

Інтеграція шарів та налаштування CSS

Багатомовні сайти

Розширення та фреймворки (приблизно 1 день)

Вступ до Bootstrap

Використання компонентів Bootstrap

Адаптивний дизайн за допомогою Bootstrap

JavaScript (близько 3 днів)

Вступ до JavaScript

Методи JavaScript/jQuery

Створення jQuery Lightbox

Змінні

Оператори If-else

Прокрутка, вікно, зміна розміру

масиви

Цикл For-loop

Математичний об'єкт

Законодавчі вимоги та управління проектами (близько 2 днів)

Інтернет-право

Авторські права щодо ШІ/КІ

Доступність

Управління проектами

Робота над проектом (близько 10 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Загальний вступ (приблизно 1 день)

UX, юзабіліті, UI, Керівництво з ментальної моделі, Керівництво з людського фактору

Принципи дизайну, орієнтованого на користувача

ISO 9241-210/HCD

Доступність: Основні терміни, законодавчі вимоги (BITV, директиви ЄС), значення для UX дизайну

Процес проектування зручних інтерактивних систем

Типи інструментів штучного інтелекту в контексті UI/UX (текст, зображення, аналіз)

HCD: Аналіз - контекст використання (приблизно 2 дні)

Карта персонажів та емпатії

Подорож клієнта

Огляд веб-аналітики/опитувальника

HCD: Визначення вимог до використання (приблизно 1 день)

Сценарії, історії користувачів

Модель завдань, потоки завдань

Контекстні інтерв'ю та спостереження

Щоденникові дослідження

HCD: Створення проектних рішень для виконання вимог використання (приблизно 1 день)

Керівництва та стандарти: 7 принципів діалогу за стандартом ISO 9241-110

10 принципів дизайну користувацького інтерфейсу за Jakob Nielsen

Візуальне сприйняття, закономірності

Дизайнерські рішення HCD: Таксономія, інформаційна архітектура та концепції навігації (близько 3 днів)

Блок-схема

Потік користувачів

Інформаційна архітектура

Мікроінформаційна архітектура

Стратегія конверсії

Концепції навігації та карта сайту

Сортування карток: планування, підготовка, впровадження та оцінка

Патерни мобільної навігації (навігація в нижній частині екрана, меню-"гамбургери", вкладки)

Огляд гнучкого управління проектами (приблизно 1 день)

Модель водоспаду проти гнучких методів

Погляд на гнучке управління за методом Scrum

Епік, історія користувача та завдання

Метод дизайн-спринту

Дизайнерські рішення HCD: Дизайн інтерфейсу користувача (близько 2 днів)

Styleguide, UI KITs, бібліотека шаблонів та система дизайну

Компоненти/елементи та форми інтерфейсу користувача

Кольори, шрифти та типографіка в інтерфейсі, іконки

Доступність: кольорові контрасти та розбірливі шрифти, елементи керування (розмір, інтервали, фокус)

Автоматизоване тестування контрастності, читабельності та альтернативних текстів

Короткий огляд семантичної структури (HTML/ARIA)

Атомарний дизайн

Першочерговий дизайн для мобільних пристроїв

Дизайнерські рішення HCD: Техніка проектування за допомогою Figma (приблизно 3 дні)

Структура та основи: сторінки та фрейми, макетні сітки, обмеження

Компоненти та варіанти (кнопки, бібліотеки, системи дизайну)

Адаптивний дизайн (фрейми, автоматична верстка)

Начерки, фреймворки, макети

Прототипування: взаємодії, переходи, накладання, обмін прототипами

Використання функцій штучного інтелекту у Figma та додаткових інструментів для швидкого створення та варіації дизайну

Юзабіліті-тестування та оцінка (приблизно 2 дні)

Огляд методів юзабіліті-тестування

Мислення вголос: планування, підготовка, реалізація та оцінка

Опитувальники (UEQ, AttrakDiff, VisAWI)

A/B тестування

Доступність: тести з клавіатурою та зчитувачем з екрану

Використання допоміжних засобів та інструментів

Робота над проектом (приблизно 4 дні)

Закріплення вивченого матеріалу

Презентація результатів проекту

Adobe Premiere Pro (близько 7 днів)

Вирівнювання проекту та визначення формату

Інтерфейс програми

Шаблони тексту та об'єктів

Вікна проекту, редагування та моніторингу

Збірка кліпів у вікні редагування

Переходи та ефекти

Ретушування відео та фільтри

Створення послідовностей титрів

Імпорт зображень, аудіофайлів та каталогів

Поєднання з іншими програмами Adobe

Створення та редагування звуку

Робота з вицвітаннями

Корекція кольору

Відстеження руху

Функції імпорту та експорту

Практичні поради та підказки

Штучний інтелект (ШІ) в робочому процесі

Презентація конкретних технологій ШІ

та можливих застосувань у професійному середовищі

Робота над проектом (близько 3 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту

Adobe After Effects CC (приблизно 7 днів)

Терміни та стандарти

Визначення форматів

Планування та організація проекту

Імпорт та керування вихідними даними

Керування рухом

Робота з різними шарами

Композиції та часова шкала

Режими перенесення, функції редагування

Створення простих 3D-анімацій

Створення візуальних ефектів

Робота з ключовими кадрами

Рендеринг і налаштування рендерингу

Робота з масками та текстовими інструментами

Функції та редагування звуку

Спотворення часу

Інструменти векторного малювання та ретушування

Анімовані відеокліпи

Світло та камера, корекція кольору

Керування, відстеження руху

Функції імпорту та експорту

Практичні поради та підказки

Робота над проектом (близько 3 днів)

Закріплення вивченого матеріалу

Презентація результатів проекту