12+  Свидетельство СМИ ЭЛ № ФС 77 - 70917
Лицензия на образовательную деятельность №0001058
Пользовательское соглашение     Контактная и правовая информация
 
Педагогическое сообщество
УРОК.РФУРОК
 
Материал опубликовала
Пономарева Анна Николаевна335
Россия, Санкт-Петербург, Санкт-Петербург
Материал размещён в группе «Педагоги дополнительного образования»
2

Общеобразовательная общеразвивающая программа дополнительного образования «ТВОРЧЕСКАЯ МАСТЕРСКАЯ FIGMA: ДИЗАЙН ИНТЕРФЕЙСОВ»






Государственное бюджетное профессиональное образовательное учреждение педагогический колледж № 1 им. Н.А. Некрасова Санкт-Петербурга



Принята на заседании педагогического совета От «21» апреля 2022 г. Протокол №3

УТВЕРЖДАЮ

Директор МАОДО ЦДТ «Хибины»

И.И. Иванова

«22» апреля 2022 г.








ДОПОЛНИТЕЛЬНАЯ ОБЩЕРАЗВИВАЮЩАЯ ПРОГРАММА



«ТВОРЧЕСКАЯ МАСТЕРСКАЯ FIGMA: ДИЗАЙН ИНТЕРФЕЙСОВ»


Направленность: техническая Уровень программы: базовый

Возраст обучающихся: 12-15 лет

Срок реализации программы: 6 месяцев (96 часов)




Составитель: педагог дополнительного образования Пономарева Анна Николаевна















г. Санкт-Петербург



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


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

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

Настоящая программа разработана в соответствии с нормативно-правовыми документами:

Федеральный закон от 29 декабря 2012 года № 273-ФЗ «Об образовании в Российской Федерации»;

Распоряжение Правительства Российской Федерации от 31 марта 2022 года

№ 678-р «Концепция развития дополнительного образования детей до 2030 года»;

Приказ Министерства просвещения РФ от 9 ноября 2018 г. N 196 «Об утверждении Порядка организации и осуществления образовательной деятельности по дополнительным общеобразовательным программам»;

Письмо Министерства образования и науки Российской Федерации от 18.11.2015 №09-3242 «О направлении информации» вместе с «Методическими рекомендациями по проектированию дополнительных общеразвивающих программ (включая разноуровневые программы)»;

«Методические рекомендации по разработке разноуровневых программ дополнительного образования ГАОУ ВО «МГПУ» АНО ДПО «Открытое образование»;

Постановление Главного государственного санитарного врача Российской Федерации от 28.09.2020 №28 «Об утверждении санитарных правил СП 2.4.3648-20

«Санитарно-эпидемиологические требования к организациям воспитания и обучения, отдыха и оздоровления детей и молодёжи»;

Постановление Главного государственного санитарного врача Российской Федерации от 28.01.2021 №2 «Об утверждении санитарных правил и норм СанПиН 1.2.3685-21 «Гигиенические нормативы и требования к обеспечению безопасности и (или) безвредности для человека факторов среды обитания»;

Постановление Главного государственного санитарного врача РФ от 22 мая

2020 г. № 15 «Об утверждении санитарно-эпидемиологических правил СП 3.1.3597-20

«Профилактика новой коронавирусной инфекции (COVID-19)»;

Положение о структуре, порядке разработки и утверждения дополнительных общеразвивающих образовательных программ МАОДО «ЦДТ «Хибины» г. Кировска.

специальной литературы по данным направлениям деятельности (см. список литературы).

Направленность программы техническая.

Уровень программы – базовый

Тип программы: дополнительная общеразвивающая

Актуальность программы

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

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

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

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

Программа ориентирована на изучение профессиональной графической компьютерной программы Figma и рассчитана на детей среднего и старшего школьного возраста. Данная программа поможет детям освоить азы компьютерного художественного мастерства, расширить горизонты мировоззрения.

Педагогическая целесообразность данной программы заключается в возможности долговременного влияния на формирование личности ребенка, предоставление ему широких возможностей для самовыражения средствами компьютерной графики. Профессиональной компьютерной графикой, как правило, занимаются дети старшего школьного возраста, студенты, взрослые, и большинство обучающих программ по этой теме рассчитаны на старшеклассников. Но сейчас в творческие объединения информатики приходят дети среднего школьного возраста с достаточной базовой подготовкой и запросом «научиться рисовать на компьютере». Возникла необходимость адаптировать сложный материал к данному возрасту.

