UX/UI
for Games

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

• Роль UX/UI дизайнера в геймдеві

  1,5 тижні

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

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

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

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

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

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

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

  2,5 тижні

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

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

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

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

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

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

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

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

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

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

• UX в іграх

  2 тижні

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

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

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

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

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

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

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

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

• UI в іграх

  4,5 тижні

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

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

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

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

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

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

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

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

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

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

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

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

  Воркшоп 9. Робимо UI екрани. Частина 1

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

  Воркшоп 10. Робимо UI екрани. Частина 2

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

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

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

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

  2 тижні

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

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

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

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

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

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

• Дипломний проєкт

  0,5 тижня

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