Курси Web Design / UI/UX

Це професійний курс дизайну сайтів, мобільних додатків та ігор від GoIT, адаптований для підлітків.

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

Design Junior (10-12 років)

Семестр 1

• Знайомство з інструментами Canva
• Шаблони, фігури, кольори. Ієрархія кольорів в проєктах
• Робота з зображеннями, фотографіями, текстом та шрифтами
• Дизайн та анімація для соцмереж у Canva
• Оформлення презентації для навчання
• Створення візитівок, розробка логотипу. Мокапи
• Інтро-лого, брендові постери, мерч
• Знайомство з Photopia. Патерни
• Ребрендинг для обраного бренду

Семестр 2

• Інструменти Wix
• Знайомство з UI/UX
• Cайти та їх види. Хедер, футер, складові сайту
• Створення сайту на шаблоні про святкову подію
• Анімація елементів на сайті

Фінальні проєкти:

• Оформлення власних соціальних мереж
• Створення стікерпаків для Telegram
• Створення власного бренду
• Власний сайт портфоліо з роботами за весь курс

Graphic Design (12-16 років)

Семестр 1

• Знайомство з інструментами Adobe Photoshop
• Композиція в дизайні, робота з фігурами
• Колір, градієнти
• Робота з векторною графікою
• Виділення, маски та ефекти
• Коригуючі шари, пресети
• Обробка фотографій
• Типографіка і колажі
• 3D, Анімація
• Стікерпаки, банери, мокапи
• Дизайн Landing Page

Семестр 2

• Знайомство з інструментами Adobe illustrator
• Сітка, маски і трасування
• Пензлі, олівець
• Типографіка з ефектами
• Шучний інтелект в Illustrator
• Розробка власного бренду
• Логотип, візитна картка, буклети
• Іллюстрація та дизайн продукції

Фінальні проєкти:

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

Web Designer (13-16 років)

Семестр 1

• Знайомство з інструментами Figma
• Основні етапи розробки сайтів та лендінгів
• Стилі, типографіка і прототипи
• Растрова і векторна графіка
• UI-kit, адаптивний дизайн
• Дослідження у UX/UI design. Цільова аудиторія
• Наповнення сайту, форми зв'язку
• Анімація на сайті. Підготовка макету

Семестр 2

• Архітектура та дизайн веб-додатків
• Патерни поведінки користувача у додатку
• MVP (Minimum viable product)
• Дизайн мислення
• Робота з дашбордами
• А/Б тестування
• Анімація у веб-додатках
• Дизайн система

Фінальні проєкти:

• Розробка дизайну багатосторінкового сайту
• Розробка дизайну мобільного додатку

Motion Design (14-16 років)

Семестр 1

• Знайомство з інструментами MediaCoder, After Effects, Premiere Pro
• Композиція, базовий монтаж відео
• Текст, графічні шаблони, звук, субтитри
• Ефекти, експорт, рендерінг
• Motion-графіка, стилі, застосування
• Фігури, текст, маски, анімація
• Робота з ефектами, морфінг
• Штучний інтелект для дизайну та монтажу
• Світло, камера, 3D простір
• Брифи, технічне завдання, взаємодія з замовником

Семестр 2

• Анімація персонажа, логотипу
• Заставка для YouTube-каналу
• Chromakey
• 2D + 3D трекінг і Matchmoving
• Камери. Багатокрапкове відстеження
• Content Aware Fill
• Rotoscoping та Compositing

Фінальні проєкти:

• Монтаж Reels або TikTok
• Створення промо відео
• Створення шейпової анімації
• Розробка інфографіки
• Створення відео для YouTube-каналу
• Створення власного відео портфоліо

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

• Кабінет студента
• Онлайн заняття
• Ігровий формат занять
• Невеликі групи
• Зворотній зв'язок

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

• Єлизавета - 2+ роки досвіду викладання Digital Design, Motion Design
• Олександра - 5+ років досвіду викладання дизайну та малювання
• Дар'я - UI/UX Designer
• Валерія - 7+ років досвіду у сфері дизайну
• Єлизавета - 2+ роки досвіду роботи з UI/UX
• Віктор - UI/UX дизайнер
• Віолетта - 3+ роки досвіду graphic design
• Сергій - 5+ років досвіду роботи у дизайні

