ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Дополнительная общеобразовательная общеразвивающая программа «Web-дизайн»
(дистанционная) составлена с использованием учебно-методической и дополнительной
(специальной) литературы по информатике, изобразительному искусству, маркетингу с учетом
возрастных особенностей детей.
Программа разработана в 2021 году, отредактирована в 2025 году в соответствии с:
- Федеральный закон «Об образовании в Российской Федерации» от 29.12.2012 №
273–ФЗ;
- Распоряжение Правительства Российской Федерации от 31.03.2022 №678-р
«Концепция развития дополнительного образования детей до 2030 года»;
- Приказ Министерства просвещения Российской Федерации от 27.07.2022 № 629
«Об утверждении Порядка организации и осуществления образовательной деятельности
по дополнительным общеобразовательным программам»;
- Письмо Министерства образования и науки Российской Федерации от 18.11.2015
№09-3242 «О направлении информации» вместе с «Методическими рекомендациями по
проектированию
дополнительных
общеобразовательных
программ
(включая
разноуровневые программы)»;
- Приказ Министерства науки и высшего образования Российской Федерации
№882, Министерства просвещения Российской Федерации № 391 от 05.08.2020 «Об
организации и осуществлении образовательной деятельности при сетевой форме
реализации образовательных программ»;
- Письмо Министерства Просвещения Российской Федерации от 31.01.2022 № ДГ245/06 «О направлении методических рекомендаций» вместе с «Методическими
рекомендациями по реализации дополнительных общеобразовательных программ с
применением электронного обучения и дистанционных образовательных технологий»;
- Постановление Главного государственного санитарного врача Российской
Федерации от 28.09.2020 №28 «Об утверждении санитарных правил СП 2.4.3648-20
«Санитарно-эпидемиологические требования к организациям воспитания и обучения,
отдыха и оздоровления детей и молодёжи»;
- Постановление Главного государственного санитарного врача Российской
Федерации от 28.01.2021 №2 «Об утверждении санитарных правил и норм СанПиН
1.2.3685-21 «Гигиенические нормативы и требования к обеспечению безопасности и (или)
безвредности для человека факторов среды обитания»;
- Приказ Министерства труда и социальной защиты Российской Федерации от
22.09.2021 № 652н "Об утверждении профессионального стандарта "Педагог
дополнительного образования детей и взрослых";
- Устав и локальные акты Дома детского творчества имени академика А.Е.
Ферсмана.

2

Программа имеет техническую направленность.
Уровень реализации программы – стартовый.
Актуальность, педагогическая целесообразность программы.
Интернет-технологии развиваются быстрыми темпами, с каждым днём становится всё
больше сайтов. Они имеют дизайн, контент и другие составляющие. За внешнее оформление
отвечает дизайнер. Люди, которые создают сайты нуждаются в услугах таких специалистов.
Рекламные агентства, веб-студии, биржи фриланса регулярно размещают новые вакансии и
задачи для веб-дизайнера. Сайты и социальные сети — визитная карточка компании,
инструмент для ведения бизнеса, средство информации, а для некоторых это виртуальный
офис. Для этих сервисов требуется визуальное оформление, поэтому на услуги web-дизайнера
востребованность растёт, и с каждым днём увеличивается.
Web-дизайнер — это человек-оркестр. Основы маркетинга, аналитики, frontendразработки, грамотное владение языком и навыки редактуры, а еще хороший вкус, высокая
эмпатия и коммуникативность — это только малая часть из необходимых веб-дизайнеру
компетенций и знаний, web-дизайнер занимается созданием макетов веб-страниц, в которых
должны быть: логическая структура, удобство и функциональность и дизайн.
Приобщение ребенка к применению компьютерных технологий имеет ряд
положительных сторон, как в плане развития его личности, так и для последующего изучения
школьных предметов и далее в профессиональной подготовке, облегчая дальнейшую
социализацию ребенка, вхождение его в информационное общество. Компьютерные
технологии в учебном процессе способствуют формированию познавательных и творческих
способностей ребенка. Развивающая сторона занятий по приобщению к веб-дизайну направлена
на формирование воображения, креативности, структурного подхода и понимания современных
трендов. Новизна программы заключается в реализации поливариантного подхода к
организации образовательного процесса, использовании системы взаимосвязанных занятий,
выстроенных в логической последовательности и направленных на активизацию
познавательных и творческих способностей школьников посредством применения
разнообразных компьютерных технологий и форм работы, интегрирующих разные виды
деятельности на основе единой темы.
Цель: формирование у учащихся навыков проектирования в области web-дизайна.

