Курс UX/UI Design

Опануй Figma, навчися працювати з ТЗ та брифом, проектуй вебінтерфейси та створюй сайти, які не хочеться закривати. Усьому цьому ми навчимо тебе на курсі UI/UX дизайну за 4 місяці.

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

Модуль 1 - Вступ, знайомство з Figma

Заняття 1. Введення у дизайн

• Познайомимося, поговоримо про те, що таке дизайн UX/UI, UX vs UI: в чому різниця
• Хто такий UI/UX дизайнер і що він має вміти?
• Варіанти роботи UX/UI дизайнером та розвитку кар'єри: плюси та мінуси
• Обговоримо вдалі та невдалі приклади сайтів
• Зареєструємось на Behance та dribble

Заняття 2. Figma Start: Основи роботи з програмою

• Чому Figma? Переваги інструменту. Створимо команду для спільної роботи над дизайн-проєктом
• Базовий інструментарій, знайомство з інтерфейсом Figma
• Сплануємо по етапах роботу над підсумковими проєктами для портфоліо
• Проведемо дослідження джерел
• Розпочнемо роботу над першим проєктом для портфоліо дизайнера

Заняття 3. Figma Pro: разом малюємо лендінг

• Як дизайнер підходить до проєктування сайту?
• Основні блоки посадкової сторінки та правила їх розміщення: логотип, заголовки, категорії, іконки, зображення тощо
• Вивчимо та намалюємо елементи різного типу: покрокові інструкції
• За підтримки ментора створимо першу сторінку сайту

Модуль 2 - UI в деталях, практика візуалу

Заняття 4. Figma: разом малюємо лендінг

• Як дизайнер підходить до проєктування сайту?
• Основні блоки посадкової сторінки та правила їх розміщення: логотип, заголовки, категорії, іконки, зображення тощо
• Вивчимо та намалюємо елементи різного типу: покрокові інструкції
• За підтримки ментора створимо першу сторінку сайту
• Зберемо moodboard для своїх проєктів

Заняття 5. Менторська сесія

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

Заняття 6. Adobe Illustrator

• Ознайомче заняття з Adobe Illustrator
• Векторна та растрова графіка
• Взаємодія Illustrator із Figma

Заняття 7. Adobe Photoshop

• Робоча область. Перші кроки. Пензлі. Режими накладання
• Ретушування зображень. Вирізання
• Ретушування зображення (заплатка, клонувальний штамп)

Заняття 8. Менторська сесія

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

Заняття 9. Тренди 2023

• Дизайн-тренди. Порівняємо скевоморфізм, FLAT, material, бруталізм, isometric, glass morphism
• Подивимося різні стилістичні прийоми: білий простір, нестандартна сітка, градієнт, упор на типографіку, 3D, grunge, реалізм тощо
• Як вибрати стиль для конкретного проекту?
• Як стежити за трендами дизайнеру-початківцю?
• Деталізація макету: від scetch-малюнку через wireframe до реалізації

Заняття 10. Дизайн-тренди

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

Заняття 11. Типографіка

• Принципи, основні поняття та терміни типографіки
• Види та класифікація шрифтів, допустимі розміри на сайтах та мобільних пристроях
• Трекінг, керлінг. інтерліньяж – приклади
• Практика: працюємо з типографікою, застосовуємо знання на практиці, щоб застилити статтю
• Як працювати з референсами (прикладами)

Заняття 12. Сітки та композиція

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

Заняття 13. Кольори та зображення

• Теорія кольору, поєднання кольорів, холодні та теплі кольори
• Кольорові моделі: CMYK, HEХ, колірне коло
• Психологія сприйняття кольору
• Лайфхакі вибору правильної кольорової схеми: дізнаємося, як і коли потрібно додавати колір

Заняття 14. Менторська сесія

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

Модуль 3 - UX. Мобільний додаток. Анімація

Заняття 15. Дизайн патерни, кнопки, форми, навігація