На курсі ви отримаєте теорію, практику, а також інструменти, які допоможуть реалізовувати проекти у веб-дизайні. Під час курсу ви попрацюєте з програмою Figma, а в процесі навчання виконаєте завдання, які можна буде сміливо додати у портфоліо.

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

Введення в курс. Знайомство з професією веб-дизайнера

• Про професію
• Основні закони User Experience і як їх примінити на практиці
• Типи сайтів: класифікація і основні відмінності
• Робота в Figma, Adobe Photoshop і Adobe Illustrator

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

• Платформи і сайти, де дизайнер початківець може почати кар'єру
• Практика: резюме в Figma. Знайомство з програмою і вчимося складати резюме, яке відповідає потребам ринку

Методи захисту свого проекту/дизайну і успішної роботи з критикою замовника

• Як працювати з критикою замовника
• Методики захисту свого проекту
• Розбір домашніх завдань і аналіз помилок

Основи Visual design. Створення банера для сайту

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

Основи accessibility інтерфейсів

• Базові вимоги до доступності
• Підбираємо контрастність і шрифт для кращого сприйняття
• Аналізуємо домашні роботи і обговорюємо розповсюджені помилки

Основи респонсив дижайну, сітки і брейкпоінти. Створення лендінгу

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

Естимація і дедлайни

• Як оприділяти терміни на виконання задач
• Як не порушувати дедлайни
• Поради по комунікаціям з клієнтом
• Аналізуємо лендінги студентів і виявляємо найчастіші помилки

Основи UX, Design thinking. Створення брифу, аналіз конкурентів

• В чому важкість роботи UX-дизайнера
• Які практики варто використовувати
• Вимоги і обмеження, які треба взнати в клієнта перед початком роботи
• Порівняльний аналіз конкурентів
• Оприділяємо найважливіші функції майбутнього сайту

Аналіз існуючого дизайну, евристична оцінка юзабіліті. Редизайн сторінки в інтернеті

• Правила юзабіліті Нільсена і їх застосування в аналізі дизайну
• Практика: аналіз і покращення дизайну сторінок сайту

Розбір домашнього завдання "Редизайн сторінки в інтернеті"

• З кожним студентом розбираємо його ДЗ по редизайну
• В групі дивимось на те, які помилки в старому дизайні вдалося найти і які рішення можна запропонувати

Найкращі практики в e-commerce. Створення головної сторінки інтернет-магазину для десктопа і мобільного

• Практики і тренди по створенню інтернет-магазинів
• Елементи і блоки для головної сторінки інтернет-магазину
• Практика: малюємо головну сторінку в розширені 1440х900 (десктоп) і 812х375 (мобільний)

Розбір домашнього завдання "Головна сторінка інтернет-магазину"

Огляд попереднього домашнього завдання студентів

UIKit, Design System, Atomic design. Створення каталога, карточки товару для десктопа і мобільного

• Використання базових компонентів для великого сайту
• Різниця між UIKit і Design System
• Практика: продовжуємо роботу над інтернет-магазином - робимо каталог і карточки товарів

Розбір домашнього завдання "Каталог, карточка товару для десктопа і мобільного"

Аналізуємо роботи і розбираємо популярні помилки в попередньому домашньому завданні.

Створення корзини і процесу оформлення замовлення. Десктоп і мобільна версія

• Основні практики і найкращі рішення
• Практика: Працюємо з самою відповідальною і важливою для бізнесу частиною - дизайн корзини і процесу оформлення покупки

Розбір домашнього завдання "Корзина, процес оформлення замовлення для десктопа і мобільного"

• Аналізуємо роботи студентів
• Особливості реалізації функцій на мобільному пристрої

Інтерактивна презентація проекту в Figma

• Створення інтерактивних моделей сайту
• Як "продавати" дизайн клієнту

Захист курсового проекту