Адресат программы. Программа адресована подросткам от 12 до 15 лет. Программа будет интересна и полезна тем, кто проявляет интерес в области графического дизайна и современных компьютерных технологий.

Объем программы 96 часов.

Срок освоения программы: 6 месяцев.

Предусматривается возможность завершения занятий на любой ступени и добор на любой уровень на основе входящей аттестации.

Режим занятий: 4 часа в неделю (2 раза в неделю по 2 академических часа с перерывом между занятиями 10 минут).

Формы организации образовательного процесса:

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

Занятия состоят из теоретической и практической частей, причём большее количество времени занимает практическая часть.

При проведении занятий традиционно используются три формы работы:

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

фронтальная, когда обучающиеся синхронно работают под управлением педагога;

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

Технологии и формы обучения:

теоретические занятия;

практические занятия;

свободное творчество.

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

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

Учебные занятия предусматривают особое внимание соблюдению учащимися правил безопасности труда, противопожарных мероприятий, выполнению экологических требований.

Программа ориентирована на большой объем практических работ с использованием ПК (оснащёнными графическими редакторами) по всем изучаемым разделам и предназначена для обучения обучающихся в учреждениях дополнительного образования, оснащенных кабинетом вычислительной техники.

Методы организации образовательного процесса:

словесные: объяснение, рассказ, чтение, опрос, инструктаж, эвристическая беседа, дискуссия, консультация, диалог;

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

практические: практическая работа, самостоятельная работа, творческая работа

(творческие задания, работа с эмулятором), опыты;

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

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

метод оценки: анализ, самооценка, взаимооценка, взаимоконтроль;

метод информационно-коммуникативный поддержки: работа со специальной литературой, интернет ресурсами;

метод компьютерного моделирования;

проектный метод.

ЦЕЛЬ И ЗАДАЧИ ПРОГРАММЫ

Цель программы:

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

Задачи программы:

Личностные:

сформировать потребность личности в непрерывном самосовершенствовании и самообучении;

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

воспитать навыки социальной коммуникации, эмпатию – умение услышать потребности другого, а также – умение объяснить ход своих мыслей и отстоять свою точку зрения;

способствовать формированию эстетического вкуса;

способствовать дальнейшему профессиональному самоопределению;

содействовать в организации полезного досуга и дополнительного образования.

Метапредметные:

развивать творческие способности учащихся;

развивать эстетический и художественный вкус ребенка;

активизировать познавательную, творческую деятельность и художественную инициативу учащихся;

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

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

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

обучить учащихся основам веб-дизайна;

познакомить с основами композиции, цветоведения, типографикой и версткой;

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

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

научить организации и планированию труда веб-дизайнера;

сформировать начальные представления о проектировании;

научить выражать свои мысли, обосновывать свои идеи и защищать свои проекты;

сформировать навыки анализа дизайн-проектов.


СОДЕРЖАНИЕ ПРОГРАММЫ УЧЕБНЫЙ ПЛАН




Название разделов и тем

Количество часов

Формы

аттестации и контроля

Всего

Теория

Практика

Раздел 1. Знакомство с графическим редактором Figma


1

Вводное занятие. Инструктаж по ТБ.

Презентация и знакомство с

содержанием программы. «Дизайнер сайтов. Кто он?».


2


1


1


Беседа,

анкетирование


2

Интерфейс программы Figma.

Основные инструменты и горячие

клавиши. Правила сохранения работ в разных форматах.


2


1


1

Опрос, наблюдение

3

Что такое плагины и как с ними взаимодействовать.

2

1

1

Опрос, наблюдение

4

Композиция. Теория близости. Правило внутреннего и внешнего.

2

1

1

Опрос, наблюдение

5

Создание трекера привычек

дизайнера на основе примера.

4

2

2

Опрос, наблюдение

6

Правила работы с изображениями. Иллюстрации и фотографии.

2

1

1

Опрос, наблюдение

7

Что такое авторское право?

2

1

1

Опрос, наблюдение

8

Типографика. Работа со шрифтами.

4

1

1

Опрос, наблюдение

9

Колористика в дизайне.

4

2

2

Опрос, наблюдение


10

Создание инструкции по работе с популярными направлениями

дизайна.


4


2


2

Опрос, наблюдение

Раздел 2. Дизайн сайта в Figma

11

Вдохновение. Как работать с референсами?

2

1

1

Опрос, наблюдение

12

Типы сайтов

2

1

1

Опрос, наблюдение

13

Навигация и оптимизация структуры сайта

2

1

1

Опрос, наблюдение

