Методическая разработка учебного занятия по теме: «Разработка адаптивного компонента интерфейса: проектирование карточки товара»

Автор: Чистякова Наталья Александровна

Организация: ГБПОО ЛНР «ЛКИТП»

Населенный пункт: г.Луганск

ПОЯСНИТЕЛЬНАЯ ЗАПИСКА

Учебное занятие по теме «Разработка адаптивного компонента интерфейса: проектирование карточки товара» ориентировано на студентов по профессии 09.01.03 Оператор информационных систем и ресурсов в рамках изучения МДК 02.01 Создание визуального дизайна элементов графического пользовательского интерфейса программы профессионального модуля ПМ.02 Подготовка интерфейсной графики.

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

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

На каждом этапе занятия предусмотрена чёткая смена видов деятельности, что обеспечивает высокий темп урока и динамику познавательной активности. Чередование фронтального инструктажа и индивидуального проектирования способствует развитию у студентов самостоятельности и профессиональной ответственности за конечный цифровой продукт. Практико-ориентированный подход реализуется через создание реального рыночного объекта — карточки товара.

Соотношение деятельности «преподаватель — студент» направлено на реализацию принципов наставничества и личностно-ориентированного подхода. Использование диалоговых форм, оперативная обратная связь и организация самостоятельной творческой деятельности позволяют формировать у студентов навыки, необходимые для работы в сфере дизайна и администрирования информационных систем.

Разработанная методика способствует развитию аналитического и визуального мышления, формированию профессиональных (ПК 2.1, ПК 2.2) и общих (ОК 01, ОК 02, ОК 04, ОК 09) компетенций, предусмотренных ФГОС СПО. Данная методическая разработка может быть использована преподавателями при проведении практических работ, а также в рамках подготовки к чемпионату «Профессионалы».

 

Тема занятия: «Разработка адаптивного компонента интерфейса: проектирование карточки товара»

Профессия: 09.01.03 Оператор информационных систем и ресурсов

Направленность: Оператор интерфейсной графики.

Профессиональный модуль: ПМ.02 Подготовка интерфейсной графики

Дисциплина (МДК): МДК.02.01 Создание визуального дизайна элементов графического пользовательского интерфейса

Цель занятия:

образовательная:

познакомиться с инструментарием и интерфейсом графического редактора AliveColors, спроектировать адаптивные компоненты (карточки товара) с соблюдением технических требований;

развивающая:

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

развивать визуальное мышление и навыки композиционного построения элементов UI;

формировать навыки самостоятельной работы с профессиональным графическим ПО;

способствовать развитию творческого подхода к решению практических задач;

развивать логическое мышление, внимание, память;

совершенствовать коммуникативные навыки и навыки работы в группах;

воспитательная:

воспитывать чувство ответственности за качество создаваемого цифрового продукта и соблюдение дедлайнов;

создать условия для воспитания творческого отношения к выбранной профессии;

формировать эстетический вкус.

Тип занятия: урок формирования умений и навыков.

Вид занятия: практическая работа.

Методы обучения:

словесные: слово педагога, беседа, объяснение, постановка проблемных вопросов;

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

практические: работа в группах, решение кроссвордов, практическая работа студентов.

Формы организации учебной деятельности: фронтальная, групповая, индивидуальная.

Средства обучения: ПК с установленным графическим редактором AliveColors, графические мониторы, интерактивная панель, презентация, техническое задание, кроссворды.

Формируемые общие компетенции:

ОК 01. Выбирать способы решения задач профессиональной деятельности применительно к различным контекстам;

ОК 02. Использовать современные средства поиска, анализа и интерпретации информации, и информационные технологии для выполнения задач профессиональной деятельности;

ОК 04. Эффективно взаимодействовать и работать в коллективе и команде;

ОК 09. Пользоваться профессиональной документацией на государственном и иностранном языках.

Формируемые профессиональные компетенции:

ПК 2.1. Создавать визуальный дизайн элементов графического пользовательского интерфейса.

ПК 2.2. Подготавливать графические материалы для включения в графический пользовательский интерфейс.

Междисциплинарные связи: информатика, ОП.01 Основы информационных технологий.

Литература:

