Общеобразовательная общеразвивающая программа дополнительного образования «Творческая мастерская 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 |
|