Курс UI/UX Design: Start

Вивчиш не тільки необхідну базу дизайну для старту в професії, а також базові UX дослідження, анімацію, станеш з інструментом Figma на "ти", навчишся аргументувати та презентувати свої рішення команді. Якісно підготуєшся до пошуку роботи в IT компанії.

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

Введення у професію. Основи Figma

• Що таке UI/UX дизайн? Обов'язки дизайнера
• Інструменти для роботи дизайнера
• Детальне вивчення Figma (1 частина):
  • Знайомство з інтерфейсом
  • Frames&Groups
  • Об'єкти та їхні властивості (тіні, обведення, розмиття тощо)
  • Constraints (обмежувачі)
  • Криві (вектор, іконки)

Дизайн процес. Основи Figma

• Типовий дизайн процес та основні ролі: як в реальному житті
• Формати файлів з якими працює дизайнер
• Детальне вивчення Figma (2 частина і не остання):
  • Градієнти та зображення
  • Вирівнювання (Alignment)
  • Маски
  • Булеві групи
  • Робота з текстом, плагіни

Сітки та роздільна здатність екранів

• Що таке інтерфейс. Розбираємо простими словами
• Сітки. Їхні види та різниця. Колонкова сітка. Блочна. Ієрархічна. Сітка в сітці. Модульна сітка. Базові 4px і 8px (hard та soft) сітки
• Вчимось підбирати сітки під контент. Ніяких шаблонних підходів, тільки свідомий підбір і аналіз
• Правило внутрішнього та зовнішнього. Вчимось робити правильну композицію макету, яку легко сканувати очима
• Естимація (оцінка часу) проєкту. Вчимось рахувати час на дизайн

Типографіка. Тайм менеджмент

• Що таке типографіка? Як обрати шрифт. Шрифтові пари
• Швейцарська типографіка, яка часто лежить в основі мінімалістичного дизайну: кольори, контрасти, шрифти
• Як покращити типографіку на сайті і на що звернути увагу
• Тренди шрифтів. З трендами треба бути обачними, але ігнорувати їх не можна, якщо дизайнер хоче йти в ногу з часом і пропонувати сучасні рішення
• Сервіси підбору класних пар шрифті¸ Як правильно планувати свій час, що не "згорати". Техніки планування

Типи сайтів. Лендінг. Роздільна здатність. UX Writing. Правила UX

• Поширені типи сайтів. Їхні особливості
• Роздільна здатність екранів та як дизайнеру з ними працювати
• Типи макетів: Скетчінг, низькодеталізований та високодеталізований вайрфрейм, мокап та прототип. Коли який використовуємо
• Процес роботи над лендингом (односторінковий сайт). Детальний розбір секцій лендингу
• Аргументація своїх рішень. Як почати пояснювати свої рішення, щоб у них повірили
• Копірайтинг у дизайні. Чому не варто використовувати рибу текст Lorem Ipsum
• Основні правила UX дизайну. Те, що допоможе тобі у дизайні зручного інтерфейсу, орієнтованого на користувача

Композиція. UI елементи. Figma

• Основи композиції. За її допомогою ми можемо керувати увагою та почуттям користувача
• UI елементи їх стани і використання: кнопки, поля введення, радіокнопки, чекбокси тощо, основне, що необхідно для створення сайту
• Інтерактивний гайд по UI елементам
• Детальне вивчення Figma (3 частина): Auto layout, Стилі. Як тримати макет в порядку

Креативна стратегія (метод) Волта Діснея. Воркшоп

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

Колір. Доступність. Мудборд. Тренди

• Основи кольору. Як підібрати кольори проєкту та підібрати відтінки
• Accessibility. Доступність в дизайні. Наша дизайнерська робота полягає в тому, щоб звести до мінімуму проблеми всіх користувачів
• Тренди в UX/UI дизайні
• Пошук ідей візуального дизайну. На що звернути увагу, щоб знайти цікаву ідею
• Створення мудбордів: технічного та для клієнта
• Детальне вивчення Figma (4 частина): Створення "Системи шрифтів"