1. Графический дизайн. Современные концепции: учебное пособие для СПО / Е. Э. Павловская [и др.]; ответственный редактор Е. Э. Павловская. — 2-е изд., перераб. и доп. — Москва: Издательство Юрайт, 2023. — 119 с. — (СПО). — ISBN 978-5-534-11169-9. — Текст: электронный // Образовательная платформа Юрайт [сайт]. — URL: https://urait.ru/bcode/515527.
2. Компьютерная графика: учебное пособие для СПО / Д.В. Горденко [и др.]. — Саратов: Профобразование, 2022. — 90 c. — ISBN 978-5-4488-1538-6. — Текст: электронный // IPR SMART: [сайт]. — URL: https://www.iprbookshop.ru/122431.html

Содержание и структура занятия

№п/п	Этап занятия	Методы и приемы	Деятельность преподавателя	Деятельность студентов
1	Организационный этап (1 минута)	Слово преподавателя	Приветствует студентов, настраивает на плодотворную работу	Слушают
2	Формулировка темы и цели занятия. Мотивация учебной деятельности (3 минут)	Слово преподавателя, постановка проблемных вопросов, беседа, демонстрация презентации	Подводит к теме занятия, формулирует цель, мотивирует студентов	Слушают, отвечают на вопросы
3	Актуализация опорных знаний (5 минут)	Решение кроссвордов, работа в группах	Дает задание и проверяет правильность его выполнения	Работают в группах - решают кроссворд, презентуют решение
4	Ознакомление с практическим заданием и инструктаж по его выполнению (8 минут)	Демонстрация трудовых приемов и операций, объяснение, слово преподавателя, наблюдение	Объясняет и демонстрирует порядок выполнения практического задания	Наблюдают, слушают, запоминают, задают вопросы
5	Выполнение практического задания (20 минуты)	Самостоятельная работа, работа с техническим заданием	Контролирует и корректирует работу студентов, оказывает помощь	Самостоятельно выполняют техническое задание
6	Подведение итогов. Рефлексия (7 минуты)	Слово преподавателя, беседа	Комментирует работы студентов, указывает на типичные ошибки, задает вопросы, выставляет баллы и переводит их в оценки, проводит рефлексию	Отвечают на вопросы, слушают, подсчитывают баллы, осуществляют обратную связь с помощью эмодзи
7	Домашнее задание (1 минута)	Слово преподавателя, объяснение	Подводит итог занятия, знакомит с домашним заданием	Слушают, по необходимости задают вопросы

ХОД УРОКА

1. Организационный этап (1 мин.)

Преподаватель: представляется, приветствует студентов, настраивает на плодотворную работу.

 

1. Формулировка темы и цели занятия. Мотивация учебной деятельности (3 мин.)

Преподаватель: сегодня наше занятие превращается в профессиональную дизайн-студию. Нам предстоит работа над реальным визуальным компонентом, который ежедневно видят миллионы пользователей.

Преподаватель: ребята, посмотрите пожалуйста на экран. Как вы думаете, что перед вами?

Студенты: отвечают на вопрос

Преподаватель: совершенно, верно, перед вами два предложения одного и того же товара. Какая из этих карточек заставляет нажать кнопку "Купить", а какая — вызывает желание закрыть вкладку? Почему?

Студенты: рассуждают, отвечают на вопросы.

Преподаватель: Верно. Дизайн интерфейса — это не просто красота, это инструмент продаж. Ведь чем привлекательнее и информативнее интерфейс, тем более шансов продать товар.

Сегодня тема нашего мастер-класса: «Разработка адаптивного компонента интерфейса: проектирование карточки товара».

Цель занятия: познакомиться с инструментарием и интерфейсом графического редактора AliveColors. Спроектировать адаптивные компоненты (карточки товара) с соблюдением технических требований.

Преподаватель: ребята, кто-то из вас уже работал в графическом редакторе? Если да, то в каком?

Студенты: отвечают на вопрос, перечисляют известные им графические редакторы.

 

1. Актуализация опорных знаний (5 мин.)

Прежде чем приступим к проектированию давайте вспомним (ознакомимся) с профессиональным «алфавитом»». Вы уже объединены в две группы. Перед вами профессиональный кроссворд. Ваша задача-решить кроссворд за 2 минуты. Потом капитан выходит к доске и вписывает ответы.

Внимание на экран.

Студенты в группах решают кроссворд, потом капитаны выходят к доске и по очереди вписывают ответы, преподаватель читает вопросы и проверяет правильность заполнения.

КОМАНДА №1 КОМАНДА №2

П а Л С л о й а и с т т Т р П и п е т к а к н ь

