Визуальная основа
Композиция, иерархия, типографика, цвет, контраст, сетки, адаптивность, изображения и иконки.
12 материаловВеб-дизайн, UX и конверсия — страница 3
Типографика, макеты, дизайн-системы и удобные интерфейсы для веба.
Темы раздела
Макеты и дизайн-системы
Figma, Penpot, компоненты, варианты, Auto Layout, токены, прототипы, передача разработчику и перенос макета в код.
33 материалаПоведение интерфейса
Навигация, хлебные крошки, хедер, футер, формы, состояния загрузки, ошибки и пустой результат, светлая и тёмная тема, микроанимации.
7 материаловИсследования и конверсия
Пользовательские сценарии, лендинги, воронки, наблюдение за пользователями, A/B-тесты и интерпретация результатов.
Материалы готовятсяРедизайн существующего сайта
Узнаваемость, реальные длинные статьи, код и таблицы, общие шаблоны, проверка мобильных экранов и доступности.
4 материалаМатериалы
- Диалог с нативным управлением фокусом
Согласовать showModal, Escape, закрытие и управляемое состояние React.
- Загрузка и предотвращение повторного действия
Разделить состояние операции, доступность кнопки и индикацию ожидания.
- Ошибки, пустые результаты и сообщения статуса
Сделать сообщения с семантикой status или alert и конкретным действием пользователя.
- Светлая и тёмная темы через декоратор
Переопределить семантические токены в области истории и добавить переключатель.
- Доступность компонентов и ручная проверка
Объяснить клавиатурные маршруты и подготовить addon-a11y в ручном режиме.
- Документация API и составной пример формы
Добавить Autodocs, описание ограничений и форму из компонентов «Набора».
- Публичные экспорты и версии библиотеки
Определить API пакета, CSS-экспорт, совместимость и правила миграции потребителя.
- Создание эффективных форм для сайта
Примеры оптимизации форм на сайте для увеличения поведенческих факторов пользователей и упрощения заполнения форм