Курси Web Design / UI/UX

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

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

Web design

• Введення в курс
• Лендинг, його призначення та функції
• Бриф та первинне вебдослідження
• Основи Figma
• Прототипування та сітки
• Композиція, колір та типографіка
• Растрова і векторна графіка
• Оформлення кейсу на Behance
• Особистий проєкт: лендинг із адаптацією
• Особистий проєкт: UI kit та корпоративний сайт

Service Design

• Вебсервіси
• Дизайн-мислення та дизайн-процеси
• Робота з персонами
• Jobs-to-be-done фреймворк
• Figma Pro
• Планування інформаційної архітектури та функцій продукту
• Візуалізація даних
• Анімація
• Аналітика та тестування
• Customer journey map
• Оформлення кейсу на Behance
• Командний проєкт: розробка вебзастосунку

Mobile App Design

• Особливості дизайну для мобільних пристроїв
• Проєктування інтерфейсів для IOS і Android
• Проєктування мобільного застосунку
• Основні патерни
• Навігація
• Анімація в мобільних застосунках
• Публікація застосунку
• Human Interface Guidelines
• Material Design
• Оформлення кейсу на Behance
• Командний проєкт: розробка мобільного застосунку

Soft skills

• Філософія Agile
• Методологія Scrum
• Робота в команді
• Тайм-менеджмент
• Аналітика проєктів
• English speaking club (пакет Plus)
• Робота з EnglishDom Words
• Заняття з працевлаштування
• Складання грамотного резюме
• Створення сторінки на LinkedIn
• Написання мотиваційного листа
• Майданчики для пошуку роботи
• Підготовка до HR-інтерв'ю
• Підготовка до технічного інтерв'ю
• Комунікативні навички
• Тестові співбесіди

Career skills

• Створення резюме
• Оформлення профілів Linkedin та Djinni
• Підготовка до HR та технічної співбесіди
• Індивідуальні кар’єрні консультації
• Рекомендація студентів на вакансії партнерів

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

• Круті ментори
• Кар'єрний сервіс
• 2-3 вебінари на тиждень
• Кабінет my.goit
• Спілкування в чаті

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

• Маша Руденко - Senior UX/UI Designer в GoIT
• Міша Губа - Product Designer в Wispence
• Олійник Тарас - Product UI/UX Designer NEAR One Click Crypto, Jump
• Єршов Владислав - UI/UX Designer
• Білик Андрій - Студія WEBGORILLA, COO
• Скакун Олександр - Art Director & Product Designer
• Заступ Олександр - Lead UI/UX Designer at Lampa Software

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

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

Блок 1. Продакт-дизайн: що, як і чому

Інтро

• Що таке продакт-дизайн
• Як дизайн впливає на user experience та user satisfaction
• Вплив дизайну на емоційний стан юзерів
• Роль та зони відповідальності продакт-дизайнера
• Продакт-дизайнер vs продакт-менеджер
• Взаємодія з іншими командами
• Хард-скіли продуктового дизайнера
• Інструменти продакт-дизайнера
• Успішні кейси UX-дизайну
• ДЗ: проаналізувати два продукти з точки зору UX та задоволення користувачів

Флоу продуктового дизайну

• Step by step: від ідеї - до реалізації
• Брейнштормінг
• Прототипування і тестування
• Впровадження та запуск
• Як дизайн розвиває бізнес та інновації
• Інноваційні підходи в дизайні

Блок 2. Business thinking у дизайні

База з бізнесу для дизайнера

• Бізнес-грамотність для дизайнерів
• Базові терміни та концепції
• Метрики успіху продукту
• Бізнес-мислення
• ДЗ: ознайомитись із брифом клієнта, підготувати запитання

Воркшоп. Брифування клієнта

Розуміння ринку та аналіз конкурентів

• Методи дослідження ринку
• Аналіз трендів ринку
• Типові бізнес-моделі
• Кейси успішних бізнес-моделей
• Переконливий value proposition
• Базові фінансові поняття
• Як дизайн-рішення впливають на кінцевий результат
• Зв'язок дизайну та бізнес-показників
• Вплив UX на бізнес-показники
• Як узгодити дизайн та бізнес-стратегію

