12 принципов визуальной иерархии (часть 2)

Автор перевода: Константин Бугайчук

Первая часть тут: http://e-lpro.blogspot.com/2017/09/12-1.html или в блоге автора.

Оригинал статьи о дизайне и цветах: http://blog.visme.co/visual-hierarchy

Шрифты организуют дизайн

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

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

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

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

Пространство обеспечивает акцент и движение

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

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

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

Модели сканирования страниц

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

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

(помните почему провалилась эта реклама колы? - Б.К,)

F-Patterns

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

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

Z-Patterns

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

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

Близость элементов предполагает общность (связь)

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

Подумайте о белом экране с группой из пяти точек на одной стороне и одной точкой на другой стороне. Наше первое предположение всегда будет состоять в том, что пять - это действительно группа.

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

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