Курсы Web Design / UI/UX

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

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

Основи UI/UX

• Професія веб і UI/UX дизайнера
• Інтерфейси. Приклади інтерфейсів
• User Experience

Підготовка до розробки веб проєкту

• Види сайтів
• Продуктовий та сервісний дизайн
• Створення та обробка брифа і технічного завдання

Робота з аудиторією, види користувачів

• Аналіз аудиторії
• Потреби аудиторії
• Петля цінностей
• Воронка продажів
• Види користувачів
• Принципи сприйняття і психологія користувачів
• ЦА
• Сценарії користувача

Customer Journey Mapping

• Компоненти та типи Customer Journey Map
• Алгоритм створення CJM

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

• Контент-стратегія. Визначення вимог до контенту. Робота з контентом
• Навігаційний дизайн
• Wireframe
• MVP, MVL
• Тестування прототипів
• Axure
  • Введення в Axure. Огляд можливостей
  • Робота з бібліотеками
  • Інтерактивність в Axure
  • Інтерактивний прототип

Веб-дизайн

• Moodboard як інструмент по створенню креативної концепції продукту
• Сітка і композиція в інтернеті
• Типографіка
• Основи колористики
• Цікава подача інформації
• Приватне позиціонування
• CTA
• Елементи Лендінзі
• Іконки
• Форми і кнопки
• Стилі в веб-дизайні

UI

• UI-kit створення і підбір шаблонів
• Повідомлення / помилки (оповіщення користувача)

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

• Atomic Design
• IBM visual language
• Fluent Design (Microsoft)
• Material Design (Google)
• iOS (Apple) VS Windows
• Дизайн для Retina
• Guideline

Мобільні інтерфейси

• Особливості інтерфейсів для десктоп, планшетів і мобільних пристроїв
• Типографіка в мобільних інтерфейсах
• UI паттерни
• Адаптивний дизайн, чуйний дизайн
• Гібридні і нативні мобільні додатки
• Особливості платформи iOS, інструкція по гайдам, UI кіти
• Особливості платформи Android, інструкція по гайдам, користності. Відмінності від iOS
• Navigation
• Тренди мобільного дизайну

Тестування Usability

• Юзабіліті-тестування
• Hallway testing
• Remote usability testing
• Expert review
• A/B testing

UI для VR/AR/MR

Види відмінності, де застосовуються

Баннери

Види, відмінності, де застосовуються

Редизайн, гіпотези

• Редизайн. Специфіка застосування
• Гіпотези щодо поліпшення

Soft Skills

• Правила презентації проєктів і гіпотез
• Резюме, портфоліо

Фінальний іспит

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

• Пройдете всі етапи розробки дизайну продукту з нуля
• Заняття 2 рази на тиждень по 2 пари
• Структурована подача знань
• Викладачі практики
• Підготовка до працевлаштування

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

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

Блок 1. Продакт-дизайн: що, як і чому

Інтро

• Що таке продакт-дизайн
• Як дизайн впливає на user experience та user satisfaction
• Вплив дизайну на емоційний стан юзерів
• Роль та зони відповідальності продакт-дизайнера
• Продакт-дизайнер vs продакт-менеджер
• Взаємодія з іншими командами
• Хард-скіли продуктового дизайнера
• Інструменти продакт-дизайнера
• Успішні кейси UX-дизайну

Флоу продуктового дизайну

• Step by step: від ідеї - до реалізації
• Брейнштормінг
• Прототипування і тестування
• Впровадження та запуск
• Як дизайн розвиває бізнес та інновації
• Інноваційні підходи в дизайні

Блок 2. Business thinking у дизайні

База з бізнесу для дизайнера

• Бізнес-грамотність для дизайнерів
• Базові терміни та концепції
• Метрики успіху продукту
• Бізнес-мислення

Воркшоп. Брифування клієнта

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

• Методи дослідження ринку
• Аналіз трендів ринку
• Типові бізнес-моделі
• Кейси успішних бізнес-моделей
• Переконливий value proposition
• Базові фінансові поняття
• Як дизайн-рішення впливають на кінцевий результат
• Зв'язок дизайну та бізнес-показників
• Вплив UX на бізнес-показники
• Як узгодити дизайн та бізнес-стратегію

Воркшоп. Value Proposition та аналіз конкурентів

Блок 3. Product thinking у дизайні

Що таке product thinking

• Product thinking vs design thinking
• Як застосовувати кожен підхід
• Принципи user-centered дизайну

Потреби та болі юзерів

• Як визначити потреби та проблеми користувачів
• Методи збору інформації про юзерів
• Аналіз даних для визначення потреб

