Курсы Web Design / UI/UX

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

Теми:

• Вступ до Web-дизайну. Композиція, типографіка, теорія кольору
• Ознайомлення з Adobe Photoshop. Особливості програми, панель інструментів, гарячі клавіші, принципи роботи із шарами, формами. Застосування навичок на практиці
• Знайомство з Adobe Illustrator. Вивчення інтерфейсу, основних інструментів, принцип роботи. Створення логотипу та іконки
• Створення сайту: принципи та алгоритм. Основна ідея та завдання сайту. Збір інформації. Бриф, вимоги замовника, аналіз сайтів конкурентів, позначення цільової аудиторії. Ідеї, приклади для веб-сайту, moodboard. Структура веб-сайту. Створення варфрейму майбутнього сайту. Відображення деталізованого дизайну сайту
• Адаптивність. Правила створення адаптивних веб-сайтів. Основні дозволи для адаптивних веб-сайтів. Відображення кінцевого дизайну сайту під мобільний пристрій та планшет
• Знайомство з Figma. Вивчення інструментів, гарячі клавіші роботи з символами. Поняття плагінів та робота з ними
• Основи HTML/CSS. Використання інструмента Inspect. Передача макету на верстку
• Основи UX: генерація ідей, user stories, user flows, mind maps. Вивчення Balsamiq
• Мобільні програми: особливості дизайну під мобільні пристрої. Поняття гайдлайн мобільних ОС. Особливості створення дизайну під різні платформи iOS/Android. Ознайомлення з UI Kit. Створення мобільного застосунку
• Як презентувати проект замовнику. Робота з InVision, створення клікабельних прототипів
• Огляд анімації в After Effects
• Створення онлайн-портфоліо на Behance/Dribbble, оформлення робіт
• Життя після курсу: як розвиватись дизайнеру, де брати ідеї? Список літератури та ресурсів для самостійного навчання

Результат після проходження курсу:

• Опануйте роботу з такими програмами та сервісами як Photoshop, Illustrator, Figma, Axure, InVision, After Effects, MockFlow
• Дізнаєтеся про те, як створювати продаючій та ефективний дизайн, познайомтесь із сучасними UI/UX технологіями
• Зможете робити гарний та зручний дизайн веб-сторінок та застосунків
• Створіть власне портфоліо, яке допоможе вам на співбесіді
• Найкращі студенти отримають рекомендації від викладача та можливість пройти співбесіду у провідних iT компаніях

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

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

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

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

Знайомство з UX методами та методологіями

• Що таке UX дизайн і найпопулярніші ролі
• Види UX досліджень
• Кількісні та якісні дослідження
• Як обрати правильний UX метод (+вчимося протягом курсу)
• Популярні дизайн методології, їх схожість та відмінність

Брифінг клієнта. Цільова аудиторія. Опитування, як метод дослідження

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

Глибинні інтерв'ю з користувачами, ментальні та концептуальні моделі

• Концептуальна та ментальні моделі. Чому вони важливі
• Глибинні інтерв'ю | In-depth interview
• Як правильно провести глибинне інтерв'ю, де шукати юзерів та що робити із данними
• Відкриті vs Закриті питання
• Поради, як підвищити ефективність інтерв'ю з користувачами

Value proposition Canvas (шукаємо цінність продукту), Personas

• Value Proposition Canvas та її переваги
• Створення Personas: які дослідження потрібні, на що звернути увагу та як їх оформити
• Коммунікація та презентація своїх рішень, як для клієнта, так і для команди

Методи UX Mapping, створення CJM, брейнштормінг, методи відбору ідей

• Порівняння методів UX Mapping
• Розбираємо Customer Journey Map
• Як правильно створити Customer Journey Map і що робити із нею далі
• Як правильно провести брейнштормінг
• Метод Crazy 8's
• Методи вибору кращих ідей після брейнштормінгу

Створення дизайн-рішення, формати та таблиці, фільтри, аргументація

• UX правила та психологічні прийоми в дизайні
• Розробляємо власне рішення на основі досліджень: ваєрфрейми та прототип (індивідуально)
• Як створити ефективні форми на сайті
• Як створити правильну таблицю
• Фільтри та сортування
• Як аргументувати свої ваєрфрейми перед клієнтом
• Основи MVP підходу (база)

