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

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

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

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

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

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

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

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

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

- индивидуальные;
- комбинированные занятия;
- коллективные;
- индивидуально-групповые.

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

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

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

уверенное

пользование

программами

ADOBE

PHOTOSHOP,

ADOBE

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

11. Планируемые результаты
4

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

12. Учебный план
п/п Название раздела, тема
1.

Кол-во
часов
27

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

Теоретические основы
5

Практические занятия
22

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

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

Знакомство с программой Adobe
Photoshop. Обзор всех
инструментов
Знакомство со слоями
в программе Adobe
Photoshop.

Adobe Photoshop. созданиt графических
иллюстраций

Место проведения

Тема занятия
Кол-во часов

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

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

Итог.
Просмотр
Кабинет №2

сентябрь

09.00 — 11.00, 14.30- 16.30

Число
Месяц

№
п/п

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

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

Итог.
просмотр

Итог.
Просмотр

Adobe Photoshop. созданиt графических
иллюстраций

Итог.
Просмотр

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

Adobe Photoshop. Разработка дизайна упаковки для подукта

Итог.
Просмотр

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

Adobe Photoshop.
Разработка дизайна
макета футболки.

Кабинет №2

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

09.00 — 11.00, 14.30- 16.30

октябрь

Итог.
Просмотр

Adobe Photoshop.
Принцип создание
анимации, разработка
собственной gifанимация

Итог.
просмотр

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

Итог.
просмотр

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

Adobe Photoshop.
Применение 3Dобъектов в дизайне.
Создание собственного 3D-объекта
Adobe Photoshop.
Применение 3Dобъектов в дизайне.
Создание собственного 3D-объекта

Кабинет №2

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

09.00 — 11.00, 14.3016.30

ноябрь

Итог.
просмотр

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

Итог.
просмотр

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

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

Итог.
просмотр

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

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

Итог.
просмотр

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

Итог. просмотр
Итог. просмотр
Итог. просмотр

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

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

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

24
31

7
февраль

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

Итог. просмотр

Кабинет №2

Итог. просмотр

Итог. просмотр
Итог. просмотр

Кабинет №2

10
09.00 — 11.00, 14.30- 16.30

09.00 — 11.00,
14.30- 16.30

январь

Кабинет №2

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

09.00 — 11.00, 14.30- 16.30

декабрь

Итог. просмотр

Итог. просмотр
8

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

09.00 — 11.00, 14.30- 16.30

апрель

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

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

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

Итог. просмотр
Итог. просмотр

Итог. просмотр

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

Итог. просмотр

Кабинет №2

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

09.00 — 11.00, 14.30- 16.30

март

Итог. просмотр

Итог. просмотр
Итог. про9

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

09.00 — 11.00, 14.30- 16.30

май

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

го логотипа для дипломной работы.
Умение создавать интерактивные прототипы сервиса и проводить тестирование интерфейса.
Умение создавать интерактивные прототипы сервиса и проводить тестирование интерфейса.
Верстка сайта для дипломной работы

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

смотр
Итог. просмотр

Итог. просмотр

Кабинет №2

Практикум

Итог. просмотр

Список литературы
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.