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

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

Часть первую читайте здесь: http://bugaychuk.blogspot.com/2017/09/12-1.html

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

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

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

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

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

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

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

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

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

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

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

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

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

F-Patterns

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

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

Z-Patterns

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

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

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

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

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

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

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

Продолжение следует...

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

Начинаю перевод статьи о дизайне и цветах: http://blog.visme.co/visual-hierarchy

Размер влияет на видимость

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

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

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

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

Перспектива создает иллюзию глубины

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

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

Цвет и контраст привлекают внимание

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

Рассмотрим приведенную выше схему. Обратите внимание, как цвет привлекает гораздо больше внимания, когда естественные тона были выделены неоновой окраской? Эта цветовая схема известна как дуэт, все более популярный тренд веб-дизайна. 

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

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

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

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

Диаграмма глубины цвета

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

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

Продолжение следует...