Конспект майстер-класу Наді Кельм на Школі інфографіки від Інтерньюз-Україна та Texty.org.ua (27-30 вересня 2012)

1. Основные
принципы
графического
дизайна

2. Пространство
Понятие пространства в современном искусстве (а значит и дизайне) полностью переосмыслили
художники импрессионисты, начав использовать пустое пространство вокруг предметов как еще
один элемент.
В современном дизайне пассивность пространства определяется только уровнем его
наполненности элементами композиции.
Распределение пустого пространства между элементами композиции в значительной мере влияет
на их восприятие. Тут работают принципы Гештальта, (если вы еще не знакомы с ними, начните с
очень хорошей статьи о гештальтпсихологии в Википедии) возникшие из исследования восприятия.
Вот их перечень:
• близость (стимулы, расположенные рядом, имеют тенденцию восприниматься вместе),
• схожесть (стимулы, схожие по размеру, очертаниям, цвету или форме, имеют тенденцию
восприниматься вместе),
• целостность (восприятие имеет тенденцию к упрощению и целостности),
• замкнутость (отражает тенденцию завершать фигуру так, что она приобретает полную форму),
• смежность (близость стимулов во времени и пространстве. Смежность может предопределять
восприятие, когда одно событие вызывает другое),
• общая зона (принципы гештальта формируют наше повседневное восприятие наравне с
научением и прошлым опытом. Предвосхищающие мысли и ожидания также активно руководят
нашей интерпретацией ощущений).
Наш глаз вначале видит белый цвет и уже потом черный. Этот эффект активно используется в
уличной навигации, поскольку крупные лаконичные светлые надписи на темном фоне интенсивнее
привлекают внимание, чем черные на белом.
Однако следует помнить, что этот же эффект так называемой «выворотки» в формате газеты
делает ее чтение практически невозможным.
Так проявляется зависимость активного элемента от контекста.
Чем выше контрастность – тем явнее смысловой шум.
Рисунок ниже – пример из книги Эдварда Тафти. Он приводит схему сигналов и свой вариант
ее усовершенствования: как видите, он убрал жирные черные рамки вокруг фигур, тем самым
устранив лишний смысловой шум, создаваемый белым пространством между черными рамками.

3. Намеренное обыгрывание вторичного смысла, создаваемого пустым пространством.
Вторичный смысл в этом случае незапланирован, а значит нежелателен.

4. Пустота может создавать дополнительный, «несуществующий» элемент. практике, таким образом
можно заменить разнообразные рамочки.

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

6. Пропорции
Соблюдение пропорций – это выстраивание отношений между разновеликими элементами.
Существуют различные системы, как золотое сечение или система пропорциональных чисел.
Однако ни одна из них не стала универсальной.
Золотая пропорция это число 1,618. Если вы с ней не знакомы, советую вам подробнее
самостоятельно изучить этот вопрос.
http://www.goldenmuseum.com/0801Proportion_rus.html
http://www.photoline.ru/tcomp1.htm
Полезный сайт – онлайн калькулятор золотого сечения
http://goldenratiocalculator.com/
Также классическими считаются пропорции 1,41 (отношение стороны квадрата и его диагонали)
и простые рациональные пропорций (1:2, 2:3, 3:4, приближенное к золотому сечению 5:8, 5:9).
Для классических пропорций помимо этих чисел, характерны статика, отсыл к пропорциям
человеческого тела, центральная ось и симметрия.
Сегодня актуален совершенно противоположный подход, который был четко сформулирован
художниками абстракционистами.
«Всякая симметрия должны быть исключена.»
Пит Мондриан.
Современные пропорции отображают динамику, играют на контрасте.
Одной из самых популярных современных адаптаций золотого сечения стало так называемое
правило третей. Оно заключается в разделении квадрата (или прямоугольника) на три равные части
по горизонтали и по вериткали. Пересечения линий считаются визуальными центрами.
Вот как правило третей работает в дизайне (на примере верстки каталога): на следующем рисунке
слева видим исходную страницу, разбитую на три равные части по горизонтали и по вертикали и
варианты композиционного решения, согласно этой разбивке. Справа готовые решения верстки,
согласно схеме слева.

7. Благодаря различным вариантам расстановки элементов на одном и том же каркасе можно
изобразить как статику так и динамику.

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