14

Создание прототипа сайта.

6

2

4

Опрос, наблюдение

15

Кнопки. Что такое UI/UX дизайн.

2

1

1

Опрос, наблюдение

16

Создание сайта. Наполнение.

6

2

4

Опрос, наблюдение

17

Анимация в Figma.

4

1

2

Опрос, наблюдение


18

Как грамотно преподнести информацию на сайте. Виды информации и сокращения.


2


1


1

Опрос, наблюдение

19

Подготовка сайта к переносу в конструктор.

4

2

2

Опрос, наблюдение

20

Реализация сайта: как заставить сайт работать?

2

1

1

Опрос, наблюдение

Раздел 3. Верстка сайта в онлайн конструкторах

21

Создание сайта в конструкторе

Google Сайты.

2

1

1

Опрос, наблюдение

22

Настройка дизайна сайта.

4

2

2

Опрос, наблюдение

23

Добавление текста и изображений на сайт.

6

3

3

Опрос, наблюдение

24

Экспорт макета и добавление основной страницы сайта.

6

2

4

Опрос, наблюдение

25

Разбор основных ошибок и проблем при переносе сайта в конструктор.

2

1

1

Опрос, наблюдение

26

Создание лендинга по заданию: от дизайна до верстки в конструкторе.

10

1

9

Опрос, наблюдение

27

Индивидуальный макет. Правила оформления работы в портфолио.

2

1

1

Опрос, наблюдение

28

Финальный просмотр работ

2

1

1

Итоговое занятие

Итого часов:

96

40

56



СОДЕРЖАНИЕ УЧЕБНОГО ПЛАНА

Раздел 1. Знакомство с графическим редактором Figma

Тема 1. Вводное занятие. Инструктаж по ТБ. Презентация и знакомство с содержанием программы. Вводный и первичный инструктаж по условиям и охране труда по программам вводного и первичного инструктажа.

Теория: Презентация «Дизайнер сайтов. Кто он?». Знакомство с понятием

«дизайн». Чем дизайнер отличается от художника?

Практическая работа: Организация рабочего места дизайнера. Работа с файлами и папками на компьютере. Создание личной рабочей папки, сохранение и размещение первых досок настроения на рабочем столе.

Тема 2. Теория: Интерфейс программы Figma. Основные инструменты и горячие клавиши. Правила сохранения работ в разных форматах. Основные инструменты: Move, Frame, Rectangle, Pen, Text.

Практическая работа: Изучение горячих клавиш посредствам апробации инструментов, работа с раздаточным материалом (памятки). Сохранение изображений из графического редактора в рабочую папку разными способами.

Тема 3. Теория: Что такое плагины и как с ними взаимодействовать. Разбор основных полезных плагинов для работы в программе. Знакомство с Community.

Практическая работа: Составление библиотеки плагинов из Community и файлов с материалами в открытом доступе для тренировки ориентации в программе. Создание и настройка рабочего пространства в графическом редакторе.

Тема 4. Теория: Композиция. Теория близости. Правило внутреннего и внешнего. Разбор правил систематизации пространства на примерах композиционных решений популярных авторов.

Практическая работа: Выстраивание элементов в макете с примером. Размещение элементов в файле практической работы, согласно правилам композиции.

Тема 5. Теория: Закрепление материала прошлых занятий. Опрос по теории.

Практическая работа: Создание трекера привычек дизайнера на основе примера. Работа с инструментами: Move, Frame, Rectangle, Text. Работа с плагином: Blobs. Знакомство с использованием инструмента Auto Layout.

Тема 6. Теория: Правила работы с изображениями. Иллюстрации и фотографии. Разбор форматов изображений и их интеграции в проект. Плагин Unsplash. Знакомство с векторными иллюстрациями.

Практическая работа: Отработка моторики работы с инструментом Pen на онлайн тренажере Bezier.method . Создание простой иллюстрации с помощью инструмента Pen.

Тема 7. Теория: Что такое авторское право? Теория о возникновении авторского права и на что оно распространяется. Разбор разных стоковых источников. Что можно использовать в дизайне. Разбор права на использование иллюстраций, фотографий, шрифтов. Памятки с ссылками на бесплатные источники материалов.

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

Тема 8. Теория: Типографика. Разбор видов шрифтов. Как подобрать шрифт для проекта. Иерархия текста: заголовки, подзаголовки, основной текст.

Практическая работа: Самостоятельная редакция представленного текста в файле практики (подбор шрифта, его размера и иерархии расположения на странице). Работа в онлайн-тренажере «Type method» - тренировка глазомера.

