+7 (812) 703-02-02 info@hse.spbstu.ru

UX-WAI. Верстка адаптивных интерфейсов

Длительность дисциплины: 40 ак.ч.


Аннотация

Целью реализации модуля «UX-WAI. Верстка адаптивных интерфейсов» является изучение технологий верстки сайтов адаптируемого («гибкого») дизайна, а также приобретение практических навыков работы с библиотеками интерактивных компонентов (мобильных меню, галерей, слайдеров и т.д.) и создания интерактивных прототипов веб-страниц для презентации адаптируемого дизайна и основных функциональных возможностей сайта непосредственно в браузере.

Знания и умения, полученные в результате изучения

В результате освоения программы обучающийся должен уметь:
•    создавать структуру веб-страниц «гибкого» дизайна;
•    формировать набор медиазапросов для реализации адаптации;
•    формировать свои и использовать готовые дизайн-системы для верстки блоков веб-страниц;
•    применять компоненты библиотек интерактивных элементов;
•    тестировать и отлаживать веб-страницы адаптируемого дизайна.

В результате освоения программы, обучающийся должен знать:
•    позиционирование элементов 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. Экзамен