• Захищаєм курсовий проект
• Радуємось успішному проходженню курсу :)

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

• Все що в пакеті Lite
• Доступ до матеріалів та відео назавжди
• Сертифікат про проходження курсу
• Відеозаписи всіх живих лекцій в кабінеті
• Перевірка ДЗ з коментарями від тренера
• Фінальний проект - готовий кейс
• Відеозаписи блоку "IT Career"

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

Олександр Чмира - Senior Experience Designer

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

Design leadership in detail

• Understand the three types of design leadership, and core skills that separate a good leader from a great one
• Discover 12 qualities of effective organisations needed for truly effective design teams
• Map the real needs of your team and organisation with tools like design maturity index and adapt your leadership style for maximum impact
• Formulate a step-by-step design leadership plan tailored for both distributed and co-located teams
• Design rituals that reinforce the beliefs and behaviours of creative teams and organisations

Finding opportunities & defining impactful business problems

• Get proficient at the problem framing that inspires others to search for creative solutions
• Master the frameworks like lean canvas, design briefs, value proposition canvas that help to deal with ambiguity, shape the right problem and cut ineffective business requests
• Learn how the design discovery process can help you drive consistent innovations and do it collaboratively
• Discover how to use strategic research, foresight and system thinking to identify biggest opportunities and motivate your team for design greatness
• Get fluent at communicating ideas in a way to get a business buy-in

Leading design projects for defined problem space

• How to lead the process of roadmapping
• What are the possible process setup solutions
• What is the team setup regarding the project roadmap
• What are the roadmap planning tactics

Helping your team succeed during solution phase

• Craft a team agreement to create a culture of belonging
• Set the stage for creative thinking with intentionally designed meetings and modes of thinking
• Become proficient in creative facilitation using the 4C model to ensure the engagement of the right stakeholders in the most effective formats
• Utilize AI tools effectively during the inspiration gathering and brainstorming phases
• Develop skills to critically evaluate and select the best ideas, enhancing the potential for innovative solutions

How to be a good design leader

• Get a different perspective into what leading for creativity means and how might your team or organisation benefit from more creative support
• Dive deeper into the 3 types of leadership
• Discover what will be easy to integrate into your team or organisation and what will be difficult
• Create your strategies for staying present and engaged. Learn how you will know when to lean in and when to create space for your team to take ownership

Growing your design teammates from the interview up to senior level

• Learn to identify hidden gems during interviews and within your team, enhancing talent discovery and retention
• Master management from an individual contributor (IC) perspective to elevate team performance and productivity
• Develop methods to support and facilitate the growth of your teammates, fostering a culture of continuous improvement
• Promote peer-to-peer learning and collaboration, creating a dynamic environment where collective knowledge enhances individual and team success

Building and managing the most productive and motivated design team

• Learn the principles of building the right team for specific projects, ensuring optimal alignment and efficiency
• Master the art of vocalising the right values and messages, reinforcing a strong team culture and clear vision
• Develop strategies to unblock your team and advance in projects with high ambiguity, promoting continuous progress
• Foster a collaborative and inclusive team environment, enhancing team synergy and innovation
• Address handling burnout and maintaining a healthy work-life balance, crucial for sustaining long-term productivity and motivation

Working with in/out feedback for better result

• Іntroduce a robust feedback culture, defining its significance and impact in design and general team settings
• Understand the characteristics of effective and constructive feedback using the Specific, Behavioral, Impact, Next Steps (SBIN) framework
• Navigate the timing of feedback, weighing the benefits of immediate versus delayed responses
• Set clear expectations and goals aligned with feedback to enhance performance and clarity
• Tailor feedback effectively to the receiver's role and objectives, utilising various feedback channels to optimise understanding and response
• Implement best practices for feedback documentation and progress tracking, ensuring every piece of feedback translates into actionable insights
• Enhance receptiveness to feedback, developing strategies to foster a growth mindset and objective understanding within your team
• Learn techniques for active listening, managing emotional responses, and utilising feedback to propel personal and professional development

Building the storytelling skills for the successful presentation