Тема 9. Теория: Колористика в дизайне. Теория цвета. Эффекты наложения слоев в

Figma.

Практическая работа: Подбор изображений для проекта на заданную тему с

соблюдением цветовой гаммы. Изменение цвета элементов изображения с помощью

графического редактора. Тренировка навыка работы с цветом на онлайн-тренажере

« Kolor.moro »

Тема 10. Создание инструкции по работе с популярными направлениями дизайна.

Теория: Тренды в дизайне в 2023 году.

Практическая работа: Составление мини-сборника трендов актуальных на 2023

год. Создание плашек под текст с голографическим эффектом и эффектом стекла.

Раздел 2. Дизайн сайта в Figma

Тема 11. Теория: Вдохновение. Как работать с референсами? Что такое референсы и мудборды, умные ресурсы для поиска вдохновения.

Практическая работа: Составление мудборда на сервисе Pinterest.

Тема 12. Теория: Типы сайтов. Для чего нужны сайты.

Практическая работа: Создание папки на сервисе Pinterest и подбор примеров сайтов согласно типологии. Подготовка технического задания для разработки своего дизайна сайта для учебного проекта.

Тема 13. Теория: Навигация и оптимизация структуры сайта. Адаптация контента под требования поисковиков, подбор ключевых слов и техническая оптимизация. Разбор примеров на основе поисковых систем.

Практическая работа: Создание системы ключевых слов в текстовом редакторе

Microsoft Word для поиска примеров сайтов для учебного проекта.

Тема 14. Создание прототипа сайта.

Теория: Как настроить направляющие линии в проекте? Размеры проектов. Как правильно определить необходимое соотношение сторон блоков сайта.

Практическая работа: Создание прототипа сайта без использования элементов наполнения (фотографии, иллюстрации и др.). Выставление направляющих линий, составление основных блоков.

Тема 15. Теория: Кнопки. Что такое UI/UX дизайн. Советы по созданию, типы и состояния кнопок.

Практическая работа: Создание кнопок в прототипе учебного проекта.

Тема 16. Создание сайта. Наполнение.

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

Тема 17. Теория: Анимация в Figma. Инструменты работы с анимацией в прототипе. Способ создания анимации: от простого к сложному на примере кнопки.

Практическая работа: Анимирование кнопок в прототипе сайта.

Тема 18. Теория: Как грамотно преподнести информацию на сайте. Виды информации и сокращения.

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

Тема 19. Подготовка сайта к переносу в конструктор.

Теория: Как подготовить сайт к переносу в конструктор?

Практическая работа: Проверка сайта на опечатки, выравнивание элементов сайта по направляющим.

Тема 20. Теория: Реализация сайта: как заставить сайт работать? Виды конструкторов. Разбор онлайн платформ для создания сайта. Бесплатный конструктор Google Сайты.

Практическая работа: Апробация инструментов конструктора Google Сайты.

Создание главной страницы.

Раздел 3. Верстка сайта в онлайн конструкторах

Тема 21. Создание сайта в конструкторе Google Сайты.

Теория: Знакомство с конструктором. Разбор шаблонов и базовых настроек основных страниц.

Практическая работа: Перенос первого блока учебного проекта в конструктор.

Тема 22. Настройка дизайна сайта.

Теория: Знакомство с уникальным конструктором блоков. Основные инструменты.

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

Тема 23. Практическая работа: Добавление текста и изображений на сайт.

Выравнивание настроек обтекания текстом изображений, контроль работы гиперссылок.

Теория: Как работать с гиперссылками?

Тема 24. Экспорт макета и добавление основной страницы сайта.

Теория: Способы изменения готового макета, финальное название сайта и способы его редактирования или скрытия.

Практическая работа: Завершение переноса прототипа сайта. Настройка сайта под воспроизведение на разных устройствах.

Тема 25. Разбор основных ошибок и проблем при переносе сайта в конструктор.

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

Практическая работа: Работа над ошибками. Поиск созданного сайта в поисковике.

Тема 26. Практическая работа: Создание лендинга по заданию от дизайна до верстки в конструкторе. Сбор мудборда, выбор темы, создание прототипа, наполнение сайта, реализация сайта в конструкторе.

Тема 27. Индивидуальный макет.

Теория: Правила оформления работы в портфолио. Разбор ведущих площадок для размещения портфолио.

Практическая работа: Оформление проекта в портфолио.

Тема 28. Финальный просмотр работ. Анализ и защита проектов.


