СПИСОК ПЕЧАТНЫХ ИСТОЧНИКОВ

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

Бакалавра

 

Мультимедийная информационно-познавательная презентация «Динамическая типографика»; проектирование и разработка

 

Выполнил студент группы	Худякова Алина Александровна
ФИТ/БО121-4/1	_______________________________________________________ (подпись, дата)
Направление подготовки (специальность)	54.03.01. Дизайн
Профиль подготовки (специализация)	Графический дизайн
Форма обучения	очная
Научный руководитель	Яковлев К.С. Канд. филол. н., доцент
	________________________________________________________ (ученая степень, ученое звание, должность, ФИО. подпись, дата)

 

 

Санкт-Петербург

2017

 

Оглавление

Введение. 4

Глава I. Системный анализ мультимедийных информационных систем в образовательной сфер. 10

1.1 Классификация мультимедийных информационных систем в образовательной сфере. 10

1.2 Особенности проектирования и этапы создания мультимедийных ИС в образовательной сфере. 11

1.3 Общая характеристика мультимедийных презентаций. 12

1.4 Обзор и характеристика информационных систем-аналогов. 13

Анализ печатных изданий. 13

1.4.1 Книга «Живая типографика» Александры Корольковой. 13

Анализ мультимедийных систем. 13

1.4.2 Мультимедийная презентация «Динамическая типографика» Раскатовой Д. А. 13

1.4.3 Мультимедийная презентация «Основы типографики» Олоева Д. Д. 14

1.4.4 Мультимедийная презентация «Динамическая инфографика» Трубинской В. М. 15

1.4.5 Видеоролик «FROM PAPER TO SCREEN», автор Thibault de Fournas. 16

1.4.6 Видеоролик «A Brief History of Title Design», автор Ian Albinson. 17

1.4.7 Видеоролик «A History Of The Title Sequence», автор Jurjen Versteeg. 18

Анализ сайтов. 19

1.4.8 Сайт агентства Make Me Pulse. 19

1.4.9 Сайт-портфолио Bepatrickdavid. 20

Выводы по I главе. 21

Глава II. Техническое задание и технико-рабочий проект. 22

2.1 Техническое задание. 22

2.1.1 Общие сведения. 22

2.1.2 Назначение и цель создания. 22

2.1.3 Основание для разработки. 22

2.1.4 Источники разработки. 22

2.1.5 Цели создания системы.. 23

2.1.6 Технические требования. 23

2.1.7 Конструктивные требования. 24

2.1.8 Технологические требования. 25

2.1.9 Эстетические требования. 25

2.1.10 Эргономические требования. 26

2.1.11 Эксплуатационные требования. 26

2.2 Технико-рабочий проект. 27

2.2.1 Разработка состава и структуры.. 27

2.2.2 Сбор текстовых, графических и организационных данных. 27

2.2.3 Разработка структуры содержания. Построение блок-схемы.. 27

Выводы по II главе. 28

Глава III. Проектирование и реализация. 29

3.1 Реализация интерфейсных возможностей. 29

3.1.1 Модульная сетка. 29

3.1.2 Стилистика цвета. Колористическое решение. 29

3.1.3 Размер и вид шрифта. 30

3.1.4 Реализация навигационной схемы проекта. 30

3.2 Инструментальные средства поддержки разработки. 30

3.2.1 Возможности инструментальных средств поддержки разработки, обеспечившие авторский вид проекта. 30

3.2.2 Программирование Action Script на основе Adobe Flash CS6 Professional 31

3.3 Структура работы.. 32

3.4 Создание образа и стиля. 35

Выводы по III главе. 37

Заключение . 39

Список использованных источников . 43

Приложение . 48

Введение

Актуальность

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

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

Истоками динамической типографики считается кинематограф. Популярность к этому направлению пришла в 1960-е, когда в культовых фильмах Альфреда Хичкока стали использоваться анимированные титры. Мастером дизайна титров к фильмам того времени является Сол Басс. Он считал, что титры – это неотъемлемая часть фильма, поэтому в его работах заложена идея, образ, который символизирует всю кинокартину.

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

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

