Table Of ContentОглавление
ОбзОр курса и пОдгОтОвка ...................................................................................................................7
прОект 1. мини-прилОжение ............................................................................................................39
прОект 2. веб-дизайн и планирОвание ....................................................................................204
прОект 3. веб-разрабОтка и внедрение ....................................................................................303
прОект 4. веб-пОртфОлиО ................................................................................................................548
прОект 5. интерактивная игра .....................................................................................................738
прОект 6. цифрОвОе пОвествОвание .........................................................................................968
прОект 7. мОбильнОе прилОжение ...........................................................................................1153
прОект 8. финальнОе веб-пОртфОлиО ......................................................................................1334
ОбзОр курса и пОдгОтОвка
«Цифровой дизайн: основы веб-дизайна» — одногодичный учебный курс, состоящий из от-
дельных проектов, который предназначен для получения профессиональных и коммуника-
ционных навыков в области профессионального веб-дизайна и разработки с использовани-
ем программных средств корпорации Adobe. Курс «Визуальный дизайн» развивает навыки
в четырех ключевых областях:
x Управление проектом и совместная работа;
x Дизайн;
x Исследования и общение;
x Профессиональная продукция с использованием инструментов веб-авторинга.
Учащиеся получают эти ключевые навыки по спирали — каждый проект добавляет более
сложные навыки к основным умениям.
Учебный курс «Цифровой дизайн» затрагивает каждую из этих областей, используя подход
проработки проектов. Каждый проект разделен на фазы, соответствующие процессам дизай-
на и разработки, начиная с планирования проекта и заканчивая его оценкой и запуском. Что-
бы приблизиться к среде профессиональной работы, учащиеся постепенно переносят свою
работу из индивидуального процесса в коллективный процесс.
Дизайн и техническая работа по своей природе интерактивны, поэтому проекты содержат
задания, требующие от учащихся проведения оценки с последующим редизайном и дора-
боткой. Особое внимание уделяется концепциям разработки и принципам тщательного, эф-
фективного дизайна.
На следующей диаграмме показана последовательность и этапы проекта.
Первый семестр. Мини-приложения, веб-дизайн и веб-разработка
Мини-
приложение Веб-дизайн
и планирование Веб-разработка
и внедрение
Веб-портфолио
Второй семестр. разработка игр и игровой дизайн, многофункционального
интерактивного контента и приложений
Интерактивная игра
Цифровое
повествование
Мобильное
приложение
Финальное
веб-портфолио
8 ОбзОр курса И пОдгОтОВка
Проекты ПерВого сеМестра
В первом семестре учебного курса «Цифровой дизайн» (проекты 1-4) рассматриваются во-
просы, составляющие основу создания веб-продуктов: принципы графического дизайна,
проектная документация, раскадровки, веб-разработка, навыки совместного управления
проектами, такие как проведение интервью и планирование проекта, рецензирование и ре-
дизайн. Работы в проектах направлены на разработку эффективных коммуникаций, кото-
рые можно разместить во Всемирной паутине. Учащиеся разработают мини-приложение,
множество графических изображений, клиентский веб-сайт и веб-портфолио. Данный учеб-
ный курс обладает большой гибкостью.
В этом семестре акцент выполнен на такие ключевые навыки:
x Навыки межличностного общения, такие как интервьюирование и ответы на отзывы;
x Дизайн клиентских веб-сайтов;
x Решение проблем с использованием доступных многочисленных перспектив;
x Процесс дизайна и эффективного взаимодействия;
x Коллективное обучение и оценка работы в среде совместной разработки;
x Технические навыки продукции для Всемирной паутины.
В первом семестре учащиеся используют программные продукты Adobe Photoshop CS6,
Adobe Illustrator CS6 и Adobe Fireworks CS6 для создания статичной и интерактивной гра-
фики. Для дизайна и разработки веб-сайтов используется программа Adobe Dreamweaver
CS6. Данный материал подготовит учащихся к сдаче экзамена «Сетевые коммуникации с
использованием Adobe Dreamweaver CS6».
Проекты Второго сеМестра
Во втором семестре курса «Цифровой дизайн» (проекты 5-8) подход сосредоточен на полу-
чении навыков дизайна и разработки с основным акцентом на разработке многофункцио-
нального интерактивного контента. Учащиеся продолжат работу индивидуально и в группах
и займутся созданием многофункционального интерактивного контента, таким как интерак-
тивные игры, цифровые повествования и мобильные приложения. Основное внимание об-
ращается на дизайн многофункционального интерактивного контента, раскадровки мульти-
медийных элементов, технических заданиях на разработку и итеративной работе совместно
с клиентами. Учащиеся подготовят проектную документацию и визуальные компоненты,
которые оценят клиенты. Учащиеся разработают проекты в сфере многофункционального
интерактивного контента, которые решают конкретные задачи коммуникации. Учащиеся
разовьют технические навыки, чтобы выполнить требования клиентов.
В этом семестре акцент выполнен на такие ключевые навыки:
x Навыки межличностного общения, такие как интервьюирование и ответы на отзывы;
x Навыки общения с клиентами, с использованием проектной документации или специ-
фикаций;
ЦИФрОВОй дИзайн: ОснОВы Веб-дИзайна 9
x Дизайн и редизайн в соответствии с требованиями клиента;
x Технические навыки работы с мультимедийными объектами, такие как киноэффекты и
переходы;
x Разработка решений, включающих эффективные системы навигации и цифровые пове-
ствования.
Во втором семестре учащиеся получат навыки работы в программе Adobe Flash Professional
CS6 для реализации проектов, требующих наличия многофункционального интерактивного
контента. Данный материал подготовит учащихся к сдаче экзамена «Работа с многофункци-
ональным интерактивным контентом в Adobe Flash Professional CS6».
Другие МоДели обучения
Если обстоятельства не позволяют вам изучать данный курс на протяжении учебного года,
существуют другие способы структурировать и оптимизировать учебный материал под
определенные временные рамки, имеющиеся навыки и другие ограничивающие факторы.
Программно-ориентированная модель
Опираясь на данный курс, вы можете сосредоточиться на обучении работе с конкретными
программами — Adobe Fireworks CS6, Adobe Dreamweaver CS6 или Adobe Flash CS6. Прак-
тические руководства вы найдете как среди материалов курса «Цифровой дизайн», так и
отдельно.
Подойдите к описываемой модели творчески, пытайтесь включить активные методы обуче-
ния. В этом случае, вы сможете использовать все или отдельные проекты с целью изучения
работе в конкретных программах. В таблице ниже представлена схема изучения отдельных
программ в каждом проекте.
Adobe Adobe
Adobe Flash
Dreamweaver Fireworks
Проект 1: Мини-приложение
Проект 2: Веб-дизайн и планирование
Проект 3: Веб-разработка и внедрение
Проект 4: Веб-портфолио
Проект 5: Интерактивная игра
Проект 6: Цифровое повествование
Проект 7: Мобильное приложение
Проект 8: Финальное портфолио
в русском издании нумерация шагов не соблюдена, поэтому залитые ячейки указывают на упоминание
данной программы в соответствующем проекте
10 ОбзОр курса И пОдгОтОВка
отдельные проекты
В зависимости от уровня вашей квалификации (или учащихся, если вы — преподаватель),
вы можете изучить отдельные проекты из курса «Цифровой дизайн», не следуя в точности
учебному плану. Например, педагог, преподающий курс по разработке игр может обучить
только проекту «Интерактивная игра». Преподаватели могут адаптировать программу об-
учения и использовать технические руководства из предыдущих проектов для преподавания
отдельных проектов.
будьте креативными!
Используйте курс «Цифровой дизайн» как отправную точку для развития своих собствен-
ных проектов и программ, которые будут адаптированы для обучения в вашем случае. Ис-
пользуя существующие технические руководства, преподаватели могут формировать пол-
ностью завершенные учебные проекты, основанные на конкретных темах, представляющих
интерес. Если вы создаете собственные проекты или учебные программы, пожалуйста, поде-
литесь ими с сообществом Adobe Education Exchange (edexchange.adobe.com), здесь же вы
можете просмотреть дополнительные ресурсы, которые могут быть полезны для обучения
работе с программами пакета Adobe Creative Suite 6.
таблица навыков
Управление Исследование Технические
Дизайн
проектом и общение навыки
Проект 1: Мини- x Дизайн x Дизайн для своей x Понимание роли Программа Adobe
приложение для опре- аудитории (-й) и предназначе- Fireworks
Цели: деленной x Применение прин- ния мини-при- x Знакомство с ра-
x Понимание, аудитории и ципов дизайна ложений бочим простран-
как использу- с определен- x Создание каркасов x Анализ и ством программы
ются CSS для ной целью x Создание компо- критика мини- Adobe Fireworks
согласованно- x Понимание зиций дизайна приложений и x Создание каркасов
го дизайна этапов веб- x Изучение основ веб-сайтов x Создание компо-
x Принципы разработки HTML и HTML5 x Оценка и анализ зиций дизайна
хорошего x Знакомство с CSS достоверности x Подготовка изо-
дизайна x Применение контента бражений
x Каркас веб- аспектов дизайна x Оценка и анализ Программа Adobe
страницы таких, как цвет, навигации по Photoshop
x Настройка дизайн, макет, сайту x Знакомство с ра-
мини-прило- контраст и ком- x Понимание бочим простран-
жения позиция вопросов со- ством программы
x Оценка и x Интеграция изо- блюдения Adobe Photoshop
сравнение бражений и текста авторских прав x Кадрирование,
веб-сайтов x Планирование и надлежащее изменение раз-
Продолжитель- графики, с уче- использование мера и поворот
ность: 8–12 часов том потребностей материалов изображений
(2–3 недели) и аудитории x Коррекция цвета
ЦИФрОВОй дИзайн: ОснОВы Веб-дИзайна 11
Управление Исследование Технические
Дизайн
проектом и общение навыки
x Пропаганда и x Ретуширование
практика право- изображений
вого использо- x Сохранение фай-
вания изображе- лов в различных
ний форматах
x Выяснение и Программа Adobe
анализ потреб- Dreamweaver
ностей и целей x Знакомство с
аудитории ин- рабочим про-
формационного странством
дизайна программы Adobe
x Участие в рецен- Dreamweaver
зировании x Настройка про-
x Общение и екта веб-сайта
представление x Использование
проектных ре- панели Вставка
шений (Insert)
x Получение отзы- x Добавление изо-
вов о проекте бражений
x Добавление
текста
x Использование
приложения
Widget Browser
x Вставка мини-
приложения в веб-
страницу HTML
x Редактирование
и настройка пра-
вил CSS
x Использование
панели Стили
CSS (CSS Styles)
x Публикация фай-
лов во Всемир-
ной паутине
Проект 2: x Составление x Передача идей x Оценка и анализ Программа Adobe
Веб-дизайн и плана проекта и информации достоверности Dreamweaver
планирование x Разработка с помощью про- контента x Понимание проб-
Цели: документа с стых каркасов x Редактирование лемы доступности
x Процесс дизайнерским x Предоставление контента веб- Программа Adobe
професси- решением нескольких ди- сайта Fireworks
онального x Анализ вари- зайнерских идей x Оценка и анализ x Знакомство с ра-
веб-дизайна антов с по- x Обработка навигации веб- бочим простран-
x Клиентский следующим информации, сайта ством программы
дизайн выбором полученной при Fireworks
наилучшего рецензировании
дизайна
12 ОбзОр курса И пОдгОтОВка
Управление Исследование Технические
Дизайн
проектом и общение навыки
x Процесс x Обработка x Создание каркасов x Понимание и x Создание карка-
формирова- контента на x Создание компо- практика право- сов
ния команды основе ана- зиций дизайна вого использо- x Создание компо-
дизайнеров лиза и раз- x Создание рас- вания изображе- зиций дизайна
для разработ- мышлений кадровок ний x Создание про-
ки веб-сайта x Управление x Создание про- x Знакомство с тотипа
x Взаимодей- и организа- тотипов инструментами x Экспорт прото-
ствие и обще- ция работы x Применение прин- для создания типа в программу
ние команды над вы- ципов дизайна анимации и Dreamweaver
с клиентом полнением x Применение интерактивного
Продолжитель- множествен- информационной контента
ность: ных задач архитектуры x Критика дизайна
12–18 часов связанных с x Дизайн с учетом x Способность
(3–4 недели) дизайном, в юзабилити и до- излагать цель и
сравнении с ступности задачи работы
разработкой x Дизайн согласо- x Способность
сайта ванных веб- сообщать и
x Понимание страниц презентовать
ролей и обя- x Понимание и при- дизайнерские
занностей менение аспектов решения
x Обсуждение дизайна, таких, x Предоставление
выходных как теория цвета, отзывов по про-
данных макет, контраст и екту
композиция x Умение задавать
x Дизайн для опре- наводящие во-
деленной ауди- просы для уточ-
тории и с опреде- нения и разъяс-
ленной целью нения задачи
x Планирование x Способность
графики и много- воспринимать и
функционального интерпретиро-
интерактивного вать отзывы
контента в зависи- x Умение пони-
мости от потребно- мать и решать
стей и аудитории проблемы ди-
x Дизайн в соответ- зайна
ствии с требова-
ниями клиента
Проект 3: Веб- x Соблюдение x Обеспечение x Четкая передача Программа Adobe
разработка и и исполне- согласованности идей Photoshop
внедрение ние согласно доступности x Презентация веб- x Изменение раз-
Цели: плану про- x Обеспечение сайта в группе меров изображе-
x Эффектив- екта универсальной x Запись критиче- ний
ная работа в x Соблюдение навигации ских замечаний x Поворот изобра-
команде и исполне- x Интеграция изо- x Предоставление жений
x Клиентский ние согласно бражений, текста значимых отзы- x Кадрирование
дизайн каркасу и и мультимедий- вов, содержащих изображений
прототипу ных объектов не только критику
ЦИФрОВОй дИзайн: ОснОВы Веб-дИзайна 13
Управление Исследование Технические
Дизайн
проектом и общение навыки
x Разработка x Соответствие x Планирование x Умение выслу- Программа Adobe
контента для и исполне- графики и муль- шивать и ин- Dreamweaver
многократно- ние участни- тимедийных объ- терпретировать x Знакомство с ра-
го использо- ками проекта ектов на основе информацию и бочим простран-
вания своих ролей потребностей и отзывы ством программы
x Примене- и обязанно- аудитории x Демонстрация Dreamweaver
ние веб- стей x Создание веб- понимания це- x Настройка веб-
стандартов x Определе- страниц согласно лей редизайна проекта
x Процесс ре- ние задач и веб-стандартам x Проведение ана- x Изменение
цензирования расстановка x Дизайн с помо- лиза юзабилити свойств документа
и редизайна приоритетов щью CSS x Разработка x Работа с пане-
x Доступный x Обработка x Организация тестов контроля лями Вставка
веб-контент выходных страниц с помо- качества (Insert), Файл
Продолжитель- данных и щью CSS (File) и Активы
ность: соблюдение x Знакомство с (Assets)
20–35 часов сроков за- HTML x Добавление изо-
(5–7 недель) вершения x Применение бражений
x Управление основ HTML x Добавление
файлами и x Создание шабло- текста
использова- нов и дизайнов x Создание списков
ние согла- для многократно- x Создание таблиц
шений по го использования x Создание карт
именованию x Адаптация ссылок
файлов контента для x Использование
x Выполнение читабельности шаблонов CSS
цикла рецен- и расстановки x Стилизация тек-
зирования и акцентов ста посредством
редизайна x Дизайн для CSS
x Выполне- различных x Создание и из-
ние тестов устройств менение CSS,
контроля x Учет размера решение проблем,
качества экрана и харак- связанных с CSS
теристик устрой- x Создание шабло-
ства нов
x Достижение со- x Разработка веб-
гласованности сайта для различ-
макета и цветов ных устройств
x Проектирование x Извлечение и
тестов контроля возврат файлов
качества x Добавление ви-
деороликов сред-
ствами HTML5
x Проверка ссылок
x Тестирование с
помощью при-
ложения Adobe
BrowserLab
x Публикация веб-
файлов
14 ОбзОр курса И пОдгОтОВка
Управление Исследование Технические
Дизайн
проектом и общение навыки
Программа Adobe
Fireworks
x Оптимизация
изображений
x Создание кнопок
x Создание пане-
лей навигации
x Создание раскры-
вающихся меню
Проект 4: Веб- x Планиро- x Дизайн единоо- x Изучение и Программа Adobe
портфолио вание и бразных страниц исследование Fireworks
Цели: создание веб- x Дизайн для областей ка- x Оптимизация
x Дизайн портфолио определенной рьерного роста в изображений
электронного x Организация аудитории и с сфере дизайна и x Создание кнопок
портфолио и управление определенной разработки x Создание пане-
x Планирова- контентом целью x Сообщение лей навигации
ние, при- x Создание x Обеспечение информации x Создание раскры-
менение и блок-схем единообразия и определенной вающихся меню
тестирование доступности аудитории x Экспорт файлов
вариантов x Обеспечение x Определение в программу
дизайна веб- универсальной целей и способов Dreamweaver
сайта навигации использования Программа Adobe
x Разработка x Адаптация портфолио Photoshop
контента контента для x Изложение заме- x Изменение раз-
x Единообразие удобочитаемости чаний и обеспе- мера и поворот
дизайна веб- и расстановка чение обратной изображений
сайта акцентов связи Программа Adobe
x Презентация x Написание и Dreamweaver
и отзывы редактирование x Изменение
коллег контента веб- свойств доку-
Продолжитель- сайта мента
ность: x Работа с панелью
5–10 часов Активы (Assets)
(1–2 недели) x Использование
шаблонов CSS
x Стилизация тек-
ста посредством
CSS
x Создание и из-
менение CSS,
решение проблем,
связанных с CSS
x Создание шабло-
нов
x Создание веб-
форм
x Публикация веб-
файлов
