UX/UI DESIGNER

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

Д/З: перемалювати вайрфрейм, використовуючи найпростіші фігури, кадри або зображення. Зробити три кнопки з різними іконками та ефектами.

• mirror app та контроль версій
• ком'юніті
• плагіни
• FigJam

Д/З: обрати інтерфейс, запропонований лектором, та повторити його.

• модульні сітки
• Auto Layout
• як створити «гумовий» макет

Д/З: зібрати 2 елементи дизайну інтерфейсу, перетворити їх на компонент із варіантами.

• стилі та як їх називати
• компоненти
• варіативність компонентів
• дизайн-система

Д/З: створити адаптивні макети інтерфейсів. Зробити список контактів за допомогою Auto Layout.

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

Д/З: зробити прототип програми з кількох екранів. Заанімувати його.

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

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

• легко знайти й важко забути — шукаємо конкурентів
• прямі та непрямі типи конкурентів
• UI-, UX-, CX-аналіз: розбираємось у важких словах

Д/З: знайти прямих конкурентів та проаналізувати їхні сайти.

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

Д/З: згенерувати гіпотези й скласти список запитань для дослідження.

• Розбираємо аналіз конкурентів

• Перевіряємо гіпотези й запитання для дослідження

• створюємо навігацію та архітектуру сайту
• юзер не має губитись — структуруємо інфу, конструюємо сторінки
• user story — опис фічі з точки зору юзера
• job story — обставини, в яких юзер купує продукт
• маркетингові моделі: що, навіщо та кому

Д/З: cтворити sitemap для проєкту.

• інструменти та стратегія створення вайрфреймів
• налаштовуємо клікабельність прототипів

• Ти презентуєш sitemap, лектор дає фідбек

Д/З: відмалювати вайрфрейми за проєктом.

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

Д/З: підготувати презентацію для дизайн-сесії.

• трохи про головний графічний прийом
• метафора в дизайні — шукаємо за допомогою Mind Map
• мудборд — як створити своє та не брати чужого (але це не точно)

Д/З: придумати дизайн-ідею та створити мудборд на її основі.

• типографіка: гротеск, антиква, шрифтова пара, поєднання
• колористика: колір, насиченість, поєднання та пропорції
• декорації
• створення презентації

Д/З: створити дві референсні концепції на основі ідеї.

• Розбираємо ідеї для мудбордів

• Дивимось на референсні концепції

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

Д/З: почати роботу над дизайн-макетом головної сторінки сайту. Створити драфти двох перших секцій (по 3 варіанти кожної).

• Перевірка та обговорення драфтів концепту

Д/З: створити наступні секції концепту.

• принципи та правила анімації
• Smart Animate — простий тул для анімації прототипу

Д/З: створити анімацію однієї або кількох секцій дизайн-концепту.

• Перевірка фінальних драфтів концепту

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

Д/З: розробити простий UI kit на основі концепту.

• адаптивний дизайн та плагіни для адаптивів
• пристрої та розміри артбордів
• гумовий та статичний дизайн: чи має сайт «розтягуватись»?

Д/З: створити адаптив концепту для mobile і tablet.

• СV та портфоліо вебдизайнера: на що звернути увагу?
• обери свій варіант — студія, фриланс, IT-компанія
• співбесіда — захоплюємо серця рекрутерів

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

Д/З: зібрати сторіборд та зробити презентацію.

Теорія:

• що таке UX- та UI-дизайн, відмінність від вебу
• що таке інтерфейси, хто і як їх створює
• розбираємо типи сайтів

Практика: аналізуємо сайти

Д/З: навести по 1 прикладу з кожного типу сайтів. Вказати 3-5 помилок з точки зору користування.

Теорія:

• патерни поведінки користувачів
• основи дизайн-мислення
• human-centered design процес та його стадії

Практика: аналізуємо сайти

Д/З: навести по 1 прикладу з кожного типу сайтів. Вказати 3-5 помилок з точки зору користування.

Теорія:

• конкурентний аналіз
• як зрозуміти ринок сайтів та додатків
• прямі та непрямі конкуренти

Практика: аналізуємо аудиторії та конкурентів за даними лектора

Д/З: зробити аналіз аудиторії, ринку та конкурентів для інтернет-магазину.

Теорія:

• методології досліджень
• юзер-інтервʼю: методи проведення
• пошук респондентів
• обробка даних
• як перетворити дані на дизайн-рішення

Практика: встановлюємо мету та задачу дослідження, готуємо сценарій інтерв'ю

Д/З: провести від 5 юзер-інтерв'ю, зробити висновки.

Теорія:

• що таке персони та як їх створювати
• відображуємо те, що знаємо про юзера

Практика: створюємо персону

Д/З: створити персони та базову СJM на основі даних з юзер-інтерв’ю.