3

Задачи:
Обучающие:
- познакомить с основными принципами пропорций, композиции, системного подхода
построения сайта;
- познакомить с видами web-сайтов, их функциональными, структурными и
технологическими особенностями
- сформировать навыки элементарного проектирования, конструирования, размещения и
сопровождения web-сайта;
- познакомить с историей развития и современными приемами сайтостроения;
- сформировать навыки коллективной работы с комплексными web-проектами;
- создать и разместить в сети Интернет собственный web-сайт в соответствии с выбранной
темой;
- познакомить с программным обеспечением для работы;
- научить создавать структуру сайта и накладывать на нее дизайн в выбранном стиле.
Развивающие:
- развивать формирование художественного вкуса и творческого мышления;
- развивать интерес к компьютерной графике, дизайну;
- развивать стремление к самообразованию и в дальнейшем успешной личной
самореализации
- развивать умение отстаивать свою точку зрения, самостоятельно находить ответы на
вопросы путем логических рассуждений;
- развивать словарный запас и навыки общения детей, умение работать над проектом в
команде, эффективно распределять обязанности.
Воспитательные:
- организовать занятость школьников во внеурочное время;
- воспитывать умственные и волевые усилия, концентрацию внимания, логичность и
развитое воображение;
- воспитывать культуру безопасного труда при работе за компьютером;
- сформировать культуру общения и поведения в коллективе.
Отличительные особенности программы.
Настоящий курс предлагает изучение основ web-дизайна, что включает в себя изучение
основ композиции, сочетания цветов и форм, современная типографика, сочетания шрифтов,
структура построения сайтов и системный подход к работе, работа в команде над одним
проектом и изучение профессионального программного обеспечения в работе. Отличительной
особенностью программы является то, что в процессе ее реализации формируются все
необходимые навыки для овладения Web-дизайна. Содержание программы способствует
формированию у обучающихся творческих способностей, а также развитию компетенций,
необходимых в обществе, использующем современные информационные технологии. При
построении модели затрагивается множество проблем из разных областей знания:
технология (проектирование): создание структуры сайта и последующее разработка
дизайна с учетом созданной структуры. Учитывается целевая аудитория будущих
пользователей, их возраст увлечения, пол, с каких устройств будут посещать разрабатываемый
сайт. Подготовка цветовой схемы сочетающихся цветов и мудборд. Разработка иерархии
экранов и удобство использования, расположение кнопок и текста. Организация мозговых
штурмов для поиска новых решений. Обучение принципам совместной работы и обмена
идеями;
технология (реализация проекта): разработка дизайн макета сайта с учетом UX дизайна
проделанного на этапе проектирования. Создание прототипа работающего сайта посредством
сервисов позволяющих, накладывать гиперссылки на макеты сайтов в формате обычного
растрового изображения. Использование программного обеспечения для обработки
информации;
4

