Курс Web Design

Ти навчишся створювати інтерфейси, які сподобаються і клієну і тобі. Опануєш must-софти: Figma, Adobe Illustrator та Adobe Photoshop. Зрозумієш, як генерувати та втілювати дієві концепти під різні запити клієнтів.

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

Знайомство: хто є хто?

Що таке вебдизайн і чому він потрібен?

Блок 1. Софт. Працюємо з Figma

Усе починається з Figma

• вивчаємо основні функції програми
• фрейми, фігури, заливка та обкладинки
• текст всьому голова: вивчаємо читабельні шрифти
• основи векторної графіки
• як прикладати маски та використовувати ефекти без крінжа
• що таке Mirror App та Контроль версій
• ком'юніті як потужний допоміжний інструмент
• плагіни та FigJam

Верстка лайк е про

• розбираємося з модульними сітками
• як Auto Layout полегшує життя вебдизам
• створюємо "гумовий" макет

Стилі, компоненти та бібліотеки

• як правильно називати стилі, щоб не створювати mess
• компоненти та їхня варіативність

ДЗ №1. Перемалювати landing page.

Прототип та анімація

• прототипи у Figma: що, куди і як
• як користуватися інтерактивними компонентами
• модальне вікно та автоматична анімація
• клікабельний прототип скролу

Блок 2. Вивчаємо вебдизайн без книжок

Design та Digital Marketing. Чому Design Thinking стосується всього

• який буває дизайн: чим вебдизайнер відрізняється від дизайнера інтер'єру/додатків/анімації/бренду
• вебдизайн та види вебсайтів:landing page, corporate website, e-commerce
• сайт потрібен усім: вебдизайн у бізнесі та маркетингу
• як створювати проєкт за допомогою Design Thinking: виявляємо проблеми, досліджуємо ринок та ЦА, формуємо ідеї, прототипуємо та обираємо найкраще рішення
• що таке wireframes та як їх будувати

Photoshop. Додаткове заняття

• растрова та векторна графіка: в чому різниця?
• створюємо новий файл без зайвих кліків
• навігація всередині документа, налаштування панелей
• як працювати з шарами

ДЗ №2. Підготувати фрейм landing page до роботи зі стилем.

Воркшоп з основ композиції, колористики, типографіки. Працюємо з базовими сітками та референсами без плагіату

• композиція: основи і робота на прикладах
• вчимося підбирати колір за сенсом і значенням
• робота з текстом, шрифтами та сітками
• що таке референси, де шукати і як використовувати

Illustrator. Додаткове заняття

• організація робочого простору без стресу, реєстрацій і смс
• основні прості інструменти для роботи
• огляд верхньої панелі та робота з шарами
• криві Безьє, інструмент перо та робота з точками
• контур та робота з ним

Додаткові матеріали: composition, how to use type + colors, grids + tips&tricks

ДЗ №3. Підібрати референси, базуючись на тематиці бізнесу та структурі з попереднього ДЗ для власного ленда.

Бренд-дизайнер та гостьова лекторка Катя Іщенко - про графіку, іконки, лого, постер та мокап

Illustrator. Додаткове заняття

• панель pathfinder, розділення об'єктів
• вирівнювання
• створення масок
• імпорт зображень
• трасування зображень
• деформація тексту
• ефект Трансформація

ДЗ №4. Створити постер на основі технічного завдання, для якого додатково розробити:

• логотип
• пак іконок

Створення концепту без паніки

• замість шпаргалки: алгоритм збору концепту
• де грань між запозиченням та плагіатом
• як розробити дизайн на основі концепту

ДЗ №5. Розробити логотип та побудувати концепт на основі:

• референсів
• елементів дизайну (типографіка, кольори, сітка, композиція)

Backend дизайну: розбираємо необхідні інструменти

• складаємо ui kit (частина воркшопу)
• стандартизація стилей
• адаптуємо під мобайл
• що таке pixel perfect

ДЗ №6. Закріпити backend: виправити неточності в пікселях, зібрати UI kit, адаптувати макет під mobile.

Презентація як основний канал продажу

• tips & tricks презентації дизайну
• сторітелінг: як утримати фокус клієнта і довести до головного
• як використовувати референси для презентацій без плагіату
• викладаємо матеріал на слайд, щоб не сіпалось око
• технічні знання про створення презентації
• всьому свій час: встановлюємо таймінг
• захищаємо свої дизайн рішення без стресу і з прогресом
• readymag: збираємо презентацію і додаємо свої фішки

ДЗ №7. Створити презентацію для власного лендингу та презентувати готовий проєкт на наступному занятті.

Presentation check. Презентація власного проєкту із залученням ШІ в роботу

Фідбек-сесія від лекторки

Блок 3. Занурюємось у вебдизайн з головою

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