Usability testing варфреймів та метрики. Частина 1

• Юзабіліті тестування: від А до Я
• Як правильно провести тестування і отримати релевантні дані
• Метрики: вимірювання успіху UX-дизайну
• Коридорне тестування

Usability testing варфреймів та метрики. Частина 2

• Де і як створити портфоліо: Notion та Behance
• Оформлення Case study з UX дизайну для портфоліо

Резюме та пошук роботи

• Як і де створити ефективне резюме
• Важливі Soft skills для UX дизайнера

7 зустрічей на курсі і 2 презентації

• Онлайн лекція: Навіщо бізнесу UX?
• Онлайн лекція: Модель КАНО
• Воркшоп: Аналіз конкурентів за методом КАНО
• Командна консультація з ментором
• Воркшоп: UX аудит за Евристиками Нільсена
• Онлайн лекція: Техніка воронки в юзабіліті тестуванні
• Q&A сесія

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

• 10 тижнів навчання
• 10 модулів з відео уроками в записі
• 18 студентів у групі
• 6 практичних онлайн занять
• 2 практики презентацій своїх рішень
• Командна та індивідуальна робота на курсі
• Підтримка ментора
• 85% практики та відео-розбір кожної домашки
• Закриті чати зі студентами
• Індивідуальний чат з ментором
• Додаткові матеріали, конспекти, тести
• Сертифікат про проходження курсу (за умови виконання всіх домашок)
• 6 місяців доступу після завершення курсу

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

Олександра Коваль - Lead Product Designer

Вивчиш не тільки необхідну базу дизайну для старту в професії, а також базові 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

Опануй 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
• Ангеліна Дехніч - Middle UI/UX Designer
• Сергій Головашкін - Senior UI/UX Designer
• Надія Перегінська - Senior UI/UX Designer
• Наталія Чередниченко - Product Designer | UI/UX Designer

За 2 місяці навчишся писати клієнто-орієнтовані тексти для свого продукту.

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

UX-райтинг: база, яку потрібно знати

• Хто такі UX райтери і чим вони займаються
• Які текси НЕ пишуть UX райтери?
• Основа основ: ознаки хорошого тексту

Мікрокопі: види і правила

• Заголовки + підзаголовки
• Кнопки
• Попапи
• Сповіщення, пуші
• Помилки
• Інструкції

Табу в UX райтингу: даркпаттерни та погані практики

• Як не можна писати тексти в інтерфейсах
• Види темних паттернів
• Що робити, якщо текст поганий

Голос і тон

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

Як працює райтер: етапи роботи

• З чого почати?
• Дослідження текстів: види
• Різні інструменти для роботи
• Взаємодія з командою

Інклюзивність у текстах

• Що таке інклюзивність і для кого вона потрібна
• Як зробити тексти інклюзивними

Бонусні лекції

• Дослідження в UX райтингу
• Англомовний UX райтинг

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

• Доступ до файлів назавжди
• Допомога тренера-практика
• Багато практики
• Сертифікат про проходження курсу

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

Дарина Кривохатько - UX Writer

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

Теми:

• Будуємо команду
• Продуктова гіпотеза: Lean UX Canvas
• Попереднє дослідження задач користувачів
• Мапа користувацького шляху (CJM)
• Глибинні інтерв'ю
• Аналіз якісних даних
• Воркшоп з клієнтом
• Концепція продукту
• Валідація концепції з користувачами
• Аналіз кількісних даних
• Презентація результатів валідації гіпотез
• Стратегічне планування

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

• Є безкоштовна версія
• Вся теорія в доступі
• Можливість дивитися стріми з запрошеними лекторами
• Можливість пропрацьовувати свій проєкт або від реального замовника
• Можливість задавати питання тренерам
• Можливість задавати питання запрошеним лекторам
• Отримання сертифікату
• Можливість до 3 уроку повернути кошти

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

• Таня Зав'ялова - Дизайнерка та менеджерка, 19+ років досвіду
• Юра Терницький - Понад 17 років досвіду у креативних індустріях

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

Веб-дизайн як професія

Що вивчимо:

• Специфіку професії
• Структуру, елементи і типи сайтів

Результат: Розуміння того, навіщо ти в дизайні і куди рухатись далі.

Figma 101

Що вивчимо:

• Воркспейси
• Шейпи
• Стилі і компоненти
• Автолейаут
• Прототипування
• Плагіни

Результат: Не тільки володієш основним тулом веб-дизайнера, а вже і робиш перші практичні роботи.

Вступ у дизайн і стилі

Що вивчимо:

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

Результат: Навчишся розрізняти і генерувати унікальний дизайн у різних стилях.

Структура сайту

Що вивчимо:

• Структуру сайту
• Інформаційну архітектуру
• AIDA
• Модульні сітки
• Варфрейми

Результат: Побудуєш інформаційну архітектуру. Використовуєш різні підходи у створенні варфрейму. Правильно працюєш з сіткою і відступами.

Композиція

Що вивчимо:

• Візуальну ієрархію
• Закони композиції

Результат: Вмієш за допомогою композиції вирішити дизайн-задачу. Генеруєш різні композиційні лейаути.

Типографіка

Що вивчимо:

• Основи роботи з шрифтами
• Ієрархію та вирівнювання
• Системні шрифти

Результат: Впевнено працюєш із шрифтами: від підбору до ефектів. Вмієш організовувати великі масиви тексту.

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

Що вивчимо:

• Теорія кольору
• Кольорові гармонії
• Цифрова доступність

Результат: Вмієш створювати збалансовані кольорові схеми, робити акценти і підбирати палітри.

Зображення

Що вивчимо:

• Іконки
• Зображення
• Редагування зображень у Photoshop

Результат: Вмієш працювати з розмірами, пропорціями і семантикою іконок і зображень.

Адаптиви

Що вивчимо:

• Мобільну версію
• Adaptive vs Responsive
• Особливості адаптації сайту
• Як взаємодіяти з розробниками

Результат: Можеш адаптувати сайт на планшет та телефон.

Анімація

Що вивчимо:

• Характеристики анімації
• Анімаційні ефекти

Результат: Вмієш додати вау-ефекту статичному сайту.

Робота з клієнтом

Що вивчимо:

• Оформлювати портфоліо
• Комунікувати з клієнтом
• Створювати резюме

Результат: Маєш резюме і портфоліо з лендінгом.

Дипломний проєкт

Що вивчимо: Працювати в реальних умовах, давати собі раду з брифом, презентацією проєкту і правками.

Результат: Маєш другий проєкт для портфоліо - багатосторінковий сайт.

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

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

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

Дарина Сільченко - UI Lead at Eleken

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

Ready, Steady, Go!

• Як розпочати навчання
• Головні причини, через які ви не можете досягнути успіху
• Рекомендації від експерта як навчатися, щоб точно отримати результат

Швидкий старт у UX/UI Design

• З чого починається дизайн? Різниця між UX та UI
• Топова програма дизайнера Figma: встановлення, розбір базових інструментів
• Research i Moodboard: Як знати що саме потрібно замовнику, аби він заплатив за проєкт
• Sitemap and User Flow. Грамотна побудова логіки сайту: дизайн, зручність, адаптивність
• Wireframe. Практика. Навіщо робити скетч сайту перед його дизайном

Як працювати швидко та отримувати X2 вже на старті

• Вчимося працювати як Senior Designer: Сітка, component та групування
• Hot Keys. Як працювати правильно і швидко
• Базові блоки сайту
• Що таке прототип сайту і навіщо він потрібен
• Практика. Створюємо Hero page

Продаючий багатосторінковий сайт

• Що таке і навіщо багатосторінкові сайти для бізнесу?
• Малюємо головну сторінку сайту
• Бургер-меню, що за звір і з чим їдять
• Сторінка товарів, кошик та фільтрація
• Практика. Створюємо та упаковуємо інтернет-магазин

Мобільний додаток, яким хочеться користуватися

• Різниця дизайну сайту і додатку. Принципи розташування елементів на холсті
• Onboarding. Як закохати користувача у додаток з першого свайпу
• Створення і розробка окремих екранів додатка
• Прототипування. Збираємо додаток
• Практика. Покроково створюємо онлайн мобільний додаток

CRM-система. Те, що потрібно кожному бізнесу

