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

Создание мобильных и веб-интерфейсов в FigmaНовый курс!

C 8 класса | 26 занятий | Очно

Длительность курса: 26 занятий по 4 ак. часа и выполнение домашних заданий

О чём курс

Дизайн — не просто рисование или создание иллюстраций, он развивает креативность, визуальную логику и системное мышление. Веб-дизайн помогает объединить текст, графику и интерактивность в единое целое — сайт, которым с которым удобно и интересно взаимодействовать.

Figma — популярная веб-платформа для дизайнеров интерфейсов и графики. С её помощью можно разрабатывать прототипы веб-интерфейсов, а также делать визуально привлекательные презентации.

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

Выполняя задания, вы получите навыки, необходимые для воплощения собственных идей в жизнь.

Курс будет полезен для тех ребят, которые хотят принять участие в «Национальной технологической олимпиаде» по профилю «Разработка мобильных приложений» (https://ntcontest.ru/tracks/nto-school/proekt-sozdaniya-virtualnykh-mirov/mobile-apps-dev/).

Чему научим

В результате обучения учащиеся получат знания и навыки в следующих областях:

  • Основные законы композиции в применении к интерактивной среде.
  • Цветовые модели, применение цвета на веб-странице.
  • Основы проектирования пользовательских интерфейсов (UI).
  • Организация взаимодействия пользователя с сайтом (UX).
  • Разработка логической структуры сайта и системы навигации.
  • Создание макета сайта адаптируемого дизайна (для разных типов устройств)
  • Подготовка служебной и иллюстративной графики для веб-страниц.
  • Разработка гида по стилю.
  • Создание макетов мобильных приложений.

Занятие 1

Что такое UX/UI

  • UX vs UI.
  • Понятие веб-интерфейса.
  • Обзор интерфейса Figma.
  • Свойства объектов.

Занятие 2

  • Основы визуального дизайна
  • Цвет, контраст, композиция.
  • Типографика.
  • Шрифты.
  • Стили в Figma.

Занятие 3

Изображения

  • Веб-графика.
  • Растровые и векторные объекты.
  • Применение избражений на веб-странице: иллюстрация, фоновое изображение и т.п.
  • Маски.

Занятие 4

Компоненты и варианты компонентов

  • Текстовые html-элементы на веб-странице
  • Стили в Figma.
  • Компоненты и варианты.

Занятие 5

AutoLayout

  • Понятие AutoLayout.
  • Кнопки: виды, юзабилити, состояния.
  • Модульные сетки.

Занятие 6

Figma как векторный редактор

  • Перо
  • Создание векторных изображений.
  • Пользовательские формы.

Занятие 7

Веб-формы

  • Элементы веб-форм.
  • Юзабилити форм

Занятие 8

Интерактивные элементы

  • Способы показа контента на странице.

Занятие 9

UX-проектирование

  • Пользователь и его задачи.
  • Сценарий действий пользователя.
  • Структура сайта.

Занятие 10

Прототипирование

  • Структура сайта.
  • Типичные шаблонные блоки.

Занятие 11

Дизайн лендинга

  • Визуальный стиль.
  • UI-kit.
  • Подбор изображений.
  • Текстовый контент.

Занятие 12

Адаптивный дизайн

  • Адаптивный веб-дизайн.
  • Контрольные точки

Занятие 13

Экспорт файлов для верстки

  • Выбор объектов для сохранения.
  • Параметры.

Занятие 14

Инфографика

  • Визуальные элементы.
  • Типы визуальных элементов.
  • Применение.

Занятие 15

Мобильный дизайн

  • Особенности мобильного UX.
  • Разбор популярных приложений.
  • Вводные данные  по проекту.

Занятие 16

  • Путь пользователя (User Flow).
  • Проектирование сценария действия пользователей.

Занятие 17

Карта сайта мобильного приложения

  • Структура приложения.

Занятие 18

Карта сайта мобильного приложения

  • Функциональных возможности экранов

Занятие 19

Дизайн-системы мобильных приложений

  • Обзор дизайн-систем.
  • Гайдлайны.

Занятие 20

Мобильная навигация

  • Навигация в мобильном приложении.
  • Виды,особенности UI.

Занятие 21

UI-кит приложения

  • Типовой  UI-кит мобильного приложения.

Занятие 22-23

Высокоточные прототипы

  • Уточнение прототипов экранов.

Занятие 24

Интерактивный прототип мобильного приложения

  • Переходы, анимация.
  • Юзабилити-тестирование.

Занятие 25

Подготовка проекта

  • Структура выступления-презентации проекта.
  • Подготовка слайдов.

Занятие 26

Защита проекта

Стоимость

56 400 ₽

Социальные скидки для многодетных и других категорий семей.
Скидки по акциям.
Оплата материнским капиталом.
Можно оформить налоговый вычет по расходам на обучение - 13%.

Как поступить

Для тех, кто ещё не учится в АИШ:

  • Вступительное тестирование

Для уже обучающихся в АИШ:

  • Базовый курс:
    • «Компьютер-друг»
    • «Основы компьютерной грамотности»
Тест № АИШ-001 Основы компьютерной грамотности

Тест на владение практическими навыками работы в ОС MS Windows:

  • Проходной балл:
    • Для курсов Информатика, Начала алгоритмизации и программирования на C#, Начала алгоритмизации и программирования на языке Python и Основы HTML и CSS - 50 баллов
    • Для всех остальных - 40 баллов
  • Длительность: 60 минут
  • Количество попыток: 2

Необходимы знания и навыки для успешного прохождения тестирования:

  • Понятия файла
  • Понятие папки
  • Расширение файлов
  • Работа с файловой системой: копирование, удаление, перемещение, поиск, создание файлов и папок
  • Горячие клавиши
  • Работа с оконными приложениями
  • Работа с мышкой
  • Устройство и принцип работы компьютера
  • Операционная система: что это такое, цели и задачи

Как записаться на занятия

Если ребёнок уже обучается

Оставьте заявку в Личном кабинете

Если ребёнок ещё не обучается

заполните форму

среда 23.09.2026 - 28.04.2027 онлайн 18:00 - 21:30

Группа
102.41.01
Свободных мест: 9
Аудитория
№211
ул. Обручевых, д.1, вход с ул. Гидротехников
пятница 25.09.2026 - 23.04.2027 онлайн 18:00 - 21:30

Группа
102.41.02
Свободных мест: 11
Аудитория
№211
ул. Обручевых, д.1, вход с ул. Гидротехников

Академия информатики для школьников в цифрах

21 год

успешной работы
в Политехническом университете Петра Великого

11

направлений обучения

83

учебные программы

2 800

школьников
проходят обучение
ежегодно

151

выпускник АИШ
в 2025 году поступил
в Политехнический университет

3

учебные площадки

40

компьютерных классов