Основи веб та інтерфейс-дизайну
Мета курсу
Навчити основам веб- та інтерфейс-дизайну: від UX-досліджень і прототипування до створення UI та інтеграції AI-інструментів. Учасники зможуть розробити власний веб-прототип і презентувати його команді.
Формат навчання
- Онлайн/ офлайн/ гібрид
- Практичні кейси, воркшопи, інтерактивні сесії
- Підтримка учасників під час навчання в закритому чаті
- Групове навчання: 6300 грн/ година. Група до 12 учасників
- Індивідуальне навчання: 1700 грн/ година
Що отримає випускник курсу?
Проблема, яку вирішує курс
Багато проєктів мають незручні або неестетичні інтерфейси через відсутність знань про UX/UI та сучасні інструменти. Курс вирішує цю проблему, даючи практичні методики й навички, що допомагають створювати зрозумілі та привабливі веб-рішення.
Програма курсу "Основи веб та інтерфейс-дизайну"
1
Теорія:
- Різниця між UI, UX, Web і Mobile-дизайном.
- Приклади гарного дизайну у різних стилях
- Роль дизайнера в команді. Хто такі PM, Dev, QA.
- Огляд інструментів: Figma, Photoshop, Illustration, AI-помічники.
Практика:
- Створення акаунту в Figma. Інтерфейс.
- Збір референсів + перший moodboard у Figma.
2
Теорія:
- Сітки, блоки, відступи.
- Ієрархія, баланс, контраст, білі простори.
- Основи композиції та гештальт-принципи.
Практика:
- Побудова layout-сітки у Figma.
- Вправи на розміщення елементів (заголовки, CTA, фото).
3
Теорія:
- Як вибирати шрифти: розбір Google Fonts.
- Колір: асоціації, акценти, кольорові палітри.
Практика:
- Побудова кольорової схеми для сайту, мобільного застосунку.
- Створення текстових стилів у Figma.
4
Теорія:
- Хто такий користувач і як його зрозуміти.
- Персонажі, цілі, сценарії використання.
- Що таке UX-дослідження (простими словами).
Практика:
- Створення простого юзер-флоу.
- Побудова базового сценарію на прикладі “Проєкту”.
5
Теорія:
- Що таке wireframe. Чому важливо не починати з кольору.
- Низька деталізація vs висока.
Практика:
- Створення wireframe головної сторінки у Figma.
- Робота з автолейаутами.
6
Теорія:
- Що таке UI-kit. Брендові кольори, кнопки, форми.
- Приклади Design Systems (Material, Apple).
Практика:
- Створення власного UI-киту.
- Додавання елементів у бібліотеку Figma.
7
Теорія:
- Структура landing page, мобільного застосунку
- Як зробити "зручний" дизайн?
Практика:
- Дизайн головної сторінки (hi-fi макет).
- Робота з компонентами, стилями, текстами.
8
Теорія:
- Що таке responsive-дизайн.
- Як працює flex/grid в адаптації макету.
- Типові помилки при створенні мобільної версії.
Практика:
- Розробка мобільної версії головної сторінки.
- Порівняння десктоп/мобайл: адаптація контенту та UI.
9
Теорія:
- Як готувати макет до передачі.
Практика:
- Презентація фінального проєкту.
- Відгуки, фідбек, поради щодо портфоліо.
