Веб-дизайн та UI/UX
- Тема 1: Вступ. UI/UX очима розробника — Навіщо кодеру розуміти дизайн, роль UI/UX у продуктовій команді, огляд інструментів.
- Тема 2: Основи інтерфейсу: сітки та типографіка — Модульні сітки, відступи, шрифтові пари, вертикальний ритм тексту в інтерфейсах.
- Тема 3: Колір та контраст в UI — Кольорові схеми, контрастність та доступність (accessibility), стани елементів (hover, active, disabled).
- Тема 4: Компоненти та Auto Layout у Figma — Фрейми, компоненти, варіанти компонентів, Auto Layout для адаптивних макетів.
- Тема 5: Візуальна ієрархія та іконографіка — Розмір, вага, позиція елементів; підбір і побудова власних іконок.
- Тема 6: Базові принципи UX — Зрозумілість інтерфейсу, зворотний зв'язок, обробка помилок, закон Фіттса та Хіка на практиці.
- Тема 7: Прототипування взаємодій у Figma — Зв'язки між екранами, переходи, стани компонентів, інтерактивний прототип для тестування.
- Тема 8: Дизайн форм і елементів керування — Поля вводу, валідація, чекбокси, перемикачі — патерни, які найчастіше реалізують розробники.
- Тема 9: Адаптивний дизайн: від десктопу до мобільного — Брейкпоінти, адаптація макета під різні екрани, mobile-first підхід.
- Тема 10: Дизайн-токени та підготовка макета — Змінні кольору, розміру, радіусів — міст між дизайном і кодом.
- Тема 11: Handoff: передача макета в код — Dev Mode у Figma, специфікації, вивантаження ассетів, CSS-значення напряму з макета.
- Тема 12: Спільна робота дизайнера й розробника — Коментарі, версії макетів, рев'ю інтерфейсу перед розробкою, типові непорозуміння і як їх уникати.
- Тема 13: Міні-проєкт: інтерфейс власного застосунку — Повний цикл: від ідеї та вайрфрейму до готового клікабельного прототипу.
- Фінал: Презентація проєкту — Захист свого інтерфейсу, зворотний зв'язок від викладача, подальші кроки в IT.
