Хепнер А.И. Веб дизайн

1. Направленность
Данная образовательная общеразвивающая программа предназначена для учащихся 7-11
классов (13-18 лет). Программа является технической направленности так как она направлена
на изучение современных программ, создание сайтов и развития рационального подхода к
поставленной задачи.

2. Актуальность
Общеразвивающая программа «Веб Дизайн» на данный момент является очень актуальной, так
как мы живем в век современных технологий и для ребенка знание базовых программ является
очень важным фактором для его успешной жизни. Мы же хотим на этом курсе обучить ребенка
не только основам программ по Веб дизайну, но и углубленно изучить саму профессию, все ее
нюансы, научить работать «на заказ», что в свою очередь является еще и профориентацией
учащихся. В наше время детям поступает очень много информации, они стремятся обучаться
всему, часто даже уже в старших классах ребенок не может определиться с профессией, но
именно систематизировать обучение, дать им задание очень важно для усвоения материала и
определения интересов.
Программы заключается в том, что современный уровень развития производства, техники
немыслимы без художественного проектирования.
Придавая определенные функциональные и эстетические свойства вещам и предметам,
дизайнер формирует человека, который будет пользоваться этими вещами и жить в этой среде.
Отсюда следует важная воспитательная функция дизайна, его социально-культурная и
социально-политическая роль в жизни общества.
Старшие школьники оценивают учебный процесс с точки зрения того, что он дает для их
будущего, устанавливается прочная связь между профессиональными и учебными интересами.
Программа «Веб дизайн» актуальна, т.к. изучая способы преображения форм, учащиеся
приобретают опыт выражения творческой мысли. Программа позволяет сформировать
эстетическую культуру школьника – совокупность знаний о ее сохранении, передаче,
преобразовании и использовании в науке, производстве, архитектуре и других сферах жизни
общества.

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

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

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

5. Адресат программы
Программа «Веб Дизайн» нацелена на детей средней и старшей возрастной категории – это 1318 лет, творчески развитые, увлекающиеся программированием, рисованием, дизайном.

6. Уровень программы, объем и сроки реализации программы
«Веб дизайн»
Общеобразовательная программа дополнительного образования «Веб дизайн» рассчитана на 1
учебный год (114 часов, 3 ч. в неделю)

7. Форма обучения
Основными формами учебного процесса являются:
- групповые учебно-практические и теоретические занятия;
- индивидуальные;
- комбинированные занятия;
- коллективные;
- индивидуально-групповые.

8. Особенности организации образовательного процесса
Для реализации общеобразовательной программы дополнительного образования «Веб дизайн»
формируются постоянные группы 8-10 человек приблизительно одной возрастной категории,
занятия проводятся в групповом формате
словесный - беседа, объяснение;
наглядный -

объяснение техники выполнения и построения определенных композиций,

коллажей, анимации в графических программах. Показ видеоматериалов, иллюстраций, показ
2

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

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

10.Задачи программы
Задачами общеобразовательной программы дополнительного образования «Веб дизайн»
являются:
– приобретение умений грамотно и рационально составлять интерфейс для сайтов и мобильных
приложений;
– формирование умения отрисовки визуала: иконок, иллюстраций, интерфейса приложения;
– приобретение навыков создания макетов сайта, подобрав оптимальный шрифт и цвета;
- приобретение навыков об основах композиции, типографики, цветоведения, коммерческой
иллюстрции;
– уверенное пользование программами ADOBE PHOTOSHOP, ADOBE ILLUSTRATOR;
- приобретение навыков работы с графическим планшетом;
- Приобретение навыка разбираться в специфике цифровой среды. Навык разрабатывать
цифровые продукты: работать с интерактивом, создавать визуал для сайтов и соцсетей, делать
удобные интерфейсы.
3

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

развитие

чувства

стиля,

фантазии,

изобретательности,

логического

мышления

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

11.Учебный план
п/
п
1.

Название раздела, тема
Изучение основных инструментов для работы: Adobe
Illustrator, Adobe Photoshop. А также подробный разбор,
какими навыками должен обладать современный дизайнер и
как решать различные задачи. Обучение созданию:
графических иллюстраций, дизайн упаковки, макет футболки,
gif-анимация, 3D-объект
Освоение основ веб-дизайна: колористика, типографика,
композиция и модульные сетки. Обучение подбору
референсов и возможности визуализировать свои идеи,
применять основные принципы UI
Приобретение навыка разбираться в специфике цифровой
среды. Навык разрабатывать цифровые продукты: работать с
интерактивом, создавать визуал для сайтов и соцсетей, делать
удобные интерфейсы.
Формирование умений пользования сетками, колонками.
Освоение необычными приемами подачи контента на
странице: таймлайны, инфографику и интерактивные
элементы
Умение создавать интерактивные прототипы сервиса и
проводить тестирование интерфейса.
и того

Кол-во Теория Практика
часов
21
5
16

114

Календарный учебный график

9,1
1

Лекция.
Практикум

Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум

3
3

Освоение основ веб-дизайна: колористика

Освоение основ веб-дизайна: типографика

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

ноябрь

13
14
15

декабрь

12,
14
19,
21
26,
28

16,
18
23,
25
30,
2
7,9
14,
16
21,
23

17.00-19.00
17.00-19.00

октябрь

17.00-19.00

сентябрь

Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум

3
3
3
3
3
3
3

Лекция.
Практикум

11,
13
18,
20
25,
27
1,3

Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум
Лекция.

21
22

3
3

ф
е
в
р
1а
7л
.ь
0
0
1
9
.
0
0

17.00-19.00

28,
30

