WEB DESIGN
Збери портфоліо з адаптивними сайтами та зроби світч у вебдизайн
МАР'ЯНА БУЧКОВИЧ
Senior UX/UI Designer у Fedoriv Agency
За кожним функціональним сайтом стоїть вебдизайнер. Розказуємо, як ним стати.
За 29 занять ти навчишся проєктувати цифрові продукти як цілісні системи: продумувати UX і структуру, створювати UI у Figma, робити адаптивні версії та збирати інтерактивні прототипи для передачі в розробку.
В результаті — збереш 3 проєкти для портфоліо: лендинг, багатосторінковий сайт і e-commerce для реального клієнта.
Програма
Вступ до вебдизайну
- Знайомство з курсом та студентами
- Історія вебсайтів, інтерфейсів та інновацій, які на них вплинули
- Типи сайтів, особливості й відмінності
- Етапи й технології розробки вебсайтів
Домашка: скласти й проаналізувати список вебсайтів, що подобаються, за типами.
Figma: секрети роботи (туторіали в записі)
2.1
- Основні елементи інтерфейсу
- Прості фігури та заливка
- Фрейми
- Векторна графіка
- Текст та шрифти
- Маски та ефекти
- Комʼюніті та плагіни
- Вбудовані ШІ функції
2.2
- 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 у Fedoriv Agency
11 років у професії
Серед проєктів зараз — Jome, Fedoriv Group, «Нова Пошта» й Міністерство оборони України, а також цифрові продукти для «Мрії» та «Нафтогаз Цифрові Технології» (застосунок «Куб»).
3 роки лідила команду різнопрофільних дизайнерів в Obriy Design Büro, а також вебсайт Intensfit, Intensfit App, Art De Vivre та інші проєкти.
Брала участь як Middle UX/UI у створенні Chillio. В команді Artkai створювала застосунок Cordic. Розробила промосайт для фільму Breaking Into Baikonur.
Просуває доступність в інтерфейсах та інклюзивний дизайн.
КУДИ ВЕДЕ ВЕБДИЗАЙН
до $1200 вже протягом першого року
вебдизайн має низький поріг входу та швидке зростання доходу на старті
IT-компанії, агенції та e-commerce
— серед головних роботодавців, які регулярно відкривають позиції для junior та стажерів
перші проєкти вже після курсу
робиш реальні роботи для портфоліо й можеш одразу брати перші комерційні задачі та рости до UX/UI
ДЛЯ КОГО КУРС?
початківці у вебдизайні
структуруєш свої знання, отримаєш повне розуміння процесу вебдизайну, створиш реальні кейси для портфоліо, щоб упевнено стартувати в професії
графічні дизайнери, розробники, ілюстратори
розшириш свій професійний спектр, навчишся створювати продумані сайти з якісним UX та сучасним UI
світчери
навчишся працювати з реальними брифами й створиш портфоліо з кейсами, щоб змінити професію та розпочати кар’єру у сфері зі зростаючим попитом
ЯКІ РОБОТИ ПОКЛАДЕШ У ПОРТФОЛІО?
→ Лендинг
→ Багатосторінковий сайт
→ E-commerce сайт для клієнта
* мобільна версія included у кожній роботі
ЩО ВМІЄШ ПІСЛЯ КУРСУ?
→ Визначати структуру, тип і функцію сайту й планувати повний цикл роботи над проєктом
→ Працювати з типографією, кольорами, компонентами, автолейаутами та сітками для створення адаптивного дизайну
→ Створювати дизайн-системи, щоб дизайн залишався цілісним у різних форматах і задачах
→ Адаптувати дизайн під мобільні пристрої, планшети й десктоп
→ Аналізувати конкурентів та аудиторію, щоб ухвалювати обґрунтовані дизайн-рішення
→ Проєктувати UX через дослідження користувачів та Customer Journey Map
→ Створювати інтерактивні прототипи, UI-концепти й працювати з анімацією
→ Передавати дизайн розробникам так, щоб ідея зберігалася в реалізації
ЯКІ ФІШКИ КУРСУ?
→ Працюєш над реальним проєктом
→ Презентуєш дизайн клієнту і вчишся аргументувати рішення
→ Прокачуєш скіли на практикумах і воркшопах
→ Проходиш тему доступності у вебі та застосовуєш її в дизайні
→ Наповнюєш портфоліо різними типами сайтів та їхніми мобільними версіями
→ Починаєш практикуватися з перших занять
реєстрація
Зроби перший крок у вебдизайні — з реальними задачами й результатом