Мультимедиа технологии являются молодой областью информационных технологий, однако они быстро набирают популярность благодаря широкому спектру возможностей и удобству их использования. С помощью мультимедиа можно представлять абсолютно любой материал, от информационных и обучающих систем до игровых интерактивных презентаций. Такие проекты позволяют включать в себя различные формы информации: текст, изображения, аудио и видео. Грамотное сочетание этих форм добавляет проекту эмоциональную окраску, при помощи которой процесс взаимодействия пользователя с системой становиться более увлекательным. Еще одно важное преимущество мультимедийных систем – это использование интерактива. Благодаря такой особенности можно добиться игровой составляющей, что приводит к лучшей запоминаемости информации.

Степень изученности проблемы

Мультимедийные технологии используются в различных сферах деятельности, и с каждым годом их популярность только возрастает. Это обусловлено широким спектром возможностей мультимедиа приложений. Они включают в себя несколько различных технологических средств, воздействующих на зрителя, таких как текст, изображения, видео, звук и анимация. Когда мы соединяем эти средства, то представляемая информация выглядит интереснее. Мультимедиа задействует визуальный и слуховой канал, а значит максимально взаимодействует с пользователем. Этому также способствует возможность использования разнообразных интерактивных элементов. Кроме этого мультимедиа позволяет структурировать информацию, делая ее изучение максимально комфортным. Об эффективности использования мультимедиа технологий писали многие авторы, среди них можно выделить Н. И. Дворко [9], А. И. Каптерева [14], О. В. Шлыкову [38] и А. А. Деникина [10].

Книг по динамической типографике в настоящее время практически нет, однако существует большое количество изданий по книжной, статичной типографике. В основном, эти издания зарубежных авторов, однако, большинство этих книг переведены и доступны для русскоязычной аудитории. Одними из самых известных и рекомендованных к изучению дизайнерам изданий считаются: «Живая типографика» Александры Корольковой [20], «Новая типографика» Яна Чихольда [37], «Типографика» Эмиля Рудера [26]. Из этих книг можно узнать все об основах типографики, ее основных принципах и правилах использования.

Но даже Александра Королькова в своей книге писала, что «главная проблема типографики в России в том, что ее почти нет. Уровень шрифтовой и типографической культуры, к сожалению, очень низкий, в том числе у графических дизайнеров. Одна из причин этого, вероятно, недостаток информации» [20, c. 9]. Она говорит, что большинство книг на русском языке, это переведенные англоязычные издания, которые не затрагивают работу с кириллицей или содержат только базовую, давно известную информацию и не рассказывают о современных технических возможностях. Но еще хуже обстоят дела и с источниками по динамической типографике. Есть электронный ресурсы, которые рассказывают об этом направлении, но большинство из них англоязычные. Крайне сложно найти качественный контент на русском языке. Это становится серьезной проблемой для многих начинающих дизайнеров, которые хотят изучить динамическую типографику.

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

Объект исследования

Объектом дипломного проектирования являются мультимедийные средства и технологии, используемые в сфере образования.

Предмет исследования

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

Цель работы

Целью работы является создание информационно-познавательной мультимедийной презентации «Динамическая типографика» и демонстрация основных анимационных приемов, используемых для создания динамической типографики, а также обучение студентов при помощи данной презентации.

Основные задачи

1. Собрать и проанализировать материал по теме динамической типографики, систематизировать его.

2. Изучить аналоги информационных систем (веб-ресурсы, мультимедийные презентации), а также видеоролики со схожей тематикой. Выявить их преимущества и недостатки.

3. Выявить особенности целевой аудитории.

4. Составить техническое задание.

5. Разработать сценарии и эскизы к каждому разделу проекта.

6. Разработать дизайн разделов, который бы соответствовал тематике и правилам эргономики.

7. Разработать мультимедийную информационно-познавательную презентацию, используя технические средства такие, как: Adobe Flash Professional CS6, Adobe Photoshop CS6, Adobe Illustrator CS6, Adobe After Effects CS6.

8. Провести юзабилити тестирование проекта, с целью выявления и устранения недостатков.

Практическая значимость

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

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

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