январь

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

Место
проведения
Кабинет №2

Лекция.
Практикум

14,
16
21,
23
28,
30
5,7

Лекция.
Практикум

Кабинет №2

2,4

7,9

Кабинет №2

Вводная беседа. теоретический материал,
понятие «Вектор» и «растр». Обзор
программ для работы компании Adobe
Знакомство с программой Adobe Photoshop.
Обзор всех инструментов
Знакомство со слоями в программе Adobe
Photoshop.
Adobe Photoshop. созданиt графических
иллюстраций
Adobe Photoshop. созданиt графических
иллюстраций
Adobe Photoshop. Разработка дизайна
упаковки для подукта
Adobe Photoshop.
Разработка дизайна макета футболки.
Adobe Photoshop.
Принцип создание анимации, разработка
собственной gif-анимация
Adobe Photoshop. Применение 3D-объектов
в дизайне. Создание собственного 3Dобъекта
Adobe Photoshop. Применение 3D-объектов
в дизайне. Создание собственного 3Dобъекта
Освоение основ веб-дизайна: колористика

Кабинет №2

Тема занятия

К Кабинет №2
а
б
и
Итоговый просмотр
н
е

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

Кол-во
часов

Время
проведения

Число

Месяц

№
п/п

1,3

Лекция.
Практикум

7,
10

Лекция.
Практикум

март

3
3

22,
24

Лекция.
Практикум

29,
31

Лекция.
Практикум

5,7

Лекция.
Практикум

12,
14

37
38

май

19,
21
26,
28
3,5

10,
12
17,
19
24,
26

17.00-19.00

15,
17

апрель

Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум

Лекция.
Практикум

Лекция.
Практикум
Лекция.
Практикум

Освоение необычными приемами подачи
контента на странице: таймлайны,
инфографику и интерактивные элементы
Освоение необычными приемами подачи
контента на странице: таймлайны,
инфографику и интерактивные элементы
Создание собственного логотипа для
дипломной работы.
Создание собственного логотипа для
дипломной работы.
Умение создавать интерактивные
прототипы сервиса и проводить
тестирование интерфейса.
Умение создавать интерактивные
прототипы сервиса и проводить
тестирование интерфейса.
Верстка сайта для дипломной работы

Верстка сайта для дипломной работы

Лекция.
Практикум

Кабинет №2

Лекция.
Практикум
Лекция.
Практикум
Лекция.
Практикум

17.00-19.00

8,1
0
15,
17
22,
25

возможности визуализировать свои идеи,
применять основные принципы UI
Приобретение навыка разбираться в
специфике цифровой среды.
Приобретение навыка разбираться в
специфике цифровой среды.
Навык разрабатывать цифровые продукты:
работать с интерактивом, создавать визуал
для сайтов и соцсетей, делать удобные
интерфейсы.
Навык разрабатывать цифровые продукты:
работать с интерактивом, создавать визуал
для сайтов и соцсетей, делать удобные
интерфейсы.
Навык разрабатывать цифровые продукты:
работать с интерактивом, создавать визуал
для сайтов и соцсетей, делать удобные
интерфейсы.
Освоение необычными приемами подачи
контента на странице: таймлайны,
инфографику и интерактивные элементы
Освоение необычными приемами подачи
контента на странице: таймлайны,
инфографику и интерактивные элементы
Освоение необычными приемами подачи
контента на странице: таймлайны,
инфографику и интерактивные элементы

Кабинет №2

Практикум

12.Планируемые результаты
6

По завершении реализации программы «Веб дизайн» планируются следующие результаты:
- Постановка и понимание задачи
- Проектирование интерфейса
- Презентация дизайна
- Сможете работать с графическим интерфейсом: элементами, сеткой и композициями,
типографикой, иконками, а также анимацией
- Освоение основных подходов проектирования
- Умение с нуля спроектировать свой сайт, получишь получить проект в портфолио
- Определять порядок действий, планировать этапы своей работы;
- Четко формулировать и ясно излагать свои мысли;
- Свободно владеть программой Photoshop, illustrator;
- Знать все горячие клавиши для ускоренной и удобной работы в программах;
- Создавать красивый графический фон, правильно компоновать предметы, фотографии и текст;
-Ззнать стили и направления в Веб дизайне;
- Четко различать растровую и векторную графику;
- Создавать в Photoshop анимацию, коллажи, рисовать на графическом планшете;
- Создавать логотипы, буклеты, рисовать людей и животных в Photoshop, illustrator.

Список литературы
1. Бурлаков М. Самоучитель по компьютерной графике. - К.: Издательская группа BHV.
2000. - 640 с.
2. Коцюбинский А.О., Грошев С.В. Компьютерная графика - М.: Технолоджи-3000. 2001. 750 с.: ил.
3. Adobe Photoshop CS6. Официальный учебный курс; пер. с англ. М. А. Райтмана. - М.:
Эксмо, 2013. - 432 с.: ил.
4. Дунаев В. Photoshop CS: Понятный самоучитель. – СПб.: Питер, 2013. – 208 с.: ил.
5. Бойер Питер. Photoshop CS6 для чайников; пер. с англ. и ред. И. В. Бернштейна. - М.:
Диалектика, 2013. - 448 с.
6. Мак-Клелланд, Дик. Photoshop 7. Библия пользователя; пер. с англ. и ред. И.Б. Тараброва.
- М.: Диалектика, 2004. - 928 с.
7. Фотошоп Мастер: [Электронный ресурс]. URL: https://photoshop-master.ru.
Уроки Фотошоп: [Электронный ресурс]. URL: https://photoshop-master.ru.