Методическая разработка практического занятия «Разработка прототипа дизайна веб-приложения» по междисциплинарному курсу МДК 06.01 Проектирование и разработка интерфейса пользователя

Методическая разработка практического занятия

«Разработка прототипа дизайна веб-приложения»

по междисциплинарному курсу МДК 06.01 Проектирование и разработка интерфейса пользователя

для обучающихся очной формы обучения

по программе подготовки специалистов среднего звена

по специальности 09.02.07 Информационные системы и программирование

Сургут 2024

Методическая разработка практического занятия по междисциплинарному курсу МДК 06.01 Проектирование и разработка интерфейсов пользователя.

Содержание практического занятия соответствует рабочей учебной программе профессионального модуля ПМ.06 Разработка дизайна веб-приложений, разработанной на основе ФГОС СПО по специальности 09.02.07 Информационные системы и комплексы (утверждён приказом Министерства образования и науки Российской Федерации от 09.12.2016 № 1547), с учетом примерной основной образовательной программы, разработанной Федеральным учебно-методическими объединением в системе среднего профессионального образования по укрупненным группам профессий, специальностей 09.00.00 Информатика и вычислительная техника (утверждена протоколом Федерального учебно-методического объединения в системе среднего Профессионального образования по УГПС 09.00.00 от 15 июля 2021 г. № 3).

Форма проведения: практические работы

Организация-разработчик: АУ «Сургутский политехнический колледж»

Тема: «Разработка прототипа дизайна веб-приложения».

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

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

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

Задачи:

Педагогические технологии: информационно-коммуникационные, личностно-ориентированная, практико-ориентированная.

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

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

Оборудование: персональный компьютер, мультимедийный проектор, доска.

Место занятия в рамках междисциплинарного курса: согласно рабочей программе профессионального модуля, на выполнение этой работы отводится 6 академических часов. Данное занятие является вторым в рамках практической работы «Разработка прототипа дизайна веб-приложения». 

На первом занятии студенты актуализируют свои знания о работе на платформе Figma, которая уже изучалась в рамках МДК 03.01 Проектирование и дизайн информационных систем. На втором (данном) занятии они проведут анализ, исследование и сбор шаблона-прототипа (макета). А на третьем занятии завершат работу, создав функционирующий прототип.

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

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

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

ОК 03. Планировать и реализовывать собственное профессиональное и личностное развитие.

ОК 04. Работать в коллективе и команде, эффективно взаимодействовать с коллегами, руководством, клиентами.

ОК 05. Осуществлять устную и письменную коммуникацию на государственном языке с учетом особенностей социального и культурного контекста.

ОК 06. Проявлять гражданско-патриотическую позицию, демонстрировать осознанное поведение на основе традиционных общечеловеческих ценностей.

ОК 07. Содействовать сохранению окружающей среды, ресурсосбережению, эффективно действовать в чрезвычайных ситуациях.

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

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

ПК 6.1. Разрабатывать дизайн-концепции веб-приложений в соответствии с корпоративным стилем заказчика

ПК 6.2. Формировать требования к дизайну веб-приложений на основе анализа предметной области и целевой аудитории.

ПК 6.3. Осуществлять разработку дизайна веб-приложения с учетом современных тенденций в области веб-разработки

Прогнозируемый результат:

Структура занятия:

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

Занятие: 2/3

Время, отведенное на выполнение практической работы: 2 ак.часов.

Описание задания: рамках данного занятия Вам представится возможность разрабатывать макет-прототип главной страницы веб-приложения (landing page), посвящённого 80-летию Победы в Великой Отечественной Войне.

Теоретические сведения: Прототип – это рабочая модель приложения или веб-сайта, которая более полно имитирует взаимодействие с пользователем. Для его создания существует множество программ, позволяющих прототипировать интерфейс. Одной из таких программ является Figma.

Figma – кросс-платформенный онлайн-сервис (figma.com) для разработки интерфейсов и прототипирования с возможностью организации совместной работы в режиме реального времени. Все файлы Figma хранятся не у вас на компьютере, а в облаке.

Преимущества:

- создание макета онлайн в браузере;

- возможность совместной работы над проектами;

- документирование.

Недостатки:

- работает только при наличии интернета;

- в бесплатной версии можно поделиться файлом только с 2 коллегами.

Алгоритм работы:

Ход выполнения работы:

Авторизуйтесь на платформе Figma.

Определите цели и задачи веб-приложения.

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

Опишите общую концепцию дизайна, включая цветовую палитру, типографику и основные элементы интерфейса.

Сформируйте структуру будущего сайта, составив на платформе Figma эскиз. Учтите, что среди обязательных элементов – это наличие георгиевской ленты, а также Орден Победы.

Используя платформу Figma произведите создание макетов основных страниц.

Требования и содержание отчета: итоги практической работы представить в виде текстового документа со снимками экрана разработанного прототипа.

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

Примеры-образцы:

Критерии оценки:

На оценку «Удовлетворительно»: разработка макета-прототипа по примеру и более 9 аспектов оценки.

На оценку «Хорошо»: реализация собственной идеи макета-прототипа и более 9, но менее 14 аспектов оценки.

На оценку «Отлично»: реализация собственной идеи макета-прототипа и более 14 аспектов оценки.

Саморефлексия:

Домашнее задание: вспомнить плагины и функционал Figma для разработки работоспособного прототипа.