• Use knowledge of your audience, their needs for the most powerful way to format your story
• Increase your ability to engage and inspire others through the development of tone, style, medium and timing
• Understand how design leaders can effectively work with other departments like engineering, marketing, and product management
• Learn to measure and communicate the impact of design work to stakeholders
• Get advice from the speakers on practising and perfecting your storytelling skills

Using AI for the better results

• Use AI to visualize complex project structures for improved clarity
• Streamline project planning, task allocation, and timeline creation with AI-driven insights
• Identify potential bottlenecks and resource gaps using AI analysis
• Enhance team communication and collaboration through AI-enabled tools
• Optimize workload distribution and delegation by leveraging AI insights
• Track progress and gain performance insights with AI-based monitoring
• Generate compelling visuals and infographics using AI capabilities
• Craft persuasive narratives with AI assistance to enhance storytelling
• Personalize content for different audiences using AI-driven customization

AI and design ethics

• Balance efficiency gains and innovation with potential job displacement when using AI in design
• Augment creativity without over-relying on automation to maintain a human touch in design
• Leverage data-driven insights while respecting privacy to ensure ethical design practices
• Understand AI's impact on design workflows and decision-making for informed use
• Ensure ethical use of AI-generated content by understanding our responsibility as designers
• Maintain human creativity alongside AI tools to preserve originality
• Stay updated on AI capabilities and limitations to use tools effectively
• Ensure AI tools are used responsibly and sustainably in the design process
• Address bias and promote fairness in AI systems when building AI-based solutions
• Design for transparency to build user trust in AI-driven products
• Consider and mitigate long-term societal impacts of AI for responsible innovation

Building the vision of the game-changing products

• Craft a vision that inspires and aligns with both business objectives and customer aspirations
• Identify disruptive opportunities by analyzing market trends and user needs
• Translate the vision into a strategic roadmap with clear milestones and objectives
• Engage and align your team around the vision through effective communication and storytelling
• Adapt and evolve the vision as new insights, feedback, and technological advancements emerge
• Measure the impact of the vision regularly to ensure it drives innovation and delivers long-term value

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

• 2 онлайн-вебінари на тиждень
• Інтерактивні онлайн-зустрічі
• Грамота за досягнення
• Підтримка ментора
• Сертифікат про проходження курсу
• Можливість повернути кошти протягом 7 днів від старту курсу

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

• Jon Vieira - Product Design Lead at Meta Reality Labs
• Luana Moura - Design Leader & Strategist at GetYourGuide
• Hans von Sichart - Sr. Principal Designer at Palo Alto Networks
• Albina Cholak - Staff Product Designer at Deliveroo
• Bence Csernak - Founder of Bencium AI Consultants

Навчишся створювати та проєктувати інтуїтивно зрозумілі дизайни веб-сайтів, веб-додатків та дашбордів на базовому рівні використовуючи Figma, зможеш пройти стажування та отримати практичний досвід.

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

Введення до курсу

• Привітання
• Огляд програми

Figma

• Комп'ютерна графіка
• Переваги та недоліки Figma
• Робочий інтерфейс
• Інструменти: Objects
• Інструменти: Mask
• Інструменти: Boolean Groups
• Інструменти: Images
• Стилі та їх використання
• Layer ефекти: Blend Modes
• Layer ефекти: Shadow та Blur
• Групування: Group
• Групування: Frame
• Групування: Section
• Групування: Auto Layout
• Групування: Components
• Layout Grid
• Variables
• Інтерактивні макети
• Бібліотеки компонентів
• Плагіни
• Експорт

Основи UI

• Ціль UI дизайну
• Композиція: Основи
• Композиція: Принципи
• Композиція: Сітка
• Типографіка
• Теорія кольорів
• Типи UI Components
• UI Components: База
• UI Components: Вибір елементів
• UI Components: Навігація
• UI Components: Статичні
• UI Components: Інше
• UI Kits

Основи UX