Візуальна ієрархія. Ілюстрації. Фото. Іконки

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

Практика редизайну з ментором. Воркшоп

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

Як покращити UI (візуал). Тіні. Стилі у Figma

• Важливі деталі візуалу. Як покращити візуал
• Тіні: Коли використовувати і як будувати
• Вивчення стилів кольорів, тексту, тіней у Figma

Компоненти та варіанти у Figma. UI Kit проєкту

• UI kit (Набір всіх елементів, на яких будується дизайн твого сайту). Навіщо він потрібний дизайнеру та розробникам
• Детальне вивчення Components, Variants, Mapping, Variables. Що це таке, як це пришвидшує роботу дизайнера і робить макет більш професійним

Прототип. Анімація у Фігмі

• Детальне вивчення Figma: Інтерактивний прототип у Figma. Збираємо прототип лендингу
• Анімація у Фігмі: різноманітні приклади від менторів школи. Як покращити інтерфейс за допомогою анімації
• Анімація Parallax

Презентація: Урок + онлайн презентація

• Урок по презентації свої робіт та рішень. Поради по презентації. Від якості презентації та аргументації напрацювань залежить успіх їх затвердження
• Практика презентації на курсі. Кожен студент отримує детальний фідбек від ментора, що було добре і, що потрібно покращити

Кейс та портфоліо

• Важливість оформлення портфоліо. Як має виглядати портфоліо дизайнера
• Як правильно оформити кейс, щоб проявити свої навички в дизайні та аргументації, показати процес та результати
• Додаткові поради по кейсу в портфоліо
• Завантаження кейсу на Behance

UX дослідження. Юзабіліті. Брифування клієнта. Визначення цільової аудиторії

• Для чого нам UX дослідження
• Що таке брифування клієнта, чому важливо правильно збирати інформацію про проєкт та як це впливає на успіх проєкту
• Спілкування з клієнтом
• Базове визначення цільової аудиторії продукту. Чому важливо знати свого користувача

Sitemap. User Flow. Тригери у дизайні

