27 июня 2017

Основы теории цвета

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

Теория цвета — это одновременно и наука, и искусство. Она объясняет, как мы воспринимаем цвета, как они смешиваются, сочетаются или не сочетаются, подсознательные сообщения, которые передают цвета (они нередко зависят от культуры), и методы воспроизведения цвета.

Так почему вам как предпринимателю следует задуматься о теории цвета? Почему бы не шлёпнуть красного на упаковку, да на этом и успокоиться? Это же сработало с Кока-Колой?

Теория цвета поможет вам создать свой бренд. А свой бренд привлечет к вам больше покупателей. Давайте разберёмся, как это работает.

Понимание цвета

Люди принимают решение о том, нравится ли им продукт, за 90 секунд или даже меньше. И в 90% случаев это решение основано исключительно на цвете.

Цвет — это восприятие. Наши глаза видят что-нибудь (например, небо), а мозг, исходя из полученных данных, сообщает нам, какого это цвета (синего). Объекты отражают свет с разной длиной волны, наш мозг воспринимает эту длину волн и превращает её в то, что мы привыкли называть цветом.

Придя в магазин за упаковкой Кока-Колы и окинув взглядом прилавок с прохладительными напитками, на котором стоит 82 миллиона банок и бутылок, что вы будете искать? Напечатанный логотип или знакомую красную банку?

Люди принимают решение о том, нравится ли им продукт, за 90 секунд или даже меньше. И в 90% случаев это решение основано исключительно на цвете.

RGB: аддитивная модель смешивания цветов

Аддитивное смешивание цветов. Если вам (как и мне) сложно найти в окружении красные и зелёные предметы, чьи цвета смешиваются в жёлтый, посмотрите это видео на YouTube.

Люди воспринимают цвета как световые волны. Смешение света — или аддитивное смешивание цветов — позволяет создавать цвета, смешивая красный, жёлтый и синий в разных пропорциях. Чем больше света — тем ярче будет цвет. Смешав все цвета на максимуме, вы получите чистый белый.

Телевизоры, мониторы и проекторы используют красный, зелёный и синий (RGB) как основные цвета, а затем смешивают их, чтобы получить все остальные.

Зачем вам это знать?

Допустим, у вас есть узнаваемый логотип ярко-жёлтого цвета. Если вы опубликуете его на Facebook или в Twitter, не применив грамотную обработку цветов, логотип будет уже не ярким, а грязно-жёлтым. Поэтому на любых экранах лучше применять RGB, а не CMYK.

CMYK: модель субтрактивного смешивания цветов

Любой цвет, который вы видите на физической поверхности (бумага, вывеска, упаковка), создаётся при помощи субтрактивной модели смешивания цветов. Большая часть людей знакома с ней, поскольку именно её мы применяли в детском саду на уроках рисования. В этом случае “субтрактивность” означает, что, добавляя цвет, мы убираем свет с бумаги.

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

По традиции основными цветами, используемыми в субтрактивном процессе, были красный, желтый и синий, поскольку именно эти цвета смешивали художники, чтобы получить все остальные оттенки. С развитием цветной печати они были заменены на голубой, пурпурный, жёлтый, чёрный (ключевой) (Cyan, Magenta, Yellow и Key, то есть CMYK), а эта палитра позволяет принтерам воспроизводить другие комбинации цветов на бумаге.

Зачем вам это знать?

Вы решили напечатать цветную брошюру и вложили в это немалый бюджет (печать — это недёшево!), ожидая, что принтер правильно передаст цвета.

Но поскольку принтеры используют субтрактивную модель передачи цвета, получить точный результат можно только с помощью CMYK. Использование RGB повлечёт за собой не только неправильный цвет, но и большие затраты, когда вам придётся перепечатывать весь тираж.

Цветовой круг

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

Понимание цветового круга и цветовой гармонии так же прекрасно, как обладание новой коробкой карандашей. Нет, правда.

Возможность понять условия и процессы, влияющие на цвет, поможет вам объяснить своё видение дизайнеру, принтеру или даже (возможно) Apple Store Genius.

Цветовой круг

Основы цветового круга

Цветовой круг впервые был придуман сэром Исааком Ньютоном в 1666, что было точно раньше, чем ваш опыт из детского сада. Художники и дизайнеры использовали его, чтобы создавать цветовые гармонии, комбинации и палитры цветов.

Цветовой круг состоит из трёх основных цветов (красный, жёлтый, синий), трёх дополнительных цветов, возникающих при их смешении (зелёный, оранжевый, пурпурный), и шести цветов третьего ряда, возникающих при смешении основных и дополнительных (например, синий с зелёным или красный с фиолетовым).

Проведя линию по центру круга, вы разделите холодные (синие, зелёные, пурпурные) и тёплые (красные, оранжевые, жёлтые) цвета.

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

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

Тона, тени, оттенки и тональности

Вернёмся к упаковке из 64 карандашей в первый школьный день. (Вы помните надпись “необработанный”? Но что такое обработка, и почему её отсутствие важно?) В любом случае вам может быть интересно, как все эти цвета карандашей получаются из 12 цветов в нашем круге. И здесь на сцену выходят оттенки и светотени.

Если попросту, оттенки и светотени — это варианты цветов в нашем цветовом круге. Оттенок (tint) — это цвет, в который добавили белого, например, красный и белый дают розовый. Тень — это цвет, в который добавили чёрного, так красный и чёрный дают бургунди. Тональность же — это цвет, в который добавили и белый, и чёрный (или попросту серый). Это меняет исходный цвет, делая его более нежным и менее ярким.

Цветовые схемы

Поговорим о схемах… (Не о тех, которые вечно составляют злодеи из мультфильмов. Мухахаха!) О цветовых схемах. При помощи цветового круга дизайнеры составляют схемы для рекламных материалов.

Классическая триада цветов

Дополнительные (комплементарные) цвета

Дополнительные цвета находятся на противоположных концах круга — например, красный и зелёный.

Дизайн логотипа Pepper Powered от Wiell

Из-за высокого контраста двух цветов изображение выглядит ярким и узнаваемым, но злоупотребление этим паттерном может восприниматься как навязчивость. Вспомните любой супермаркет в декабре! С учётом этого использование дополнительных цветов позволяет создать контраст и отличить одно изображение от другого.

Аналоговые цвета

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

Сайт Tostitos использует аналоговую схему. Яркая панель навигации призывает пользователя изучить сайт, а цветные ссылки внизу побуждают голодных посетителей сайта немедленно “сделать заказ”.

Триадные цвета

Триадные цвета распределены по цветовому кругу равномерно и обычно бывают очень яркими и динамичными.

Использование триады в маркетинге создаёт одновременно и яркость, и гармонию, выделяя каждый элемент, но сохраняя единство.

Burger King очень удачно использует эту схему. Кстати, не пора ли перекусить?

Но в самом деле, зачем вам знать о теории цвета?

Два слова: брендинг и маркетинг.

Нет подождите, три слова: брендинг, маркетинг и продажи.

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

Думаете, это неважно? Взгляните на это. Просто смотреть больно.

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

Сайт на mute_work от Mahony Lawyers
Сайт от Mila Jones Cann
Сайт от MercClass для Glapion Law Firm

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

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

Галина, руководитель отдела дизайна Noveo

Хотите, чтобы ваш бренд выделялся и обращался к вашей аудитории, и понимаете, что плохие цвета ведут к плохим продажам? Вот зачем вам нужно понимать теорию цвета!

Оригинал: https://99designs.com/blog/tips/the-7-step-guide-to-understanding-color-theory/

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте в нашем блоге

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: