Курси Web Design / UI/UX

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

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

Знайомство з адмінками

• Знайомство з Адмін-панелями: їх складові, необхідність створення
• Тест на самоперевірку

Порівняння різних систем

• Порівняння Admin vs CRM vs Dashboard
• CRM: Базове знайомство
• Практичне самостійне завдання: створюємо модуль запису клієнтів в CRM салону краси

Структура адмін-панелі

• Структура адмін-панелі
• Сітки та лейаут (рекомендації)
• Аргументація
• Практичні самостійні завдання: створюємо сторінки адмін-панелі (логін/реєстрація, бокова навігація, сторінка керування товарами, додавання товару)
• Додаткові самостійні завдання: створюємо сторінку блогу та створення посту

Таблиці в адмінках

• Ефективні таблиці
• Модуль в адмін-панелі та CRM "Керування замовленнями"
• Практичні самостійні завдання: створюємо сторінки адмін-панелі (сторінка керування юзерами та їх ролями, керування замовленням)
• Додаткові самостійні завдання: створюємо таблицю із задачами,
а потім переоформлюємо її у формат карток

Візуалізація даних

• Візуалізація даних: Порівняльні діаграми. Частини цілого. Розподіл
• Практичні самостійні завдання: вчимось підбирати правильну діаграму під дані (17 завдань)

Ефективні діаграми. Колір

• Колір діаграм
• Як створити ефективні діаграми
• Практичні самостійні завдання: вчимось працювати з кольором діаграм (3 завдання)

Дашборди. Темна тема

• Dashboard
• Аналіз дешбордів
• Документація для користувача
• Темна тема
• Практичні самостійні завдання: створюємо дешборд з діаграмами для адмін панелі
• Додаткові самостійні завдання: створюємо 3 різні дешборди різних систем для відпрацювання

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

• Унікальний авторський курс
• 4 місяці доступу до матеріалів курсу
• 7 модулів з відео уроками в записі
• Доступ протягом 24 годин після оплати
• Завдання на самоперевірку
• Відповіді на завдання від автора курсу
• Без підтримки ментора
• Без сертифікату

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

Олександра Федорченко - Lead Product Designer

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

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

Основи UI/UX і веб-дизайну

Частина 1. Вступ до UI/UX та веб-дизайну

• Що таке UX, UI та вебдизайн?
• Відмінності між UX, UI та вебдизайном
• Чому потрібні UX/UI та вебдизайн?

Частина 2. Роль дизайнера у проєкті

• Основні завдання UX/UI та вебдизайнера
• Взаємодія з командою та клієнтами
• Огляд інструментів для роботи

Дослідження користувачів і аналіз

Частина 1. Збір даних та аналіз користувачів

• Методи дослідження користувачів (опитування, інтерв'ю)
• Сегментація цільової аудиторії
• Створення персони користувача

Частина 2. Аналіз даних та конкурентів

• Інтерпретація даних і визначення потреб користувачів
• Аналіз конкурентів у сфері UX/UI та вебдизайну
• Застосування результатів дослідження в проєкті

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

Частина 1. Інформаційна архітектура та контентна стратегія

• Створення карти сайту
• Розробка користувацьких потоків
• Організація інформації на сторінці

Частина 2. Контентна стратегія та навігація

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

Ескізування, прототипування і макетування

Частина 1. Ескізи та прототипи

• Створення ескізів інтерфейсів
• Прототипування на рівні вайрфреймів
• Інструменти для ескізування та прототипування

Частина 2. Вебмакетування

• Розробка вебмакетів (Grid, Flexbox)
• Створення інтерактивних прототипів
• Підготовка макетів для розробки

Візуальний дизайн та веб-дизайн

Частина 1. Основи візуального дизайну

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

Частина 2. Веб-дизайн та адаптивність

• Адаптивний дизайн і його особливості
• Створення UI-компонентів для вебу
• Вебдизайн для різних пристроїв (десктоп, планшет, мобільний)

Тестування юзабіліті і оптимізація

Частина 1. Тестування юзабіліті

• Підготовка до тестування
• Методи та сценарії тестування
• Інструменти для тестування

Частина 2. Оптимізація дизайну

• Аналіз результатів тестування
• Внесення змін до дизайну
• Оптимізація швидкості та продуктивності сайту

Завершення проєкту і взаємодія з розробниками

Частина 1. Завершення дизайну і прототипу

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

Частина 2. Презентація проєкту

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

Висновки та подальший розвиток

Частина 1. Підсумки курсу

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

Частина 2. Розвиток кар'єри

• Поради щодо пошуку роботи або фриланс-проєктів
• Як скласти портфоліо UX/UI і вебдизайнера
• Планування подальшого розвитку: які навички розвивати далі

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

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

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

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

Блок 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-компанії
• Індивідуальне навчання

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

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

Adobe Photoshop як інструмент дизайнера

• Введення в Adobe Photoshop: як створити, змінити та зберегти файл. Формати документів. Внесення змін до готового макета
• Відмінності між растровою та векторною графікою. Поняття векторної графіки й області її застосування
• Як визначити колірний режим документа. Відмінності між різними видами колірних моделей
• Як налаштувати інтерфейс програми
• Параметри зображення, створення і зміна зображення
• Що таке шар, як з ним працювати. Види шарів і способи їх створення
• Палітра Layers для роботи з шарами
• Багатошарові зображення
• Як трансформувати шар або його вміст, згрупувати, зв'язати або злити шари
• Стилі шару і їх застосування для створення візуальних ефектів
• Інструменти виділення і меню Select
• Налаштування параметрів виділення
• Форма виділення та операції з нею. Як доповнити область виділення, відняти від неї або виконати перетин двох областей
• Кордон виділення і розтушування
• М'який і жорсткий край виділеної області за допомогою інструмента "Уточнити край"
• Область виділення та операції з нею: поворот і масштабування, переміщення, спотворення, дублювання
• Інструменти та методи корекції. Як підготувати роботу до корекції
• Базові інструменти кольорокорекції - тонова, колірна, швидка корекція
• Швидке перетворення в чорно-біле зображення за допомогою коригувальних шарів
• Коригувальні шари та неруйнівна корекція
• Фоторетуш
• Ретуш портретних фотографій: етапи
• Інструменти Healing Brush, Clone Stamp, Spot Healing Brush для чищення шкіри й відновлення текстури
• Вибіркова корекція кольору - відтінок очей, волосся, відбілювання зубів. Інструменти зміни насиченості, затемнення й освітлення
• Домальовування зображення на прикладі волосся
• Корекція фігури й рис обличчя із застосуванням фільтра Liquify
• Інструмент History Brush і способи його застосування
• Інструменти для роботи з текстом і текстові шари
• Як створити й трансформувати напис. Текстові стилі й ефекти - лід, вода, вогонь за допомогою стилів шару
• Встановлення стилів тексту і зміна параметрів, імітація металевого напису
• Параграф. Відстань між рядками, відстань між буквами, вирівнювання тексту
• Що таке mock-up і як з ним працювати
• Що таке Smart Filters і області їх застосування
• Графіка для сайту і соцмереж
• Формат зображень
• Як зберегти дизайн для веб
• Інструменти анімації в Photoshop. Шкала часу

Adobe Illustrator як інструмент дизайнера

• Меню і головне вікно Adobe Illustrator. Палітри й налаштування робочої області
• Як створити, відкрити, зберегти документ. Відновлення документів. Вибір шаблону і налаштування параметрів нового документа
• Інструменти навігації й масштабування документа. Режим перегляду
• Як скасувати або повторити попередні дії в програмі
• Об'єкти та дії з ними - створення, трансформація, зміна розміру, поворот
• Прості фігури: створення кола, еліпса, зірки, прямокутника, багатокутної фігури, спіралі, сітки й дуги
• Як виділити об'єкт за допомогою панелі інструментів
• Трансформація і переходи. Налаштування переходу по траєкторії і його параметри
• Маніпулювання об'єктами - переміщення по монтажній області та між документами
• Сортування об'єктів по групах. Виділення, блокування і розблокування об'єктів
• Щоб скопіювати та вставити нові об'єкти, компонування і комбінування
• Як налаштувати видимість об'єкта, видалити об'єкт. Вирівнювання
• Підготовка графіки для розміщення на сайті
• Підготовка макета до верстки в Adobe Illustrator
• Додаткові інструменти Adobe Illustrator
• Інструменти малювання
• Інструменти вирівнювання. Лінійки, напрямні
• Налаштування шкали вимірювання
• Як створити, заблокувати, видалити напрямні
• Використання розумних напрямних, використання об'єкта як напрямної
• Контур: створення, редагування, виділення. Опорні точки і їх редагування. Редагування кривих Безьє
• Параметри контуру. Зменшення кількості опорних точок
• Малювання ліній за допомогою інструменту
• Шари та маски. Створення шарів. Блокування частини зображення із застосуванням шарів. Робота в палітрі Layers
• Маска і група маскування. Як створити й скасувати маску в палітрі Layers. Різні види масок. Редагування масок. Маска непрозорості
• Створення і редагування тексту в Adobe Illustrator. Атрибути шрифту. Палітри для роботи з написами та текстовими блоками
• Як зробити імпорт тексту в програму
• Трансформування тексту і його елементів
• Траєкторія розміщення тексту. Редагування траєкторії
• Текстові символи та перетворення тексту в криві
• Художні ефекти з текстом - світіння, тіні й неоновий ефект
• Застосування фільтрів в Adobe Illustrator
• Фільтри та ефекти. Растрові ефекти
• Як редагувати растрові зображення в Adobe Illustrator. Операції з зображенням. Як розмістити растрове зображення в програмі і які особливості потрібно знати для роботи з ним. Трансформація і спотворення
• Як перетворити растрову графіку на векторну. Як перетворити векторну графіку на растрову
• Особливості роботи в палітрі Links
• Як виконати кадрування растрової картинки або фото
• Як підготувати зображення для розміщення в мережі
• Експорт файлів в Adobe Illustrator і формати для збереження. Вікно Save for Web і його параметри
• Як підготувати макет для друку
• Що таке внутрішні відступи та вильоти. Як перевіряти кольори перед друком. Офсетний і цифровий друк. Композитний чорний
• Вимоги до файлу від друкарні. Як співпрацювати з друкарем
• Передача файлу. Як підготувати макет до відправлення

Професійна діяльність дизайнера

• Як побудувати кар'єру дизайнера: перші кроки
• Створення портфоліо
• Покращення швидкості і якості роботи
• Різні стилі дизайну
• Ресурси й корисні сайти для дизайнера
• Як працювати зі стоками й не порушувати авторські права

Програма Figma для дизайнера

• Головне вікно та елементи меню Figma
• Інструменти для створення графіки
• Шари, маски шару
• Створення, збереження, видалення документа в Figma
• Інструменти створення графіки
• Шари та маски
• Створення нового документа і налаштування параметрів, збереження, видалення
• Допоміжні інструменти й плагіни. Встановлення і застосування сторонніх плагінів

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

• Здійснювати фотокорекцію в Adobe Photoshop
• Впевнено використовувати дизайнерські програми Figma, Adobe Illustrator
• Готувати макети до верстки та друку

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

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

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

Характеристика професії

• Веб-дизайн - це
• Яку роль він відіграє у формуванні веб-сайту
• Специфіка командної роботи
• Специфіка фрілансу
• Які задачі встановлюють перед веб-дизайнерами
• Знайомство з сучасними течіями в дизайні
• Суть принципу mobile first
• Як відбувається аналіз аудиторії сайту
• Як відбувається аналіз конкуренції
• Введення в принципи аналізу
• Введення в принципи збору даних
• Знайомство з інформаційною схематизацією
• З чого складається структура сторінки
• Які бувають типи сайтів
• Прийоми побудови прототипів сторінок сайту
• Введення в методику прототипування
• Огляд стандартних елементів
• Практика

Характеристика візуального оформлення

• Введення в дизайнерські стилі
• Які бувають типи макетів
• Характеристика сіток дизайну
• Введення в сучасні дизайнерські принципи
• Суть застосування графічних та текстових даних
• Легальне їхнє застосування
• Типографіка
• Шрифтовий вибір
• Застосування іконок
• Застосування піктограм
• Застосування фонів
• Алгоритми побудови всіляких версій сторінки зі звертанням уваги на вимоги адаптивного дизайну
• Практика

Характеристики верстки макету

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

Покращення дизайну

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

Після курсу студенти зможуть:

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

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

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

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

• Володимир - Програміст
• Ігор - Програміст
• Володимир - Програміст
• Дмитро - Веб-дизайнер

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

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

Теми:

• Дизайн користувальницького інтерфейсу: введення
• UX і UI - поняття, принципи та відмінності
• Визначення завдань в проєктуванні UX інтерфейсу
• Дослідження і пошук проблем в проектуванні
• Метод інтерв'ювання користувачів
• Аналіз отриманих даних
• Поняття customer development
• Принципи design thinking і застосування
• Навіщо потрібні customer journey maps і як застосовувати їх на практиці
• Пошук оптимальних рішень при проєктуванні інтерфейсу
• Додаткові інструменти UX - програми Figma, Miro
• Інформаційна архітектура: базові поняття
• Поняття HMW, PAINstorming
• Що таке mindmapping
• Принцип card sorting
• Етап скетчінга в проєктуванні
• Етап прототипування в проєктуванні
• Візуальна складова інтерфейсу
• Стиль material design
• Стандартизація інтерфейсу та Apple HIG
• Які бувають дизайн-системи
• Анімація в інтерфейсі
• Налаштування мікровзаємодій з користувачем
• Створення прототипів за допомогою Figma
• Створення прототипів за допомогою Principle та InVision
• UX-writing або текстове наповнення інтерфейсу
• Етап тестування
• Види тестування інтерфейсу: віддалене, A/B-тестування
• Тестування юзабіліті
• Як документувати результати тестування
• Форми опитування survey
• Як працювати в команді фахівців: емпатія, аргументація, фідбек
• Як відбувається комунікація всередині компанії
• Крос-функціональність і UX
• Методологія розробки Agile
• Методологія розробки Waterfall
• Дизайн-спринти на прикладі Google Design Sprints

Наші випускники можуть:

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

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

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

Студенти досконало вивчать графічні редактори Figma та Adobe Photoshop. Засвоять та навчаться застосовувати принципи типографіки та колористики. Побудують стильний дизайн-макет сайту. Створять зручний для користувачив дизайн мобільних додатків до платформ Android та іОС.

План курсу

Технічні навички

Створювати

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

Розробляти

Фірмовий стиль для Лендингів, сайтів компаній, інтернет-магазинів, інтернет-сервісів і додатків.

Розуміти

І враховувати при розробці бізнес-вимоги до продукту.

Комунікувати

З іншими учасниками команди розробки для досягнення цілей проєкту.

Упаковувати і успішно презентувати

Дизайн проєкту замовникові.

English

Освоїмо технічну термінологію та базову IT-лексику, а також навчимося працювати у програмах з англійським інтерфейсом.

Соціальні навички

Впевненість

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

Самостійність

Освоїмо інструменти самоорганізації. Навчимося самостійно ставити цілі, планувати та керувати своїм часом.

Емоційний інтелект

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

Самопрезентація

Зможемо впевнено та вільно виступати на публіці. Завойовувати довіру, цікаво та лаконічно презентувати себе чи свій проєкт.

Працювати в команді

Комунікувати з усіма членами команди, брати на себе відповідальність за результат, знаходити компроміси та позитивно вирішувати конфлікти.

Креативність

Розвинемо вміння генерувати безліч ідей з нестандартним підходом, навчимося бачити проблеми під іншим кутом і вирішувати їх унікальним способом.

Бізнесові навички

Бізнес мислення

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

Управління фінансами

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

Стратегічне планування

Глобалізація економіки та автоматизація виробництва сприяють створенню нових бізнес-моделей. Дізнаємося, які напрями та професії будуть затребувані у найближчі 10 років: стратегія блакитного океану, штучний інтелект, кібербезпека та Meta-всесвіт.

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

• Навчання через практику
• Щотижневі лабораторії Skills Lab
• Фіксація результату
• Онлайн-підтримка викладача
• Онлайн-консультації
• Можливість офлайн навчання
• Захист випускного проєкту
• Гейміфікація
• Особистий кабінет
• Бонуси за активність на курсі
• Домашні завдання
• Звітність для батьків
• Невеликі групи