Курс Web Design

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

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

Вступ до вебдизайну

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

Figma: Секрети роботи (туторіали в записі)

• Основні елементи інтерфейсу
• Прості фігури та заливка
• Фрейми
• Векторна графіка
• Текст та шрифти
• Маски та ефекти
• Комʼюніті та плагіни
• Вбудовані ШІ функції
• Auto Layout та модульні сітки
• Компоненти та їх варіативність
• Стилі
• Variables
• Дизайн-системи

Воркшоп по Figma

Закріплюємо інструменти Figma на онлайн-воркшопі з лекторкою.

Вступ до структури та процесів

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

Практикум - деск-рисерч

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

Mapping

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

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

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

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

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

Web Accessibility

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

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

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

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

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

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

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

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

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

Воркшоп

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

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

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

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

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

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

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

Адаптивність

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

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

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

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

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

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

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

Стандарти й складові

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

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

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

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

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

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

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

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

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

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

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

UI Kit і дизайн-системи

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

Кейси та фідбек

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

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

• Допомога ментора
• Практика
• Домашні завдання
• Кейс в портфоліо
• Курсовий проєкт
• Сертифікат про проходження курсу

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

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