ПЛАНИРУЕМЫЕ РЕЗУЛЬТАТЫ

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

осознавать мотивы образовательной деятельности, определять её цели и задачи;

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

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

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

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

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


Личностные результаты:


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

умение создавать и поддерживать индивидуальную информационную среду, обеспечивать защиту значимой информации и личную информационную безопасность,

развитие чувства личной ответственности за качество окружающей информационной среды;

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

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

повышение своего образовательного уровня и уровня готовности к продолжению обучения с использованием ИКТ.


Метапредметные результаты:

планирование деятельности: определение последовательности промежуточных целей с учётом конечного результата, составление плана и последовательности действий;

прогнозирование результата деятельности и его характеристики;

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

коррекция деятельности: внесение необходимых дополнений и корректив в план действий;

умение выбирать источники информации, необходимые для решения задачи (средства массовой информации, электронные базы данных, информационнотелекоммуникационные системы, Интернет, словари, справочники, энциклопедии и др.);

умение выбирать средства ИКТ для решения задач из разных сфер человеческой деятельности.

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

осознавать мотивы образовательной деятельности, определять её цели и задачи;

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

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

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

ориентироваться в правах и обязанностях как члена коллектива.

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

Теоретические компетенции:

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

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

научатся работать над проектом в команде, эффективно распределять обязанности.

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

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

ориентироваться пределах программы) в содержании теоретических понятий;

знать основные приемы работы с различными программными продуктами.

Технологические компетенции:

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

выполнять различные проекты;

проводить качественное техническое обслуживание оборудования и ПО;

определять перечень необходимого оборудования (материалов и инструментов);

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


Обучающиеся будут знать:

виды шрифтов;

основы веб-дизайна правила композиции и цветоведения;

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

основы авторского права;

Уметь:

работать в программе Figma;

разрабатывать прототипы сайтов;

работать с информацией (поиск, отбор, размещение);

работать с изображениями и файлами разного формата;

соблюдать технику безопасности при работе с компьютером;

выполнять доступные технологические приёмы при изготовлении изделий.


КАЛЕНДАРНЫЙ УЧЕБНЫЙ ГРАФИК


Количество учебных часов на 2022-2023 учебный год: 96 часов.

Занятия по программе проводятся с декабря по 31 мая 2022-2023 учебного года, включая каникулярное время, кроме зимних каникул (праздничные дни) и дополнительных каникул в связи с неблагоприятной эпидемиологической обстановкой.

Календарный учебный график – Приложение 1.


УСЛОВИЯ РЕАЛИЗАЦИИ ПРОГРАММЫ


Прием осуществляется по заявлению о зачислении от родителя или законного представителя, а также при активированном сертификате ПФДО.

Занятия проводятся по группам. Состав группы от 12 до 15 обучающихся.


Информационное сопровождение:


Вся информация о ходе реализации программы, о проведённых мероприятиях, экскурсиях будет опубликована в официальной группе «Юные дизайнеры» в социальной сети

«ВКонтакте»: ССЫЛКА.


Материально-технические:


Для полноценной реализации программы необходимо:

интерактивная доска;

столы ученические;

стол письменный;

шкафы;

стулья;

флешки;

локальная сеть;

доступ в сеть интернет;

проектор;

экран;

принтер;


Программное обеспечение:


операционная система Windows;

интернет-браузер Chrome;

аккаунт в службе Gmail;

онлайн-редактор Figma;


Материалы, приспособления, инструменты:

бумага А4;

шаблоны;

флешкарты;


Методические и дидактическое обеспечение:

методические разработки;

учебная, методическая, дополнительная, специальная литература;

–материалы: тестовые задания, графические рисунки, технологические схемы, модели – схемы, образцы моделей, устройств;

фото-каталоги творческих работ, фотоальбомы, иллюстрации;

раздаточный материал (инструкции).


ФОРМА АТТЕСТАЦИИ


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

Промежуточная аттестация предусматривает самостоятельную презентацию и защиту проекта.

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

Критерии оценки знаний и умений

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


Критериями оценки результативности обучения также являются:


критерии оценки уровня теоретической подготовки обучающихся:

соответствие уровня теоретических знаний программным требованиям;

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

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

критерии оценки уровня практической подготовки обучающихся:

соответствие уровня развития практических умений и навыков программным требования;

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

критерии оценки уровня развития обучающихся детей: культура организации практической деятельности: культура поведения; творческое отношение к выполнению практического задания; аккуратность и ответственность при работе; развитость специальных способностей.