9. Подробнее остановимся на понятии конртаста, как на основополагающем в современном
отношении к пропорции.
Суть контраста в противопоставлении простейших понятий: линии и точки, плоскости и линии,
большого и маленького, движения и статики. Вот несколько примеров:
1. противопоставление линии и отрезков, образующих плоскость;
2. плоскости и линейности буквы L;
3. линия и плоскость в чистом виде – элементы усиливают друг друга;
4. округлость буквы О и прямоугольность плоскости фона;
5. линия и плоскость, прямая и круг;
6. контраст плоскости и линии в шрифте.

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

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

14. Цвет
Существует множество цветовых систем, цель которых систематизировать цвет для большего
удобства пользователя. Однако по сути параметров у цвета всегда остается три:
-насыщенность
-яркость
-тон
Знаменитый картограф Эдуард Имхоф за долгую практику вывел несколько правил работы с
цветом на микроуровне.
Правило первое: несколько больших ярких плашек рядком — это чудовищно. Но если использовать
яркие цвета фрагментарно или же комбинировать их с чем-то бледненьким, может получиться
очень даже хорошо. “Шум это не музыка. Только пиано делает форте и крещендо возможным,
также и яркие штрихи хороши только на бледном фоне”. Сама организация земного пространства
подталкивает нас к использованию дизайнерских решений такого рода в картографии. Любые
экстремумы, например, наивысшие горные точки или океанские глубины, минимум и максимум
температур, как правило занимают очень небольшие области. Ограниченное использование ярких
цветов — красота. Большие цветные плашки рядом все только испортят.
Правило второе: использование ярких цветов подряд как правило дает неприятные результаты,
особенно, если цвета используются на больших пространствах.
Третье правило: Подложки и большие области цвета стоит делать спокойными, нейтральными,
сероватыми, так чтобы на их фоне могли выделяться небольшие яркие области. Именно по этой
причине в живописи особенно ценится серый, один из самых симпатичных и самых важных и
универсальных цветов. Приглушённые цвета, смешанные с серым — это лучшие фоны в любой
цветовой схеме. Все это справедливо и для картографии.
Четвертое правило: Если на картинке больше одного крупного пятна одного цвета, то картинка
визуально распадается. Однако, единство можно восстановить, если цвета одной области плавно
смешиваются с цветами другой, если цвета связаны, переплетены наподобие ковра. Природа земной
поверхности такова, что изобразить её можно только цветными пятнами. Это острова, озёра и реки,
низины и возвышенности и т.д. Эти объекты нередко встречаются и на тематических картах, чем
усложняют интерпретацию и провоцируют повторы.
Эдуард Имхоф “Картографическое представление рельефа”, Берлин,1982.
Как же не ошибиться в подборе цветов для инфографики? Эдвард Тафти рекомендует пользоваться
тем, что нам предложила природа, называя это беспроигрышной стратегией, особенно он обращает
внимание на светлые оттенки голубого, жёлтого и серого. Такие цвета не раздражают глаз.
Натуральная цветовая палитра помогает избежать слишком яркого, безвкусного цветового мусора.

15. Цветом мы не просто заявляем объекты на плоскости, но и разделяем их с его помощью.
Используя более одного цвета стоит помнить об эффектах, производимых цветами друг на друга.
Так к примеру один и тот же цвет воспринимается глазом как два разных, на разных фонах.
И совсем как фокус смотрится обратный эффект: два разных цвета на разных фонах
воспринимаются как один:
Этот эффект называется вычитание цветов: любой фон вычитает свой собственный тон из
цветов, которые на нём расположены, и, как следствие, находятся под его влиянием. Вы видете, как
по-разному на самом деле выглядят эти цвета.
Выработывайте у себя чувство цвета, подражая лучшим колористами, к примеру: Жан Батист
Симеон Шарден, Тулуз Лотрек, Михаил Врубель, Альфонс Муха. Научный подход к использованию
цвета был у абстракционистов: Василий Кандинский, Казимир Малевич.
Одним из ключевых источников вдохновения для европейских художников начала ХХ-го века
стала восточная живопись.
Сегодняшний день предлагает нам различные интернет-ресурсы, посвященные вопросу цвета:
http://www.colourlovers.com/
http://colorschemedesigner.com/

16. Кодирование
Единство и постоянство дизайна, достигается за счет понимания того, что каждая работа – это
система, с принятыми условными обозначениями. Элементы с которыми вы работаете (слова, числа,
понятия, образы) – все они представляют собой элементы послания, которое вы хотите донести, и
ваш успех зависит от умения правильно расставить и проакцентировать эти элементы.
Французский картограф Жак Бертин (Jacques Bertin) попробовал теоретизировать такой
процесс кодирования информации в визуальное послание и в 1973 году опубликовал теорию того,
что он назвал «графическими переменными». Он выделил основные характеристики визуальной
информации – место, размер, тон серого, текстура, ориентация, цвет и форма – и соотнес их друг
с другом.
Его идея заключалась в том, что каждому объекту на графическом произведении можно назначать
эти переменные. Близость этих значений определяет схожесть объектов друг с другом и наоборот.