• Проєктуємо зняття готівки в банкоматі, презентуємо дизайн-рішення в команді. Отримуємо фідбек лектора.

Теорія:

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

Практика: розбираємо алгоритм створення user-flow та робимо його на прикладі простих рішень

Д/З: створити user flow інтернет-магазину.

Теорія:

• UX Writing як частина дизайн-проєкту
• з ким взаємодіє UX Writer
• типи UX-текстів
• UX Writing vs Content Design: відмінності
• microcopy 101
• транзакційні комунікації
• дивимось кейси та обговорюємо їх

• Робимо кілька типових тасків UX Writer — від простих до комплексних

Теорія:

• як проєктувати дані в цифровий інтерфейс
• прототип: поняття й типи

Практика: робимо перші кроки до створення прототипу

Д/З: зробити прототип інтернет-магазину.

Теорія:

• поняття «юзабіліті евристики»
• як за допомогою ЮЕ проводити аналіз інтерфейсів

Практика: аналізуємо інтерфейси на основі евристик

Д/З: перевірити свій прототип на евристики та доробити його.

• Проєктуємо додаток для виклику няні. Презентуємо дизайн-рішення в команді. Отримуємо фідбек

Теорія:

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

Практика: створюємо інтерактивний прототип

Д/З: зробити інтерактивний прототип. Створити сценарій для інтерв’ю, провести user-тести та сформувати висновки.

Теорія:

• як перетворити результат тестування на влучне дизайн-рішення

Д/З: фіналізувати прототип.

Теорія:

• UI-дизайн та його принципи
• пошук візуального стилю
• референси та мудборд

Практика: складаємо головну сторінку з референсів

Д/З: підготувати рефи для всіх сторінок, створити мудборд та зібрати головну сторінку.

Теорія:

• поняття, ступені пропрацювання та робота з концептом на кожному етапі розробки
• презентація дизайн-концепту

Практика: створюємо кілька дизайн-концептів перших сторінок

Д/З: зробити кілька варіантів візуального стилю для головної сторінки сайту.

Теорія:

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

Практика. Дивимось приклади:

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

Д/З: допрацювати дизайн-концепт головної сторінки сайту.

Д/З: фіналізувати дизайн головної сторінки сайту.

Теорія:

• каталог, фільтри, сторінка товару, кнопки, контроли, поп-апи
• реєстрація, оформлення замовлення, кошик, чекаут

Практика: розбираємо e-commerce кейси з оформлення замовлень

Д/З: зробити дизайн внутрішніх сторінок сайту.

Теорія:

• дизайн-система: складові та робота в компаніях
• як і навіщо робити UI kit
• як, навіщо (і чому потрібно) робити адаптивний дизайн
• брейкпоінти

Практика: дивимось на приклади дизайн-систем та адаптивних сайтів, робимо UI kit

Д/З: створити UI kit та мобільну версію основних сторінок.

• Створюємо адмін-панель CRM-системи. Презентуємо дизайн-рішення в команді. Отримуємо фідбек

Теорія:

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

Д/З: зробити дизайн особистого кабінету, підготувати ТЗ для розробників.

Теорія:

• мобайл vs веб: відмінності
• етапи створення та способи розробки додатка
• гайдлайни iOS та Android

Практика: збираємо кілька екранів за гайдлайнами iOS

Д/З: придумати тему для свого проєкту. Знайти топ-3 апки у своєму телефоні. Розписати, що подобається, а що можна покращити. Створити кілька екранів соцмережі за гайдами iOS та Android. Створити кілька головних сторінок для додатка за гайдами iOS.

Теорія:

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

Практика: розглядаємо приклади навігацій та патернів (на продуктах, які мають веб та додаток)

Д/З: зробити навігацію в додатку, орієнтуючись на навігацію сайту. Продумати навігацію для свого проєкту.

Теорія:

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

Практика: проєктуємо екран реєстрації та онбординг

Д/З: зробити всі сторінки свого додатка.

Теорія:

• основні сторінки та головні елементи
• основні компоненти
• еngagement юзерів
• додаткові патерни в додатках
• запити на дозволи від юзера
• еmpty states

Д/З: зробити дизайн основних сторінок додатка та створити додаткові екрани.

Теорія:

• оформлення візуальної частини апки для App Store та Google Play
• додаткові матеріали

Д/З: оформити додаток для App Store.

Теорія:

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

Д/З: оформити кейс для портфоліо.

Теорія:

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

Д/З: підготувати запитання для брифінгу з клієнтом.

• Ти знайомишся з проєктом, ставиш запитання і визначаєш задачу

Д/З: провести передпроєктний аналіз, створити архітектуру проєкту та підібрати референси.

Д/З: зафіналити передпроєктний аналіз, почати проєктування інтерфейсу

Теорія:

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

Теорія:

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