Г Т И з о б р а ж е н и е а к д с К и с т ь т е Н о ж н и ц ы т

По горизонтали По вертикали 3. «Прозрачный лист» в цифровом холсте, позволяющий редактировать детали независимо друг от друга. (Слой) 5. Инструмент для точного определения и заимствования цвета с любого участка рисунка. (Пипетка) 1. Специальное окно или панель, где собраны все доступные цвета и оттенки. (Палитра) 2. Инструмент для удаления лишних частей изображения или очистки области. (Ластик) 4. Эффект, создающий иллюзию объема и освещенности объекта. (Тень)

По горизонтали По вертикали 3. Готовый графический файл или фотография, помещенные в рабочую область редактора. (Изображение) 4. Основной инструмент для рисования свободными линиями, имитирующий мазок художника. (Кисть) 5. Инструмент для разрезания контуров, фигур или разделения объектов на части. (Ножницы) 1. Плавный переход от одного цвета к другому или от цвета к прозрачности. (Градиент) 2. Инструмент для добавления надписей, заголовков и буквенных символов на холст. (Текст)

 

1. Ознакомление с практическим заданием и инструктаж по его выполнению (8 минут)

Преподаватель: теоретический материал мы вспомнили, давайте перейдём к практической части занятия.

Обратите внимание, мы с вами будем работать на графических мониторах. Взаимодействовать с монитором мы будем стилусом, а также мышью.

Во время работы нам необходимо соблюдать правила техники безопасности.

Преподаватель вместе со студентами повторяют основные правила охраны труда и техники безопасности.

Ответы студентов:

• Соблюдать расстояние до монитора (не менее 50 см).
• Следить за осанкой.
• Соблюдать «профессиональную гигиену» файла: каждый слой должен иметь понятное имя.

Преподаватель: от магазина-электроники «ТехУзел» нашей студии поступило ТЗ: «РАЗРАБОТАТЬ КАРТОЧКУ ТОВАРА ДЛЯ ИНТЕРНЕТ-МАГАЗИНА С СУВЕНИРНОЙ ПРОДУКЦИЕЙ».

Обязательные требования: на карточке обязательно должен быть:

• Изображение сувенирной продукции;
• Слоган «БУДЬ НА СВЯЗИ С МИРОМ»;
• Логотип;
• Наименование товара.

Преподаватель: смотрим на экран, сейчас я продемонстрирую вам как создается карточка товара на примере сим-карты от магазина-электроники «ТехУзел».

Преподаватель демонстрирует и объясняет приемы выполнения задания, студенты наблюдают, запоминают.

Преподаватель: скажите есть ли у вас вопросы после демонстрации? Что было не понятно?

Студенты отвечают.

 

V. Выполнение практического задания (20 минут)

Преподаватель: теперь переходим к самостоятельному выполнению практического задания. У каждого из вас на столах есть ТЗ с пошаговой инструкцией. У вас есть 20 минут — это реальный "дедлайн" в дизайн-студии. Используйте предоставленные шаблоны, но адаптируйте их: подберите цветовую гамму под логотип бренда и выстройте композицию. Я рядом, если возникнут технические сложности.

 

При оценивании будет учитываться:

№ п/п	Критерии оценки	Макс. балл	Балл
1	Соблюдение требований заказчика.	2
2	Соблюдение корпоративных цветов	2
3	Грамотность	2
4	Креативность	2
5	Соблюдение ОТ и ТБ	2
Итого:		10
Оценка:

 

Шкала перевода баллов в оценку:

• 9 – 10 баллов: Оценка «5» (Отлично). Студент полностью освоил технологию, макет готов к передаче заказчику/верстальщику.
• 7 – 8 баллов: Оценка «4» (Хорошо). Задание выполнено, но допущены незначительные неточности в именовании слоев или выравнивании.
• 5 – 6 баллов: Оценка «3» (Удовлетворительно). Карточка создана, но нарушена технологическая цепочка (например, нарушены пропорции товара).
• Менее 5 баллов: Оценка «2» (Неудовлетворительно). Задание не выполнено или выполнено с грубыми нарушениями ТЗ.

 

1. Подведение итогов. Рефлексия. (7 минуты)

Преподаватель: Стоп! Время вышло. Посмотрите на свои работы. Удалось ли вам достичь эталона, о котором мы говорили в начале? Какая операция заняла больше всего времени?

Студенты: отвечают.

Проходит оценивание выставление баллов, преподаватель комментирует работы студентов, указывает на типичные ошибки.