математика: расчет правильной пропорции кегля, интерлиньяжа, трекинга в зависимости
от задачи, поставленной перед текстом и размером области, в которой будет помещен;
развитие речи: общение в устной или в письменной форме с использованием
специальных терминов. Использование интервью, чтобы получить информацию и написать
рассказ. Написание сценария с диалогами. Описание логической последовательности сайта,
создание постановки с главными героями и её оформление визуальными и звуковыми
эффектами. Применение мультимедийных технологий для генерирования и презентации идей.
Участие в групповой работе.
Возраст детей. Дополнительная общеобразовательная общеразвивающая программа
«Web-дизайн» (дистанционная) предназначена для обучения школьников в возрасте 14 - 18 лет.
Занятия по программе проводятся с группой детей одного возраста с постоянным составом.
Учащиеся набираются по желанию. Число учащихся в группе 8 человек.
Сроки реализации программы.
Программа «Web-дизайн» (дистанционная) реализуется в течение всего календарного
года, включая каникулярное время. Программа рассчитана на 1 год обучения.
Формы проведения учебных занятий – групповые занятия.
Методы организации занятий: объяснение педагога, беседа, рассказ педагога,
демонстрация мультимедиа материала, устный опрос, практические занятия в виде игры,
проектная деятельность, соревновательные элементы.
Основной формой является комбинированное занятие, включающее в себя:
организационный момент, повторение пройденного материала, введение нового материала,
подведение итогов. Обучение происходит в виде теоретических и практических занятий.
Режим занятий: 1 раз в неделю по 2 академических часа и переменой 10 минут.
Академический час равен 40 минутам.
Ожидаемые результаты и способы определения их результативности.
Результаты освоения дополнительной общеобразовательной общеразвивающей
программы «Web-дизайн» включают:
Личностные результаты:
- формирование ответственного отношения к учению, готовности и способности учащихся
к саморазвитию и самообразованию;
- развитие самостоятельности, личной ответственности за свои поступки;
- мотивация детей к познанию, творчеству, труду.
Метапредметные результаты:
- формирование умения самостоятельно определять цели своего обучения, ставить и
формулировать для себя новые задачи в учёбе и познавательной деятельности;
- формирование умения самостоятельно планировать пути достижения целей, осознанно
выбирать наиболее эффективные способы решения учебных и познавательных задач;
- формирование умения понимать причины успеха/неуспеха учебной деятельности;
- овладение основами композиции, структуры сайта, сочетания форм и цвета, понимание
типографики, создания рабочих прототипов.
Предполагается, что к концу обучения по данной программе учащиеся:
- будут знать основные создания композиции;
- познакомятся с профессиональными ресурсами для работы и продвижения себя как webдизайнера;
5

- будут знать основные профессиональные программы для разработки всех циклов
создания сайта;
- будут понимать и различать хороший UX\UI дизайн от плохого;
- освоят сочетания шрифтов;
- научатся искать заказчиков и строить правильный диалог.
Результативность выполнения данной программы определяется с помощью устного
опроса, реализации проектов, участия в соревнованиях по web-дизайну и оценивается по
трехбалльной системе – «удовлетворительно», «хорошо», «отлично».
Текущий контроль осуществляется в течение обучения в виде устного опроса, наблюдения
педагога, проведения внутрикружковых мини-соревнований.
Промежуточный контроль - осуществляется в конце первого и второго полугодия.
Учащимся выставляются оценки в диагностические карты («отлично», «хорошо»,
«удовлетворительно») по критериям программы.
Итоговый контроль - выставление учащимся оценок в итоговые ведомости («отлично»,
«хорошо», «удовлетворительно») по результатам анализа всех промежуточных аттестаций.
Итоговой аттестацией завершается процесс образования программе.
Критериями оценки знаний и умений учащихся являются:
- знание тенденций развития web-дизайна;
- знание основных этапов разработки web-проекта;
- знание визуальных компонентов web-дизайна;
- умение отделять объекты от фона;
- умение вписывать объекты в любой фон и комбинировать их;
- умение комбинировать шрифты и правильно их настраивать;
- умение создавать прототипы сайтов по созданным макетам.
Критерий
Знание тенденций
развития web-дизайна

Удовлетворительно
Имеет минимальные
знания, сведения

Знание основных этапов
разработки web-проекта

Имеет минимальные
знания

Знание визуальных
компонентов web-дизайна

Знает поверхностно
о типографике,
цвете негативном
пространстве,
кнопках и
универсальных
6

Условия оценки
Хорошо
Частично знает

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

Отлично
Знает и может
назвать все
тенденции развития
современного
дизайна
Может рассказать
все этапы
детализируя
четкими названиями
сайтов, программ и
техническими
терминами

Уверенно
ориентируется в
типографике, цвете
негативном
пространстве,
кнопках и

элементах

универсальных
элементах

Умение отделять объекты
от фона

Может отделить
объект с явными
погрешностями

Может отделить
объект без
видимых
погрешностях, с
приемлемой
контрастностью
краев

Умение вписывать
объекты в любой фон и
комбинировать их

Может вырезав
объект поместить
его на другой фон

Умение комбинировать
шрифты и правильно их
настраивать

Знает отличие
шрифта с засечками
от шрифта без
засечек

