Программа дополнительного образования "Web-дизайн"
Пояснительная записка
Дополнительная общеобразовательная общеразвивающая программа «Web-дизайн» составлена с использованием учебно-методической и дополнительной (специальной) литературы по информатике, изобразительному искусству, маркетингу с учетом возрастных особенностей детей.
Программа разработана в 2021 году, в соответствии с Федеральным законом «Об образовании в Российской Федерации» от 29.12.2012 №273 – ФЗ; с приказом Министерства просвещения Российской Федерации от 09.11.2018 № 196 «Об утверждении порядка организации и осуществления образовательной деятельности по дополнительным общеобразовательным программам», санитарными правилами СП 2.3.3648-20 «Санитарно-эпидемиологические требования к организациям воспитания и обучения, отдыха и оздоровления детей и молодёжи», санитарными правилами и нормами СанПиН 1.2.3685-21 «Гигиенические нормативы и требования к обеспечению безопасности и (или) безвредности для человека факторов среды обитания», Уставом и локальными актами Дома детского творчества.
Программа имеет техническая направленность.
Актуальность, педагогическая целесообразность программы.
Интернет-технологии развиваются быстрыми темпами, с каждым днём становится всё больше сайтов. Они имеют дизайн, контент и другие составляющие. За внешнее оформление отвечает дизайнер. Люди, которые создают сайты нуждаются в услугах таких специалистов. Рекламные агентства, веб-студии, биржи фриланса регулярно размещают новые вакансии и задачи для веб-дизайнера. Сайты и социальные сети — визитная карточка компании, инструмент для ведения бизнеса, средство информации, а для некоторых это виртуальный офис. Для этих сервисов требуется визуальное оформление, поэтому на услуги web-дизайнера востребованность растёт, и с каждым днём увеличивается.
Web-дизайнер — это человек-оркестр. Основы маркетинга, аналитики, frontend-разработки, грамотное владение языком и навыки редактуры, а еще хороший вкус, высокая эмпатия и коммуникативность — это только малая часть из необходимых веб-дизайнеру компетенций и знаний, web-дизайнер занимается созданием макетов веб-страниц, в которых должны быть: логическая структура, удобство и функциональность и дизайн.
Приобщение ребенка к применению компьютерных технологий имеет ряд положительных сторон, как в плане развития его личности, так и для последующего изучения школьных предметов и далее в профессиональной подготовке, облегчая дальнейшую социализацию ребенка, вхождение его в информационное общество. Компьютерные технологии в учебном процессе способствуют формированию познавательных и творческих способностей ребенка. Развивающая сторона занятий по приобщению к веб-дизайну направлена на формирование воображения, креативности, структурного подхода и понимания современных трендов. Новизна программы заключается в реализации поливариантного подхода к организации образовательного процесса, использовании системы взаимосвязанных занятий, выстроенных в логической последовательности и направленных на активизацию познавательных и творческих способностей школьников посредством применения разнообразных компьютерных технологий и форм работы, интегрирующих разные виды деятельности на основе единой темы.
Цель: формирование у учащихся навыков проектирования в области web-дизайна.
Задачи:
Обучающие:
- познакомить с основными принципами пропорций, композиции, системного подхода построения сайта;
- познакомить с видами web-сайтов, их функциональными, структурными и технологическими особенностями
- сформировать навыки элементарного проектирования, конструирования, размещения и сопровождения web-сайта;
- познакомить с историей развития и современными приемами сайтостроения;
- сформировать навыки коллективной работы с комплексными web-проектами;
- создать и разместить в сети Интернет собственный web-сайт в соответствии с выбранной темой;
- познакомить с программным обеспечением для работы;
- научить создавать структуру сайта и накладывать на нее дизайн в выбранном стиле.
Развивающие:
- развивать формирование художественного вкуса и творческого мышления;
- развивать интерес к компьютерной графике, дизайну;
- развивать стремление к самообразованию и в дальнейшем успешной личной самореализации
- развивать умение отстаивать свою точку зрения, самостоятельно находить ответы на вопросы путем логических рассуждений;
- развивать словарный запас и навыки общения детей, умение работать над проектом в команде, эффективно распределять обязанности.
Воспитательные:
- организовать занятость школьников во внеурочное время;
- воспитывать умственные и волевые усилия, концентрацию внимания, логичность и развитое воображение;
- воспитывать культуру безопасного труда при работе за компьютером;
- сформировать культуру общения и поведения в коллективе.
Отличительные особенности программы.
Настоящий курс предлагает изучение основ web-дизайна, что включает в себя изучение основ композиции, сочетания цветов и форм, современная типографика, сочетания шрифтов, структура построения сайтов и системный подход к работе, работа в команде над одним проектом и изучение профессионального программного обеспечения в работе. Отличительной особенностью программы является то, что в процессе ее реализации формируются все необходимые навыки для овладения Web-дизайна. Содержание программы способствует формированию у обучающихся творческих способностей, а также развитию компетенций, необходимых в обществе, использующем современные информационные технологии. При построении модели затрагивается множество проблем из разных областей знания:
технология (проектирование): создание структуры сайта и последующее разработка дизайна с учетом созданной структуры. Учитывается целевая аудитория будущих пользователей, их возраст увлечения, пол, с каких устройств будут посещать разрабатываемый сайт. Подготовка цветовой схемы сочетающихся цветов и мудборд. Разработка иерархии экранов и удобство использования, расположение кнопок и текста. Организация мозговых штурмов для поиска новых решений. Обучение принципам совместной работы и обмена идеями;
технология (реализация проекта): разработка дизайн макета сайта с учетом UX дизайна проделанного на этапе проектирования. Создание прототипа работающего сайта посредством сервисов позволяющих, накладывать гиперссылки на макеты сайтов в формате обычного растрового изображения. Использование программного обеспечения для обработки информации;
математика: расчет правильной пропорции кегля, интерлиньяжа, трекинга в зависимости от задачи, поставленной перед текстом и размером области, в которой будет помещен;
развитие речи: общение в устной или в письменной форме с использованием специальных терминов. Использование интервью, чтобы получить информацию и написать рассказ. Написание сценария с диалогами. Описание логической последовательности сайта, создание постановки с главными героями и её оформление визуальными и звуковыми эффектами. Применение мультимедийных технологий для генерирования и презентации идей. Участие в групповой работе.
Возраст детей. Дополнительная общеобразовательная общеразвивающая программа «Web-дизайн» предназначена для обучения школьников в возрасте 14 - 18 лет. Занятия по программе проводятся с группой детей одного возраста с постоянным составом. Учащиеся набираются по желанию. Число учащихся в группе 8 человек.
Сроки реализации программы.
Программа «Web-дизайн» реализуется в течение всего календарного года, включая каникулярное время. Программа рассчитана на 1 год обучения.
Формы проведения учебных занятий – групповые занятия.
Методы организации занятий: объяснение педагога, беседа, рассказ педагога, демонстрация мультимедиа материала, устный опрос, практические занятия в виде игры, проектная деятельность, соревновательные элементы.
Основной формой является комбинированное занятие, включающее в себя: организационный момент, повторение пройденного материала, введение нового материала, подведение итогов. Обучение происходит в виде теоретических и практических занятий.
Режим занятий: 1 раз в неделю по 2 академических часа и переменой 10 минут. Академический час равен 40 минутам.
Ожидаемые результаты и способы определения их результативности.
Результаты освоения дополнительной общеобразовательной общеразвивающей программы «Web-дизайн» включают:
Личностные результаты:
- формирование ответственного отношения к учению, готовности и способности учащихся к саморазвитию и самообразованию;
- развитие самостоятельности, личной ответственности за свои поступки;
- мотивация детей к познанию, творчеству, труду.
Метапредметные результаты:
- формирование умения самостоятельно определять цели своего обучения, ставить и формулировать для себя новые задачи в учёбе и познавательной деятельности;
- формирование умения самостоятельно планировать пути достижения целей, осознанно выбирать наиболее эффективные способы решения учебных и познавательных задач;
- формирование умения понимать причины успеха/неуспеха учебной деятельности;
- овладение основами композиции, структуры сайта, сочетания форм и цвета, понимание типографики, создания рабочих прототипов.
Предполагается, что к концу обучения по данной программе учащиеся:
- будут знать основные создания композиции;
- познакомятся с профессиональными ресурсами для работы и продвижения себя как web-дизайнера;
- будут знать основные профессиональные программы для разработки всех циклов создания сайта;
- будут понимать и различать хороший UX\UI дизайн от плохого;
- освоят сочетания шрифтов;
- научатся искать заказчиков и строить правильный диалог.
Результативность выполнения данной программы определяется с помощью устного опроса, реализации проектов, участия в соревнованиях по web-дизайну и оценивается по трехбалльной системе – «удовлетворительно», «хорошо», «отлично».
Текущий контроль осуществляется в течение обучения в виде устного опроса, наблюдения педагога, проведения внутрикружковых мини-соревнований.
Промежуточная аттестация - осуществляется в конце первого и второго полугодия. Учащимся выставляются оценки в диагностические карты («отлично», «хорошо», «удовлетворительно») по критериям программы.
Итоговая аттестация - выставление учащимся оценок в итоговые ведомости («отлично», «хорошо», «удовлетворительно») по результатам анализа всех промежуточных аттестаций. Итоговой аттестацией завершается процесс образования программе.
Критериями оценки знаний и умений учащихся являются:
- знание тенденций развития web-дизайна;
- знание основных этапов разработки web-проекта;
- знание визуальных компонентов web-дизайна;
- умение отделять объекты от фона;
- умение вписывать объекты в любой фон и комбинировать их;
- умение комбинировать шрифты и правильно их настраивать;
- умение создавать прототипы сайтов по созданным макетам.
Критерий | Условия оценки | ||
Удовлетворительно | Хорошо | Отлично | |
Знание тенденций развития web-дизайна | Имеет минимальные знания, сведения | Частично знает | Знает и может назвать все тенденции развития современного дизайна |
Знание основных этапов разработки web-проекта | Имеет минимальные знания | Знает методы разработки идей, методы взаимодействия пользователей с интерфейсом, как выбрать визуальный стиль, как подобрать референсы и основные инструменты прототипирования | Может рассказать все этапы детализируя четкими названиями сайтов, программ и техническими терминами |
Знание визуальных компонентов web-дизайна | Знает поверхностно о типографике, цвете негативном пространстве, кнопках и универсальных элементах | Уверенно ориентируется в типографике, цвете негативном пространстве, кнопках и универсальных элементах | Уверенно ориентируется в типографике, цвете негативном пространстве, кнопках и универсальных элементах. Может сделать сравнительный анализ колористического решения и типографического оформления |
Умение отделять объекты от фона | Может отделить объект с явными погрешностями | Может отделить объект без видимых погрешностях, с приемлемой контрастностью краев | Может отделить объект без видимых погрешностях, с приемлемой контрастностью краев и дорисовать мелкие элементы (волосы, шерсть и тд.) |
Умение вписывать объекты в любой фон и комбинировать их | Может вырезав объект поместить его на другой фон | Может вырезав объект поместить его на другой фон настраивая изображения под один тон | Создавать коллажи из множества изображений, приводя все изображения к одной композиции |
Умение комбинировать шрифты и правильно их настраивать | Знает отличие шрифта с засечками от шрифта без засечек | Знает и умеет комбинировать 1 шрифт разными начертаниями и размером | Знает и умеет комбинировать 1 или 2 шрифта друг с другом разными начертаниями и размером |
Умение создавать прототипы сайтов по созданным макетам | Знает где можно сделать прототип | Знает ресурсы по созданию прототипов и может создать рабочий прототип без анимаций | Знает ресурсы по созданию прототипов и может создать рабочий прототип с анимациями |
Формы подведения итогов реализации программы. Итоги реализации программы проводятся в форме устного опроса, реализации проектов, внутрикружковых соревнований, интеллектуальной игры, участия в соревнованиях и конференциях.
общий Учебно-тематический план
| ||||
№ | Тема | Количество часов | ||
теория | практика | всего | ||
4 | 2 | 6 | ||
| 1.1. Вводное занятие. Инструктаж по охране труда, противопожарной безопасности | 1 | - | 1 |
| 1.2. Понятие интерактивной среды. Подходы к web-проектированию | 1 | - | 1 |
1.3. Основные тенденции развития современного дизайна | 1 | 1 | 2 | |
1.4. Тренды современного web-дизайна | 1 | 1 | 2 | |
2. | 5 | 7 | 12 | |
| 2.1. Методы разработки идеи web-проекта. Основы дизайн-исследования в области web-дизайна | 1 | 1 | 2 |
2.2. Методы взаимодействия пользователей с интерфейсом | 1 | 1 | 2 | |
2.3. Выбор визуального стиля web-проекта. Референсы и мудборды | 1 | 1 | 2 | |
2.4. Подбор референсов и составление мудборда | - | 2 | 2 | |
2.5. Основные инструменты и методы прототипирования. Модульные сетки | 2 | 2 | 4 | |
3. | 9 | 11 | 20 | |
| 3.1. Web-типографика | 2 | 2 | 4 |
3.2. Визуальная иерархия в web-дизайне | 1 | 1 | 2 | |
3.3. Роль негативного пространства в web-дизайне | 1 | 1 | 2 | |
3.4. Цвет в web-дизайне | 1 | 1 | 2 | |
3.5. Сравнительный анализ колористического решения и типографического оформления сайтов | 1 | 1 | 2 | |
3.6. Кнопки и формы в web-дизайне | 1 | 1 | 2 | |
3.7. Универсальные элементы сайтов | 1 | 1 | 2 | |
| 3.8. Принципы разработки логотипа | 1 | 3 | 4 |
Раздел 4. Web-дизайн как проектная деятельность | 8 | 26 | 34 | |
| 4.1. Системы ведения проектов в web-дизайне | 1 | - | 1 |
4.2. Составление технического задания и проекта | 1 | - | 1 | |
4.3. Landing page как web-проект | 4 | 10 | 14 | |
4.4. Разработка портфолио web-дизайнера | 1 | 1 | 2 | |
4.5. Разработка сайта-портфолио | 1 | 13 | 14 | |
4.6. Презентация себя как при помощи созданного сайта | - | 2 | 2 | |
| Всего: | 26 | 46 | 72 |
Содержание программы
Раздел 1. Тенденции развития web-дизайна, 6 часов.
Теоретическое занятие, 4 часа.
Беседа: Инструктаж по охране труда и противопожарной безопасности. Правила поведения в учреждении. Санитарно-гигиенические нормы. Общее знакомство с программой объединения «Web-дизайн».
Практическое занятие, 2 часа.
Знакомство с основными программами Adobe Photoshop и Figma.
Раздел 2. Основные этапы разработки web-проекта, 12 часов.
Теоретическое занятие, 5 часов.
Рассказ с демонстрацией видеоматериалов, беседа: введение в разработку web-проектов. Структурный поэтапный подход к разработке.
Практическое занятие, 7 часов.
Знакомство со всеми программами и сервисами для полноценной работы.
Раздел 3. Визуальные компоненты web-дизайна, 20 часов.
Теоретическое занятие, 9 часов.
Рассказ, беседа, показ видео материалов: изучение типографики, сочетания цветов, композиции и других элементов сайта. Изучение фрезерного станка и ПО необходимое для работы с ним.
Практические занятия, 11 часов.
Разработка отдельных частей сайта по поставленным задачам. Разработка логотипа и создание физической копии с помощью фрезерного станка.
Раздел 4. Web-дизайн как проектная деятельность, 34 часа.
Теоретическое занятие, 8 часов.
Лекция, объяснения педагога: знакомство с конструкциями жесткими (треугольными), не жесткими (прямоугольные), способами придания жесткости форме, а также с силами, действующими на формы (сжимающие, растягивающие).
Практические занятия, 26 часов.
Разработка одностраничных сайтов на разные темы с применением накопленных знаний и умений. Итоговое задание создание сайта визитки учащегося создание прототипа и презентация себя при помощи разработанного прототипа.
методическое обеспечение программы
Для реализации программы используются разнообразные формы и методы проведения занятий. Это рассказ, беседы, лекции, из которых дети узнают много новой информации; практические задания для закрепления теоретических знаний и реализации собственной творческой мысли.
Занятия сопровождаются использованием наглядного материала. Программно-методическое и информационное обеспечение помогают проводить занятия интересно и грамотно. Разнообразные занятия дают возможность детям проявить свою индивидуальность, самостоятельность, способствуют гармоничному и духовному развитию личности. При организации работы необходимо постараться соединить игру, труд и обучение, что поможет обеспечить единство решения познавательных, практических и игровых задач. Игровые приемы, внутрикружковые соревнования, тематические вопросы также помогают при творческой работе.
Основными принципами в освоении дополнительной общеобразовательной общеразвивающей программы «Web-дизайн» являются: систематичность и последовательность обучения, а также доступность.
Обучение должно быть систематичным и последовательным. Необходимо руководствоваться правилами дидактики: от близкого к далекому, от простого к сложному, от более легкого к более трудному, от известного к неизвестному. Систематичность обучения предполагает такое построение учебного процесса, в ходе которого происходит как бы связывание ранее усвоенного с новым материалом. В процессе обучения происходит знакомство с основной терминологией робототехники, механики, информатики, принципами построения различных конструкций, алгоритмов.
Учёт возрастных различий и особенностей учащихся находит выражение в принципе доступности обучения, которое должно проводиться так, чтобы изучаемый материал по содержанию и объёму был посилен учащимся. Применяемые методы обучения должны соответствовать развитию учащихся, развивать их силы и способности.
В качестве основных программ, на которых будет строится разработка web-интерфейсов, будут использованы Adobe Photoshop и Figma - являются профессиональными инструментами, актуальными, кроссплатформенными и популярными на момент написания данной программы.
Так же будут использованы различные онлайн сервисы для создания мудбордов, вдохновения, прототипов, шрифтов являющиеся бесплатными с полной лицензией для применения в свой работе.
Занятия по программе формируют специальные технические умения, развивают аккуратность, усидчивость, организованность, нацеленность на результат.
Технические средства обучения: компьютеры, интернет.
Курс предполагает использование компьютеров. Важно отметить, что компьютер используется как инструмент позволяющий разработать с нуля любой web-интерфейс как на базе учебного учреждения, так и продолжить работу в домашний условиях. Поэтому возможно включение в программу онлайн занятий без потери эффективности.
Список литературы
Нормативно-правовые акты и другие официальные документы
1.1. Федеральный закон от 29.12.2012 N 273-ФЗ "Об образовании в Российской Федерации" (ред. от 24.03.2021) // Собрание законодательства РФ. - 31.12.2012. - N 53 (ч. 1). - Ст. 7598.
1.2. Приказ Министерства просвещения РФ от 09.11.2018 N 196 "Об утверждении Порядка организации и осуществления образовательной деятельности по дополнительным общеобразовательным программам" // Текст приказа опубликован на «Официальном интернет-портале правовой информации» (www.pravo.gov.ru), 30 ноября 2018 г.
1.3. Санитарные правила СП 2.3.3648-20 «Санитарно-эпидемиологические требования к организациям воспитания и обучения, отдыха и оздоровления детей и молодёжи» // Текст приказа опубликован на «Официальном интернет-портале правовой информации» (www.pravo.gov.ru), 21.12.2020;
1.4. Санитарные правила и нормы СанПиН 1.2.3685-21 «Гигиенические нормативы и требования к обеспечению безопасности и (или) безвредности для человека факторов среды обитания» // Текст приказа опубликован на «Официальном интернет-портале правовой информации» (www.pravo.gov.ru), 03.02.2021;
1.5. Устав МБУДО ДДТ имени академика А.Е. Ферсмана, утвержден приказом Учредителя № 172-2/о от 30.09.2019.
Литература, используемая педагогом в процессе обучения и при составлении программы
Тузовский, А. Ф. Проектирование и разработка web-приложений: учебное пособие. Юрайт, 2018.
А. Н. Лаврентьев [и др.]. Цифровые технологии в дизайне. История, теория, практика: учебник и практикум для вузов. М. : Издательство Юрайт, 2018.
Ситникова, О. В., Татарникова, Л. А., Вьюгов, Д. С. Технологии создания сайтов и основы web-дизайна: Учебное пособие.
Катханова Ю.Ф., Гринберг Г.С. Самоучитель TeachPro. Web-дизайн, 2006 – 560с.
Буйлова Л.П. Как разработать авторскую программу? (рекомендации педагогу дополнительного образования) – М., 1999. – 38с.
Подобед C .О. Проектирование и разработка инновационных программ //Дополнительное образование и воспитание, 2006. – № 7.
Содержание и структура образовательных программ ОУ, рабочих программ педагогов. Методическое пособие/ Е.В. Губанова – Министерство образования Саратовской области; ГОУ ДПО «СарИПКиПРО». – Саратов, 2008. – 84 с.
Литература для учащихся и родителей
Крупнейшая социальная сеть по Photoshop на русскоязычном пространстве. [Электронный ресурс] – Режим доступа: https://photoshop-master.ru/
Курсы по созданию прототипа сайта с нуля, а также по работе в Figma. [Электронный ресурсы]:
https://www.youtube.com/watch?time_continue=201&v=i45cot-R224&feature=emb_logo https://www.youtube.com/channel/UCGG3EyZVhbEqU34HUTEoGKg/playlists
Советы начинающим веб-дизайнерам от крупной онлайн школы Skillbox https://www.youtube.com/watch?v=L3Uu_hKe2mM&feature=emb_logo
9