• Початок роботи над дизайном інтернет магазина (e commerce). Інтернет магазин комплексний проєкт, який дозволяє закріпити отримані знання та набути нових, більш комплексних, які дадуть нашому випускнику неабиякі переваги перед іншими кандидатами
• Створення Sitemap (мапа) майбутнього сайту, щоб побудувати гарну структуру сайту та оптимізувати її за потреби
• Створення User flow сайту (візуальне зображення послідовності дій, які користувач виконує задля досягнення своєї мети на сайті
• Тригери у дизайні
• Базові засади UX. Юзабіліті (якісний показник простоти та зручності використання сайту)

Аналіз конкурентів за методом Кано

• Онлайн лекція на тему конкурентного аналізу за методом КАНО. Види функцій
• Практика конкурентного аналізу в групах та презентація напрацювань

E-Commerce. Part 1

• Дизайн форм для введення інформації. Вчимось робити швидкі та легкі форми, які будуть виконувати свою задачу та не перевантажувати користувачів
• Login & Sign up в інтернет магазині. Як краще оформити, чому не варто повторювати поле паролю і як полегшити процес користувачу
• Створюємо головну сторінку інтернет магазину
• Детальне вивчення Figma (7 частина): Як створити Drop down list, Як створити Форму

E-Commerce. Part 2

• Будуємо каталог товарів. Вивчаємо різний підхід до вибору фільтрів, сортування
• Як правильно створити картку товару, щоб не наробити хаосу
• Сторінка продукту: вчимось розмішувати великий об'єм інформації на сторінці, виділяти найважливіше та підводити користувача до цілі
• Адаптивний (adaptive) vs Чуйний (responsive) дизайн. Як і навіщо нам адаптувати макети до більших та менших розмірів девайсів? (мобілки, планшети, десктопи)

Q&A-сесія з ментором групи

Спілкування з ментором та відповіді на питання. Можливість дізнатись більше про досвід ментора та відповіді на питання, які ще не були закриті у чатах курсу.

E-Commerce. Part 3

• Кошик товарів. Дослідження свідчать, що майже 70% замовлень так і залишаються в кошику. Розбираємо, як зробити його ефективним
• Checkout (оформлення замовлення). Форма замовлення на сайті має бути швидкою та простою, тому детально пропрацьовуємо цей компонент інтернет магазину
• Сторінки помилок (404). Які вони бувають і як їх правильно пояснювати користувачам
• Адаптивний (adaptive) vs Чуйний (responsive) дизайн. Чому важливо робити дизайн під різні роздільні здатності екранів і як це робити правильно

Основи Usability Testing

• База з юзабіліті тестування. Тестуємо свої макети інтернет магазину на реальних користувачах, отримуємо фідбек і вносимо правки
• Guerilla testing (Коридорне тестування). Коли немає доступу до користувачів чи немає ресурсів для проведення повноцінного тестування

UX аудит інтерфейсу. Евристики Нільсена

Аналіз інтерфейсу по 10 Евристикам Нільсена (10 Usability Heuristics). Як проаналізувати інтерфейс, коли немає доступу до користувачів.

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

• Що це і чому це не те саме, що і UI kit? Як працювати з дизайн системами
• Найпопулярніші дизайн системи

Основи інструменту Adobe Photoshop та Adobe Illustrator

• Знайомство з інтерфейсом програм
• Ретуш, обробка фотографій (Adobe Photoshop)
• Вирізаємо об'єкти (Adobe Photoshop)
• Робота з простим вектором (Adobe Illustrator)

Ретроспектива з ментором групи

• Аналізуємо свій прогрес на курсі
• Ділимося успіхами та провалами
• Визначаємо власні зони розвитку

ШІ для дизайнерів

• Розбираємо популярні ШІ інструменти, які будуть корисними дизайнера
• Як працювати з ШІ

Співпраця з розробниками

Передача дизайн файлів девелоперам. Як правильно це зробити і на що звернути увагу.

Типи ІТ компаній. CV (Резюме)

• Типи IT компаній. Яка різниця? Що обрати і куди піти
• Soft skills. Чому вони важливі і як їх розвивати
• CV (Резюме). Створюємо резюме, яке приверне увагу рекрутерів
• Супровідний лист. Як написати і чому його варто писати новачкам

Співбесіда в ІТ. Відмови

• Співбесіда в IT. Як відбувається. Як підготуватися до ІТ співбесіди, щоб успішно пройти співбесіду і проявити себе
• Як зрозуміти, наскільки ти підходиш на вакансію. Як прокомунікувати свою недостатню відповідність
• Підготовка до співбесід: найчастіші питання, найдивніші питання
• Як психологічно підготуватися до співбесіди
• Чому відмови це окей і як це прийняти

Практика проходження співбесід (з ментором групи)

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

Тестове завдання та випробувальний термін в ІТ компаніях. Ріст дизайнера

• Тестове завдання в IT компанії. Як підвищити шанси виконати тестове успішно
• Випробувальний термін в IT компанії. На що звернути увагу, як пройти і чому не варто боятись
• Ріст дизайнера. Junior Middle Senior: яка різниця
• Фриланс (базове знайомство з фриланс біржами
• Договір із клієнтом, на що звернути увагу
• Що далі? Як розвиватись дизайнеру?

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

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

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

• Олександра Коваль - Lead Product Designer
• Юлія Огороднік - Менторка курсу UI/UX Design: Start
• Тетяна Процько - Менторка курсу UI/UX Design: Start
• Аліна Семацька - Менторка курсу UI/UX Design: Start