2.3 Проработка макета страниц и визуальное оформление.

Говоря о проработке макетов слайдов презентации следует ознакомится с основными принципами дизайна. Сегодня полки книжных магазинов завалены изданиями о дизайне и дизайнерах. Все крупные издательства мира считают необходимым опубликовать свою версию дизайна. Как пишет автор книги «Дизайн как он есть» Глазычев Вячеслав - российский учёный и общественный деятель, доктор искусствоведения, профессор Московского архитектурного института, член Общественной палаты «влияние определенных теоретических концепций на мышление практиков оказывается сильнее, чем влияние практиков на теорию» [5, c. 3].

При множестве частных определений дизайна, выработанных в западной литературе, наибольшей четкостью отличается определение, принятое в 1964 году международным семинаром по дизайнерскому образованию в Брюгге: «Дизайн – это творческая деятельность, целью которой является определение формальных качеств промышленных изделий. Эти качества включают и внешние черты изделия, но главным образом те структурные и функциональные взаимосвязи, которые превращают изделие в единое целое, как с точки зрения потребителя, так и с точки зрения изготовителя» [5, c. 9].

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

«У каждого человека существуют стереотипы того, что и где он хочет видеть.» – пишет Уэйншенк в своей книге «100 главных принципов дизайна». У большинства людей существует внутреннее представление (ментальная модель) о том, как должны располагаться элементы на компьютерном экране, и о том, что собой должны представлять веб-сайты, которыми они пользуются. Человек разглядывает экран, опираясь на эти ментальные модели. [29, с 26]. Отсюда выводы что размещать важную информацию (или объекты, к которым нужно привлечь внимание) следует в верхней трети экрана или в центре. Нужно избегать размещения любой важной информации по краям экрана, так как туда люди обычно не смотрят.

По данным исследований мы читаем прописные буквы медленнее, но только лишь потому, что они встречаются реже. Большинство текстов содержат как прописные, так и строчные буквы, и мы привыкли к этому. Кроме того, в наше время текст, состоящий только из прописных букв, воспринимается как «кричащий» или требующий дополнительного внимания. Поэтому текст заголовков в презентации не будет писаться прописными. [29, c 46]

От восприятия шрифта зависит понимание текста. В ходе эксперимента Х. Сонг и Н. Шварц в 2008 году давали участникам письменные инструкции о том, как выполнять физическое упражнение. Если инструкции были написаны легким для чтения шрифтом (например, Arial), «подопытные» считали, что на выполнение этого упражнения уйдет около восьми минут и что оно не очень сложное. Они даже высказывали желание включить это упражнение в свою ежедневную тренировку. Но если инструкции были написаны более декоративным шрифтом (например, Brush Script MT Italic), они оценивали время выполнения как вдвое большее — 15 минут, а также считали это упражнение трудным для выполнения (рис. 15.3) и большого желания включать его в свою тренировочную программу не выказывали [29, с. 51]. Из этого эксперимента можно сделать вывод о том, что для нашей презентации нужен простой шрифт. Проект задумывается как публичная презентация, а так же в нем используются большие объемы данных. Шрифт — это то, что не должно отвлекать, а наоборот, должно пояснять в нашей разработке.

Был выбран шрифт Segoe (Рис. 24) — семейство шрифтов стиля гуманистический гротеск, ставшее известным благодаря его использованию компанией Microsoft. Компания использует шрифт Segoe при публикациях в сети Интернет и печати маркетинговых материалов, включая логотипы некоторых продуктов. Входит в поставку операционных систем Windows. Плюсы этого шрифта:

• полная поддержка кириллицы;

• простота форм;

• множество вариантов начертания;

• удобочитаемость;

• шрифт есть на всех компьютерах c операционной системой Windows.

Рис. 24. Шрифт Segoe

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

Рис. 25. Выбранная палитра цветов

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

Рис. 26. Слайд из оригинальной презентации «Минимальные баллы поступивших в вузы Омска»

Слайд с минимальными баллами поступивших в оригинальной презентации (Рис. 26) имел несколько ошибок. Во-первых, текст заголовка не достаточно крупный, чтобы зрители задних рядов смогли его прочитать. Во-вторых, те же проблемы с цифрами таблицы. В новом варианте (Рис. 27) текст читабелен и будет виден даже с задних рядов. Лишние деления убраны, чтобы не перегружать картинку, а информация о цветах и связанных с ними годах сделана крупнее и по центру — так ее легче воспринимать.

Рис. 27. Слайд из новой презентации «Минимальные баллы поступивших в вузы Омска»

Слайд с численностью родившихся так же представляет собой столбчатую диаграмму (Рис. 28). Его суть — показать что рождаемость падает. Такие выводы сделает зритель, поэтому было решено уйти от приевшихся столбиков и визуализировать по-новому, чтобы увидеть тенденцию. В новом дизайне мы соединили пиковые значения и добились общей связанности без ущерба для читаемости (Рис. 29). Так же был взят интервал от 19000 человек до 25000, так как наши значения находятся в этом диапазоне.

Рис. 28. Численность родившихся. Слайд из оригинальной презентации

Рис. 29 Дизайн слайда новой презентации.

Следующий слайд из оригинальной презентации (Рис. 30) – столбчатая диаграмма. Изучив ее, было принято решение визуализировать данные по-другому. Суть этой диаграммы — показать, что ОмГТУ занимает первое место среди вузов по количеству бюджетных мест. Зрителю будет интересно посмотреть на сколько он опережает конкурентов.

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

Была создана круговая диаграмма. Мы ушли от значений и пришли к процентам. Они наглядней показывают что политех — первый среди омских вузов по количеству бюджетных мест (Рис. 31).

Рис. 31. Слайд из новой презентации

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