Веб-дизайн и 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.
