Визуальная основа
Композиция, иерархия, типографика, цвет, контраст, сетки, адаптивность, изображения и иконки.
12 материаловВеб-дизайн, UX и конверсия — страница 2
Типографика, макеты, дизайн-системы и удобные интерфейсы для веба.
Темы раздела
Макеты и дизайн-системы
Figma, Penpot, компоненты, варианты, Auto Layout, токены, прототипы, передача разработчику и перенос макета в код.
33 материалаПоведение интерфейса
Навигация, хлебные крошки, хедер, футер, формы, состояния загрузки, ошибки и пустой результат, светлая и тёмная тема, микроанимации.
7 материаловИсследования и конверсия
Пользовательские сценарии, лендинги, воронки, наблюдение за пользователями, A/B-тесты и интерпретация результатов.
Материалы готовятсяРедизайн существующего сайта
Узнаваемость, реальные длинные статьи, код и таблицы, общие шаблоны, проверка мобильных экранов и доступности.
4 материалаМатериалы
- Читательские сценарии и дизайн-регламент
Читательские сценарии и дизайн-регламент для последовательного оформления и расширения ProfessorWeb
- Макет учебного портала в Figma
16 уроков: оригинальный учебный портал, сетка и текст, компоненты, Auto Layout, адаптивные экраны, состояния поиска и передача.
- Задача и файл учебного портала
Формулируем сценарий портала и создаём структуру файла перед рисованием экранов.
- Фреймы и структура слоёв
Отделяем экраны, секции и группы и задаём иерархию будущего портала.
- Сетка и пространство страницы
Рассчитываем рабочую ширину, колонки и отступы каталога для двух размеров экрана.
- Текст и читаемая иерархия
Создаём типографическую шкалу и проверяем длинные заголовки на тех же данных.
- Цветовые роли и переменные
Связываем палитру с назначением элементов и отделяем базовые значения от смысловых ролей.
- Кнопка и Auto Layout
Строим кнопку, которая сохраняет отступы при изменении текста, и разбираем размеры контейнеров.
- Компонент и его экземпляры
Делаем кнопку повторно используемой и объясняем наследование и локальные изменения.
- Варианты и свойства кнопки
Разделяем тип, состояние и редактируемый текст компонента без бесконтрольного числа копий.
- Карточка курса и список
Собираем карточку из связанных элементов и задаём правила для списка с разной длиной текста.
- Шапка, вводный блок и футер
Собираем общие области портала и отделяем глобальную навигацию от выбора курса.
- Страница курса и текст урока
Переводим посетителя от сравнения карточек к программе курса и читаемой учебной странице.
- Векторные значки и обложки
Создаём простые учебные значки из фигур, различаем boolean operations и необратимое объединение.
- Адаптивные экраны и размеры
Меняем число колонок и состав навигации, сохраняя содержание и общие компоненты.
- Поиск и состояния каталога
Проектируем результат, пустую выдачу и загрузку, сохраняя запрос и действие восстановления.
- Переходы и прокрутка прототипа
Связываем каталог, курс и урок и различаем навигацию, overlay и прокрутку внутри страницы.
- Передача макета разработчику
Собираем договор компонентов, экспортируем отдельную графику и фиксируем ограничения учебного прототипа.
- Библиотека компонентов и Storybook: проект «Набор»
Двенадцать последовательных уроков проекта «Набор» с полными состояниями исходников.
- Изолированная мастерская компонентов
Подготовить React-компонент, CSF-историю и конфигурацию Storybook без приложения-клиента.
- Цвета, размеры и семантические токены
Выделить общие CSS-переменные и показать их значения в мастерской.
- Контракт кнопки и варианты оформления
Создать варианты, размеры, нативные атрибуты и правила композиции класса.
- Истории состояний и управляемые параметры
Организовать CSF-истории, controls и примеры длинного текста.
- Поле ввода, подпись и сообщение об ошибке
Связать label, input и пояснения устойчивыми идентификаторами.