Может вырезав
объект поместить
его на другой фон
настраивая
изображения под
один тон
Знает и умеет
комбинировать 1
шрифт разными
начертаниями и
размером

Умение создавать
прототипы сайтов по
созданным макетам

Знает где можно
сделать прототип

Знает ресурсы по
созданию
прототипов и
может создать
рабочий прототип
без анимаций

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

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

7

ОБЩИЙ УЧЕБНО-ТЕМАТИЧЕСКИЙ ПЛАН

№
1.

Количество
часов
практика
теория
4
2

Тема
Раздел 1. Тенденции развития web-дизайна

1.1. Вводное занятие. Инструктаж по охране труда,
противопожарной безопасности
1.2. Понятие интерактивной среды. Подходы к webпроектированию
1.3. Основные тенденции развития современного
дизайна
1.4. Тренды современного web-дизайна
2.

Раздел 2. Основные этапы разработки web-проекта

2.1. Методы разработки идеи web-проекта. Основы
дизайн-исследования в области web-дизайна
2.2. Методы взаимодействия пользователей с
интерфейсом
2.3. Выбор визуального стиля web-проекта. Референсы и
мудборды
2.4. Подбор референсов и составление мудборда
2.5. Основные инструменты и методы
прототипирования. Модульные сетки
3.

Раздел 3. Визуальные компоненты web-дизайна

3.1. Web-типографика
3.2. Визуальная иерархия в web-дизайне
3.3. Роль негативного пространства в web-дизайне
3.4. Цвет в web-дизайне
3.5. Сравнительный анализ колористического решения и
типографического оформления сайтов
3.6. Кнопки и формы в web-дизайне
3.7. Универсальные элементы сайтов
3.8. Принципы разработки логотипа
4.

Раздел 4. Web-дизайн как проектная деятельность

4.1. Системы ведения проектов в web-дизайне
4.2. Составление технического задания и проекта
4.3. Landing page как web-проект
4.4. Разработка портфолио web-дизайнера
4.5. Разработка сайта-портфолио
4.6. Презентация себя как при помощи созданного сайта
Всего:

8

всего
6

1

-

1

1

-

1

1

1

2

1
5

1
7

2
12

1

1

2

1

1

2

1

1

2

-

2

2

2

2

4

9
2
1
1
1

11
2
1
1
1

20
4
2
2
2

1

1

2

1
1
1
8
1
1
4
1
1
26

1
1
3
26
10
1
13
2
46

2
2
4
34
1
1
14
2
14
2
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 часов.
Разработка одностраничных сайтов на разные темы с применением накопленных знаний и
умений. Итоговое задание создание сайта визитки учащегося создание прототипа и презентация
себя при помощи разработанного прототипа.
МЕТОДИЧЕСКОЕ ОБЕСПЕЧЕНИЕ ПРОГРАММЫ
Для реализации программы используются разнообразные формы и методы проведения
занятий. Это рассказ, беседы, лекции, из которых дети узнают много новой информации;
практические задания для закрепления теоретических знаний и реализации собственной
творческой мысли.
Занятия сопровождаются использованием наглядного материала. Программнометодическое и информационное обеспечение помогают проводить занятия интересно и
грамотно. Разнообразные занятия дают возможность детям проявить свою индивидуальность,
самостоятельность, способствуют гармоничному и духовному развитию личности. При
организации работы необходимо постараться соединить игру, труд и обучение, что поможет
обеспечить единство решения познавательных, практических и игровых задач. Игровые
приемы, внутрикружковые соревнования, тематические вопросы также помогают при
творческой работе.

9

