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

Создание визуального дизайна. Figma (UI)

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


Аннотация

Модуль посвящен созданию визуального стиля сайта с помощью программы Figma. При проектировании цифрового продукта необходимо не только понимать законы композиции и колористики, но и освоить правила создания цифрового продукта, включающие компонентный подход к проектированию интерфейса, систему сеток и анимацию для презентации интерфейса заказчику.


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

По окончанию курса слушатели будут иметь уверенные знания в области проектирования пользовательских интерфейсов, а именно:

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

Содержание дисциплины

Тема 1. Figma. Основные инструменты

  • Интерфейс.
  • Панель слоев. Страницы.
  • Фреймы, шейпы, перо.
  • Заливки, градиенты.

Тема 2. Figma. Компоненты интерфейса

  • Векторные контуры, векторные сети.
  • Манипуляция с изображениями.
  • Работа с текстом.
  • Сетки.

Тема 3. Верстка простого прототипа

  • Подключение шрифтов.
  • Компоненты, стили.
  • Экспорт растровых изображений.

Тема 4. Верстка прототипа

  • Адаптивность.
  • Маски.
  • Векторные иллюстрации.
  • Экспорт SVG.

Тема 5. Динамика в макете. Презентация

  • Прототипирование.
  • Последовательность страниц, прокрутка.
  • Анимация элементов.