Начало погружения
Теория цвета. Все же почти все мы воспринимаем информацию визуально, а основной задачей для дизайнера и художника является передача идеи через формы, символы и цвет. Картина, плакат, интерфейс - это всё, на самом деле, про одно и то же, смотря на них мы должны улавливать общую атмосферу и интуитивно понимать какая идея у картинки. Говоря проще, у каждого дизайна есть смысл (по крайней мере, это ожидается).
Говоря же о цвете мы имеем в виду обобщенное его понятие, включающее сразу тон, тональности, яркость, хроматичность, тени и оттенки. Тем не менее, в данной теме, как и во многих других в дизайне есть множество ответвлений, условностей и допущений о которых мы поговорим дальше.
Немного про определения
- Тон - это как раз то, что мы подразумеваем, когда говорим цвет.
- Хроматичность - указывает на то насколько этот цвет "чистый", сколько там примесей черного, белого или серого.
- Яркость - указывает насколько тон светлый или темный.
- Тень - добавление в тон черного.
- Оттенок - добавление белого в тон.
- Тональность - добавление в тон серого.
Но, будем честны, это все скорее для гиков, это важно знать, но все равно сколько бы я не смотрел роликов или не читал статей цвет = тон и полно других условностей. Несмотря на всё это, данная теория должна быть в голове и главное запомнить про тон и хроматичность.
Выбор цвета
Одним из основных вопросов является выбор цвета, как правильно определить основной и дополнительные цвета.
Давайте взглянем на Великое изобретение, на цветовой круг Ньютона (почти).
Сам круг был придуман (или скорее открыт) Исааком Ньютоном в 1676 году, доработан через 140 лет фон Гёте, потом в 1810 доработан художником Отто Рунге, пока швейцарский художник Йоханнес Иттен не придумал современный цветовой круг, который до сих пор используется художниками и дизайнерами. Есть ещё Мишель Шеврёль, химик, создавший цветовой атлас, но о нём можете почитать отдельно. Теперь к теории.
Существуют основные, вторичные и третичные цвета.
Основные цвета - главный инструмент для получения всех остальных цветов. Основными являются красный, жёлтый и синий (для цветовой модели RYB, которую используют художники, но уже редко), голубой, пурпурный и жёлтый (для модели CMYK, которую используют в типографии), а также красный, зелёный и синий (для модели RGB, которую используют в цифровых продуктах).
Вторичные цвета получаются совмещением двух основных. К вторичным можно отнести, например, оранжевый, фиолетовый и зеленый.
Третичные цвета создаются смешиванием основных со вторичными. Всего их насчитывается шесть: красно-оранжевый, красно-фиолетовый, сине-фиолетовый, сине-зелёный, жёлто-зелёный и жёлто-оранжевый.
Стоит понимать, что выше указаны лишь некоторые цветовые модели. В дизайне, например, используются еще такие модели как HSL (мой основной) и HSB, они являются нелинейными преобразованиями RGB. Особой разницы в работе со схемами RYB, CMYK или RGB не будет, паттерны выбора совпадают. Будут рассмотрены основные приемы по выбору сочетаний цветов (палитр).
Виды выбора палитр
Монохромная цветовая палитра.
Монохромная палитра подразумевает под собой использование одного тона и его теней или тональностей. Монохромная цветовая палитра для создания дизайна цифрового продукта, будь то сайт или мобильное приложение используется довольно редко, тем не менее, это не значит, что нет умельцев, которые могут создать нечто прекрасное используя один тон. Тем не менее, нельзя не отметить согласованность цветов, которые при комбинировании могут дать потрясающий результат.
Аналоговая цветовая палитра.
Аналоговая палитра использует цвета рядом с выбранным основным. Используется, когда нам нужны гармоничные цвета и не понадобится контраст или сильный акцент.
Комплиментарная цветовая палитра.
Данная палитра подразумевает под собой выбор цветов, находящихся напротив друг друга на цветовой схеме, эти цвета могут использоваться как дополнение друг к другу или же использоваться как Основа + Акцент. Подобная палитра создаст нужный контраст в нужном месте.
Сплит-комплиментарная цветовая палитра.
Данная палитра используется, если нужно несколько контрастных цветов. Выбирается по тому же принципу, как и комплиментарная, но берутся цвета соседние от комплиментарного.
Триадная или триадическая цветовая палитра.
Берутся равноудалёные цвета, так можно получить середину между согласованностью и возможностью выделить акценты, добавив контрастный цвет.
Прямоугольная цветовая палитра.
Интересная, на первый взгляд, но подходит далеко не всегда. Берутся две пары комплиментарных палитр и создается одна, данная палитра подходит скорее для работы с фотографией или графикой, но для веб или мобильного дизайна это, скорее, излишек. Тем не менее, данная палитра существует и используется опытными людьми для достижения определенных целей, не связанных с интерфейсами.
Инструменты для работы с палитрой вы спокойно можете найти в интернете, их очень много и нет смысла кидать их сюда, но один сайт я всё же скину. Он довольно популярен. Adobe Color. А если цвета уже выбрали посмотрите как будет выглядеть их сочетание на интерфейсе с помощью Realtime Color.
Давайте теперь поговорим о важных вещах, раз более-менее разобрались с палитрами и схемами.
Смысл цвета
Каждый из нас видит на картинке то, что ему сказали видеть, так работает хороший дизайн. Формы, символы и цвета - это то, что уже давно в голове у людей, задайтесь вопросов что такое крест, полумесяц, красная звезда, спросите себя, что означает зеленый цвет и что несет в себе черный).
Вы давно заметили паттерны, которые используют на вас рекламщики, идеологи (те же рекламщики) и люди, которых надо обходить стороной (дизайнеры). Спроси человека какой цвет ассоциируется у него с природой или здоровьем, подавляющее большинство скажет ЗЕЛËНЫЙ и найдутся те, кто врет, что ему в голову пришел красный или коричневый. Спросите у людей какого цвета Советский Союз, ответ будет ясен, а какого цвета США? Вот вопрос... Синего, белого?
Всё это бренды. Бренд зеленого, который весь из себя за натуральное и если он на этикетке, то товар эко-фрэндли, если он на экране телефона, то всё идет отлично. Мы давно выстроили подобное отношение к цветам, а значит каждый цвет нест под собой смысл и символ, который надо использовать правильно, а как всё же правильно? Существует психология цветов (Ну или обобщенное их представление).
Если взглянуть на этот цветовой круг, можно заметить, что в целом вы бы согласились, как минимум, с 90% всей информации. Нужно учитывать то с чем ассоциируется цвет, который вы используете, начиная с того уместен ли красный с черным, как основные цвета для сайта детского сада, заканчивая размышлениями, использовать ли для магазина сладостей розовый и красный или розовый и фиолетовый, надо сравнивать ваш вкус с уместностью и потребностями бизнеса.
Цвет имеет смысл и вы это знаете. Теперь рассмотрим самый наглядный пример использования цвета в прошлом.
Советские плакаты - лучший пример использования смысла цвета. Посмотрите на три этих плаката. Приятные природные цвета и ощущение свежести передаёт сочетание на пером плакате, вы видите женщину, ее счастливый образ, который можно было бы использовать во всех странах, замените надпись на латиницу и эффект от картинки будет тот же, ведь цветовая гамма ясно передает атмосферу, а потом мы видим еще один цвет. Красная награда героя соц. труда, лишь, выбивающаяся из всей палитры, тем не менее, которая несет глубокий идеологический смысл.
Красным выделялись важные государственные символы или послания, на втором плакате можно заметить важную продвигаемую мысль. Третий же плакат ясно дает понять, что черный - это тень, это страх и негатив, подчеркиваемый советской типографикой, этими шрифтами и размерами. О советской типографике я, возможно, сделаю пост, но очень не скоро.
Фирменный стиль компании и их продуктов
Итак, мы разобрались, что цвета несут в себе смыслы, которые уже сидят в нашей голове, главное правильно их использовать. Но все же в первую очередь стоит учитывать потребности бизнеса. Если есть определенный брендбук со всеми стилями и цветами, стоит использовать его, конечно, даже если вам не нравятся цветовые решения, но если вас попросили отступить от канонов компании и сделать что-то новое важно изучить как саму компанию, так и конкурентов, чтобы выделяться на их фоне и не взять случайно похожие цвета и форму, тем самым погубить потенциал проекта.
Но это не значит, что брать похожий цвет всегда плохо, та же Пепси имела похожий с Кока-колой дизайн и дожила до сих пор, постепенно меняя дизайн. Кола, кстати, такой же хороший пример, как Советский Союз, она всегда была красной и всегда использовала красный в дизайне и рекламе, создав потом образ Санты Клауса в красной одежде, тем самым создав ассоциацию Рождество = Кола. Вот вам и праздник к нам приходит... Магия цвета.
Заключение
Стремитесь собирать цвета, которые по смыслу подходят продукту, не забывайте, что много цветов - это лишь проблема, а не красиво. Если вы графический дизайнер, то большинство канонов вам не писаны и вы можете смело использовать нестандартные цветовые решения (тем не менее 90% требований будут в "стандартных" сочетаниях), а нам, UXUI магам, остается лишь надеятся, что придет время, когда потребуются такие решения. Будьте уверены в своём вкусе, но сверяйте его у друзей, изучайте сайты с похожей тематикой и выбирайте гармоничный дизайн.