• Ціль UX дизайну
• Закони UX
• 10 евристик юзабіліті Якоба Нільсена
• Доступність та WGAG стандарти (рівні А, АА та ААА)
• Дизайн процес: Аналіз ТЗ
• Дизайн процес: Аналіз ідей
• Дизайн процес: Аналіз аудиторії
• Дизайн процес: Аналіз конкурентів
• Дизайн процес: User Flow
• Дизайн процес: Підбір референсів
• Дизайн процес: Прототипування
• Дизайн процес: Розробка дизайну
• Дизайн процес: Адаптиви
• Дизайн процес: Підготовка макетів для розробників
• UX та веб-додатки

Додаткові інструменти

• FigJam, Miro
• Notion
• Adobe Photoshop
• Adobe Lightroom
• Adobe Illustrator
• Blender
• Інші допоміжні ресурси для дизайну

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

• Допомога ментора
• Практика
• Сертифікат про проходження курсу
• Чат спільноти
• Вебінари та додаткові матеріали
• Заняття з англійської
• Стажування для найкращих студентів

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

Модуль 1. Вступ до UI/UX Design

Хто такий UI/UX Designer

• User Experience
• User Interface
• Переваги та недоліки
• Важливість Англійської мови в професії UX/UI дизайнера

Планування та види дослідження

• Визначення дослідження
• Планування дослідження
• Визначте цілі дослідження
• Визначте досліджувану аудиторію
• Виберіть методи дослідження
• Розробіть план дослідження
• Підготуйте необхідні ресурси
• Заплануйте рекрутинг учасників
• Здійснюйте дослідження
• Аналізуйте та інтерпретуйте результати
• Документуйте та представляйте результати

Модуль 2. Основи UX Design

Що таке User Journey Map та User Flow

• User Journey Map
• User flow

Wireframe

• Wireframe це
• Структура інтерфейсу
• Візуальні елементи
• Відсутність деталей дизайну
• Простота

Модуль 3. Основи UX Design

Евристика

• Видимість статусу системи
• Відповідність до реального світу
• Свобода від помилок
• Консистентність та стандарти
• Універсальність та повторне використання
• Забезпечення користувальницького контролю
• Уніфікація та ефективність
• Забезпечення розуміння та навігації
• Забезпечення дизайну за замовчуванням
• Забезпечення діагностики та виправлення помилок

Закони UX

• Закон Фіттса (Fitts’s Law)
• Закон Гікса (Hick’s Law)
• Закон Проксемікі (Proximity)
• Закон Байєса (Bayes’ Theorem)
• Закон Вебера-Фенхера (Weber’s Law)

Модуль 4. Основи UI Design

Композиція

• Статична композиція
• Динамічна композиція
• Навіщо нам потрібні правила композиції
• Композиція допоможе
• Ієрархія об'єктів
• Колір
• Форма

Елементи типографіки

• Типографіка
• Шрифти
• Товщина шрифту
• Основний текст
• Заголовки
• Розмір і міжрядковий інтервал

Модуль 5. Колір та іконки

Теорія кольору

• Теорія
• RGB
• CMYK
• HEX code
• Колірна палітра
• Відтінок
• Градієнт
• Контраст
• Непрозорість

Дизайн іконок

• Основна мета іконки
• Сценарії використання іконок
• Правила використання
• Де використовувати

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

• Особистий кабінет та ком'юніті
• Прямі ефіри
• Практикуючі ментори
• Уроки з HR
• Практичний досвід на реальному проєкті
• Модуль із працевлаштування
• Підготовка до співбесіди
• Проєкт в портфоліо
• Сертифікат про проходження курсу
• 2 пакети навчання

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

Роман Максимчук - Практикуючий UI/UX Designer

Це інтенсив з 6 модулів, в яких 40 відео уроків - справжня прокачка твоїх скілів. Кожен модуль - це глибоке занурення у процес створення портфоліо, від концепції до фінальної подачі. Ми крок за кроком вивчатимемо, як трансформувати ідеї у візуальні історії.

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

Модуль 1. Основи крутого Case Study & Аналіз ефективних кейсів