ОЦЕНОЧНЫЕ МАТЕРИАЛЫ


Входящая аттестация Тестирование

При какой разрешающей способности монитора, качество изображения будет хуже? А) 1024*768

Б) 1280*1024

В) 800*600

Какие виды изображений существуют?

А) векторные и растровые

Б) цифровые и матричные

В) кристаллические и лазерные

Точечный элемент изображения на экране монитора называется …

А) растром Б) пикселем В) символом

Что такое файл?

А) Файл — специальная программа, которая обеспечивает управление и обмен информацией между устройствами

Б) Файл - это определенное количество информации (программа или данные), имеющие имя и хранящиеся в долговременной памяти

В) Файл -это базовая составляющая программного обеспечения. Кто даёт собственное имя файлу?

А) Пользователь

Б) Программа

В) Операционная система

С помощью чего осуществляется поиск информации в интернете?

А) Браузер Б) Программа В) Проводник

Цвет пикселя монитора формируется из следующих базовых цветов:

А) красного, зеленого, синего Б) желтого, красного, синего В) всех цветов радуги

Укажите устройство для подключения компьютера к сети:

А) модем Б) мышь В) сканер

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

А) Жирный шрифт

Б) Курсив

В) Подчеркивание

При просмотре веб-сайтов и общении через Интернет:

А) вы оставляете электронные следы («цифровые отпечатки»), по которым можно определить, какие страницы Вы просматривали и какой IP-адрес компьютера Вы использовали

Б) вы оставляете электронные следы, которые можно удалить самому В) никто не может проследить, какие веб-страницы Вы просматривали


Критерии оценивания знаний учащихся баллах)

Верно отвечено на 1-2 вопросов

0 (низший балл)

Верно отвечено на 3-4 вопросов

1 (проходной балл)

Верно отвечено на 5-7 вопросов

2 (средний балл)

Верно отвечено на 8-10 вопросов

3 (высший балл)


Промежуточная аттестация


Задание: Создать свой дизайн трекера привычек на выбранную тему на 2 недели. Трекер должен содержать:

декоративные элементы по усмотрению ученика (Например, фигуры Blobs,

коллажи, иллюстрации и др.)

текстовую информацию. Текстовые блоки должны быть размещены логично.

таблицу учета прогресса на 14 дней. Инструменты: Figma.

Критерии оценивания работ (0 низший балл; 1 средний балл; 2 высший балл).


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

Обучающийся не использовал фигуры или изображения в работе

0


Обучающийся скопировал фигуры с предыдущей работы

1


Обучающийся выбрал несколько разных

декоративных элементов и объединил их в единую композицию.

2

Текст

Текст не использовался в работе или был размещен хаотично по листу.

0


Текст размещен логично, но было использовано более 3х разных шрифтов, размеров и начертаний.

1


Текст размещен логично, использовано не более одной шрифтовой пары, размер и начертание

шрифта соответствуют заголовку, подзаголовку и основному тексту.

2

Цвет

Не использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет), цвета не считаются друг с другом и выбраны случайным образом без учета правил гармонии цвета.

0


Использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет), но

размещена по листу без учета правил визуального

1


восприятия



Использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет) и размещена про листу согласно иерархии

визуального восприятия, акцентный цвет не перетягивает на себя все внимание.

2

Таблица учета прогресса для трекера

Таблица состоит из разных фигур акцентного цвета и не соответствует количеству дней в задании.

0


Таблица состоит из разных фигур неакцентного цвета и соответствует требуемому количеству

дней.

1


Таблица состоит из одинаковых фигур неакцентного цвета, составлена на требуемое количество дней.

2


Итоговая аттестация:


Задание:

Разработать дизайн сайта по представленному техническому заданию. Проект должен включать:

прототип (логичное размещение кнопок и контента)

наполнение (визуальные материалы и текст)

использование фирменного цвета, представленного в тз. Инструменты: Figma.


Критерии оценивания работ (0 низший балл; 1 средний балл; 2 высший балл).


Прототип

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

0


Прототип завершен, однако элементы прототипа не соответствуют направляющим линям и не выровнены относительно друг друга

1


Прототип завершен с учетом всех требований

2

Наполнение

Изображения и текст не соответствуют указанной теме задания.

0


Один из элементов сайта (изображения или текст) не соответствует указанной теме задания.

1


Все элементы наполнения соответствуют теме задания и размещены согласно прототипу.

2

Цвет

Не использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет), цвета не

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

0


Использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет), но

размещена по листу без учета правил визуального восприятия