Product roadmap та пріоритезація функцій

• Етапи життєвого циклу продукту
• Дизайн на кожному етапі продуктового циклу
• Як створити product roadmap
• Методи пріоритизації для ефективного управління
• Ключові KPI продукту
• Як використовувати KPI для прийняття дизайн-рішень
• Приклади product roadmap

Фідбек-сесія. Обговорення product roadmap

Блок 4. Research у продакт-дизайні

Види рисерчу в продакт-дизайні

• Види рисерчу та коли застосовувати кожен
• Кількісний vs якісний рисерч
• Техніки interviews, surveys та usability testing
• Market research
• Перетворюємо дату на інсайти
• Аналіз та інтерпретація даних

Воркшоп. Usability testing

• Проводимо usability testing
• AI для тестування юзабіліті

User personas та journey maps

• Як створити user personas та journey maps
• Визначаємо головні характеристики юзерів
• Приклади ефективних user personas
• Як включити research-ідеї в процес дизайну
• Як покращити дизайн фідбеком з рисерчу

Блок 5. Інтерфейс, прототип, тестування

Гіпотеза, ідея, концепт, візуальна мова

• Як перетворити гіпотезу на концепцію
• Створення візуальної мови та interaction patterns
• Wireframes, sketches
• Кейси

Фідбек-сесія. Обговорення прототипів

Дизайн-системи та створення компонентів

• Визначення дизайн-принципів
• Що таке дизайн-системи
• Приклади популярних дизайн-систем
• Різниця між дизайн-системою та UI kit
• Переваги дизайн-систем та кому вони (не) потрібні
• Створення компонентів та patterns
• Документація та governance дизайн-систем
• Робота з cross-functional командами
• Dark UX-design patterns

Воркшоп. Створюємо дизайн-систему

Дизайн для accessibility та inclusivity

• Інклюзивний дизайн - важливий
• Стратегії для створення доступних продуктів
• Інструменти й методи для забезпечення доступності

Блок 6. Презентація роботи

Сторітелінг для дизайнерів та структурування презентацій

• Сторітелінг для комунікації дизайнерських рішень
• Дизайн-принципи для презентацій
• Інструменти для презентацій
• Створення презентацій для різних аудиторій
• Техніки переконливої комунікації
• Структурування презентацій

Фідбек-сесія. Презентація драфту продукту

Персональний бренд і нетворкінг

• Як розвивати персональний бренд
• Ефективні стратегії нетворкінгу
• LinkedIn

Резюме та портфоліо

• Як підготувати професійне резюме та портфоліо
• База успішного резюме на кейсах
• Як презентувати свої проєкти

Підготовка до інтерв'ю та фриланс

• Підготовка до інтерв'ю та портфоліо review
• Типові запитання та відповіді
• Як презентувати своє портфоліо на інтерв'ю
• Фриланс
• Як знайти клієнтів та втримати їх
• Головні скіли для росту кар'єри

Випускний. Симулятор інтерв'ю

Після курсу ти:

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

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

• Допомога ментора
• Сертифікат про проходження курсу
• Проєкти в портфоліо
• За всі виконані ДЗ ти потрапиш на майстермайнд, а за дотримані дедлайни на one-to-one із лектором

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

Алекс Довгий - Senior Product Designer

Протягом курсу зробиш проєкт для портфоліо з 5 ключовими складовими UX/UI-дизайну. В кінці отримаєш фідбек, лекцію з рекрутером та відгук у Linkedin найкращим студентам від лектора - для твого вдалого старту в геймдеві.

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

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

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

ДЗ: навести приклади продуктів та сервісів з елементами внутрішньої мотивації та знайти ситуації, коли ігри її не мають.

Заняття 2. Usability

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

ДЗ: навести 5 прикладів застосування ігрових евристик в улюблених іграх

Заняття 3. Друга складова UX - Engage-Ability

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

ДЗ: розібрати 1-2 гри на чинники мотивації, пропрацювання емоцій гравця, стан потоку та успішність.

Заняття 4. Design Thinking

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

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

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

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

ДЗ: розробити дизайн головного та пауз-меню в команді та самостійно попрацювати над розділами пауз-меню.

Заняття 6. Figma: Tips & Tricks

• Автолейаут, змінні, компоненти та їхні властивості
• Microinteractions
• Smart-анімації
• Плагіни для прототипування з геймпадом, видалення фону, шрифти
• Використання OBS Studio для запису функціонування прототипів

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

Практична робота.

Заняття 8. User Research: методи та інструменти

