Курс UI/UX for Games

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

Програма курсу

Блок 1. Роль UI/UX дизайнера в геймдеві

Лекція 1. Знайомство - Тімбілдінг

• Відмінність UX/UI-дизайну додатків/сайтів та дизайну ігрових інтерфейсів
• Спеціальності та розгалуження в ігровому дизайні
• Навички, які необхідні для побудови кар'єри у цій галузі
• Розвиток UX/UI Designer у геймдеві - куди рости далі
• Компанії в геймдеві
• Інтерактив: Тімбілдінг - хто куди хоче розвиватися

Лекція 2. З ким працює UI/UX дизайнер

• З ким працює UX/UI-дизайнер і що таке UX та UI
• Що робить дизайнер під час розробки гри
• Пре-, продакшн та пост-: головні етапи розробки гри

Лекція 3. IPK ігор з погляду UX-патернів взаємодії з інтерфейсами

• Історія розвитку комп'ютерних ігор, UX патернів у іграх
• Умови та обмеження
• 1990-і, 2000-і, 2010-і і далі
• Навіщо це потрібно знати UX дизайнеру

Блок 2. Психологія в іграх (Когнітивна наука, usability, engaging)

Лекція 4. UX Research та User flow

• Основні складові та етапи Design Thinking: емпатія, визначення, ідея та прототипування, тестування та оцінка
• Порівнювати конкурентів, копіювати патерни, але не стиль
• Як правильно робити research на основі дизайну мислення
• Що таке користувач флоу

Лекція 5. Ігрові механіки. Когнітивістика та евристика

• Когнітивні знання в іграх: увага, сприйняття та пам'ять
• Евристики юзабіліті та їх застосування у відеоіграх
• Ігрові евристики: баланс, прогресія, керування грою та інші
• Що таке ігрові механіки, атомарні механіки, комплексні механіки
• Фідбек під час гри
• Методи дизайну ігрових механік
• Сприйняття механік через різні інструменти

Лекція 6. Психологія сприйняття інформації та мікроінтеракції

• Психофізичні особливості сприйняття інформації
• Види навантаження на мозок
• Ефект Кулешова, ефект "Естетики-юзабіліті", правило 3-х кліків
• Як впливати на сприйняття: композиція, колір, угруповання, контраст
• Різниця сприйняття інформації в HUD та Lobby
• Геометрична пам'ять, банерна сліпота
• Що таке мікроінтеракції
• Стан системи. Тригер-> Зворотній зв'язок -> Зміна стану системи

Воркшоп 1. Ігровий флоу

• Ігровий флоу. Декомпозиція патернів за допомогою копіювання флоу
• User-flow у форматі Grayboxes базових теймплейтів
• Створюємо флоу гравця на основі існуючої гри

Воркшоп 2. Підбір референсів

• Проведемо воркшоп, як знайти референси і згрупувати їх
• Де зберігати, і як правильно структурувати та оцінювати

Блок 3. UX в іграх

Лекція 7. GrayBox як спосіб швидкого нарису

• Схема Джессі Гаррета та її застосування для нашої індустрії
• Спіральна модель розробки ПЗ
• Чому важливо економити час та ітерувати швидко
• Що таке грейбокси, навіщо вони потрібні? Як вони допоможуть скоротити час ітерацій
• Шматки чужого інтерфейсу для швидкої ілюстрації
• Фреймворки у фігмі для створення вайрфреймів
• Приклад створення грейбоксу будь-якого простого інтерфейсу

Воркшоп 3. Створюємо прототип гри. Частина 1

• Проведемо воркшоп зі створення UX гри, яку обрала менторка
• Інтерактив: розбір ігор, і далі робимо свій wireframe
• Запитання та відповіді з дипломних завдань

Воркшоп 4. Створюємо прототип гри. Частина 2

• Проведемо воркшоп зі створення UX гри, яку обрала менторка
• Інтерактив: розбір ігор, і далі робимо свій wireframe
• Запитання та відповіді з дипломних завдань

Воркшоп 5. Фінал UX. Створюємо прототип гри. Частина 3

• Проведемо воркшоп зі створення UX гри, яку обрала менторка
• Перевірка стадії UX

Блок 4. UI в іграх

Лекція 8. Що таке сетинг гри та UI moodboard

• Поняття візуального сеттингу
• Які є складові візуального сеттингу: Колір, шрифт, UI, UX, 2D art, 3D
• Вплив нарративу на UI
• Розбір сеттингу різних ігор

Лекція 9. Композиція та типографіка, колір

• Що таке композиція
• Силові лінії та поля
• Домінантні відносини елементів
• Відносини "елемент-простір"
• Тимчасовий масштаб
• Міра активності засобів композиції
• Що таке типографіка та верстка
• Базові правила верстки текстових блоків

Лекція 10. Стилістики та стайлгайд

Розглянемо стилістики, які можуть бути в іграх і як їх обігрують.

Воркшоп 6. Підбір референсів для UI

Поговоримо про стайлгайд та як його робити.

Воркшоп 7. Створюємо UI трьох різних концепцій. Перший концепт

По вибраним стайлрефам створюємо концепції.

Воркшоп 8. Створюємо UI трьох різних концепцій. Другий та третій концепт

• За вибраним стайлгайдом створюємо концепції
• Визначаємося зі стилем

Воркшоп 9-10. Робимо UI екрани

По вибраним стайлрефам створюємо концепції.

Воркшоп 11. Фінал UI. Створення стайлгайду

• Поговоримо про стайлгайд та як його робити
• Перевірка стадії UI

Блок 5. Фінальний полішинг та аналіз проєктувального рішення

Лекція 11. Case study - основні поінти

• Як демонструвати всі етапи розробки дизайну
• PDF-файл, Figma або особистий сайт як портфоліо - що краще

Лекція 12. 7 цінних якостей UI/UX дизайнера

• Характер та особистість у психології
• Невід'ємні якості UX-ера
• Профіль дизайнера
• Пошук 7 якостей, без яких ніяк
• Перевірка робіт і фідбек від менторки

Воркшоп 12. Case study - на прикладі

• Менторка показує, як оформляти кейс на Behance
• Перевірка робіт і фідбек від менторки

Блок 6. Дипломний проєкт

Дороблюємо проєкт і презентуємо його.

Особливості курсу

• Лекції + воркшопи
• Фідбек про ДЗ
• Підтримка ментора
• Проєкт в портфоліо
• Сертифікат про проходження курсу

Викладачі курсу

Каріна Сокол - UI/UX designer at Meta