1


Использована палитра цветов (основной цвет, дополнительный цвет, акцентный цвет) и размещена про листу согласно иерархии

визуального восприятия, акцентный цвет не

2



перетягивает на себя все внимание.



2.5 МЕТОДИЧЕСКИЕ МАТЕРИАЛЫ


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

Формы организации обучения – индивидуальная и групповая.

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

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

Учебное занятие организовано по двухчастному принципу: теория и практика. Теоретические части занятия опираются на следующие методы обучения: словесный (лекция), наглядно-иллюстративный (презентация). На практической части используются проблемно-творческий подход (когда педагог ставит задачу и вместе с учащимися ищет способы ее выполнения), мастер-класс (объяснение, демонстрация приемов преподавателем и их воспроизведение группой учащихся).


Организация учебного занятия:


Обучение по программе «Дизайн сайтов в Figma» на протяжении года поделено на тематические блоки, каждый раздел посвящен отдельным видам знаний в области веб- дизайна.

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

теоретическая часть (лекция и презентация);

мастер-класс (демонстрация приемов работы преподавателем и воспроизведение их учащимися);

самостоятельная работа учащегося над индивидуальным проектом;

рефлексия, обсуждение итогов самостоятельной работы;

вопросы и ответы по теме занятия, консультирование по возникшим проблемам


Перечень дидактического материала:

Основные законы композиции


СПИСОК ЛИТЕРАТУРЫ


Петроченков А., Новиков Е. Идеальный Landing Page. Создаем продающие веб-страницы. — СПб.: Питер, 2017. — 320 c.

Триггс Т. Школа искусств. 40 уроков для юных художников и дизайнеров /

Т. Триггс, Д. Фрост. — М.: Манн, Иванов и Фербер, 2018. — 320 c.

Чихольд Я. Новая типографика.Руководство для современного дизайнера /

Я. Чихольд. — М.: Издательство Студии Артемия Лебедева, 2018. — 248 c.

Норман Д. Дизайн привычных вещей. М.: ЛитРес, 2019. 350 с.

Монтейро, Майк Дизайн это работа / Майк Монтейро. - М.: Манн, Иванов и Фербер, 2019. - 127 c.

Дунаев, В. В. Основы Web-дизайна. Самоучитель / В.В. Дунаев. - М.: БХВ- Петербург, 2019. - 480 c.

Тодд, Заки Варфел Прототипирование. Практическое руководство / Тодд Заки Варфел. - М.: Манн, Иванов и Фербер, 2019. - 535 c.

Калиновский, Андрей Ваша домашняя страничка в Интернете. Homepage, или Просто "хомяк" / Андрей Калиновский. - М.: БХВ-Петербург, 2018. - 224 c.


Список литературы для педагогов:

Алексеев А.. Введение в Web-дизайн. Учебное пособие. М.: ДМК Пресс, 2019. — 184 c.

Джонс, Дон Создание Web-сайтов на бесплатном движке PHP-NUKE / Дон Джонс. - Москва: Мир, 2018. - 304 c.

Книга веб-программиста. Секреты профессиональной разработки веб-сайтов

/ Б. Хоган и др. - Москва: Огни, 2021. - 288 c.

Макгилливрей, Кэрол Использование 3D-технологий при создании WEB-

сайтов / Кэрол Макгилливрей , Энтони Хед. - М.: НТ Пресс, 2020. - 336 c.

Патрик, Макнейл Веб-дизайн. Книга идей веб-разработчика / Макнейл Патрик. - М.: Питер, 2022. - 773 c.

Список онлайн-тренажеров:


The Bezier Game. URL: https://bezier.method.ac (тренировка работы с кривыми

Безье)

Kern Type a letter spacing game. URL: https://type.method.ac (тренировка

глазомера на расстояние между буквами)

Tothepoint. I shot the serif but I did not shoot the sans-serif.

URL: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif (игра на распознание шрифтов с засечками)

Typewar. URL: https://typewar.com (игра на идентификацию названия шрифтов)

Pixact.ly. URL: https://pixact.ly (тренировка глазомера на размер фигур)

Kolor. URL: https://kolor.moro.es (тренировка глазомера на выбор цветов)

A color matching game. URL: https://color.method.ac (тренировка подбора оттенков цветов на глаз)

Can’t unsee. URL: https://cantunsee.space (тренировка глазомера на иерархию элементов в дизайне)



Приложение 1 – Календарный учебный график программы «Дизайн сайтов в Figma»


N п/п

Месяц Число

Форма занятия