Методы исследования

В ходе работы над дипломным проектом были использованы следующие методы:

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

2. Систематизация – деление информации на логические фрагменты.

3. Классификация – распределение материала по отдельным группам в соответствии с заданной тематикой и дальнейшего распределения в презентации.

4. Обобщение – выявление общих свойств и признаков, по которым следует разделить ресурс на разделы, и исключить неактуальную или устаревшую информацию.

5. Объектное моделирование – описание объекта, его функции и способы взаимодействия с пользователем при помощи языков программирования.

Структура дипломного проекта

Теоретическая часть включает в себя введение, три главы, заключение, список используемой литературы и приложения с иллюстративным материалом.

Презентация делится на три основных раздела: «Дизайнеры», «Элементы» и «Примеры». Каждый раздел имеет подразделы.

ГЛАВА I. СИСТЕМНЫЙ АНАЛИЗ МУЛЬТИМЕДИЙНЫХ ИНФОРМАЦИОННЫХ СИСТЕМ В ОБРАЗОВАТЕЛЬНОЙ СФЕР

1.1 Классификация мультимедийных информационных систем в образовательной сфере

Как писала Н.И. Дворко, «Современный уровень развития интерактивных мультимедиа свидетельствует о потенциальной возможности нового средства массовой коммуникации занять достойное место среди аудиовизуальных искусств» [9, с. 7]. Эту мысль доказывает то, что уже сейчас мультимедийные информационные системы широко применяются в разных сферах, а особенно в сфере образования. Примером являются веб-сайты и мультимедийные презентации.

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

