Перейти к содержимому
Лекции

Курс: Компьютерная графика и дизайн

Целевая аудитория

Студенты без опыта профессионального дизайна. Базовое владение компьютером; знакомство с мобильными приложениями как пользователь.

Платформа

Figma (браузер / десктоп-приложение, бесплатный план). Акцент на мобильном интерфейсном дизайне. Apple/Adobe-специфичные инструменты не требуются.

Цель курса

Научить проектировать мобильные интерфейсы в Figma: от основ работы с фреймами и стилями до построения дизайн-системы и адаптивных интерактивных прототипов.

Структура курса (3 раздела)

Каждому разделу соответствует одна лекция и одна практика.

Раздел 1. Основы интерфейсного дизайна в Figma

Лекция: lecture_01.md · Практика: practice_01.md

  • Интерфейс Figma, холст, инструменты; бесплатность и кроссплатформенность.
  • Фрейм (Frame) vs группа (Group); типы фреймов.
  • Layout Grid (Columns/Rows/Grid) для мобильных макетов.
  • Мобильный фрейм iPhone 13 (375×812), плотность пикселей, Safe Area.
  • Цветовые и текстовые стили; принципы типографики.
  • Компонент vs экземпляр; знакомство с Variants.
  • Auto Layout — основы (направление, padding, gap, выравнивание).
  • Прототипирование: переходы, типы анимаций, Smart Animate.
  • Форматы экспорта (PNG/JPG/SVG/PDF), разрешения 1x/2x/3x; плагины.

Охват экзамена: вопросы 1–15.

Раздел 2. Компоненты и дизайн-системы

Лекция: lecture_02.md · Практика: practice_02.md

  • Что такое дизайн-система и из чего состоит.
  • Дизайн-токены; передача дизайна разработчикам.
  • Типы цветов; семантические цвета.
  • Типографическая шкала; Elevation и тени.
  • Базовые (Base) vs композитные (Composite) компоненты.
  • Кнопка с вариантами (Primary/Secondary/Ghost); состояния Input.
  • Переиспользуемость и организация библиотеки компонентов.
  • Auto Layout для адаптивных компонентов; Spacing Scale.
  • Карточка товара как компонент; сборка дизайн-системы с нуля.

Охват экзамена: вопросы 16–30, бонусные 54–55.

Раздел 3. Адаптивный дизайн и прототипирование

Лекция: lecture_03.md · Практика: practice_03.md

  • Адаптивный дизайн и принципы; Mobile First.
  • Breakpoints; изменение сетки mobile → desktop; Header в разных версиях.
  • Touch Targets; приоритет контента; адаптивная сетка товаров.
  • Адаптивные компоненты; Constraints; Padding vs Gap.
  • Микроанимации; интерактивные состояния кнопки (Hover/Pressed/Disabled).
  • Триггеры; Smart Animate / Slide / Instant; интерактивные компоненты.
  • Мобильное меню с анимацией; тестирование на устройствах.
  • Параметры анимации (Duration, Easing); командная работа и коллаборация.

Охват экзамена: вопросы 31–50, бонусные 51–52.

Материалы курса

ФайлНазначение
lecture_01.md–lecture_03.mdКонспекты лекций по разделам
practice_01.md–practice_03.mdПрактические работы по разделам
exam_questions.mdВопросы к экзамену (без ответов)
private_exam_answers.mdВопросы с развёрнутыми ответами
private_exam_tasks.mdПрактические задания с разбором
private_exam_tickets.mdЭкзаменационные билеты с разбивкой

Форма контроля

Экзамен: билет из двух теоретических вопросов и одного практического задания в Figma (см. private_exam_tickets.md).