Основными
принципами
в
освоении
дополнительной
общеобразовательной
общеразвивающей программы «Web-дизайн» являются: систематичность и последовательность
обучения, а также доступность.
Обучение должно быть систематичным и последовательным. Необходимо
руководствоваться правилами дидактики: от близкого к далекому, от простого к сложному, от
более легкого к более трудному, от известного к неизвестному. Систематичность обучения
предполагает такое построение учебного процесса, в ходе которого происходит как бы
связывание ранее усвоенного с новым материалом. В процессе обучения происходит
знакомство с основной терминологией робототехники, механики, информатики, принципами
построения различных конструкций, алгоритмов.
Учёт возрастных различий и особенностей учащихся находит выражение в принципе
доступности обучения, которое должно проводиться так, чтобы изучаемый материал по
содержанию и объёму был посилен учащимся. Применяемые методы обучения должны
соответствовать развитию учащихся, развивать их силы и способности.
В качестве основных программ, на которых будет строится разработка web-интерфейсов,
будут использованы Adobe Photoshop и Figma - являются профессиональными инструментами,
актуальными, кроссплатформенными и популярными на момент написания данной программы.
Так же будут использованы различные онлайн сервисы для создания мудбордов,
вдохновения, прототипов, шрифтов являющиеся бесплатными с полной лицензией для
применения в свой работе.
Занятия по программе формируют специальные технические умения, развивают
аккуратность, усидчивость, организованность, нацеленность на результат.
Технические средства обучения: компьютеры, интернет.
Курс предполагает использование компьютеров. Важно отметить, что компьютер
используется как инструмент позволяющий разработать с нуля любой web-интерфейс как на
базе учебного учреждения, так и продолжить работу в домашний условиях. Поэтому возможно
включение в программу онлайн занятий без потери эффективности.

10

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

Нормативно-правовые акты и другие официальные документы

1.1. Федеральный закон от 29.12.2012 N 273-ФЗ "Об образовании в Российской
Федерации" (ред. от 24.03.2021) // Собрание законодательства РФ. - 31.12.2012. - N 53 (ч. 1). Ст. 7598.
1.2. Приказ Министерства просвещения РФ от 27 июля 2022 г. N 629 «Об утверждении
Порядка организации и осуществления образовательной деятельности по дополнительным
общеобразовательным программам»
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.
2.

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

2.1. Тузовский, А. Ф. Проектирование и разработка web-приложений: учебное пособие.
Юрайт, 2018.
2.2. А. Н. Лаврентьев [и др.]. Цифровые технологии в дизайне. История, теория,
практика: учебник и практикум для вузов. М. : Издательство Юрайт, 2018.
2.3. Ситникова, О. В., Татарникова, Л. А., Вьюгов, Д. С. Технологии создания сайтов и
основы web-дизайна: Учебное пособие.
2.4. Катханова Ю.Ф., Гринберг Г.С. Самоучитель TeachPro. Web-дизайн, 2006 – 560с.
2.5. Буйлова Л.П. Как разработать авторскую программу? (рекомендации педагогу
дополнительного образования) – М., 1999. – 38с.
2.6. Подобед C .О. Проектирование и разработка инновационных программ
//Дополнительное образование и воспитание, 2006. – № 7.
2.7. Содержание и структура образовательных программ ОУ, рабочих программ
педагогов. Методическое пособие/ Е.В. Губанова – Министерство образования Саратовской
области; ГОУ ДПО «СарИПКиПРО». – Саратов, 2008. – 84 с.
3.

Литература для учащихся и родителей

3.1. Крупнейшая социальная сеть по Photoshop на русскоязычном пространстве.
[Электронный ресурс] – Режим доступа: https://photoshop-master.ru/
3.2. Курсы по созданию прототипа сайта с нуля, а также по работе в Figma.
[Электронный ресурсы]:
https://www.youtube.com/watch?time_continue=201&v=i45cot-R224&feature=emb_logo
https://www.youtube.com/channel/UCGG3EyZVhbEqU34HUTEoGKg/playlists
3.3. Советы начинающим веб-дизайнерам от крупной онлайн школы Skillbox
https://www.youtube.com/watch?v=L3Uu_hKe2mM&feature=emb_logo

ДОКУМЕНТ ПОДПИСАН ЭЛЕКТРОННОЙ ПОДПИСЬЮ
МУНИЦИПАЛЬНОЕ БЮДЖЕТНОЕ УЧРЕЖДЕНИЕ ДОПОЛНИТЕЛЬНОГО
ОБРАЗОВАНИЯ ДОМ ДЕТСКОГО ТВОРЧЕСТВА ИМЕНИ АКАДЕМИКА А. Е.
ФЕРСМАНА, Христюк Павел Александрович, директор

11
26.08.25 16:09 (MSK)

Сертификат 30461462C70F32ADB135762274BF7448