Преподаватель: сегодня вы подтвердили освоение профессиональных компетенций. Вы создали не просто картинку, а функциональный элемент интерфейса. Предлагаю вам оценить наш мастер-класс с помощью эмодзи.

Действия студентов: рефлексия при использовании эмодзи.

 

VII. Домашнее задание (1 минута)

Преподаватель: Ваше домашнее задание размещено на доске, переходя по QR-коду вы его можете увидеть у себя на смартфонах. Вам нужно будет создать альтернативную карточку товара для зоомагазина «Ушки на макушке» Спасибо за продуктивную работу! Приводим рабочие места в порядок.

Действия студентов: сканируют задание, завершают работу ПО, выключают ПК.

Приложение

ТЕХНИЧЕСКОЕ ЗАДАНИЕ ДЛЯ СТУДЕНТА

Тема: «Разработка адаптивного компонента интерфейса: проектирование карточки товара».

Заказчик: магазин электроники «ТехУзел».

Объект разработки: Графический компонент (карточка товара) для раздела «Сувенирная продукция».

Обязательные элементы:

• Изображение сувенирной продукции;

• Слоган «БУДЬ НА СВЯЗИ С МИРОМ»;

• Логотип;

• Наименование товара.

 

ИНСТРУКЦИЯ ПО ВЫПОЛНЕНИЮ:

Шаг 1. Подготовка рабочего пространства

1. Откройте рабочую папку «МАСТЕР-КЛАСС»;
2. Запустите AliveColors и откройте базовый файл-шаблон: Интерфейс.ak.

Шаг 2. Работа с интеллектуальными слоями

1. На панели «Слои» найдите группу, помеченную цветом: «1. Выберите фон». Из предложенных вариантов включите видимость того слоя, который вам больше нравится.
2. Импортируйте изображение товара и логотип: Файл -> Открыть... (или перетащите файлы из папки «ТехУзел» в рабочую область).
3. Разместите объект (например, ручка.png) в макете.

 

Важно: при масштабировании (Инструмент «Трансформация» Ctrl+T) удерживайте клавишу Shift, чтобы сохранять пропорции объекта!

 

Шаг 3. Работа с типографикой и данными

1. Выберите инструмент «Текст» (горячая клавиша T).
2. Отредактируйте текстовые блоки в соответствии с ТЗ:

Название: Сувенирная продукция «______».

Цена: установите актуальную стоимость (например, 5000 ₽).

1. Соблюдайте иерархию: Цена должна быть самым крупным и визуально заметным элементом в текстовой группе.

Шаг 4. Финализация и визуальный баланс

1. Проверьте выравнивание всех элементов относительно друг друга.
2. Для достижения гармонии используйте Корректирующие слои:

Создайте корректирующий слой «Цветовой тон/Насыщенность», чтобы подогнать оттенок фона под цвет товара.

1. Убедитесь, что логотип и слоган читабельны и не перекрывают основной объект.

Шаг 5. Технический экспорт и сдача работы

1. Наведите порядок: удалите неиспользованные пустые слои. Сгруппируйте все созданные элементы в папку с названием «Готово».
2. Сохранение проекта: Выберите Файл -> Сохранить как... и сохраните рабочую версию в формате. ak (Имя файла: Фамилия_Карточка.ak).
3. Экспорт для демонстрации:

• Выберите Файл -> Экспортировать...
• Выберите формат PNG.
• Назовите файл Фамилия_Результат.png и сохраните в свою рабочую папку.

 

 

ЧЕК-ЛИСТ ДЛЯ САМОПРОВЕРКИ (ПЕРЕД СДАЧЕЙ):

Перед сохранением финальной версии пройдите по пунктам:

 

[ ] Пропорции: Изображение товара вписано в карточку без искажений (объект не выглядит растянутым или сплюснутым).

[ ] Композиция и сетка: Цена и название выровнены. Текст имеет «воздух» и не прилипает к границам карточки или изображения.

[ ] Гигиена слоев: Все слои на панели «Слои» имеют логичные названия. Группы свернуты, лишний «мусор» (пустые слои) удален.

[ ] Цветовой баланс: Цвет фона и графических элементов гармонирует с цветовой гаммой самого товара.

[ ] Качество экспорта: Итоговый файл PNG сохранен без артефактов, фон соответствует выбранному дизайну (или является прозрачным, если того требует задача).

 

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