Воркшоп. Value Proposition та аналіз конкурентів

ДЗ: розробити ціннісну пропозицію для уявного продукту.

Блок 3. Product thinking у дизайні

Що таке product thinking

• Product thinking vs design thinking
• Як застосовувати кожен підхід
• Принципи user-centered дизайну

Потреби та болі юзерів

• Як визначити потреби та проблеми користувачів
• Методи збору інформації про юзерів
• Аналіз даних для визначення потреб

Product roadmap та пріоритезація функцій

• Етапи життєвого циклу продукту
• Дизайн на кожному етапі продуктового циклу
• Як створити product roadmap
• Методи пріоритизації для ефективного управління
• Ключові KPI продукту
• Як використовувати KPI для прийняття дизайн-рішень
• Приклади product roadmap
• ДЗ: створити простий product roadmap для проєкту

Фідбек-сесія. Обговорення product roadmap

ДЗ: внести зміни до product roadmap на основі отриманого фідбеку.

Блок 4. Research у продакт-дизайні

Види рисерчу в продакт-дизайні

• Види рисерчу та коли застосовувати кожен
• Кількісний vs якісний рисерч
• Техніки interviews, surveys та usability testing
• Market research
• Перетворюємо дату на інсайти
• Аналіз та інтерпретація даних

Воркшоп. Usability testing

• Проводимо usability testing
• AI для тестування юзабіліті
• ДЗ: провести коротке юзабіліті-тестування для продукту і написати звіт про результати

User personas та journey maps

• Як створити user personas та journey maps
• Визначаємо головні характеристики юзерів
• Приклади ефективних user personas
• Як включити research-ідеї в процес дизайну
• Як покращити дизайн фідбеком з рисерчу
• ДЗ: створити дві user personas та одну journey map для продукту

Блок 5. Інтерфейс, прототип, тестування

Гіпотеза, ідея, концепт, візуальна мова

• Як перетворити гіпотезу на концепцію
• Створення візуальної мови та interaction patterns
• Wireframes, sketches
• Кейси
• ДЗ: розробити концепт і створити базовий прототип для продукту

Фідбек-сесія. Обговорення прототипів

ДЗ: внести зміни до прототипів на основі фідбеку.

Дизайн-системи та створення компонентів

• Визначення дизайн-принципів
• Що таке дизайн-системи
• Приклади популярних дизайн-систем
• Різниця між дизайн-системою та UI kit
• Переваги дизайн-систем та кому вони (не) потрібні
• Створення компонентів та patterns
• Документація та governance дизайн-систем
• Робота з cross-functional командами
• Dark UX-design patterns
• ДЗ: написати короткий документ для управління дизайн-системою продукту

Воркшоп. Створюємо дизайн-систему

ДЗ: створити кілька компонентів для дизайн-системи продукту.

Дизайн для accessibility та inclusivity

• Інклюзивний дизайн - важливий
• Стратегії для створення доступних продуктів
• Інструменти й методи для забезпечення доступності
• ДЗ: проаналізувати один продукт на доступність та інклюзивність і запропонувати покращення

Блок 6. Презентація роботи

Сторітелінг для дизайнерів та структурування презентацій

• Сторітелінг для комунікації дизайнерських рішень
• Дизайн-принципи для презентацій
• Інструменти для презентацій
• Створення презентацій для різних аудиторій
• Техніки переконливої комунікації
• Структурування презентацій
• ДЗ: підготувати коротку презентацію про продукт і використати техніки сторітелінгу

Фідбек-сесія. Презентація драфту продукту

Блок 7. Кар'єра

Персональний бренд і нетворкінг

• Як розвивати персональний бренд
• Ефективні стратегії нетворкінгу
• LinkedIn
• ДЗ: оформити профіль у LinkedIn

Резюме та портфоліо

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

Підготовка до інтерв'ю та фриланс

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

Випускний. Симулятор інтерв'ю

Після курсу ти:

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

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

