Вопросы по UX/UI-дизайн
Процесс, исследования, сетки, типографика, доступность WCAG, дизайн-системы и Figma. Помогает уверенно разобрать кейс на собесе, защитить портфолио и ответить на вопросы про контраст, метрики и передачу макетов.
Проверьте себя: тест по UX/UI-дизайну
20 вопросов, 10 минут, уровень junior, middle или senior
Процесс и роль дизайнера
Двойной алмаз, дизайн-мышление, место дизайнера в продуктовой команде и как он принимает решения.
Урок: Процесс дизайна и роль дизайнера 6 минИсследования
Интервью, юзабилити-тесты, персоны, CJM, JTBD и как не исказить результат.
Урок: Исследования без самообмана 6 минИнформационная архитектура и сценарии
Структура, навигация, карточная сортировка, tree testing, user flow и законы UX.
Урок: Информационная архитектура и сценарии 6 минКомпозиция, сетки, типографика
Гештальт, иерархия, модульные сетки, 8pt, шкала шрифтов, интерлиньяж и длина строки.
Урок: Композиция, сетки и типографика 5 минЦвет, контраст, доступность
Палитры, расчёт контраста, WCAG 2.2 уровня AA, фокус, скринридеры и цвет как единственный сигнал.
Урок: Цвет, контраст и доступность WCAG 6 мин- Серый #777 на белом
- Контраст текста по WCAG AA
- Альтернативный текст
- Как проверить доступность макета
- Граница поля ввода
- Цвет как единственный сигнал
- Нарушения цветовосприятия
- Формула контраста
Ещё 14 вопросов и задач
- Доступность как требование
- Расчёт контраста
- Пороги WCAG AA
- Фокус под липкой шапкой
- Белый на синей кнопке
- Крупный текст
- Белый на оранжевом
- Порядок проверки доступности компонента
- Принципы POUR
- Оттенок красного для ошибки
- Ревью дашборда на доступность
- Ревью экрана входа на доступность
- Размер цели в WCAG 2.2
- Что нового в WCAG 2.2
Дизайн-системы и компоненты
Токены, атомарный подход, состояния компонентов, документация и развитие системы.
Урок: Дизайн-системы и компоненты 5 минFigma на практике
Автолэйаут, компоненты и варианты, свойства, переменные и режимы, библиотеки и Dev Mode.
Урок: Figma на практике 5 минПрототипы и микровзаимодействия
Уровни прототипов, анимации, длительности и кривые, обратная связь и reduced motion.
Урок: Прототипы и микровзаимодействия 5 минМобильные паттерны
HIG и Material 3, навигация, тач-таргеты, жесты, клавиатура и плотность экранов.
Урок: Мобильные паттерны iOS и Android 6 минUX-письмо и формы
Кнопки, ошибки, пустые состояния, тон, формы и валидация.
Урок: UX-письмо и формы 5 минМетрики дизайна и A/B
Task success, SUS, HEART, воронки, A/B-тесты и как доказать пользу дизайна.
Урок: Метрики дизайна и A/B-тесты 6 минРабота с разработкой
Передача макетов, состояния и краевые случаи, дизайн-ревью реализации, договорённости с командой.
Урок: Работа с разработкой и передача макетов 5 минПортфолио, тестовое и кейс
Как собрать кейс, сделать тестовое, разобрать задачу на собесе и вырасти до senior.
Урок: Портфолио, тестовое и кейс на собесе 5 мин