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 Публикация веб- файлов