Пройди повний процес створення сайтів
WEBDESIGN
Мар'яна Бучкович
Senior UX/UI Designer у Fedoriv Agency11 років у професії

Практичний та комплексний курс із вебдизайну, після якого ти матимеш не просто навички, а готове портфоліо та впевненість на старті кар’єри.
На курсі ти пройдеш повний процес створення сайтів: від дослідження користувачів та конкурентів — до фінальної презентації готового рішення реальному клієнту. Навчишся будувати структуру, створювати адаптивні макети у Figma, працювати з типографією, кольором і принципами доступності.
Наприкінці матимеш портфоліо з трьома різними за типом вебсайтами: лендингом, багатосторінковим та e-commerce із мобайл-адаптацією, які можна буде показати майбутньому клієнту.
Про лекторку
Мар'яна Бучкович
Senior UX/UI Designer у Fedoriv AgencyДЛЯ KОГО
program
- Знайомство з курсом та студентами
- Історія вебсайтів, інтерфейсів та інновацій, які на них вплинули
- Типи сайтів, особливості й відмінності
- Етапи й технології розробки вебсайтів
Скласти й проаналізувати список вебсайтів, що подобаються, за типами.
- З чого складається вебсайт: сітка, вайрфрейм, UI, брейкпойнти
- UIKit або дизайн-система
- Етапи створення сайту
- Принцип one click away і три кліки
- Підхід mobile first
- Бізнес-цілі та вимоги
- Потреби користувача і контекст використання
- Бриф: знайомство з продуктом або сервісом замовника
Ознайомитись із брифом від Skvot і сформулювати додаткові запитання.
- Desk research — що це
- User personas або Jobs to Be Done? Коли що застосовувати
- Competitors Analysis
- План деск-рисерчу
Розбір планів брифінгу та запитань, фідбек по домашках.
ДомашкаСкласти план деск-рисерчу та провести його.
- Moodboard (де шукати, чим надихатись)
- AI-інструменти (ChatGPT, FigNotion тощо)
- Підказки: де шукати інсайти — сапорт, сейлз, Google Analytics від клієнта
На прикладі одного плану деск-рисерчу побачиш, як збудувати Site Map.
ДомашкаСтворити Site Map та Moodboard.
Презентація деск-рисерчу, обговорення помилок і запитань.
ДомашкаВрахувати фідбек щодо деск-рисерчу.
- Що таке вайрфрейми та UX-проєктування
- Структура AIDA (Attention, Interest, Desire, Action)
- Демо створення вайрфреймів за готовим сайтом
Створити вайрфрейм сторінки лендингу на основі сайтмепу.
- Що таке Accessibility
- Важливість Accessibility в дизайні сайтів та в контексті війни
- Інструкції та стандарти доступності (WCAG A, AA, AAA)
- Проєктування для доступності
- Приклади та кейси
- Типографія
- Макети/сітки
- Кольори (базові принципи)
- Емоційний дизайн проти утилітарного
Створити доступний UI-концепт сторінки з навігацією.
- Чому потрібні прототипи
- Flows
- Basic interactions (click, drag, delay)
- Overlay
- Scroll behavior
- Smart Animate
- Поради щодо прототипування
Створити фінальне клікабельне, адаптивне та доступне дизайн-рішення.
Презентація сайтів лекторці та групі, обмін інсайтами, фідбек.
- Типи навігації та їхнє застосування
- Відмінності багатосторінкового сайту від лендингів
- Основні цілі та задачі
Ознайомитись із брифом.
- Згадуємо, що таке вайрфрейми та UX-проєктування
Відповіді на запитання студентів.
ДомашкаСпроєктувати сайтмеп.
- Поширені помилки прототипування
- Особливості прототипування багатосторінкових сайтів
- Q&A
Створити вайрфрейми.
- Макети/сітки
- Типографія
- Кольори (базові принципи)
UI-концепт (головна сторінка до фідбек-сесії).
UI-концепт (доопрацювати всі сторінки).
- Що таке адаптивність
- Брейкпойнти
- Сітки
- Особливості навігації (thumb, нижня навігація)
Мобільна версія сайту.
Презентація сайтів лекторці та групі, обмін інсайтами, фідбек.
- Обговорення запитань до брифу
- Комунікація та етика роботи з клієнтом
- Культурні особливості різних регіонів
- Складні клієнти: хто вони та як з ними працювати
Ознайомитись із брифом та підготувати запитання.
- Знайомство з клієнтом
- Обговорення брифу
- Desk research, User personas, JTBD, Competitors Analysis, Moodboard, Site Map
Проаналізувати відповіді клієнта, провести desk research, створити Moodboard + Site Map.
- Що таке онлайн-магазин
- Типові завдання користувачів
- Основні складові онлайн-магазину
- Сітки, стандарти й евристики
- Адаптивність онлайн-магазинів
- Поради щодо проєктування
Створити вайрфрейми онлайн-магазину.
- Dark patterns
- Розбір помилок студентів і сайтів
Створити UI-концепт головної сторінки з навігацією.
- Що таке юзабіліті-тестування
- Типи тестів (кількісні, якісні, модеровані, немодеровані)
- Планування, сценарії, проведення
- Аналіз результатів
- Інструменти
Створити клікабельний UI всіх сторінок сайту і відтестувати на 5+ респондентах.
- Обговорення процесу та результатів тестувань
- Обговорення адаптивності онлайн-магазинів
Адаптувати UI всіх сторінок до планшетів та мобільних пристроїв.
Презентація сайтів групі та лекторці.
ДомашкаДоопрацювати сайт після презентації, підготуватися до спілкування з клієнтом.
Презентація сайтів клієнту, обмін інсайтами.
- Інтро до Figma Dev Mode
- Що таке UI Kit і дизайн-системи
- Особливості станів елементів для вебу та адаптиву
- Доступність в UI Kit
Створити UI Kit для передачі в розробку.
- Як створювати кейси
- Обмін інсайтами
- Фідбек від лекторки
Створити кейси для портфоліо.





