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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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