Психология контраста: как разумно использовать контраст в своем дизайне

На вопрос о контрасте некоторые из моих друзей отвечали: "Черный и оранжевый —  контрастные цвета", "Контрастная [цветная] одежда лучше смотрится", "В общем, контраст означает противоположность".

Конечно, все это правильные ответы. [По данным Google] Контраст — это явление, когда что-то разительно отличается от чего-то другого, в сопоставлении или тесной связи друг с другом. Хотя эта идея распространяется практически на все области, связанные с человеческой интерпретацией, мы часто ограничиваем ее только цветами и визуальными образами. А что, если я скажу…

Контрастность отвечает за то, какой бутерброд вы выберете себе на обед: “открытый” (как Дядя Федор) или “закрытый” (и называете его “Сэндвичем”). Контраст — это причина, по которой вы джемите под свои песни именно так, как вы это делаете. Контраст — это причина, по которой вы тратите слишком много денег, не осознавая этого.

Давайте разберемся в контрасте на нескольких практических примерах, распространяющихся на самые разные области.

Практические примеры

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

2. Музыкальные продюсеры часто сочиняют свою музыку и мелодии, используя то, что они называют Единством и Контрастом. Композиторы должны сначала сосредоточиться на создании единства, затем разбить его небольшим контрастом — и когда это надоест, вернуться к созданию единства —  на самом деле лучшие композиции развивают единство и контраст одновременно.
   

3. Даже маркетологи и продавцы широко используют Принцип Контраста в своих интересах (описано в следующем разделе).
   

4. Здесь также приведены некоторые аппетитные примеры. Сочетание хрустящего и мягкого в таких продуктах питания, как сэндвичи или вафли; Oreos в нежнейшем гладком шоколаде и т.д. — очень всеми любимы. Вспомните массу продуктов с контрастными ингредиентами!
   

Итак, контраст универсален и хорошо применим не только в области искусства и дизайна. Но почему он работает?

Как это работает? — Понятие Якоря

Принцип контраста — Проще говоря, если второй предмет сильно отличается от первого, мы будем склонны воспринимать это отличие еще сильнее, чем оно есть на самом деле. Ну, на данный момент это вполне очевидно.

На этом изображении человеческий разум неизбежно воспринимает оттенок на левом конце внутренней полосы более светлым, чем на правом. Это происходит потому, что мы не можем не сравнивать их с градиентом фона и, следовательно, воспринимаем один и тот же оттенок серого как более светлый на темном фоне и наоборот — очевидный пример Принципа Контраста. Одно из объяснений этому — Эффект Якоря (или Эффект Привязки).

Якорь

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

Рассмотрим приведенную выше оптическую иллюзию. Фоновый градиент задает якорь, и мы сравниваем внутреннюю полосу с цветом фона в разных точках, создавая иллюзию наличия оттенков во внутренней полосе, хотя она состоит только из одного сплошного цвета.

Еще несколько интересных примеров для лучшего понимания.

1. То, как мы едим ломтик хлеба, является классическим примером эффекта привязки. Например, когда мы едим хлеб с неотрезанной корочкой. По опыту мы знаем, что корочка  — это худшая часть, а мякиш — лучшая.  Мы целенаправленно начинаем и продолжаем кушать со стороны корки и постепенно переходим к тому, чтобы оставить мякиш на конец, тем самым устанавливая якорь с наихудшим опытом и еще больше усиливая лучший. И мы с радостью распространяем этот метод на ряд продуктов, просто задумайтесь! Нет, теперь Ваша жизнь никогда не будет прежней!

1. Другой понятный пример —  Beat drops (бит-дроп или падение ритма) в музыке. Контрастное свойство бит-дропов является огромной причиной их популярности, как и в случае с Beat Switches (бит-свич или смена ритма). Наращивание ритма до его падения создает якорь, который обрывается после падения. Интересно, что бит-дропы не работают так же хорошо, когда вы переходите сразу к дропу, поскольку он не дает возможности установить якорь!
   

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

Эффект Якоря в некоторой степени помогает нам управлять ожиданиями.

Таким образом, якорение — это специфическое когнитивное предубеждение, которое влияет на то, как мы оцениваем правдоподобность и вероятность. Понятие якоря было впервые введено в книге "Думай медленно... Решай быстро" Дэниела Канемана.

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

Применение в дизайне

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

1. Негативное или пустое пространство

Негативное пространство — это пространство или пустота в дизайне, вокруг основных элементов дизайна — пустые области. Например, пространство, заключенное в “ловушку”, как в буквах "A", "D", "B" и т.д. Именно гармоничное соотношение контраста между негативным и позитивным (основные элементы дизайна) пространством делает дизайн успешным.

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

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

2. Типографика

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

Иди до конца. Намеренный контраст должен быть очевиден.

То есть, глядя на контрастные элементы, зритель должен быть способен различить их за долю секунды. Как говорит Крис До из The Futur: "Не нужно оставаться на нейтральной территории. Идите на крайние меры". Вот несколько примеров:

• Пропустить один вес шрифта: используйте комбинацию жирного и обычного шрифтов (не используйте средний).
• Удвойте размер: для пары Заголовок / Основной текст используйте 16pt / 32pt или 14pt / 28pt и т. Д.

Также не рекомендуется часто использовать ВСЕ ЗАГЛАВНЫЕ буквы. Хотя все заглавные буквы могут казаться аккуратными и единообразными, именно однородность — это та самая причина, по которой следует избегать их частого использования. Наш мозг распознает форму текста и букв до того, как мы определим настоящие слова / буквы. Комбинация контрастных форм строчных букв позволяет легче различать разные буквы и быстрее расшифровывать слова, прежде чем фактически распознавать отдельные буквы. Поэтому рекомендуется использовать заглавные буквы в начале каждого слова (кроме вспомогательных слов, типа предлогов и союзов) на всех знаках аварийных ситуаций. ИСПОЛЬЗОВАНИЕ ТОЛЬКО ЗАГЛАВНЫХ БУКВ увеличивает когнитивную нагрузку на наш мозг, вызывая усталость.

3. Форма композиции

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

Правило Третей:

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

Примеры Правила Третей в фотографии: пейзаж (первый) и фасады (второй)

Конечно, существует множество различных вариантов расположения сетки, например, Золотое сечение, но главная цель — сделать композицию динамичной. Хотя существуют и дизайны с концентрацией по центру и симметричной формой, которые работают просто великолепно!

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