Курс Web Design

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

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

Заняття 1. Вступ до вебдизайну

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

Заняття 2. Вступ до структури та процесів

• З чого складається вебсайт: сітка, вайрфрейм, UI, брейкпойнти
• UIKit або дизайн-система
• Етапи створення сайту
• Принцип one click away і три кліки
• Підхід mobile first
• Бізнес-цілі та вимоги
• Потреби користувача і контекст використання
• Бриф: знайомство з продуктом або сервісом замовника
• ДЗ: Ознайомитись із брифом від Skvot і сформулювати додаткові запитання

Заняття 3. Практикум - деск-рисерч

• Desk research - що це
• User personas або Jobs to Be Done? Коли що застосовувати
• Competitors Analysis
• План деск-рисерчу
• Розбір планів брифінгу та запитань, фідбек по домашках
• ДЗ: Скласти план деск-рисерчу та провести його

Заняття 4. Mapping

• Moodboard (де шукати, чим надихатись)
• AI-інструменти (ChatGPT, FigNotion тощо)
• Підказки: де шукати інсайти - сапорт, сейлз, Google Analytics від клієнта
• На прикладі одного плану деск-рисерчу побачиш, як збудувати Site Map
• ДЗ: Створити Site Map та Moodboard

Заняття 5. Фідбек-сесія

• Презентація деск-рисерчу, обговорення помилок і запитань
• ДЗ: Врахувати фідбек щодо деск-рисерчу

Заняття 6. Вайрфрейми та UX-проєктування

• Що таке вайрфрейми та UX-проєктування
• Структура AIDA (Attention, Interest, Desire, Action)
• Демо створення вайрфреймів за готовим сайтом
• ДЗ: Створити вайрфрейм сторінки лендингу на основі сайтмепу

Заняття 7. Web Accessibility

• Що таке Accessibility
• Важливість Accessibility в дизайні сайтів та в контексті війни
• Інструкції та стандарти доступності (WCAG A, AA, AAA)
• Проєктування для доступності
• Приклади та кейси

Заняття 8. UI-концепти й візуальний дизайн

• Типографія
• Макети/сітки
• Кольори (базові принципи)
• Емоційний дизайн проти утилітарного
• ДЗ: Створити доступний UI-концепт сторінки з навігацією

Заняття 9. Прототипування у Figma

• Чому потрібні прототипи
• Flows
• Basic interactions (click, drag, delay)
• Overlay
• Scroll behavior
• Smart Animate
• Поради щодо прототипування
• ДЗ: Створити фінальне клікабельне, адаптивне та доступне дизайн-рішення

Заняття 10. Презентація сайту лекторці

Презентація сайтів лекторці та групі, обмін інсайтами, фідбек.

Заняття 11. Цілі, задачі, особливості багатосторінкового сайту. Навігація

• Типи навігації та їхнє застосування
• Відмінності багатосторінкового сайту від лендингів
• Основні цілі та задачі
• ДЗ: Ознайомитись із брифом

Заняття 12. Воркшоп

• Згадуємо, що таке вайрфрейми та UX-проєктування
• Відповіді на запитання студентів
• ДЗ: Спроєктувати сайтмеп

Заняття 13. Прототипування великих сайтів

• Поширені помилки прототипування
• Особливості прототипування багатосторінкових сайтів
• Q&A
• ДЗ: Створити вайрфрейми

Заняття 14. UI-концепти й візуальний дизайн. Частина 2

• Макети/сітки
• Типографія
• Кольори (базові принципи)
• ДЗ: UI-концепт (головна сторінка до фідбек-сесії)

Заняття 15. Фідбек-сесія

ДЗ: UI-концепт (доопрацювати всі сторінки).

Заняття 16. Адаптивність

• Що таке адаптивність
• Брейкпойнти
• Сітки
• Особливості навігації (thumb, нижня навігація)
• ДЗ: Мобільна версія сайту

Заняття 17. Презентація сайту лекторці

Презентація сайтів лекторці та групі, обмін інсайтами, фідбек.

Заняття 18. Підготовка до брифування клієнта

• Обговорення запитань до брифу
• Комунікація та етика роботи з клієнтом
• Культурні особливості різних регіонів
• Складні клієнти: хто вони та як з ними працювати
• ДЗ: Ознайомитись із брифом та підготувати запитання

Заняття 19. Брифінг з клієнтом

• Знайомство з клієнтом
• Обговорення брифу
• Desk research, User personas, JTBD, Competitors Analysis, Moodboard, Site Map
• ДЗ: Проаналізувати відповіді клієнта, провести desk research, створити Moodboard + Site Map

Заняття 20. Стандарти й складові

• Що таке онлайн-магазин
• Типові завдання користувачів
• Основні складові онлайн-магазину
• Сітки, стандарти й евристики
• Адаптивність онлайн-магазинів
• Поради щодо проєктування
• ДЗ: Створити вайрфрейми онлайн-магазину

Заняття 21. Типові помилки в UI-концептах та візуальному дизайні

• Dark patterns
• Розбір помилок студентів і сайтів
• ДЗ: Створити UI-концепт головної сторінки з навігацією

Заняття 22. Юзабіліті-тестування

• Що таке юзабіліті-тестування
• Типи тестів (кількісні, якісні, модеровані, немодеровані)
• Планування, сценарії, проведення
• Аналіз результатів
• Інструменти
• ДЗ: Створити клікабельний UI всіх сторінок сайту і відтестувати на 5+ респондентах

Заняття 23. Фідбек-сесія

• Обговорення процесу та результатів тестувань
• Обговорення адаптивності онлайн-магазинів
• ДЗ: Адаптувати UI всіх сторінок до планшетів та мобільних пристроїв

Заняття 24. Фідбек-сесія - презентація драфтів

• Презентація сайтів групі та лекторці
• ДЗ: Доопрацювати сайт після презентації, підготуватися до спілкування з клієнтом

Заняття 25. Фінальна презентація клієнту

Презентація сайтів клієнту, обмін інсайтами.

Заняття 26. UI Kit і дизайн-системи

• Інтро до Figma Dev Mode
• Що таке UI Kit і дизайн-системи
• Особливості станів елементів для вебу та адаптиву
• Доступність в UI Kit
• ДЗ: Створити UI Kit для передачі в розробку

Заняття 27. Кейси та фідбек

• Як створювати кейси
• Обмін інсайтами
• Фідбек від лекторки
• ДЗ: Створити кейси для портфоліо

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

• Створиш три повноцінних кейси для портфоліо - лендинг, багатосторінковий сайт і e-commerce проєкт із мобільною адаптацією
• Навчишся визначати структуру, тип і функцію сайту, планувати процес роботи й реалізовувати повний цикл проєкту
• Освоїш базу вебдизайну: типографію, кольори, сітки, компоненти й автолейаути для адаптивних дизайнів
• Знатимеш, як створювати дизайн-системи, що виглядають професійно в будь-яких форматах
• Навчишся оформлювати кейси, які "продають" твої навички, та отримаєш чіткий план старту на фрилансі або в компанії
• Опaнуєш інтерактивні прототипи та анімаційні інструменти, щоб вирізнятись і прокачувати власний стиль

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

Мар'яна Бучкович - Senior UX/UI Designer at Fedoriv Agency