ГАПОУ ТСПК

Открытый урок: 20.06.2020 "Изучение веб-дизайна. Знакомство с интерфейсом программы Figma" Федеральный проект "Содействие занятости" Национального проекта "Демография"

Цель урока
Познакомить участников с основами веб-дизайна и интерфейсом программы Figma, чтобы они смогли начать самостоятельное создание простых макетов интерфейсов и осознать возможности применения этих навыков для трудоустройства в IT-сфере.

Задачи урока
1. Когнитивные задачи:
- Определить основные понятия веб-дизайна (UI/UX, интерфейс, макет, фрейм).
- Объяснить роль Figma в проектировании цифровых продуктов.

2. Практико-ориентированные задачи:
- Освоить базовые элементы интерфейса Figma (колонку слоев, панель инструментов, рабочую область).
- Научиться создавать фреймы, редактировать фигуры, добавлять текстовые блоки и кнопки.
- Выполнить практическое задание: разработать простой макет страницы (например, лендинга или карточки продукта).

3. Рефлексивные задачи:
- Оценить свои возможности в области веб-дизайна и определить дальнейшие цели обучения.
- Связать полученные навыки с возможностями трудоустройства (например, создание портфолио для подачи на вакансии).

Введение
Уважаемые участники!
Сегодня мы начинаем путь в мир веб-дизайна, который становится все более востребованным в условиях цифровой трансформации экономики. В рамках федерального проекта "Содействие занятости" вы получите навыки, которые помогут вам стать конкурентоспособными на рынке труда. На этом уроке мы познакомимся с основами веб-дизайна и научимся работать с программой Figma — инструментом, который используют профессионалы для создания интерфейсов сайтов и мобильных приложений.

1. Веб-дизайн: что это и почему он важен?
Что такое веб-дизайн?
Веб-дизайн — это профессия, которая объединяет творчество и технические знания. Специалисты в этой области создают пользовательские интерфейсы (UI) и визуальные решения для сайтов, приложений, лендингов и других цифровых продуктов. Их задача — сделать продукт удобным, привлекательным и функциональным.

Зачем этому учиться?
- Востребованность: Рынок IT-услуг растет, и компании активно ищут дизайнеров. Средняя зарплата веб-дизайнера в России превышает 60 000 рублей.
- Вариативность: Работа может быть удаленной, фрилансом или в команде.
- Гибкость: Навыки веб-дизайна полезны даже для тех, кто хочет запустить собственный проект.

2. Figma: облачный инструмент для дизайна
Что такое Figma?
Figma — это современная облачная платформа для создания интерфейсов. Её преимущества:
- Коллаборация: Редактирование макетов в реальном времени с командой.
- Бесплатность: Базовая версия доступна для обучения.
- Интеграция: Соединяет дизайн и разработку (работает с программистами через Figma API).

Интерфейс Figma: основные элементы
1. Колонка слоев: Здесь хранятся все элементы макета (текст, изображения, кнопки).
2. Панель инструментов: Загрузка шрифтов, выбор инструментов (линии, прямоугольники, кисти).
3. Рабочая область: Место для создания и редактирования макета.
4. Фреймы: Контейнеры для разных страниц или секций сайта.
5. Библиотеки: Хранение повторяющихся элементов (например, кнопок или иконок).

Практическое задание (пример):
- Создайте фрейм размером 1280×720 пикселей.
- Добавьте прямоугольник с градиентом в качестве фона.
- Вставьте текстовый блок с заголовком и кнопку "Узнать больше".

3. Как веб-дизайн помогает трудоустройству?
Возможные направления карьеры:
- Дизайнер UI/UX.
- Фрилансер (работа с креативными заказами).
- Менеджер по продукту (создание прототипов).

Где можно применить навыки?
- IT-компании.
- Стартапы.
- Рекламные агентства.
- Бизнесы, которые развивают онлайн-присутствие.

Заключение
На этом уроке вы познакомились с основами веб-дизайна и интерфейсом Figma. Эти знания — первый шаг к созданию своих проектов и трудоустройству в IT-сфере.

Что делать дальше?
- Практикуйтесь! Сделайте простой макет страницы (например, портфолио или landing page).
- Изучите дополнительные ресурсы:
- Официальный сайт Figma (figma.com).
- YouTube-каналы "Figma для начинающих".
- Курсы на платформе Coursera или Udemy.