• Що таке CRM-система і хто замовляє її дизайн
• Складові CRM-ки: холст, сайд-бар, рамка, контрольні лінії, відступи
• Що таке чарти: види, створення і дизайн
• Створюємо і збираємо CRM
• Практика. CRM

Як заробляти більше: додаткові шляхи монетизації

• З якими соціальними мережами може працювати дизайнер
• Instagram/Facebook. Упаковуємо пости, stories, highlights
• Створюємо рекламні банери для бізнесу
• Створюємо Презентації та чек-листи для блогерів і онлайн шкіл
• Практика. Дизайнимо презентацію на 10 сторінок

Моє перше портфоліо: реєстрація, упаковка і випуск

• Чому дизайнеру потрібне портфоліо? Секрети продаючого кейсу
• Розбір і реєстрація на платформах для дизайнерів: Behance, Dribble
• Упаковуємо свій кейс
• Завантаження кейса на платформи. Додаткові фішки
• Практика. Випускний

Як шукати і закривати клієнтів на високі чеки

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

• Доступ до матеріалів на 6 місяців
• Закрита телеграм група
• Практичні завдання з перевіркою
• Сертифікат про проходження курсу
• Можливість повернути кошти протягом 14 днів від старту курсу

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

Siuzanna Shevchuk - UI/UX Designer

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

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

Web & UI/UX Design

• Введення в професію UI/UX дизайнера
• Знайомство з графічними редакторами: Adobe Photoshop, Illustrator, Figma, Miro
• Interaction design
• Типографіка. Шрифти. Auto layout в Figma
• Теорія кольору та сітки. Колористика
• Дизайн системи (UI kit). Атомарний дизайн
• Композиція. Як збалансувати дизайн
• Створення банерів в Adobe Photoshop
• Векторна графіка. Створення логотипів в Adobe Illustrator
• Формати файлів. Імпорт та експорт графіки
• Розуміння UX. Користувацькі інтерв'ю, персони, аналіз конкурентів
• Типи сучасних веб сайтів
• User flow. CJM та прототипування
• Контекст в дизайні. Брифування замовника
• Адаптивний дизайн
• Пошук та генерація ідей. Креативні методики: стратегія Діснея, дизайн мислення
• Accessibility та покращення користувацького досвіду
• Створення дизайну мобільних додатків. Гайдлайни Android та iOS
• Основи анімації
• No code продукти. Основи Webflow
• Передача дизайн-макетів розробникам
• Розміщення проєктів на Behance
• Виконання та презентація випускного проєкту для портфоліо
• Створення резюме та портфоліо
• Особливості працевлаштування та спілкування з роботодавцями
• IT-English Speaking Club з викладачем з IT компанії

Верстка для дизайнерів

• Основні завдання фронтенду. Інструменти розробки
• Введення у HTML. Структура коду
• Основні теги роботи із текстом, зображеннями
• Створення веб-форм
• Робота із таблицями даних
• Списки
• Введення в CSS, поділ змісту та уявлення
• Контейнер CSS. Підключення CSS стилів. Застосування валідатора
• CSS селектори
• Способи розкладки CSS: float, grid, flexbox
• Використання SASS, SCSS
• Анімація, трансформація, переходи
• Роботи з градієнтами
• Сучасні типи верстки
• Методологія БЕМ та рекомендації щодо назви класів
• CSS-фреймворки: Bootstrap
• CSS media queries
• Нові специфікації HTML5 та CSS3
• Семантичні теги. Теги фізичної та логічної розмітки у HTML5
• Різні види верстки. Адаптивність та оптимізація верстки
• IT-English Speaking Club з викладачем з IT компанії

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

• Для людей віком від 12 років
• Вечірня група (з 19.00)
• Чат з тренером і групою
• Стажування у реальному проєкті
• IT English Speaking Club
• Додаткові можливості у пакеті PLUS

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

• Всеволод Євгієнко - CEO та тренер
• Дмитро Міщук - Тренер
• Олександр Цимбалюк - Тренер
• Філіп Севене - Тренер
• Олег Суховеров - Тренер
• Олег Новіков - Тренер
• Олексій Рихлюк - Тренер
• Ірина Цапенко - Тренер