• Допомога ментора
• Сертифікат про проходження курсу
• Проєкти в портфоліо
• Воркшопи та практичні заняття
• Робота над кейсом для реального клієнта
• Тестове інтерв'ю на позицію "Продакт-дизайнер"
• Мастермайнд із лектором (за всі виконані домашки)
• one-to-one із лектором (за дотримані дедлайни)

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

Алекс Довгий - Senior Product Designer

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

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

Design Basics

• Figma Essentials
• Basic UI Elements
• Components, Autolayout, and Variants
• Typography Basics
• Grids
• Prototyping
• UI Design
• Clickable Prototyping

Course Fundamentals

• How to learn effectively
• Figma practice

UX Design - Research

• Intro
• Design Process
• Quantitative Research (Surveys)
• Heuristic Interface Analysis
• Qualitative Research (In-Depth Interviews)
• Jobs To Be Done
• Customer Journey Mapping
• Kano Model. Features Prioritization
• Information Architecture Mapping
• User Flows
• Prototyping
• Unmoderated User Testing

Design Basics Extended

• Law of Proximity
• Law of Common Region
• Negative space
• Contrast
• Buttons
• Inputs

UI Design - Mobile App Design

• Grids
• Mobile Interfaces
• Interface Patterns & Trends
• Colors & UI
• Typography
• Design Gestalts and Rules
• Handoff Preparation (UI Kits)

Web Interfaces

• Scrum Methodology
• Gathering Data From Interviews
• Personas and User Stories
• Product Hypotheses
• Prototyping
• Composition and Typography
• Graphic Rhymes
• Adaptive Design
• How to Present Your Work
• Project Presentation
• Design Systems

Portfolio Cases on Behance

• Behance Overview
• Case Structure
• Trends
• Case Design Tips
• Second Behance Case

Creative Web

• Design exploration
• Site structure and mood board
• Wireframing
• Concept creation
• Adapting design
• Third Behance case

Team Project

• Team Project. Intro
• Jiro Environment
• Status Check
• Estimates
• How to Demo Your Work
• Team Project for Employment
• Retrospective

Employment 2.0

• Employment Roadmap
• Preparing Your Resume
• Interview Preparation
• Cover Latter Preparation
• Google, LinkedIn, DOU, Djinni
• How to find and apply for vacancies
• Job Search Tips: Talking to Recruiters
• Work details FAQ

HTML + CSS Basics

• HTML Basics
• CSS Basics
• Colors and Fonts
• Box Model Basics
• Semantic Basics
• Responsiveness Basics
• CSS Selectors
• Pseudo-Elements and Pseudo-Classes
• Specificity
• Links and URLs
• Images
• Media Queries
• Forms
• Position
• Extra topics

Career Development

• Mastering Your Probation Period
• PDP and Career Plans
• Salary Review Strategies
• Recruiter Outreach
• How to Find a New Job?
• How to Talk About You Previous Work Experience?
• Career Knowledge Base

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

• Працюєш? Вчись у власному темпі
• Зідзвони з менторами тричі на тиждень
• Чат з одногрупниками
• Навчальні матеріали "без води" замість довгих лекцій
• Матимеш 4 робочих проєкта в портфоліо: 3 індивідуальних і 1 командний
• Підготовка до працевлаштування: технічні співбесіди з менторами, перевірка CV, професійних соцмереж, підготовка до інтерв'ю, підбір вакансій для працевлаштування
• Гарантуємо працевлаштування після навчання
• Повернемо кошти якщо не знайшов роботу в ІТ

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

• Eugene Ochkalenko - Product designer / Coach
• Olya Koval - Student Coordinator

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

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

Знайомство: хто є хто?

Що таке вебдизайн і чому він потрібен?

Блок 1. Софт. Працюємо з Figma

Усе починається з Figma

• вивчаємо основні функції програми
• фрейми, фігури, заливка та обкладинки
• текст всьому голова: вивчаємо читабельні шрифти
• основи векторної графіки
• як прикладати маски та використовувати ефекти без крінжа
• що таке Mirror App та Контроль версій
• ком'юніті як потужний допоміжний інструмент
• плагіни та FigJam