Кол-во часов

Тема занятия

Место проведения

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

1


Декабрь

Групповая

2

Вводное занятие «Дизайнер сайтов. Кто он?»

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

2

Групповая

2

Интерфейс программы Figma.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

3

Групповая

2

Что такое плагины и как с ними взаимодействовать.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

4

Групповая

2

Композиция. Теория близости. Правило внутреннего и внешенго.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

5

Групповая

2

Создание трекера привычек

дизайнера на основе примера.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

6

Групповая

2

Знакомство с инструментом Auto Layout.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

7

Групповая

2

Правила работы с изображениями. Иллюстрации и фотографии.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

8

Групповая

2

Создание постера на основе фотоколлажа.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

9


Январь

Групповая

2

Типографика. Работа со шрифтами.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

10

Групповая

2

Работа в онлайн-тренажере «Type method».

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

11

Групповая

2

Колористика в дизайне.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

12

Групповая

2

Работа в онлайн-тренажере онлайн- тренажере «Kolor.moro».

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


13


Групповая


2

Создание инструкции по работе с популярными направлениями

дизайна.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

14

Групповая

2

Составление мини-сборника трендов на 2023 год.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос




N п/п

Месяц Число

Форма занятия

Кол-во часов

Тема занятия

Место проведения

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

15


Февраль

Групповая

2

Вдохновение. Как работать с референсами?

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

16

Групповая

2

Типы сайтов.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

17


Март

Групповая

2

Навигация и оптимизация структуры сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

18

Групповая

2

Создание прототипа сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

19

Групповая

2

Настройка направляющих линий.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

20

Групповая

2

Расстановка положения элементов наполнения сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

21

Групповая

2

Кнопки. Что такое UI/UX дизайн.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


22


Групповая


2

Создание сайта. Наполнение. Поиск референсов и написание технического задания.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

23

Групповая

2

Работа со стоками, отбор материалов для проекта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


24


Групповая


2

Создание коллажей, иконок, кнопок для наполнения сайта.

Расставка материалов в прототипе.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

25


Апрель

Групповая

2

Анимация в Figma.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

26

Групповая

2

Создание простой анимации.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


27


Групповая


2

Применение анимации на сайте. Отбор и анимация элементов прототипа.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

28

Групповая

2

Как грамотно преподнести информацию на сайте. Виды

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос




N п/п

Месяц Число

Форма занятия

Кол-во часов

Тема занятия

Место проведения

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





информации и сокращения.




29


Групповая


2

Подготовка сайта к переносу в конструктор. Выравнивание элементов.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


30


Групповая


2

Сохранение и перенос элементов из прототипа в рабочие папки,

структурирование материалов.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

31

Групповая

2

Реализация сайта: как заставить сайт работать?

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

32

Групповая

2

Создание сайта в конструкторе

Google Сайты.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

33


Май

Групповая

2

Настройка дизайна сайта. Основные инструменты.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

34

Групповая

2

Разбор и применение меню

«Дополнительная настройка».

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

35

Групповая

2

Добавление текста и изображений на сайт.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

36

Групповая

2

Добавление текста и изображений на сайт.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

37

Групповая

2

Добавление текста и изображений на сайт.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

38

Групповая

2

Экспорт макета и добавление основной страницы сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

39

Групповая

2

Экспорт макета и добавление основной страницы сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

40

Групповая

2

Экспорт макета и добавление основной страницы сайта.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос


41


Групповая


2

Разбор основных ошибок и проблем при переносе сайта в конструктор.


КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

42

Групповая

2

Создание лендинга по заданию: от

КЮТ, каб. 5

Наблюдение, контроль




N п/п

Месяц Число

Форма занятия

Кол-во часов

Тема занятия

Место проведения

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





дизайна до верстки в конструкторе.


выполнения заданий, опрос

43

Групповая

2

Создание лендинга по заданию: от дизайна до верстки в конструкторе.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

44

Групповая

2

Создание лендинга по заданию: от дизайна до верстки в конструкторе.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

45

Групповая

2

Создание лендинга по заданию: от дизайна до верстки в конструкторе.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

46

Групповая

2

Создание лендинга по заданию: от дизайна до верстки в конструкторе.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

47

Групповая

2

Индивидуальный макет. Правила оформления работы в портфолио.

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

48


Групповая

2

Финальный просмотр работ

КЮТ, каб. 5

Наблюдение, контроль выполнения заданий, опрос

Итого

96



Опубликовано в группе «Педагоги дополнительного образования»


Комментарии (0)

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