• Оцінка евристиками
• UX-тести
• Опитування
• Коридорні тести
• Аналітика

ДЗ: провести A/B-тестування свого дизайн-рішення розділу меню серед однокурсників.

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

Створити User Flow та Wire Flow на основі брифу для гри.

Заняття 10. Робота зі стайлгайдом гри

• Типографія
• Колористика
• Розбір стайлгайдів ігор
• Композиція

ДЗ: разом із командою створити стайлгайд для інтерфейсу гри, індивідуально обрати гру та розібрати її стайлгайд.

Заняття-практика 11. Аналіз та розробка HUD

Практичне заняття в групі.

Заняття 12. Adobe Photoshop: Tips & Tricks

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

ДЗ: створити колаж з елементами дієгетичного або просторового інтерфейсу та розробити HUD разом із командою.

Заняття 13. Фідбек-сесія

Заняття-практика 14. Психологія та робота мозку в іграх

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

Заняття 15. Розробка UI-дизайну та прототипа на основі брифу від геймдизайнера (командна робота)

Практична робота.

Заняття-практика 16. Доступність гри. Accessibility A11Y

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

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

Практична робота.

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

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

ДЗ: оформити портфоліо з виконаних на курсі робіт.

Заняття 19. Лекція з HR

• Підготовка CV та створення профілю в LinkedIn
• Як аплаїтись на роботу в Україні та закордоном: актуальні ресурси
• Підготовка до співбесіди: як презентувати себе на співбесіді та які питання ставити

Заняття 20. Business centered design

• Система нагород
• Як потрапити на гачок - Hook Model
• Dark UX patterns та упередження

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

Результат курсу

• Освоюєш базові скіли UX/UI-дизайнера для розробки ігор
• Працюєш із Design Thinking та вмієш нативно залучати юзера до гри
• Розумієш, як працює індустрія геймдеву та зони відповідальності дизайнера ігрових інтерфейсів
• Робиш Player-Centric дизайн інтерфейсів та складаєш зрозумілу навігацію гравця
• Знаєш та без рандому застосовуєш головні фішки Figma та Adobe Photoshop для інтерфейсів ігор
• Оформлюєш кейс у портфоліо, з яким зможеш починати шлях у кар'єрі

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

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

Навчишся працювати за повноцінним дизайн-процесом, починаючи з досліджень і закінчуючи інтерфейсними рішеннями для мобільних додатків та web-сервісів. Після курсу опануєш популярні UX-методології, вмітимеш проєктувати зручний та привабливий UI. Також тебе чекає оформлення твоїх проєктів у портфоліо на Behance.

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

Design Basics

• Figma Essentials
• Basic UI Elements
• Components, Autolayout, and Variants
• Typography Basics
• Grids
• Prototyping
• UI Design
• Clickable Prototyping

Course Fundamentals

• How to learn effectively
• Figma practice

UX Design - Research

• Intro
• Design Process
• Quantitative Research (Surveys)
• Heuristic Interface Analysis
• Qualitative Research (In-Depth Interviews)
• Jobs To Be Done
• Customer Journey Mapping
• Kano Model. Features Prioritization
• Information Architecture Mapping
• User Flows
• Prototyping
• Unmoderated User Testing

Design Basics Extended

• Law of Proximity
• Law of Common Region
• Negative space
• Contrast
• Buttons
• Inputs

UI Design - Mobile App Design

• Grids
• Mobile Interfaces
• Interface Patterns & Trends
• Colors & UI
• Typography
• Design Gestalts and Rules
• Handoff Preparation (UI Kits)

Web Interfaces

• Scrum Methodology
• Gathering Data From Interviews
• Personas and User Stories
• Product Hypotheses
• Prototyping
• Composition and Typography
• Graphic Rhymes
• Adaptive Design
• How to Present Your Work
• Project Presentation
• Design Systems

Portfolio Cases on Behance

• Behance Overview
• Case Structure
• Trends
• Case Design Tips
• Second Behance Case

Creative Web

• Design exploration
• Site structure and mood board
• Wireframing
• Concept creation
• Adapting design
• Third Behance case

Employment

• Introduction
• Preparing Your Resume
• Interview Preparation
• Preparing Your Cover Letter
• DOU and Google Profiles
• Creating Your LinkedIn Profile
• How to Communicate in the Right Way
• How to Apply for a Job on Different Platforms
• How to Find Vacancies
• How to Find Recruiters' Contacts
• Employment daily activities
• Creating Your Djinni Profile
• Work details FAQ

HTML + CSS Basics

