UX-WAI. Верстка адаптивных интерфейсов
Длительность дисциплины: 40 ак.ч.
Аннотация
Образовательный модуль охватывает современные технологии вёрстки, включая Flexbox и Grid для позиционирования элементов, а также основы адаптивного дизайна с медиазапросами. Рассматриваются UI-библиотеки, дизайн-системы и CSS-фреймворки, такие как Bootstrap, для ускорения разработки. Изучаются интерактивные компоненты (слайдеры, карусели) и их кастомизация. Особое внимание уделяется адаптивной вёрстке с использованием фреймворков и подходу Mobile First. Дополнительно разбирается работа с Figma для создания макетов и экспорта ассетов.
Знания и умения, полученные в результате изучения
В результате освоения программы обучающийся должен уметь:
• создавать структуру веб-страниц «гибкого» дизайна;
• формировать набор медиазапросов для реализации адаптации;
• формировать свои и использовать готовые дизайн-системы для верстки блоков веб-страниц;
• применять компоненты библиотек интерактивных элементов;
• тестировать и отлаживать веб-страницы адаптируемого дизайна.
В результате освоения программы, обучающийся должен знать:
• позиционирование элементов flex layout;
• построение макета с помощью grid layout;
• основные возможности css-фреймворков и ui-библиотек;
• состав и способы применения дизайн-систем.
В результате освоения программы обучающийся должен приобрести практический опыт:
• настройки адаптивной сетки;
• разработки элементов дизайн-систем для верстки;
• верстки макета адаптируемого дизайна с помощью комбинированного подхода, включающего разные способы позиционирования;
• создания разных типов мобильного меню навигации;
• кастомизации компонентов библиотек интерактивных элементов для создания галерей, слайдеров, каруселей;
• быстрого прототипирования веб-страниц с использованием css-фреймворков, библиотек интерактивных компонентов.
Содержание дисциплины
Тема 1. Позиционирование. Свойство flex
Свойства flex layout.
Верстка блоков макета (навигация, галереи, колонки) на основе flex layout.
Тема 2. Позиционирование. Свойство grid
Свойства grid layout.
Верстка макета на основе grid layout
Тема 3. Адаптивный дизайн
Медиазапросы.
Общие принципы адаптации элементов макета.
Адаптивные изображения.
Адаптивная навигация
Верстка адаптивной веб-страницы
Тема 4. Библиотеки ui-элементов, дизайн-системы для верстки
Библиотеки ui-элементов (ui-kit).
Дизайн-системы.
Состав, системы css-классов.
Применение дизайн-систем, ui-kit
Верстка веб-страницы на основе библиотек элементов
Тема 5. CSS фреймворки
Возможности CSS-фреймворков.
Версии.
Начало работы.
Необходимые файлы для проекта.
Сниппеты кода.
CSS-препроцессоры
Верстка страницы с использованием сниппетов Bootstrap
Тема 6. Интерактивные компоненты веб-страниц
Библиотеки интерактивных компонентов.
Рассмотрение примеров наиболее типичных элементов библиотек интерактивных компонентов.
Кастомизация элементов библиотек
Верстка страницы с использованием интерактивных элементов (слайдер, карусель, галерея)
Тема 7. Адаптивная верстка с использованием css-фреймворков
Система сеток.
Контрольные точки.
Mobile first
Свойства контейнеров для размещения основных блоков адаптивного макета.
Подходы в кастомизации
Верстка адаптивных карточек на основе сетки и типографики Bootstrap
Тема 8. Быстрое прототипирование
Основные подходы в использовании CSS-фреймворков.
Выбор способа реализации интерактивных компонетов с учетом требований адаптивного дизайна и юзабилити.
Полезные сервисы и ресурсы для верстки.
Создание слайдера изображений
Тема 9. Figma для верстальщика
Требования к макетам в Figma с учетом адаптивной верстки.
Особенности создания макетов в Figma c учетом использования для верстки css-фреймворков и библиотек элементов.
Экспорт ассетов
Верстка адаптивных страниц на основе прототипов в Figma
Тема 10. Экзамен