ПОЯСНИТЕЛЬНАЯ ЗАПИСКА
Дополнительная общеобразовательная общеразвивающая программа «Web-дизайн»
(продвинутый уровень) составлена с использованием учебно-методической и дополнительной
(специальной) литературы по информатике, изобразительному искусству, маркетингу с учетом
возрастных особенностей детей.
Программа разработана в 2023 году, отредактирована в 2025 году в соответствии с: Федеральный закон «Об образовании в Российской Федерации» от 29.12.2012 № 273–ФЗ;
- Распоряжение Правительства Российской Федерации от 31.03.2022 №678-р «Концепция
развития дополнительного образования детей до 2030 года»;
- Приказ Министерства просвещения Российской Федерации от 27.07.2022 № 629 «Об
утверждении Порядка организации и осуществления образовательной деятельности по
дополнительным общеобразовательным программам»;
- Письмо Министерства образования и науки Российской Федерации от 18.11.2015 №093242 «О направлении информации» вместе с «Методическими рекомендациями по
проектированию дополнительных общеобразовательных программ (включая разноуровневые
программы)»;
- Приказ Министерства науки и высшего образования Российской Федерации №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-дизайна.
Задачи:
Обучающие:
- Повторить основные принципы пропорций, композиции, системного подхода
построения сайта;
- исследовать современные тренды веб-дизайна;
- сформировать навыки элементарного проектирования, конструирования, размещения и
сопровождения web-сайта;
- научить учащихся проектировать эффективные пользовательские интерфейсы с учетом
потребностей и предпочтений пользователей;
- закрепить навыки коллективной работы с комплексными web-проектами;
- познакомить с программным обеспечением для работы;
- научить создавать структуру сайта и накладывать на нее дизайн в выбранном стиле.
Развивающие:
- развивать формирование художественного вкуса и творческого мышления;
- развивать интерес к компьютерной графике, дизайну;
- развивать стремление к самообразованию и в дальнейшем успешной личной
самореализации
- развивать умение отстаивать свою точку зрения, самостоятельно находить ответы на
вопросы путем логических рассуждений;
- развить аналитические навыки в оценке веб-сайтов
- развивать словарный запас и навыки общения детей, умение работать над проектом в
команде, эффективно распределять обязанности.
3

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

4

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

- умение вписывать объекты в любой фон и комбинировать их;
- умение комбинировать шрифты и правильно их настраивать;
- умение создавать прототипы сайтов по созданным макетам.
Критерий

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

Знание тенденций
развития web-дизайна

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7

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

№
1.

Тема
Раздел 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. Изучение типографических правил и принципов
3.2. Выбор и комбинирование шрифтов
3.3. Работа с размерами, высотой строк и
интерлиньяжем для улучшения читаемости текста
3.4. Изучение основных цветовых моделей, таких как
RGB и CMYK
3.5. Создание и использование гармоничных цветовых
палитр
3.6. Применение цветовых схем для передачи
настроения и эмоций
3.7. Универсальные элементы сайтов
3.8. Разработка логотипа с использованием ИИ
4.

Раздел 4. Улучшение пользовательского опыта

4.1. Создание и использование иконок для улучшения
пользовательского интерфейса
4.2. Оптимизация и экспорт векторных элементов для
использования на веб-страницах
4.3. Правила и принципы дизайна пользовательского
интерфейса (UI) и пользовательского опыта (UX)
4.4. Создание интуитивного и легкого в использовании
пользовательского интерфейса
4.5. Тестирование и исследование пользователя для
улучшения дизайна и удовлетворения потребностей
пользователей
4.6. Практика. Разработка сайтов.
Всего:
8

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

всего
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

11
2
1

20
4
2

1

1

2

1

1

2

1

1

2

1

1

2

1
1
8

1
3
26

2
4
34

1

1

2

1

1

2

4

8

12

1

1

2

1

1

2

26

14
46

14
72

СОДЕРЖАНИЕ ПРОГРАММЫ
Раздел 1. Тенденции развития web-дизайна, 6 часов.
Теоретическое занятие, 4 часа.
Беседа: Инструктаж по охране труда и противопожарной безопасности. Правила
поведения в учреждении. Санитарно-гигиенические нормы. Общее знакомство с программой
объединения «Web-дизайн» (продвинутый уровень).
Практическое занятие, 2 часа.
Знакомство с основными программами Adobe Photoshop и Figma.
Раздел 2. Основные этапы разработки web-проекта, 12 часов.
Теоретическое занятие, 5 часов.
Рассказ с демонстрацией видеоматериалов, беседа: введение в разработку web-проектов.
Структурный поэтапный подход к разработке.
Практическое занятие, 7 часов.
Знакомство со всеми программами и сервисами для полноценной работы.
Раздел 3. Визуальные компоненты web-дизайна, 20 часов.
Теоретическое занятие, 9 часов.
Рассказ, беседа, показ видео материалов: изучение типографики, сочетания цветов,
композиции и других элементов сайта. Изучение фрезерного станка и ПО необходимое для
работы с ним.
Практические занятия, 11 часов.
Разработка отдельных частей сайта по поставленным задачам. Разработка логотипа и
создание физической копии с помощью фрезерного станка.
Раздел 4. Улучшение пользовательского опыта, 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. Джейсон Крэнфорд, "Современные методы разработки веб-дизайна", издательство
"ДМК Пресс", 2022
2.5. Джеффри Зелдман, "Дизайн системы. Создание эффективных цифровых
продуктов", издательство "Питер", 2020.
2.6. Джейсон Крэнфорд, "Современные методы разработки веб-дизайна", издательство
"ДМК Пресс", 2022
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:10 (MSK)

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