• Що таке кейс стаді. Основні характеристики та проблеми
• Розбір головних складових кейс стаді та типові проблеми, яких слід уникати
• Приклади успішних та неуспішних кейсів. Аналіз реальних кейсів на Behance: що працює, а що - ні
• Аналоги портфоліо на Behance (Notion та власний сайт). Як структурувати кейс на інших платформах
• Чеклісти по створенню кейсів для тебе

Модуль 2. Підготовка та початок створення кейсу

• Підготовка до створення кейс стаді. Необхідні ресурси та матеріали. Конфіденційність
• Написання плану кейсу
• Створення вайрфрейму для побудови структури кейсу
• Створення текстів для кейс стаді. Як написати ефективні тексти для опису проєкту
• Що робити і як презентувати проєкт, якщо немає багато етапів чи досліджень
• Типографіка

Модуль 3. Візуальне оформлення кейсу

• Створення технічного мудборду та пошук референсів. На що звернути увагу у референсах
• Як підібрати кольори, шрифти та інші візуальні елементи
• Пошук стилю кейсу. Як варто оформлювати кейси у 2024-2025 році
• Типові помилки, яких слід уникати під час оформлення візуалу кейсу

Модуль 4. Дизайн секцій кейсу: оформлення UX частини проєкту

• "Hero section". Як створити привабливу першу секцію кейсу, щоб зацікавити з перших секунд
• Секція "Про проєкт: опис, задачі, виклики". Як правильно формулювати опис проєкту, визначати задачі та виклики
• Секція "ЦА (Цільова Аудиторія)" Аналіз і опис цільової аудиторії, для якої створювався проєкт
• Секція "Процес роботи дизайнера/методологія". Пояснення методології, яку ти використовував у роботі над проєктом. Як презентувати її ефективно
• Секції з результатами "БРЕЙНШТОРМІНГУ", "АНАЛІЗУ КОНКУРЕНТІВ", "ОПИТУВАЛЬНИКІВ", "ІНТЕРВ'Ю З ЮЗЕРАМИ"
• Секції "Personas", "CJM", "Sitemap" та "Userflow": оформлення та нюанси
• Як оформити і презентувати ВАЙРФРЕЙМИ проєкту для кейсу
• Секція "Юзабіліті тестування". Як правильно показати результати тестування макетів

Модуль 5. Дизайн секцій кейсу: оформлення UI частини проєкту

• Секція "Мудборд: стиль, кольори, шрифти"
• Секція "UI kit". Як створити візуально привабливу секцію з набором елементів інтерфейсу
• Секція "Візуал: результат". Презентація готового дизайну
• Секція "Адаптивний дизайн". Як показати адаптацію проєкту під різні пристрої у кейсі
• Секція "Висновки" Підсумки проєкту
• Завершальний екран кейсу. Як зробити завершення роботи естетичним і логічним

Модуль 6. Фінальні штрихи. Публікація кейсу та просування

• Фінальні корегування кейсу
• Відео, Анімація та Прототип у кейсі
• Дизайн прев'ю для кейсу. Декілька практичних прикладів
• Налаштування профілю: Behance для максимальної ефективності
• Публікація кейс стаді: Покрокова інструкція
• Просування проєкту: Як привернути увагу до свого кейс стаді на Behance
• Як правильно реагувати на фідбек та вдосконалювати свої кейси після отриманих відгуків

Бонуси

• ШАБЛОНИ крутих кейс стаді у FIGMA, які ми створили спеціально для курсу, і які ти можеш використовувати та комбінувати для своїх проєктів
• Чеклісти для твоїх найкращих кейсів
• Додаткові матеріали, статті та особисті поради лекторок

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

• 40 відео уроків в записі + додаткові матеріали
• Шаблони Figma + чеклісти
• Доступ протягом 24 годин після оплати
• Сертифікат про закінчення курсу
• Самостійне проходження
• 6 місяців доступу до матеріалів

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

• Олександра Коваль - Lead Product Designer
• Катерина Калашнікова - Senior Product Designer at Intellias

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

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

Блок 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

Впродовж курсу ви на практиці познайомитесь з процесом створення схематичних макетів різної деталізації та інтерактивних прототипів.

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

Схематичні макети та інтерактивні прототипи