• Дизайн патерни, кнопки, форми, навігація
• На занятті ми дізнаємось, як створювати інтерактивні елементи
• Вивчимо елементи управління та навігації: види та стани кнопок, проектування форм зворотного зв’язку, календарі, меню та навігація

Заняття 16. Адаптив: мобільна версія сайту

• Статистика, адаптивна верста, мобільна версія та програми
• Види адаптації
• Mobile first
• Основні правила та принципи
• Універсальні прийоми
• Адаптуємо сайт під мобільну версію

Заняття 17. Менторська сесія

• Мобільна версія+desktop
• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо подив, формуємо критерії успішних проектів

Заняття 18. Кейси для Behance

• Як правильно складати та оформлювати кейс на Behance
• Базові прийоми Photoshop, які однозначно стануть у нагоді дизайнеру

Заняття 19. Менторська сесія

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

Заняття 20. Проєктування мобільних додатків: старт проєкту

• Етапи роботи над мобільним додатком
• Розробка концепції, ресерч (дослідження)

Заняття 21. Основи дизайн-мислення. UX-стратегія

• Робота з брифом: mind mapping та інформаційна архітектура
• Визначення та особливості Цільової аудиторії
• Метод персон

Заняття 22. UX-дослідження: аналіз конкурентів, персони та карти емпатії. Customer journey map та User flow

• Сustomer Journey Map
• Юзер флоу (User Flow)

Заняття 23. Менторська сесія

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

Заняття 24. Прототипування: елементи сайту та скетчинг. Прототипування: wireframing

Прототипування: елементи сайту та скетчинг Прототипування: wireframing

Заняття 25. Менторська сесія

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

Заняття 26. Дизайн мобільного додатку

Проектування дизайну мобільних додатків зі застосуванням гайдлайнів під iOs/Android

Заняття 27. Менторська сесія

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

Заняття 28. Анімація та прототипування у Figma

• Практичне заняття
• Ефекти та налаштування анімації у програмі
• Як ними користуватися
• Створюємо кілька анімацій

Заняття 29. Заняття з розробником

• Як дизайн перетворюється на код?
• Готуємо макет для передачі розробнику
• Що верстальнику потрібно для комфортної роботи
• Підтримка відносин із клієнтами

Заняття 30. Менторська сесія

• Відслідковуємо прогрес проектів, оцінюємо кейс на Behance
• Отримуємо фідбек за своїми домашніми завданнями
• Аналізуємо проекти одногрупників під керівництвом викладача
• Тренуємо надивленність, формуємо критерії успішних проектів

Заняття 31. Резюме дизайнера

• Приклади вдалих резюме дизайнера
• Що треба писати, чого уникати
• Як складати резюме новачкові і куди подаватися
• Починаємо працювати над дизайном резюме

Заняття 32. Розмова із кар'єрним менеджером

• Як і де шукати роботу для початківця та які інструменти при цьому використовувати
• Як правильно зробити резюме та яка інформація в ньому надважлива, а що буде зайвим
• Як створити профіль на Linkedin, щоб його могли побачити потенційні роботодавці
• 7 порад, які допоможуть пройти онлайн співбесіду набагато успішніше
• Q&A

Дипломна робота

Етап 1 Задача дипломного проєкту

Дипломна робота включає в себе на задану вчителем тему створення власного дизайну інтернет магазину та додавання його на сторінку Behance у вигляді презентації. Завдання – створити магазин у desktop версії та зробити адаптиви (мобільна версія та планшет). У дипломній роботі має бути 8 обов’язкових сторінок магазину.

Етап 2 Захист дипломної роботи

• На захисті вам доведеться показувати свою найкращу роботу досвідченим дизайнерам, розробникам та рекрутерам
• Отримуємо зворотний зв’язок та визначаємо свій шлях дизайнера

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

• Безкоштовна IT англійська
• Додаткові матеріали
• Кар'єрний менеджер
• Діджитал диплом для Linkedin

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

• Дмитро Іванов - Middle UI/UX designer
• Ольга Вихристюк - Senior UI/UX designer
• Ольга Макарова - Senior UI/UX designer
• Матвієнко Поліна - Middle UI/UX Designer