Также популярны образовательные сайты, например, интернет-ресурсы для изучения иностранного языка. На таких сайтах часто используют интерактивные приемы, чтобы ускорить и улучшить качество обучения. Один из таких ресурсов сайт Lingualeo (https://lingualeo.com/ru). На этом сайте представлено большое количество различных заданий, которые используют всевозможные виды информации. Есть видеоролики, после просмотра которых нужно выполнять задания, есть примеры с использованием аудио, многие задания представлены в виде тестов. Но большинство этих заданий сделаны в игровой форме, поэтому обучение на этом сайте проходит как развлечение, а информация при таком подходе запоминается лучше.

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

Преимущества мультимедийных технологий:

1. может содержаться различная информация;

2. наглядность материала;

3. особенностью является интерактивность, взаимодействие программы с пользователем, что позволяет человеку самостоятельно выбирать путь просмотра или использования продукта;

4. элемент игры, который помогает быстрее усваивать материал;

5. универсальность и доступность.

1.2 Особенности проектирования и этапы создания мультимедийных ИС в образовательной сфере

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

Анализ целевой аудитории – первый из этапов проектирования. От целевой аудитории, на которую рассчитан проект, зависит многое. Это и выбор стилистики, и способ подачи информации, а также ее вид и количество. В данном случае, целевая аудитория – это студенты. Это значит, что информация может быть более сложная, однако ее важно подавать современно, динамично и с юмором.

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

1.3 Общая характеристика мультимедийных презентаций

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

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

Так как мультимедиа технологии появились в современной жизни недавно, существуют различные определения для этого феномена.

Шлыкова О. В. определяет мультимедиа как «средство предоставления информации с помощью объединения множества воспринимаемых человеком сред (аудиальное, визуальное и кинестетическое воздействие), управляемых интерактивным программным обеспечением» [38, с. 263].

Также есть мнение, что «современное мультимедиа-произведение по своим изначальным общеэстетическим установкам близко к традиционным видам искусства» [40, с. 324]. В то же время некоторые исследователи утверждают, что это «очень молодой вид искусства», «во многом искусство мультимедиа еще не стало искусством, а переживает тот же период трюка и эксперимента, что и ранний кинематограф» [40, с. 38].

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

Так как в мультимедиа проекте многое зависит от поведения пользователя, разработчику нужно обладать различными навыками, чтобы презентация была максимально удобна в использовании.

1.4 Обзор и характеристика информационных систем-аналогов

Анализ печатных изданий

1.4.1 Книга «Живая типографика» Александры Корольковой

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

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

Анализ мультимедийных систем

1.4.2 Мультимедийная презентация «Динамическая типографика» Раскатовой Д. А.

(Приложение 1)

Презентация начинается с короткой, но достаточно динамичной и чистой заставки, которая трансформируется в основное меню. Заставка выполнена в цветах презентации и соответствует стилистике. Анимация сопровождается ненавязчивым звуковым эффектом.

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

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

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

1.4.3 Мультимедийная презентация «Основы типографики» Олоева Д. Д.

(Приложение 1)

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

В нижней части экрана расположено меню, которое состоит из пяти основных разделов: «Из истории», «Техника», «Типографика», «Производство», «Литература». Так как каждый раздел содержит по несколько подразделов, рядом находится кнопка «Карта», которая открывает меню со всеми подразделами, на отдельной странице, что очень удобно.

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

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

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

1.4.4 Мультимедийная презентация «Динамическая инфографика» Трубинской В. М.

(Приложение 1)

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

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

Второй раздел «Мастер-класс» состоит из трех подразделов: «Быстрое восприятие», «Звук», «Методы выразительности». В этих подразделах рассказывается об основных приемах, за счет которых создается инфографика.

Модульная сетка в презентации не явная, но она присутствует. Все объекты хорошо скомпонованы, несмотря на постоянные динамические переходы и анимацию.

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

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

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

Анализ видеороликов

1.4.5 Видеоролик «FROM PAPER TO SCREEN», автор Thibault de Fournas

(Приложение 1)

Видеоролик, в котором рассказываются базовые понятия типографики. Рассказ ведется от простого к сложному. Используется ненавязчивая цветовая гамма: черный на светло-бежевом. Это помогает максимально использовать форму букв, слов и текстов. Есть приемы, использующие негативное пространство, что выглядит очень эффектно.

Анимация не быстрая, но очень точная, движение элементов визуально очень приятны. Для каждого правила типографики найден подходящий анимационный прием. Между разными правилами используются продуманные переходы. Каждая композиция интересно трансформируется в другую, что делает просмотр более увлекательным.

Автор удачно использовал дизайн известных титров, которые качественно изменил. Несмотря на то, что текст в тирах изменен на текст ролика, пользователь всегда узнает из какого фильма та или иная вступительная заставка. Это погружает в историю развития динамической типографики.

Звуковое сопровождение изменяется в зависимости от того, что на экране. Когда в ролике рассказывается о правилах и основных понятиях типографики играет плавная классическая музыка, а когда начинается вырезка из известных титров, начинает играть музыка времени создания этих титров.

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

1.4.6 Видеоролик «A Brief History of Title Design», автор Ian Albinson

(Приложение 1)

Ролик используется как реклама веб-ресурса, посвященного титрам к кинофильмам и насчитывающего всю коллекцию, начиная от первых кинокартин – Art of the Title (artofthetitle.com).

Ролик представляет собой нарезку из самых культовых заставок к фильмам, которые чередуются в хронологическом порядке. Так как динамическая типографика берет свет начало из титров, то это видео было очень полезно для понимания линии развития этого вида искусства.

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

1.4.7 Видеоролик «A History Of The Title Sequence», автор Jurjen Versteeg

(Приложение 1)

Представленный ролик рассказывает об истории развития тиров, а именно о самых известных личностях, дизайнерах, которые внесли наибольший вклад в это искусство.

Ролик представляет собой реально снятые объекты в месте, похожем на мастерскую, поверх которых наложена анимация. Соединение видео и анимации выглядит интересно и необычно, хотя такой прием используется довольно часто. Все анимационные находки органично вписываются в видеоряд.

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

В ролике используется плавная, ненавязчивая музыка, которая полностью соответствует происходящему на экране и поддерживает создаваемый образ.

Ролик производит положительное впечатление, так как сделан очень качественно и построен на интересных анимационных приемах, за сменой которых интересно наблюдать.

Анализ сайтов

1.4.8 Сайт агентства Make Me Pulse

2016.makemepulse.com

(Приложение 1)

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

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

Каждая работа выполнена в уникальной стилистике, к которой подобран соответствующий интерактив и анимационные приемы. А так как вся система взаимодействует с пользователем и каждый элемент интерактивен, пользователь максимально погружается в просмотр работ.

Сайт выполнен в черно-белой цветовой гамме. Фоном служит темно серый цвет, который создает ощущение таинственности. Это настроение поддерживается звуковым сопровождением, управлять которым можно соответствующим элементом, который располагается внизу страницы. Там же находятся ссылки на социальные сети.

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

1.4.9 Сайт-портфолио Bepatrickdavid

bepatrickdavid.com

(Приложение 1)

Сайт-портфолио, который представлен одной страницей, на которой расположена вся необходимая для пользователя информация, знакомит пользователя с веб-дизайнером и его работами.

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

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

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

На сайте практически нет анимации, за исключением загрузки сайта и первом его появлении, но ко всем элементам применен эффект параллакса, благодаря которому создает пространство.

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

Выводы по I главе

Проанализировав аналоги и выявив их достоинства и недостатки, при создании информационно-познавательной презентации «Динамическая типографика» нужно учесть следующее:

· Использовать модульные сетки;

· Придерживаться единой стилистики;

· Использовать динамику даже на небольших участках;

· Максимально использовать интерактивные элементы;

· Использовать качественное звуковое сопровождение и синхронизировать его с анимацией;

· Грамотно работать с текстом, избегать больших блоков;

· Работать с формой и пространством, находить необычные решения;

· Организовать удобную навигацию.

 

 

ГЛАВА II. ТЕХНИЧЕСКОЕ ЗАДАНИЕ И ТЕХНИКО-РАБОЧИЙ ПРОЕКТ

2.1 Техническое задание

2.1.1 Общие сведения

1. Разрабатываемая мультимедийная информационно-познавательная презентация «Динамическая типографика».

2. Срок начала работ 8 сентября 2016 года.

Срок окончания работ 28 мая 2017 года.

3. График выполнения работ представлен в календарном плане работ (Приложение 3).

2.1.2 Назначение и цель создания

Данная мультимедийная учебно-познавательная презентация рассчитана на начинающих дизайнеров. Целевой аудиторией являются студенты дизайнерских вузов.

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

2.1.3 Основание для разработки

Возможным заказчиком может быть учебное заведение, где преподается дисциплина «Динамическая типографика» или «Анимационное проектирование».

2.1.4 Источники разработки

Источники для разработки – это перечень печатных и электронных изданий на русском и английском языках, которые были использованы при подготовке материала.

Все элементы интерфейса и интерактивные элементы были спроектированы и отрисованы автором.

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

Видеоматериал был отобран с различных интернет-сайтов, за исключением роликов-переходов, которые являются необходимой частью дизайна презентации. Они были также созданы автором.

Звуковые эффекты были взяты с различных интернет-ресурсов.

2.1.5 Цели создания системы

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

2.1.6 Технические требования

Для разработки мультимедийной презентации необходим персональный компьютер или ноутбук:

· Дисплей с разрешением не менее 1024x768

· Мышь

· Клавиатура

· Колонки для воспроизведения музыки и звуков презентации

Технические характеристики устройств должны быть не ниже следующих:

· Видеокарта NVIDIA GeForce GT 630M

· Процессор Inter Core i5-3230M CPU 2.60GHz

· Оперативная память DDR3 4Gb

· Звуковая карта

· 1 Gb на жестком диске

· Программное обеспечение:

· Операционная система Windows 7\8\10\Vista

· Adobe Flash CS6 Professional

· Adobe Photoshop СS6

· Adobe Illustrator СS6

· Adobe After Effects CS6

· Microsoft Word 2010

· VLC Media Player

· Media Player Classic

2.1.7 Конструктивные требования

Мультимедийная информационно-познавательная презентация «Динамическая типографика» состоит из трех основных разделов: «Дизайнеры», «Элементы» и «Примеры». Первые два включают в себя теоретическую информацию, которая сопровождается изображениями, интерактивными или анимационными примерам, а также видеороликами. Раздел «Примеры» представляет собой галерею работ, связанных с динамической <