• Що таке схематичні макети
• Класифікація схематичних макетів
• Інформаційна архітектура
• Інструменти та ресурси
• Створення схематичних макетів
• Створення інтерактивних прототипів
• Підсумки та поради

Після проходження курсу ви зможете

• Розробляти схематичні макети
• Розробляти інтерактивні прототипи
• Швидко візуалізувати та тестувати різні ідеї
• Отримувати ранній зворотний зв'язок від зацікавлених сторін
• Покращити процес комунікації з колегами
• Створювати кращі продукти з погляду UX

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

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

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

Богдан Жук - UX/UI-дизайнер в агенції Goodface

Проходження цього курсу на базі Навчального Центру має масу переваг. По-перше, він компактний, тому ви не витратите на навчання багато часу. Інформація подана в сконцентрованому вигляді, робиться великий наголос на практику. В процесі навчання ви будете виконувати завдання, які можуть стати основою для портфоліо дизайнера.

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

Введення в дизайн UI

• Розробка продуктів: основні етапи
• У чому відмінність UI та UX. UI-дизайнер і його робота над проєктом
• Які інструменти використовує UI-дизайнер

Інструменти дизайнера: Figma і Sketch, Adobe Photoshop, Adobe Illustrator, Invision

• Введення в Figma і Sketch
• Інструмент для розробки макетів InVision
• Avocode - графічний редактор для роботи з файлами PSD і кодом
• Як сформувати бриф відповідно до вимог замовника
• Дослідження ринку, аналіз конкурентів
• Підбір референсів
• Мудборд - що таке, як його створити
• Презентація результатів

Базові відомості про дизайн

• Основи композиції, приклади рішень
• Статична і динамічна композиція
• Шрифти - класифікація, поєднання різних видів шрифтів
• Як вибрати шрифт для дизайну
• Основи типографіки для веб-дизайну
• Акцент і ритм в дизайні
• Теорія кольору - властивості кольорів і їх поєднання
• Створення палітри проєкту
• Психологія сприйняття кольору
• Колір з точки зору дизайнера
• Ресурси для дизайнера

Етапи роботи над дизайном

• Етап скетчінга
• Варфреймінг
• Етап інтерактивного прототипування
• Що таке мокап, віжуал

Побудова інтерфейсу: принципи та інструменти

• Модульна сітка в побудові інтерфейсу
• Функції модульної сітки
• Як створити й налаштувати модульну сітку
• Психологічні особливості сприйняття інформації на веб-сайтах
• Блоки інформації та візуальна ієрархія
• Як розставити пріоритети й акценти на різних елементах веб-сторінки
• Стани елементів інтерфейсу
• Форми та навігація на сайті
• Навіщо потрібні фавіконки
• Прелоадери, іконки та інші інформаційні елементи
• Як вибрати стиль іконок
• Графіка для сайту: технічні вимоги до формату
• Типи медіа та їх розміщення: ілюстрації, відео, фотографії
• Що таке responsive та adaptive design - особливості та відмінності
• Принципи mobile first і desktop first
• Що використовувати - адаптивний дизайн або мобільну версію сайту
• Як підготувати макет і зображення для дисплея Retina

Тестування дизайнерського продукту

• Як відбувається тестування під час створення
• Як поліпшити готовий дизайн
• Поняття design handoff

Як підготувати макет до верстки - інструменти

Графічні елементи сайту - підготовка до верстки.

Огляд трендів і історія веб-дизайну

• Історія web-дизайну і перші веб-сайти
• Сучасні стилі: fluent, flat, material design
• Популярні візуальні прийоми та останні тренди

Застосування анімації в дизайні інтерфейсу

• Як анімувати елементи інтерфейсу
• Анімація в ілюстраціях і іконках
• Сервіси для створення анімації

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

• Як презентувати проєкт
• Як аргументувати дизайнерські рішення

Що можуть випускники курсу:

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

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

• Викладачі практики
• Корпоративне навчання
• Можливість навчатись у вихідні
• Можливість влаштуватис у провідні IT-компанії
• Індивідуальне навчання