Верстка лайк е про

• розбираємося з модульними сітками
• як Auto Layout полегшує життя вебдизам
• створюємо "гумовий" макет

Стилі, компоненти та бібліотеки

• як правильно називати стилі, щоб не створювати mess
• компоненти та їхня варіативність

ДЗ №1. Перемалювати landing page.

Прототип та анімація

• прототипи у Figma: що, куди і як
• як користуватися інтерактивними компонентами
• модальне вікно та автоматична анімація
• клікабельний прототип скролу

Блок 2. Вивчаємо вебдизайн без книжок

Design та Digital Marketing. Чому Design Thinking стосується всього

• який буває дизайн: чим вебдизайнер відрізняється від дизайнера інтер'єру/додатків/анімації/бренду
• вебдизайн та види вебсайтів:landing page, corporate website, e-commerce
• сайт потрібен усім: вебдизайн у бізнесі та маркетингу
• як створювати проєкт за допомогою Design Thinking: виявляємо проблеми, досліджуємо ринок та ЦА, формуємо ідеї, прототипуємо та обираємо найкраще рішення
• що таке wireframes та як їх будувати

Photoshop. Додаткове заняття

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

ДЗ №2. Підготувати фрейм landing page до роботи зі стилем.

Воркшоп з основ композиції, колористики, типографіки. Працюємо з базовими сітками та референсами без плагіату

• композиція: основи і робота на прикладах
• вчимося підбирати колір за сенсом і значенням
• робота з текстом, шрифтами та сітками
• що таке референси, де шукати і як використовувати

Illustrator. Додаткове заняття

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

Додаткові матеріали: composition, how to use type + colors, grids + tips&tricks

ДЗ №3. Підібрати референси, базуючись на тематиці бізнесу та структурі з попереднього ДЗ для власного ленда.

Бренд-дизайнер та гостьова лекторка Катя Іщенко - про графіку, іконки, лого, постер та мокап

Illustrator. Додаткове заняття

• панель pathfinder, розділення об'єктів
• вирівнювання
• створення масок
• імпорт зображень
• трасування зображень
• деформація тексту
• ефект Трансформація

ДЗ №4. Створити постер на основі технічного завдання, для якого додатково розробити:

• логотип
• пак іконок

Створення концепту без паніки

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

ДЗ №5. Розробити логотип та побудувати концепт на основі:

• референсів
• елементів дизайну (типографіка, кольори, сітка, композиція)

Backend дизайну: розбираємо необхідні інструменти

• складаємо ui kit (частина воркшопу)
• стандартизація стилей
• адаптуємо під мобайл
• що таке pixel perfect

ДЗ №6. Закріпити backend: виправити неточності в пікселях, зібрати UI kit, адаптувати макет під mobile.

Презентація як основний канал продажу

• tips & tricks презентації дизайну
• сторітелінг: як утримати фокус клієнта і довести до головного
• як використовувати референси для презентацій без плагіату
• викладаємо матеріал на слайд, щоб не сіпалось око
• технічні знання про створення презентації
• всьому свій час: встановлюємо таймінг
• захищаємо свої дизайн рішення без стресу і з прогресом
• readymag: збираємо презентацію і додаємо свої фішки

ДЗ №7. Створити презентацію для власного лендингу та презентувати готовий проєкт на наступному занятті.

Presentation check. Презентація власного проєкту із залученням ШІ в роботу

Фідбек-сесія від лекторки

Блок 3. Занурюємось у вебдизайн з головою

Брифінг та робота з клієнтом

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

ДЗ №8. Проаналізувати бриф для подальшої роботи з ним та сформувати додаткові запитання.

Гостьова лекторка та стратег Юлія Лисенко про бренд, Market Research та Brand Model

Що таке UX Design, UX Research та Sitemap

• UX Design - аналіз, аналіз та ще раз аналіз
• рісьорч ux design конкурентів та ux бест практіс
• структура багатосторінкового сайту
• воркшоп з Sitemap

ДЗ №9. Зібрати презентацію з:

• аналізу конкурентів у розрізі UX
• побудованого сайтмепу

