Основи дизайну веб-застосунків
Мета курсу
Навчити основам веб- та інтерфейс-дизайну: від UX-досліджень і прототипування до створення UI та інтеграції AI-інструментів. Учасниці та учасники зможуть розробити власний веб-прототип і презентувати його команді.
Формат навчання
- Онлайн
- Практичні кейси, воркшопи, інтерактивні сесії
- Домашні завдання після кожної лекції та персональний зворотний зв'язок від тренерки / тренера
Що отримає випускниця / випускник курсу?
Що ви отримаєте на курсі?
Багато проєктів мають незручні або неестетичні інтерфейси через відсутність знань про 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
Теорія:
- Як готувати макет до передачі.
Практика:
- Презентація фінального проєкту.
- Відгуки, фідбек, поради щодо портфоліо.
Поширені запитання
1
Багато проєктів мають незручні або неестетичні інтерфейси через відсутність знань про UX/UI. Курс дає практичні методики, що допомагають створювати зрозумілі та привабливі веб-рішення, поєднуючи UX-дослідження, прототипування та інтеграцію AI-інструментів.
2
Ви навчитеся працювати з Figma, створювати wireframes, UI-кити та розробляти мобільні (responsive) версії макетів. Програма охоплює роботу з композицією, типографікою та кольором, а у фіналі ви розробите власний веб-прототип і навчитеся його презентувати.
3
Програма розрахована на 5 тижнів і складається з 9 інтенсивних занять в онлайн-форматі. Навчання робить максимальний акцент на практиці: на вас чекають воркшопи, розбір практичних кейсів, інтерактивні сесії та постійна підтримка у закритому чаті.
4
Випускники отримують навички підготовки макетів до передачі та зможуть створити сторінку для власного портфоліо на сервісах Behance або Dribble. Щоб долучитися до курсу та навчитися створювати сучасні інтерфейси, просто натисніть кнопку «Подати заявку» на цій сторінці.
