Курс UI/UX для геймдеву

В тебе є 23 заняття, щоб розібратись із воркфлоу UI/UX-диза та дизайном ігрових інтерфейсів. Зрозумієш, як працює людський мозок, і впровадиш Design thinking у свою роботу - від ресерчу до прототипу й тестування. Забереш головні фішки Figma та Adobe Photoshop для дизайну ігор. Проведеш усі етапи дизайн-спринту для розробки фічі, щоб закріпити скіл для майбутньої роботи.

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

UX/UI Designer у геймдеві: роль та обов'язки

• UX/UI-дизайн: застосунки/сайти VS ігрові інтерфейси
• Головні етапи розробки гри: пре-, продакшн і пост-
• Пайплайн і зони відповідальності UX/UI-дизайнера
• GAME CHANGER: стадії розробки гри та нові задачі
• TEAM BUILDING: з ким працює UX/UI-дизайнер
• Левел-ап UX/UI в геймдеві - зростання та розвиток
• ДЗ: наведи приклади продуктів та сервісів з елементами autotelic activity

Usability

• Евристики юзабіліті та їхнє застосування у відеоіграх
• 10 евристик Якоба Нільсена - батька UX-дизайну
• Ігрові евристики: баланс, прогресія, управління грою та ін.
• Основні елементи юзабіліті для ігрового UX
• ДЗ: пошукати неочевидні ігрові евристики й навести приклади їхнього застосування в іграх

Друга складова UX - Engage ability

• Мотивація. Зовнішні чинники: нагороди, оцінки, рейтинги тощо
• Мотивація. Внутрішні чинники: компетенція, автономність, зв'язність/спорідненість
• Теорії мотивації
• Емоція (3Cs: character|control|camera, новизна, сюрпризи та відчуття присутності)
• Стан потоку та умови його виникнення в грі. Як його не зруйнувати
• ДЗ: навести по 3 приклади фіч в іграх, що стосуються потреб гравців:
  • Компетентність (Competence)
  • Автономія (Autonomy)
  • Спорідненість (Relatedness)

Design thinking

• Основні складові та етапи Design Thinking: емпатія, визначення, ідея та прототипування, тестування та оцінка
• UX-артефакти (персона, user story, user flow)
• Kano Model
• JTBD "JOBS-TO-BE-DONE"
• ДЗ: провести аналіз конкурентів для інтерфейсів розділу меню серед ігор обраного жанру та зібрати з них мудборд + flow діаграми

Першому гравцю приготуватись - вступ до ігрового UI

• Складові ігрового UI: меню та HUD
• Типи представлення ігрових інтерфейсів
• Ієрархія та компонування
• Меню-компоненти
• Патерни та навігація
• Гештальт-принципи в UI-дизайні
• ДЗ: розробити дизайн головного та пауз-меню в команді та самостійно попрацювати над розділами пауз-меню

Figma: tips & tricks

• Автолейаут, змінні, компоненти та їхні властивості
• Microinteractions
• Smart-анімації
• Плагіни для прототипування з геймпадом, видалення фону, шрифти
• Використання OBS Studio для запису функціонування прототипів
• ДЗ: доопрацювати mid-fi вайрфрейми з ДЗ №5 (розробка дизайну меню), відповідно до фідбеку лектора

Дизайн-системи

• Основні компоненти дизайн-системи
• Атомарний дизайн
• Візуальна мова
• Компоненти інтерфейсу

Аналіз проблеми юзабіліті (UX) та груповий брейнштормінг для фіксу

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

User Research: методи та інструменти

• Оцінка евристиками
• UX-тести
• Опитування
• Коридорні тести
• Аналітика
• ДЗ: провести A/B-тестування / опитування / коридорний тест для оцінки дизайн-рішення

Командний воркшоп із розробки UX-артефактів на основі мінібрифу

Розробляємо UX-артефакти, аналізуємо вимоги та пропонуємо рішення для досвіду юзера.

Робота зі стайлгайдом гри

• Типографія
• Колористика
• Ігрові стайлгайди
• Композиція
• ДЗ: створити стайлгайд для інтерфейсу гри (на основі наявної гри або ж на основі брифу)

Аналіз та розробка HUD

Аналізуємо наявні HUD-рішення, розбираємо головні компоненти дизайну для створення власних інтерфейсних рішень.

Adobe Photoshop: tips & tricks

• Базові поєднання клавіш
• Швидке видалення фону, маски
• Техніка dodge and burn
• Базові принципи колажування
• Смартоб'єкти, екшени, скрипти
• Пакетна обробка зображень
• ДЗ: допрацювати стайлгайд із ДЗ №11, згідно з фідбеком лектора

Фідбек-сесія

Психологія та робота мозку в іграх

• Сприйняття та пізнання
• Увага
• Пам'ять
• Мотивація
• Емоції: як працюють і на що впливають
• Онбординг гравця: типи та план туторіалів, Learning & Forgetting Curve
• ДЗ: розробити онбординг-туторіал для гри, тестування з іншими учасниками

Розробка UI-дизайну та прототип на основі дизайн-брифу від геймдизайнера

Виконати прототип із ваєрів попередніх ДЗ + провести юзабіліті-тест протипу з 5 учасниками.

Доступність гри. Accessibility A11Y

• Поняття Disability та його типи
• Що таке інклюзивний дизайн
• "Зрізаний бордюр" та його функція в дизайні
• XAG (Xbox Accessibility Guideline)
• Програмні та апаратні рішення
• ДЗ: чек-чек доступності свого дизайну

Всі етапи дизайн-спринту для розробки фічі (командний воркшоп)

Портфоліо та оформлення кейсів

• Як демонструвати всі етапи розробки дизайну
• Інтернет платформи, Figma чи особистий сайт як портфоліо - що краще
• Підготовка до технічного інтерв'ю
• Профіль в Linkedin - як і навіщо розвивати
• Тестове інтерв'ю з рекрутером
• ДЗ: оформити портфоліо з виконаних на курсі робіт

Лекція з HR

• Підготовка CV та створення профілю в LinkedIn
• Аpply for work ресурси: в Україні та за кордоном
• Співбесіда по пунктах: селф-пітч та must Q&A

Business centered design

• Система нагород
• Як потрапити на гачок - Hook Model
• Dark UX patterns та упередження
• ДЗ: навести 1-2 приклади Hook Model в іграх або продуктах і розробити власний концепт Hook Model з чотирма фазами

Фідбек-сесія

Презентація дизайнів

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

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

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

Олександр Шпак - Senior UX/UI Designer в Ubisoft