Воркшоп - Wireframing, UX writings, Navigation

• створюємо wireframe для головної сторінки
• navigation tools: хедер, форми, футер, слайдер і інші невідомі слова

Додаткові матеріали: UX copy.

ДЗ №10. Створити вайрфрейми на всі сторінки.

Фідбек-сесія

Воркшоп з UI-дизайну. Вивчаємо Visual Research та Visual Audit

• що таке UI-дизайн і чому він має йти після UX
• аналіз UI design конкурентів та ui бест практис
• аналіз існуючого дизайну

Додаткові матеріали: UX copy

ДЗ № 11.

• провести Visual Audit наявного сайту
• проаналізувати ринок у розрізі UI
• оформити у презентацію

Воркшоп з Юлією Замятіною. Ideas Generation та Visual trick

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

ДЗ № 12. Доробити практику так, щоб:

• вийшло відібрати 3 робочі метафори
• був графічний прийом до кожної ідеї
• мудборд розкривав ідею через віжуали

Оформити все у презентацію.

Навіщо вебдизайнеру Design Approach. Дотримуємося дизайн-айдентики

• що таке айдентика і для чого тобі в роботі
• айдентика - гайд, вебсайт - носій
• збираємо design approach
• прокачуємо скіли по сіткам, роботі з текстом, кольорами, композицією

ДЗ №13. Створити 3 варіанти approach для сайту:

• логотип
• типографіка
• колір
• сітка
• композиція

Оформити все у презентацію.

Backend дизайну та адаптація

• збираємо ui kit для багатосторінкових сайтів
• implementation 2.0
• адаптація під мобайл, арсенал патернів

ДЗ №14. Фіналізувати редизайн сайту: виправити неточності, зібрати UI kit, імплементувати на 6 сторінок, адаптувати головну сторінку під mobile.

Concept advanced

• ще складніші та цікавіші прийоми
• як збирати концепт

ДЗ №15.

• створити концепт першої сторінки на основі wireframe + design approach
• розробити логотип
• зібрати презентацію та презентувати на наступному занятті

Presentation check

Фідбек-сесія

Блок 4. E-commerce. Працюємо з товарними сайтами

UX E-commerce сайтів, navigation tools та аналітика

• UX e-commerce сайту. Все, що треба знати: структура та патерни
• navigation tools для e-commerce сайту: фільтр, сортування, каталог, чекаут, хедер
• аналітика - овервью

ДЗ №16. Створити айтеми для наступних сторінок: home, catalog, product page, check-out, особистий кабінет.

UI e-commerce сайтів

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

ДЗ №18. Імплементувати e-commerce сторінки за розробленими UI design.

Presentation check

Фідбек-сесія

Гостьова лекторка та HR Настя Слободянюк: про важливість портфоліо та резюме, вплив соціальних мереж та співбесіди. Куди рости та який тип зайнятості підійде саме тобі

Фінальна презентація

Результат курсу

• оформлюєш портфоліо з трьома кейсами, збираєш професійне CV та розумієш, як зацікавити клієнтів
• вмієш працювати з брифами та проводиш UI/UX-аналіз, щоб зрозуміти аудиторію та розв'язати задачу клієнта
• проводиш дизайн-сесії: працюєш з рефами, генеруєш ідеї, створюєш mind map та збираєш мудборд
• знаєш основи типографії та композиції, створюєш архітектуру й навігацію сайту
• розбираєшся в UX-копірайтингу та застосовуєш AI для швидшої роботи
• розробляєш UI kit: від кнопок — до іконок та панелей; адаптуєш сайт під різні пристрої: desktop, mobile, tablet

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

Оля Варченко - 7+ років у професії

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

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

Блок 1 - Figma

• Модуль 1. Функціонал Figma
• Модуль 2. Фічі Figma, про які ти не знав
• Модуль 3. Верстка
• Фідбек-сесія
• Модуль 4. Стилі, компоненти та бібліотека
• Модуль 5. Прототип та анімація
• Фідбек сесія

Блок 2 - Основи вебдизайну

Заняття №1