• HTML Basics
• CSS Basics
• Colors and Fonts
• Box Model Basics
• Semantic Basics
• Responsiveness Basics
• CSS Selectors
• Pseudo-Elements and Pseudo-Classes
• Specificity
• Links and URLs
• Images
• Media Queries
• Forms
• Position
• Extra topics

Career Development

• Mastering Your Probation Period
• PDP and Career Plans
• Salary Review Strategies
• Recruiter Outreach
• How to Find a New Job?

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

• Працюєш? Вчись у власному темпі
• Зідзвони з менторами тричі на тиждень
• Чат з одногрупниками
• Навчальні матеріали "без води" замість довгих лекцій
• Матимеш 4 робочих проєкта в портфоліо: 3 індивідуальних і 1 командний
• Підготовка до працевлаштування: технічні співбесіди з менторами, перевірка CV, професійних соцмереж, підготовка до інтерв'ю, підбір вакансій для працевлаштування
• Гарантуємо працевлаштування після навчання
• Повернемо кошти якщо не знайшов роботу в ІТ

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

• Eugene Ochkalenko - Product designer / Coach
• Olya Koval - Student Coordinator

Дизайнер – одна з основних професій у IT-галузіі. Все, що ти бачиш в інтернеті, хтось придумав і намалював. Дизайнери потрібні кожному бренду, тож вакансій завжди багато. Це професія із величезними перспективами. Ти навчишся створювати сучасні інтерфейси та зможеш працювати UI/UX дизайнером у IT або Digital.

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

Web design

• Введення у курс
• Первинне вебдослідження
• Лендинг, його призначення та функції
• Прототипування
• Сітки, види та особливості
• Основи композиції
• Стилі у вебдизайні
• Візуальна ієрархія
• Іконки та ілюстрації
• Ефекти в вебі
• UI kit та адаптація
• Типографіка
• Колір та сприйняття
• Основи тестування
• Робота з векторною графікою
• Робота з растровою графікою
• Основи роботи з анімацією
• Behance кейси
• +1 особистий проєкт: лендинг із адаптацією
• +1 особистий проєкт: UI kit та корпоративний сайт

UX/UI design

• Вебсервіси
• Концепція проєкту
• Модель Кано
• Roadmap продукту
• MVP/MMP: що це і навіщо
• Прототипування mobile first
• Цільова аудиторія
• Портрети користувачів
• Customer journey map
• Jobs to be done
• Робота з user story
• Принцип HADI
• Побудова гіпотез
• Навігація та структура
• Дизайн системи та як з ними працювати
• Атомний дизайн
• Форми
• Подача інформації
• +1 командний проєкт: розробка вебзастосунку

Mobile design

• Особливості дизайну для мобільних пристроїв
• Проєктування інтерфейсів для iOS та Android
• Формування концепту проєкту
• Дизайн процес
• Навігація, основні патерни
• Робота з онбордингом
• Мобільне прототипування
• Робота з формами
• Робота з порожніми скрінами
• UI мобільного додатка
• Робота з дизайн-системою
• Анімація в мобільних додатках
• Анімація, розваги у Figma
• Анімація, розваги у Protopie
• Формування кейса на Behance
• Анімація кейса на Behance
• +1 командний проєкт: розробка мобільного застосунку

Soft skills

• Філософія Agile
• Методологія Scrum
• Робота в команді
• Тайм-менеджмент
• Аналітика проєктів
• English speaking club (пакет Plus)
• Робота з EnglishDom Words
• Заняття з працевлаштування
• Складання грамотного резюме
• Створення сторінки на LinkedIn
• Написання мотиваційного листа
• Майданчики для пошуку роботи
• Підготовка до HR-інтерв'ю
• Підготовка до технічного інтерв'ю
• Комунікативні навички
• Тестові співбесіди

Career skills

• Створення резюме
• Оформлення профілів Linkedin та Djinni
• Підготовка до HR та технічної співбесіди
• Індивідуальні кар’єрні консультації
• Рекомендація студентів на вакансії партнерів

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

• Круті ментори
• Кар'єрний сервіс
• 2-3 вебінари на тиждень
• Кабінет my.goit
• Спілкування в чаті

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

• Маша Руденко - Senior UX/UI Designer в GoIT
• Міша Губа - Product Designer в Wispence
• Олійник Тарас - Product UI/UX Designer NEAR One Click Crypto, Jump
• Єршов Владислав - UI/UX Designer
• Білик Андрій - Студія WEBGORILLA, COO
• Скакун Олександр - Art Director & Product Designer
• Заступ Олександр - Lead UI/UX Designer at Lampa Software