• які бувають клієнти та як з ними комунікувати без стресу
• що таке бриф та як працювати з ним крок за кроком
• додаткові питання: готуємо, залежно від контексту бізнесу
• проводимо робочий мітинг: нотатки, запис зустрічі, невербаліка, структура діалогу та ролі
• презентація та Q&A по брифу з лекторкою

ДЗ №8. Проаналізувати бриф для подальшої роботи з ним та сформувати додаткові запитання.

Гостьова лекторка та стратег Юлія Лисенко про бренд, Market Research та Brand Model

Що таке UX Design, UX Research та Sitemap

• UX Design - аналіз, аналіз та ще раз аналіз
• рісьорч ux design конкурентів та ux бест практіс
• структура багатосторінкового сайту
• воркшоп з Sitemap

ДЗ №9. Зібрати презентацію з:

• аналізу конкурентів у розрізі UX
• побудованого сайтмепу

Воркшоп - Wireframing, UX writings, Navigation

• створюємо wireframe для головної сторінки
• navigation tools: хедер, форми, футер, слайдер і інші невідомі слова

Додаткові матеріали: UX copy.

ДЗ №10. Створити вайрфрейми на всі сторінки.

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

Воркшоп з UI-дизайну. Вивчаємо Visual Research та Visual Audit

• що таке UI-дизайн і чому він має йти після UX
• аналіз UI design конкурентів та ui бест практис
• аналіз існуючого дизайну

Додаткові матеріали: UX copy

ДЗ № 11.

• провести Visual Audit наявного сайту
• проаналізувати ринок у розрізі UI
• оформити у презентацію

Воркшоп з Юлією Замятіною. Ideas Generation та Visual trick

• розробляємо ідею-метафору з глибоким сенсом
• знаходимо графічний прийом, який підкреслить концепт
• створюємо необхідний мудборд до кожної ідеї

ДЗ № 12. Доробити практику так, щоб:

• вийшло відібрати 3 робочі метафори
• був графічний прийом до кожної ідеї
• мудборд розкривав ідею через віжуали

Оформити все у презентацію.

Навіщо вебдизайнеру Design Approach. Дотримуємося дизайн-айдентики

• що таке айдентика і для чого тобі в роботі
• айдентика - гайд, вебсайт - носій
• збираємо design approach
• прокачуємо скіли по сіткам, роботі з текстом, кольорами, композицією

ДЗ №13. Створити 3 варіанти approach для сайту:

• логотип
• типографіка
• колір
• сітка
• композиція

Оформити все у презентацію.

Backend дизайну та адаптація

• збираємо ui kit для багатосторінкових сайтів
• implementation 2.0
• адаптація під мобайл, арсенал патернів

ДЗ №14. Фіналізувати редизайн сайту: виправити неточності, зібрати UI kit, імплементувати на 6 сторінок, адаптувати головну сторінку під mobile.

Concept advanced

• ще складніші та цікавіші прийоми
• як збирати концепт

ДЗ №15.

• створити концепт першої сторінки на основі wireframe + design approach
• розробити логотип
• зібрати презентацію та презентувати на наступному занятті

Presentation check

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

Блок 4. E-commerce. Працюємо з товарними сайтами

UX E-commerce сайтів, navigation tools та аналітика

• UX e-commerce сайту. Все, що треба знати: структура та патерни
• navigation tools для e-commerce сайту: фільтр, сортування, каталог, чекаут, хедер
• аналітика - овервью

ДЗ №16. Створити айтеми для наступних сторінок: home, catalog, product page, check-out, особистий кабінет.

UI e-commerce сайтів

• як робити просту і зручну навігацію
• представляємо продукти візуально та робимо опис
• інтерактивність ключових елементів дизайну

ДЗ №18. Імплементувати e-commerce сторінки за розробленими UI design.

Presentation check

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

Гостьова лекторка та HR Настя Слободянюк: про важливість портфоліо та резюме, вплив соціальних мереж та співбесіди. Куди рости та який тип зайнятості підійде саме тобі

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

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

• оформлюєш портфоліо з трьома кейсами, збираєш професійне CV та розумієш, як зацікавити клієнтів
• вмієш працювати з брифами та проводиш UI/UX-аналіз, щоб зрозуміти аудиторію та розв'язати задачу клієнта
• проводиш дизайн-сесії: працюєш з рефами, генеруєш ідеї, створюєш mind map та збираєш мудборд
• знаєш основи типографії та композиції, створюєш архітектуру й навігацію сайту
• розбираєшся в UX-копірайтингу та застосовуєш AI для швидшої роботи
• розробляєш UI kit: від кнопок — до іконок та панелей; адаптуєш сайт під різні пристрої: desktop, mobile, tablet

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

Оля Варченко - 7+ років у професії