Design. Види дизайну. Вебдизайн у бізнесі. Дизайн-процес для вебу. Організація документу.

Блок UX

• Бренд. Брифінг. Аналіз аудиторії + proto-persona
• Аналіз конкурентів та аналіз бест-практис
• Sitemap: структура сайту + методологія AIDA. Створення сору з використанням ШІ, формулювання УТП (унікальна торгова пропозиція)
• Прототипування та тестування + base navigation list
• Фідбек-сесія

Блок UI: теорія

• Composition + grids
• Typography
• Colour
• References
• Фото та графіка
• Фідбек-сесія

Блок UI: практика

• Воркшоп: Ideas generation
• Воркшоп: Design approach - стиль, типографіка, кольори,композиція і додатково
• Воркшоп: Concept
• Implementation, ключові UI принципи та UI Kit
• Mobile
• Фідбек-сесія
• Presentation
• Presentation check

Практика: ленд

• Воркшоп: Знайомство з брифом. Етап research
• Воркшоп: Розробка структури та копірайту
• Воркшоп: Прототипування
• Воркшоп: Ideas generation + design approach
• Воркшоп: Concept
• Presentation check
• Portfolio

Блок 3 - Переходимо до найцікавішого - UX/UI Design

Заняття №1

Інтро в професію. Історія UX/UI дизайну.

Блок UX

• UX-дизайн. Психологія цифрового сприйняття
• Аналіз конкурентів
• Практикум. UX review
• Дослідження
• Фідбек-сесія
• User Persona та Customer Journey Map
• User flow
• Практикум. Проєктування зняття готівки
• Проєктування інтерфейсу
• Юзабіліті евристики
• Тестування дизайн-рішень
• Практикум. Розумний дім
• Фідбек-сесія

Блок UI

• Візуальний дизайн інтерфейсу (UI Design)
• Дизайн-концепт
• Типографіка, модульна сітка та іконки
• Фідбек-сесія
• Навігація. Дизайн внутрішніх сторінок
• Дизайн-система. Основні компоненти та форми
• Інтерфейси особистих кабінетів
• Практикум. Редизайн ЛК
• Анімація веб (запрошений лектор)
• Фідбек-сесія

Блок 4 - Mobile Apps Design

• Інтерфейс мобільних додатків. Гайдлайни iOS та Android
• Підготовка до брифінгу з реальним клієнтом
• Онлайн-зустріч із клієнтом
• Передпроєктний аналіз
• Практикум
• Навігація та патерни. Форми у додатках
• Візуальний дизайн інтерфейсу мобільних додатків
• Фідбек-сесія
• Перша сесія користувача та його шлях
• Інтерфейс мобільного додатка. Додаткові екрани
• Формування звичок у користувачів. Гейміфікація
• Фідбек-сесія
• Практикум
• Анімація mobile (запрошений лектор)
• Презентація дизайн-рішень
• Платформи для додатків
• Фідбек сесія
• Презентація клієнту
• Куди зростати UX/UI дизайнеру

Після курсу ти:

• Юзаєш Figma без зайвих кліків
• Проводиш UI-, UX- та CX-аналіз, досліджуєш конкурентів та складаєш Customer Journey Map
• Генериш ідеї, проводиш дизайн-сесії, створюєш референсні концепти й клікабельні прототипи
• Аналізуєш поведінку юзера, проводиш глибинні інтерв'ю, створюєш User Persona та User Flow, створюєш інтерфейси сайтів та додатків, тестуєш їх та аналізуєш на основі евристик
• Розробляєш та презентуєш дизайн-концепти, адаптуєш їх під різні пристрої та робиш навігацію максимально зрозумілою
• Кладеш у портфоліо три кейси, один з яких - для реального клієнта, презентуєш концепт - на практиці та з фідбеком, маєш шанс потрапити на стажування в топкомпанію країни

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

• Діма Напрієнко - Senior Product Designer at Welltech, ex-Head of Design at Jooble
• Оля Варченко - Web Designer
• Марк Кузнєцов - UI/UX & Graphic Designer at Дія та Мінцифрі