17. Теорию графических переменных развил Пол Майксенар (Paul Mijksenaar) знаменитый
инфографик, автор книги «Visual function». Он адаптировал ее для графического дизайна.
Графические переменные для таких элементов согласно Майксенару сводятся в следующую таблицу:
На досуге попробуйте разобрать и переработать любой понравившийся и непонравившийся вам
дизайн по этой схеме:
1. Выпишите все элементы графического произведения
2. Логически сгруппируйте их в зависимости от функций
3. Назначте различительные переменные каждой группе
4. Назначте иерархические переменные элементам внутри группы
5. Введите вспомогательные элементы, чтобы акцентировать и организовать предыдущее.
И помните, что при всей заманчивости такой универсальной схемы, это всего лишь один из
способов, который в одном случае – панацея, а в другом – палка в колесе.

18. Графические переменные:
цвет
Различительные
тип шрифта
Иерархические
ширина колонки
Вспомогательные
позиция на странице
размер шрифта
текстовые атрибуты
линии и блоки области цвета
и однотонности

19. Частые ошибки
• Использование цвета там, где в нем нет необходимости: лучше черные буква на белом фоне, чем
попугайская расцветка.
• Использование большого количества цветов. Лучше использовать оттенки или другие приемы
разделения: текстура, форма и т.п
• Непродуманное сочетание цветов.
• Слишком дробная или слишком гиперболизированная подача данных. Чтобы избежать
этого, определитесь на каком уровне вы работаете, микро или макро: карта и плакат требуют
противоположных подходов – карту мы рассматриваем подолгу вблизи, плакат – мимоходом
издалека.
• Бессмысленные эффекты.
• Неочевидный смысл вашего визуального послания. Завуалированный смысл – удел искусства,
дизайн должен быть логичным. Вначале продумайте схему: распределите все компоненты по группам,
определите иерархию, убедитесь в логичности вашей схемы, а уже потом думайте об эстетике, а не
наоборот, подгоняя удачную картинку (подбор цветов, набор элементов, решение части задачи) под
существующую задачу – двигайтесь от большего к меньшему.
• Украшательство. Избегайте излишней стилизации и узоров ради узоров.
• Стилистический разнобой: сразу определитесь с направлением, упростите себе задачу – сузьте
рамки выбрав для начала шрифт и цветовую гамму. Все способы разделения информации в одной
работе не должны выходить за эти рамки.
• Просто, но не примитивно: простота – это не меньшее количество элементов, а наиболее логичное
их расположение. Примитивность – это упрощение за счет смысла.
• Невыделение важного. Важная информация должна быть выделена – это и есть цель вашего
дизайн-решения.

20. Самообучение
Практика. Придумывайте себе задания сами. Используйте любой повод - день рождения друга,
объявление с просьбой, чтобы закрывали двери, систематизация данных из вашей повседневной и
т.п.
Живое общение и конструктивная критика. Для этих целей прекрасно подходят интернет-
сообщества. Несколько ссылок:
(http://www.behance.net/, http://revision.ru/, http://www.deviantart.com/)
Регулярно выкладывайте свои работы. Отслеживайте работы понравившихся вам и признанных
большинством.
Насыщайте себя лучшим визуальным материалом, для этого создайте свою базу ссылок. Вот
несколько интересных:
http://kak.ru/columns/serov
http://www.typetester.org/
http://www.typeconnection.com/
http://habrahabr.ru/hub/typography/
http://www.aisleone.net/categories/design/
http://www.flickr.com/photos/ffranchi/
http://swisslegacy.com/
http://visual.ly/
http://www.good.is
http://oberhaeuser.info/
Читайте:
Эмиль Рудер «Типографика»
Эдвард Тафти «Представление информации» (http://envisioninginformation.daiquiri.ru/)
Paul Mijksenaar «Visual Function»
Robert Bringhurst «The elements of typographic style»
Кандинский «Точка и линия на плоскости», «О духовном в искусстве»
Пауль Клее «Творческая исповедь», «Педагогические эскизы»

21. Контакты
Надя Кельм
nadja.kelm@gmail.com