Дикий лонг-рид о цвете в разработке дизайна: какое влияние цвета оказывают на людей как на вид животных, на какие ассоциации мы должны обратить внимание и как работать с эмоциями пользователей.
![](https://habrastorage.org/getpro/habr/upload_files/242/9a7/2fb/2429a72fbbead7a6f23efa303fde3673.png)
Что такое цвет?
Часть электромагнитного излучения, видимая человеческому глазу.
![электромагнитный спектр электромагнитный спектр](https://habrastorage.org/getpro/habr/upload_files/5c2/245/211/5c2245211b630d1359626d63652d984b.png)
Если коротко: вините эволюционные процессы. Человек просто не способен на это в отличие от некоторых других животных видов. Например, некоторые насекомые могут видеть ультрафиолетовые волны — они намного меньше чем те, что видим мы. А некоторые виды змей могут видеть инфракрасное излучение.
На картинке: слева - человеческое зрение. Справа - зрение пчелки.
![Bee’s vision Bee’s vision](https://habrastorage.org/getpro/habr/upload_files/aa7/d87/d66/aa7d87d6681f61e983f635c9f688a054.jpg)
Похоже, нам лучше смириться со своей участью, видеть этот отрезок, и подумать, что мы можем делать с этой силой.)
Мы видим цвет → Как и каждый объект, что мы воспринимаем, цвет оказывает на нас определенное воздействие.
И тут закрадывается большая проблема: относительность.
Цвет - как слово, понятие относительное. Оно меняется в зависимости от контекста, в который его поместить. Красный в виде свежих помидоров и красный в открытой ране вызовет совсем разные эмоции.
![](https://habrastorage.org/getpro/habr/upload_files/cef/107/9c8/cef1079c833bb5d50b109040c8194e6f.png)
Как в таком случае поступать в дизайне продукта?
Мы ведь не можем сказать: «я художник, я так вижу». Цвет должен быть логически обоснован, чтобы вызывать нужную ассоциацию с продуктом. Он должен помогать пользователю понимать те мысли, которые интерфейс до него доносит.
Что делать с этой относительностью?
Здесь можно пойти поэтапно. Понять, где эта относительность, и как с ней обращаться, начав с фундамента. Как данная сущность влияет на нас?
1. Физиологическое воздействие
Это единое воздействие чего-либо на человека как на вид.
Здесь с цветами все просто: есть возбуждающие нервную систему, есть наоборот тормозящие (успокаивающие) и нейтральные.
Например, при рассмотрении красно-оранжевых изображений вегетативные функции человека такие как пульс, давление крови и частота дыхания повышаются. На темно-синий или черный цвет происходит обратная реакция.
Подобное действие цвета оказывают на человека как на животный вид, независимо от рас и культур.
Исследования других видов животных также обнаруживают подобные реакции: алжирский исследователь закрывал селезням глаза чёрной повязкой и выявлял ослабление потенции, после чего помещал птиц под красно-оранжевый свет и наблюдал ускорение роста семенных яичек в два раза.
![](https://habrastorage.org/getpro/habr/upload_files/e01/aaf/c41/e01aafc4156f2c6bf3925ad2dec72a62.png)
В чем польза знать о воздействии цвета на физиологическом уровне?
Например, что в создании дизайна для страдающих депрессией не стоит использовать красный цвет. А в остальном — погружение в мир роста семенных яичек у селезней только по особому желанию.))
Это первый шаг в выборе цвета для продукта. На нужно ответить на вопрос:
должна ли ассоциация с продуктом возбуждать или успокаивать?
Чем левее цвет находится в спектре излучения, тем более возбуждающее действие он оказывает.
![Видимая часть электромагнитного спектра Видимая часть электромагнитного спектра](https://habrastorage.org/getpro/habr/upload_files/9d2/ac9/3b6/9d2ac93b68d956d0c06e7839333af3e6.png)
2. Социокультурные ассоциации
То есть устойчивые ассоциации с каким-либо цветом у целевого пользователя. Здесь ассоциации я разделю на общие и индивидуальные.
Общие ассоциации формируются в процессе социально-культурного развития.
Как это работает:
Например, фиолетовый чаще всего могли видеть в древнем мире в виде винограда и вина. Воздействие напитка носило мистический характер и отсылало к Дионису и вакханалистическим таинствам. Что находило потом отражение в искусстве и создавало общую ассоциацию.
![Charles Gleyre-La Danse des bacchantes, 1849 Charles Gleyre-La Danse des bacchantes, 1849](https://habrastorage.org/getpro/habr/upload_files/6af/e98/bd4/6afe98bd4e8d7e9fcfdd5740a37be388.jpg)
Гомер в "Одиссее" апеллирует к этому, описывая цвет моря как oinops — темно-винное.
Формирование общих ассоциаций происходило исходя из этого алгоритма. Сначала цвет связывался со свойством каких-то предметов а потом становился самостоятельным словом но сохранял в себе первичные свойства «предка».
Но оставляя древнюю Грецию позади, мы можем найти существование созданной общей ассоциации в нашей современности.
Создатели главного антагониста в последних Мстителях использовали фиолетовый для придания ему свойств мистической необратимости. При слове «фиолетовый» у меня в голове появляется Танос. Не знаю, как долго это продлится,) но созданное авторами персонажа впечатление сильное: оно усиливает созданный эффект космической силы и таинственности.
![](https://habrastorage.org/getpro/habr/upload_files/657/0fc/f22/6570fcf228692e60e43979c8b2942bed.png)
Хочу подчеркнуть, что на этом этапе лучше всего проводить исследование той местности в которой будет реализован продукт, поскольку культура разных стран различна в ассоциации цветов.
Тот же фиолетовый в Ватикане является символом воздержанности и смирения. Фиолетовый аметист носят кардиналы для выражения данной символики.
![](https://habrastorage.org/getpro/habr/upload_files/a8a/666/9f6/a8a6669f69ae4023536ddb3c1b9e2682.jpg)
Это были общие социально-культурные ассоциации.
Индивидуальные - это когда человека в детстве укусил красный жук, и потому он пьёт кока колу с весьма смешанными чувствами, но так как дизайн строится для большого количества пользователей а не одного человека, этот уровень можно игнорировать.
3. Связанные эмоции
Эмоция — это основной элемент, стоящий позади остальных шагов:
при наблюдении цвета человек испытывает психофизиологическую реакцию и к ней ещё и эмоцию (видит красный цвет: повышение давления и страх, повышение давления и страсть, в зависимости от контекста.) Человек испытывает социокультурную ассоциацию и к ней - эмоцию (видит фиолетовый и чувствует трепет, если является религиозным).
![](https://habrastorage.org/getpro/habr/upload_files/dcc/ca4/663/dccca4663e53567a4baafdb42b503218.png)
Итак, при разработке цветовой системы можно использовать три уровня для выявлений лучшего цветного решения (чтоб оно совпадало с основным тоном и идеологией продукта):
Психофизиологическое воздействие
![](https://habrastorage.org/getpro/habr/upload_files/ab7/16e/c78/ab716ec786481fdb1568b90dc117a6cb.png)
Возможные действия: возбуждение, торможение (спокойствие), нейтральность.
Как использовать:
Делать базовую поправку на общее передаваемое возбуждение цвета. При необходимости погружаться в тему сильнее. (Это легко запомнить по изображению электромагнитного излучения: краснее - возбуждающее действие, синее - тормозящее).
![](https://habrastorage.org/getpro/habr/upload_files/4d9/6ab/0c3/4d96ab0c39844e5934bdedb96c500eaa.png)
Социокультурные ассоциации (общие и индивидуальные)
Они должны приводить к верным образам о продукте.
![](https://habrastorage.org/getpro/habr/upload_files/aeb/7f0/97b/aeb7f097b091944b4ca611dfbf91d435.png)
Связанные эмоции
Дополнительная проверка на совпадение. (Ведь проверок много не бывает?))
![](https://habrastorage.org/getpro/habr/upload_files/79e/86a/1bb/79e86a1bb6bb2ce2da2ae87aca14c80e.png)
Краткая история цвета
Окей, а теперь - краткая характеристика основных цветов по данным трём этапам с небольшими историческими заметками.
Красный
![](https://habrastorage.org/getpro/habr/upload_files/00d/117/3b7/00d1173b74fcf24da8f81e2c2edf115b.png)
1.Физиологический эффект:
возбуждение
2.Социокультурные ассоциации:
Кровь, любовь, секс, сила, роскошь, добыча, могущество, мятеж, революция, опасность
3.Связанные эмоции:
Возбуждение, энергия, эйфория, восторг, страсть, гнев, ярость, агрессия
Красный вполне однозначен в своем действии - высокая эмоциональность, сильное возбуждающее действие (на аппетит в том числе) одновременно в позитивном и негативном ключе. Из-за такого оказывающего действия часто используется в бренд айдентике (ну очень часто).
Историческая заметка:
Так как красный цвет получать было дорого, в этот цвет чаще всего окрашивали мантии и другие предметы гардероба царских и королевских персон. Отсюда ассоциация роскоши.
Позднее цвет взяла революция на смену монархическому строю - отсюда ассоциации со социализмом и коммунизмом.
Красный цвет сам по себе как эмоция, он один из самых важных цветов, которые мы умеем определять, а потому он нашел себе место в повседневных для нас вещах: “стоп”-сигналах светофора, предупреждающих знаках, что имеет отклик в дизайне.
Как использовать в дизайне:
Красный стал из-за своей эмоциональности помощником в контроле внимания пользователя. Он используется для предупреждений, cta кнопок для отказов и удалений. Он уже имеет ассоциацию у пользователя со своего рода предупреждающей окраской: “осторожно, обрати внимание на это”. И это хорошая функциональная работа цвета, которая решает задачу и для разработчиков и для пользователя.
Нужно с осторожностью применять, поскольку это самый эмоциональный цвет: он может сделать продукт визуально тяжелым, если используется слишком много.
Разумеется, при внедрении цвета в основную систему продукта - им окрашен фон, он активен в других элементах, то задача привлечения внимания уже должна быть решена иначе.
Пример: у нетфликса красный один из основных цветов.
![](https://habrastorage.org/getpro/habr/upload_files/bb3/a61/9e5/bb3a619e5120ee47551a01230adeff4a.png)
Задача привлечения внимания решена другим цветом:
![](https://habrastorage.org/getpro/habr/upload_files/4ca/ec9/ebb/4caec9ebb29368566fd7398a1010f2a0.jpg)
Здесь он используется для проставления акцента:
![https://dribbble.com/shots/5701275-Content-Universe-Homepage-All-Services-Page https://dribbble.com/shots/5701275-Content-Universe-Homepage-All-Services-Page](https://habrastorage.org/getpro/habr/upload_files/f05/ddc/62b/f05ddc62ba862d521253e35d2ca7cc72.png)
Оранжевый
![](https://habrastorage.org/getpro/habr/upload_files/0ac/96f/b59/0ac96fb59f9b1bf9b6f51b5092898191.png)
1.Физиологический эффект:
возбуждение
2.Социокультурные ассоциации:
Огонь, заходящее солнце, тепло, тлеющие угли, мощь, апельсины, мандарины, юг, жара, баскетбол
3.Связанные эмоции:
Волнение, Оптимизм, Энергия, Доступный, Предприимчивый, Независимый, Раздражение, Шок, Поверхностный, Неискренний, Неформальный
Историческая заметка:
Исторически, оранжевый в начале был просто оттенком красного (его называли красно-желтым или шафрановым), а потому он сохранил его же двойственность и энергичную динамику: использовался в росписи гробниц императоров, одежд царских семей и монахов. Сейчас скафандры такого цвета носят насовские космонавты,) ну и ребята из мест общего режима.
![](https://habrastorage.org/getpro/habr/upload_files/f95/18d/7e9/f9518d7e9825f843b1ccbb7d5f82a3be.jpg)
Фишка оранжевого в том, что он не настолько насыщен как красный, но при этом отлично выполняет функцию привлечения внимания.
Гёте описывает, что знал образованных людей, которых в пасмурные дни крайне раздражали люди в одежде этого цвета.) Это к тому, что нужно учитывать его возбуждающее свойство, делать поправку на людей с заболеваниями нервной системы.
Как использовать в дизайне:
Так как он несет в себе ассоциацию страсти, теплоты, энергичности, то отлично выполняет роль привлечения внимания и проставления акцентов.
Если отдать ему одну из основных ролей в цветовой системе, то нужно, чтобы он по ассоциациям подходил к голосу бренда. Например, для креативного шоу-рума он отлично подойдет, но для банка станет слишком кричащим и неуместно дерзким.
![https://dribbble.com/shots/7944148-Portfolio https://dribbble.com/shots/7944148-Portfolio](https://habrastorage.org/getpro/habr/upload_files/383/493/6e9/3834936e9fc3b0282504cd54e0ac51ae.png)
Здесь мы можем наблюдать, как оранжевый цвет может отлично сочетаться со спокойным и минималистичным дизайном (важность соседних элементов):
![https://www.behance.net/gallery/110724027/ArteDante https://www.behance.net/gallery/110724027/ArteDante](https://habrastorage.org/getpro/habr/upload_files/cf6/b04/93f/cf6b0493fd9fc851ef63963f4aabb483.png)
Желтый
![](https://habrastorage.org/getpro/habr/upload_files/53e/618/e22/53e618e223ab6966aef5fa2598f7e677.png)
1.Физиологический эффект:
возбуждение
2.Социокультурные ассоциации:
Солнце, свет, изменения, наслаждение, идея, озарение, надежда, осень, бананы, трусость, мёд, золото, буддизм
3.Связанные эмоции:
Радость, бодрость, нежное возбуждение, приятные ощущения, навязчивость, дерзость
Историческая заметка:
Итак, до человека, предавшего Христа желтый был любим и почитаем, после истории с 30ю серебренниками он стал частью образа Иуды (что достаточно странно, поскольку нигде нет упоминаний о Иуде и его предпочтении в цветах, но что есть, то есть).
Поэтому как красный и оранжевый, желтый приобрел амбивалентность - двойственное свойство ассоциаций.
Отрицательный оттенок цвета прослеживался вплоть до второй мировой войны, когда евреям было нужно носить желтые нашивки. Сейчас же это цвет школьных автобусов, одеяний монахов и такси.
Как использовать в дизайне:
Как красный и оранжевый является возбуждаемым но при этом не настолько тяжелым, поэтому подходит для самых разных целей: и для акцентных элементов и даже как фон в нужном оттенке.
НО: является достаточно тяжело читаемым в виде текста, поэтому обязательно делать проверку по WCAG.
Например, на homepage ниже навигация слева трудно читаемая:
![](https://habrastorage.org/getpro/habr/upload_files/611/e5d/823/611e5d8239aff4ab1d40acfbaca87a96.png)
В этом примере желтый взят как фон - с черным шрифтом выглядит отлично:
![https://dribbble.com/shots/3928077-Daily-UI-015-On-Off-Switch https://dribbble.com/shots/3928077-Daily-UI-015-On-Off-Switch](https://habrastorage.org/getpro/habr/upload_files/324/126/990/3241269902ee94fd8f7b8af67c297b18.png)
Зеленый
![](https://habrastorage.org/getpro/habr/upload_files/1c4/6e8/794/1c46e8794d881c3187efd68d2eb2a5e4.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)
2.Социокультурные ассоциации:
Жизнь, лес, джунгли, отдых, неподвижность, пассивность, покой, статичность, консервативность, армия, униформа, зависть, злость, Халк
3.Связанные эмоции:
Спокойствие, умиротворение, уравновешенность, уверенность, расслабление
Итак, зеленый цвет гораздо более однозначен (ура).
Историческая заметка:
В начале зеленый был в связке с синим. Было одно слово для обозначения и синего и зеленого. Но латынь расставила все точки над и - в языке появилось около 10 слов для обозначения зеленого цвета.
Зеленый ассоциируется с исключительно положительными вещами: энергией жизни, растениями и плодородием.
Вам мама в детстве выбирала зеленоватые обои для спальни?) Психотерапевт и социолог Макс Люшер описывал тягу пациентов к выбору зеленого цвета при состоянии напряжения. (можно взять на вооружение, если необходима ассоциация спокойствия у продукта).
![Зеленый цвет прочно ассоциируется с жизнью, природой и спокойствием Зеленый цвет прочно ассоциируется с жизнью, природой и спокойствием](https://habrastorage.org/getpro/habr/upload_files/5e4/931/971/5e493197134277b10537f685e7c55db1.jpg)
В Средние Века это был цвет одежды дворян, купцов и других людей, что также принесло цвету оттенок благополучия.
Что касается военного камуфляжа, здесь и без слов, собственно, всё понятно. Но именно эта связка даёт нам такие ассоциации как дисциплина, выдержка и некое отсутствие гибкости.
![Forrest Gump, 1994 Forrest Gump, 1994](https://habrastorage.org/getpro/habr/upload_files/1ed/abd/978/1edabd9782fcff0902767a666ee45e93.jpg)
Но здесь нужно осторожно подходить к оттенкам. При уходе в темно-зеленый, цвет уже ощущается как холодный, суровый, замкнутый и напряжённый (Привет от Слизерина).
![Холодные оттенки зеленого были использованы для придания Слизерину эмоций опасности и зла Холодные оттенки зеленого были использованы для придания Слизерину эмоций опасности и зла](https://habrastorage.org/getpro/habr/upload_files/85f/93d/0b4/85f93d0b4872d35d7f07e2d13d8be1b0.jpg)
Эта ассоциация была создана из-за змей и других смертельных животных, а также из-за различных токсичных зеленых ядов, производимых алхимиками и цвета лица людей, отведавших их (видели зеленых пауков? лучше не гуглите)).
Как использовать в дизайне:
В дизайне зеленый получил свою индивидуальную позитивную ассоциацию: yes’, ‘chech’, ‘accept’, ‘correct’ и т.д. Поэтому, если зеленый - один из основных цветов продукта, то нужно делать на эти элементы поправки.
Например, если я буду заполнять какой-либо инпут и warning text будет сделан зеленым, то это может вызвать небольшую негативную эмоцию, поскольку пользователь привык такие вещи видеть в контрастных красных оттенках.
Прекрасно передает эмоцию гармонии:
![https://dribbble.com/greenchameleon https://dribbble.com/greenchameleon](https://habrastorage.org/getpro/habr/upload_files/17a/855/486/17a855486945bf1346d24ee7746ffadd.png)
Уход в хаки оттенки сразу придаёт продукту тон качественности, надежности (видимо, работает ассоциация):
![https://dribbble.com/shots/16954323-Sound-e-commerce-app https://dribbble.com/shots/16954323-Sound-e-commerce-app](https://habrastorage.org/getpro/habr/upload_files/17a/6b6/85d/17a6b685d7c40f876e7972317a0eb53e.jpg)
Бирюзовый
![](https://habrastorage.org/getpro/habr/upload_files/b2f/a53/2f4/b2fa532f4003159ee49d1dbc3a48a899.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)
2.Социокультурные ассоциации:
Стерильность (безжизненность), холод, лёд, свежесть, легкость, вода, hi-tech
3.Связанные эмоции:
Возвышенность, приятные ощущения, удовлетворение, уверенность, нежность
Историческая заметка:
В основном, история цвета отсылает к драгоценному камню, который имеет этот цвет, а потому он имеет сильную ассоциацию с чем-то дорогим и ценным (В Тиффани это знают).
![](https://habrastorage.org/getpro/habr/upload_files/b27/36d/e6a/b2736de6abd9ddf7c6b21375d1f5ec32.jpg)
Также это цвет стекла, драгоценных минералов и океана. Всё это дало свой отпечаток на восприятие цвета. Мы видим в нем нечто чистое, свежее и приятное.
![](https://habrastorage.org/getpro/habr/upload_files/0c4/4a0/749/0c44a074951e8fdbce0b913cc608a905.jpg)
Отсюда ассоциация с врачебными халатами, стерильностью, свежестью и чистотой, поэтому его часто используют для зубных паст, жевательных резинок, чистящих средств и так далее.
Также у этого цвета появилась новая ассоциация с высокими технологиями. В научно-фантастических фильмах мы обычно видим цифровые экраны с доминирующим бирюзовым цветом:
![](https://habrastorage.org/getpro/habr/upload_files/256/8bf/88c/2568bf88cac3b71edbac5fb8846c176f.png)
Как использовать в дизайне:
Если целевой аудиторией вашего продукта будут пользователи в жарких странах или работники кузни, то этот цвет должен быть основным.)
Что касается веба, то здесь я заметила тенденцию использовать данный цвет часто в стиле неоморфизма, а также в продуктах, где необходим акцент на высокой технологичности проекта.
![https://dribbble.com/shots/11884488-Smart-home-music-app https://dribbble.com/shots/11884488-Smart-home-music-app](https://habrastorage.org/getpro/habr/upload_files/a2e/78f/6d0/a2e78f6d076008241b2b92f6a70ab1c4.jpg)
![https://akash02designer.gumroad.com/l/dcOWE https://akash02designer.gumroad.com/l/dcOWE](https://habrastorage.org/getpro/habr/upload_files/ea4/fee/3d1/ea4fee3d11fa85e37ab24e4384f551b9.png)
Синий
![](https://habrastorage.org/getpro/habr/upload_files/e9a/30c/6cd/e9a30c6cdaba1485b97958bc212048c4.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)
2.Социокультурные ассоциации:
Небо, море, океан, бесконечность, серьезность, глубина, традиции
3.Связанные эмоции:
Покой, удовлетворение, доверие, безмятежность, сверхчувствительность
Историческая заметка:
Гёте пишет о синем:
«Насколько охотно мы следуем за удаляющимся от нас предметом, настолько же охотно мы смотрим на синий цвет, и не потому что он на нас наступает, а потому что он влечёт нас за собой».
![](https://habrastorage.org/getpro/habr/upload_files/249/c4d/24c/249c4d24c137915c390a6ca88567407a.png)
Побывав в одной связке с зеленым, синий унес с собой его положительные характеристики: ассоциацию с природой и спокойствием.
По статистике, синий - один из самых популярных ответов на вопрос “какой ваш любимый цвет.
Его также было тяжело добывать для красок, поэтому одежда синего цвета была доступна лишь знати. И так как никто не был важнее Марии - её часто изображали одетую в синий, что послужило основой для ассоциации с чистотой и невинностью.
Демократическое качество синий приобрел после появления синих джинсов.
![](https://habrastorage.org/getpro/habr/upload_files/90d/ee0/92b/90dee092b0d2afac02af1ec7dd85ddf1.jpg)
Как использовать в дизайне:
В дизайне уже имеет знаменитую роль как красный и зеленый, благодаря синим ссылкам.
Синий спокойный по эмоциональности, что позволяет его использовать как основной цвет в самых разных продуктах, играя с оттенками. Уход в темные придает цвету ассоциацию со стабильностью, надежностью - часто используется в приложениях для банков и других подобных структур. Но также подходит и для проставления акцентов, если добавить яркости.
Является своего рода универсальным ответом на вопрос: “ребят, какой цвет выбрать в нашу систему?”, - он охватывает практически все возможные ассоциации как негативные так и положительные поэтому станет отличным решением в каждом случае - нужно только выбрать нужный оттенок. Белый придаст легкости, черный - весомости и серьезности.
Единственный момент: лучше не использовать в продуктах где нужно вызвать аппетит так сказать, поскольку съедобные вещи такого цвета практически не встречаются в природе.
Синий как инструмент для спокойного и серьезного интерфейса:
![https://dribbble.com/shots/4913493-Mo-Banking https://dribbble.com/shots/4913493-Mo-Banking](https://habrastorage.org/getpro/habr/upload_files/8b0/42e/dc7/8b042edc7cf7b201d07881362216d03b.jpg)
Если же добавить яркости или белого, цвет приобретает динаминку и оттенок креативности:
![https://dribbble.com/shots/4930379-Dia-D-Design-Talks-Event-Mobile-Web-Page https://dribbble.com/shots/4930379-Dia-D-Design-Talks-Event-Mobile-Web-Page](https://habrastorage.org/getpro/habr/upload_files/1c9/693/7dd/1c96937ddf7ecb7e982c9417bc0f888b.jpg)
![https://www.pentagram.com/work/national-women-s-history-museum https://www.pentagram.com/work/national-women-s-history-museum](https://habrastorage.org/getpro/habr/upload_files/245/7d1/f9c/2457d1f9c04d207daeabc709cc06b214.png)
Есть волшебное сочетание синего с оранжевым, которое по статистическим данным является весьма привлекательными визуально, поскольку сочетание комплементарных цветов привлекает из-за одновременного возбуждения и торможения (оранжевый=возбуждение, бирюзовый/синий=спокойствие).
![https://the-brandidentity.com/project/mille-j-tyler-creates-flexible-identity-system-black-poc-led-campaign-group-air-uk https://the-brandidentity.com/project/mille-j-tyler-creates-flexible-identity-system-black-poc-led-campaign-group-air-uk](https://habrastorage.org/getpro/habr/upload_files/504/86a/f47/50486af47f8fd26f841df9fc131f6b11.png)
Это как соленый пармезан со сладкой клубникой, как горький чёрный эспрессо с долькой молочного шоколада, как задетое чувство справедливости в фильме «Джанго освобождённый» и его удовлетворение, как боль и ее исчезновение после пары таблеток обезболивающего.
В общем, я думаю, вы поняли мою мысль;)
Если взять предмет искусства, то он просто содержит в самом себе проблему и решение. Это то, что заставляет нас понять: нравится ли нам фильм, песня, картинка или продукт? Если проблема нас не касается, то объект пройдет мимо и останется без внимания.
Сочетания вкусов и цветов работают по одному и тому же принципу.
Фиолетовый
![](https://habrastorage.org/getpro/habr/upload_files/1b5/122/5ad/1b51225ad01b0226c02750eb76b548d0.png)
1.Физиологический эффект:
возбуждение нарастает (к синему добавлен красный)
2.Социокультурные ассоциации:
Тайна, мистика, противоположности, внушаемость, иррациональность, интерес, (воздержанность, смирение)
3.Связанные эмоции:
Захватывающий, завораживающий, головокружительный, волнующий
Историческая заметка:
Фиолетовый и его исторические моменты я обсуждала в начале.
Как использовать в дизайне:
Есть своя исторически сложившаяся роль: посещенная ссылка. Обычно советуется это не менять, чтобы не путать пользователей, но опять же, это относительно, и нужно отталкиваться от своего целевого пользователя.
Фиолетовый наравне с синим универсален для продукта, поскольку может быть как динамичным (добавить больше красного), так и спокойным как удав (уход в синий).
Фиолетовый цвет придает интерфейсу форму, но он не навязчив:
![https://dribbble.com/shots/5602013-Corporate-Office-Identity-Card https://dribbble.com/shots/5602013-Corporate-Office-Identity-Card](https://habrastorage.org/getpro/habr/upload_files/4f0/926/037/4f0926037de707daf583283c51b3c48f.png)
В темных оттенках используется для "серьезных" продуктов на пару с синим-банковским:
![https://dribbble.com/shots/8659108-Dashboard-user-interface https://dribbble.com/shots/8659108-Dashboard-user-interface](https://habrastorage.org/getpro/habr/upload_files/3e8/10c/419/3e810c419afe34ccf49c8520de0421bf.png)
Для более творческой целевой аудитории и дружелюбного тона он часто используется в стиле glass morphism с градиентной основой:
![https://dribbble.com/shots/14982762-Neumorphic-Glassmorphic-Mix-Music-Player/attachments/6702711?mode=media https://dribbble.com/shots/14982762-Neumorphic-Glassmorphic-Mix-Music-Player/attachments/6702711?mode=media](https://habrastorage.org/getpro/habr/upload_files/56a/3a5/ffe/56a3a5ffec8861c05ac31a3f468cc576.png)
Розовый
![](https://habrastorage.org/getpro/habr/upload_files/996/bcf/c76/996bcfc76e7a76a89b2a784ebf754460.png)
1.Физиологический эффект:
возбуждение
2.Социокультурные ассоциации:
Любовь, нежность, легкость, обаяние, романтика, сладость , веселье, удовольствие
3.Связанные эмоции:
Покой, легкость, беззаботность, веселье
Историческая заметка:
Розовый в основном использовался художниками для изображения закатов и розовых щек, и лишь к 18-19 веку в эпоху романтизма он вошел в гардероб (опять же) могу-себе-позволить-особ.
![‘Just got my new pink suit’ ‘Just got my new pink suit’](https://habrastorage.org/getpro/habr/upload_files/f13/0b9/194/f130b919478ad006ac706fb008cdee0c.jpg)
Сначала полагали что розовый влияет успокаивающе, поэтому стены покрывали розовой краской часто в тюрьмах или больницах, но последующие исследования опровергли эту теорию (в нем содержится красный и потому несет возбуждающий оттенок).
Как использовать в дизайне:
В дизайне он отлично акцентирует внимание как контрастный цвет в палитре или даже как основной.
Его часто используют в продуктах где нужно дать понять пользователю, что продукт несет в себе тон веселья и удовольствия: dribbble, apple music, airbnb используют его в своих системах.
![](https://habrastorage.org/getpro/habr/upload_files/072/a74/29c/072a7429c1ec9f405747b32f5a614221.png)
Розовый цвет для фона создает творческую и ‘сладкую’ атмосферу:
![https://dribbble.com/shots/16790797-Marketing-agency https://dribbble.com/shots/16790797-Marketing-agency](https://habrastorage.org/getpro/habr/upload_files/976/c69/5f4/976c695f4f46cd5d114eb1a70650d705.png)
Коричневый
![](https://habrastorage.org/getpro/habr/upload_files/954/bd9/f06/954bd9f062399c4debca88a33564f2ac.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)
2.Социокультурные ассоциации:
Земля, тело, уют, дерево, примитивные инстинкты, простота, чувственные ощущения тела, комфорт, хлеб, крафт, история, книги
3.Связанные эмоции:
Спокойствие, умиротворение, покой, чувство защищенности, уверенность
Историческая заметка:
В отличие от своих братьев цветов предыдущих, коричневый был цветом земли и того что ближе к ней - бедняков. Одежду коричневого цвета носили именно они и францисканцы.
В эпоху возрождения коричневый стал использоваться активно для «оттенение» основных цветов картин. В общем, создавал фон он, был пассивным.
![‘Just another Monday in our 17th century’ ‘Just another Monday in our 17th century’](https://habrastorage.org/getpro/habr/upload_files/37b/c50/53b/37bc5053b40d01e81ddb2e8d2f5c447c.jpg)
И уже в 20веке коричневый стал любим, поскольку был связан с землей, хлебом, книгами, коричневым сахарком, крафтовыми пакетами и всеми любимым кофе.
![](https://habrastorage.org/getpro/habr/upload_files/339/9bf/38d/3399bf38d043447e8f8327c78d8021d6.jpg)
Вывод такой: спокоен, стабилен, приятен.
Как использовать в дизайне:
Использовать для продуктов связанных прямой ассоциацией: музеи, библиотеки, мебельные и тп. либо если необходим цвет спокойный и стабильный, а синий или зеленый не подходят.
Момент: не зря художники взяли этот цвет для фона, он и правда служит отличным фоном, поэтому call-to-action кнопки могут быть потеряны, но при верной работе с оттенками это может работать и с акцентами.
Коричневый в цветовой системе арт-галереи:
![https://www.behance.net/gallery/104660787/Rijksmuseum https://www.behance.net/gallery/104660787/Rijksmuseum](https://habrastorage.org/getpro/habr/upload_files/4dc/855/6d0/4dc8556d0a86a6e1dac353dc8efdf54e.png)
Оттенки коричневого для кофешопа:
![https://www.wconcept.co.kr/Issue/7491 https://www.wconcept.co.kr/Issue/7491](https://habrastorage.org/getpro/habr/upload_files/d39/576/647/d39576647176771f4e220e991c61b803.png)
Серый
![](https://habrastorage.org/getpro/habr/upload_files/4cc/d5b/0d1/4ccd5b0d17c8dc25f0463d432829f4e9.png)
1.Физиологический эффект:
нейтральный
2.Социокультурные ассоциации:
Нейтралитет, граница, стена, теория, недоступность
3.Связанные эмоции:
Светлый: легкость, возвышенное возбуждение, готовность к возбуждению
Темный: тяжесть, спокойствие, повышенная чувствительность
Историческая заметка:
Тоже был цветов одежды низших слоев, но потом стал популярен и у знати.
Теперь мы можем видеть серый цвет в нашей повседневной жизни во многих формах: серый коты, красивые костюмы, грозовые тучи, льняные скатерти и многое другое.
Но одна ассоциация сильнее других, и для нее есть подходящее слово: нейтралитет. Серый цвет обычно используется для стен, бордюров и других предметов, где цвет "не нужен".
Серый для фона:
![](https://habrastorage.org/getpro/habr/upload_files/6c3/abf/b35/6c3abfb35f10512d7a325e9b3bb01af9.jpeg)
Как использовать в дизайне:
Собственно, серый уже нашёл места в дизайне: это цвет неактивных кнопок и ghost-шрифта инпутов.
Это уже создаёт определённую ассоциацию - элементы серого цвета сразу наводят на мысли о «неактивности», поэтому это нужно учитывать.
Этот цвет отличный для фона и других моментов, где нужно нечто оттеняющее, спокойное и не особо привлекающее внимание.
Текст выглядит пассивным на фоне:
![https://www.behance.net/RronBerisha https://www.behance.net/RronBerisha](https://habrastorage.org/getpro/habr/upload_files/96f/2bb/b76/96f2bbb76e5adffd8c394932740b1902.png)
Серый как один из основных цветов в системе дает ощущение спокойствия и чистоты (в данном примере):
![https://www.behance.net/gallery/73732855/WANDA https://www.behance.net/gallery/73732855/WANDA](https://habrastorage.org/getpro/habr/upload_files/a42/714/6ff/a427146ffbedba2b93e182f0f3908b87.jpg)
Черный
![](https://habrastorage.org/getpro/habr/upload_files/70a/505/b03/70a505b03a2f7a64cc19c678616c8bf1.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)
2.Социокультурные ассоциации:
Темнота, конец, смерть, страх, защита, застой, отказ, протест, анархия, хаос, стиль
3.Связанные эмоции:
Страх, беспокойство, растерянность, уверенность,
Историческая заметка:
Несмотря на свою элегантность, чёрному никогда не стереть свою ассоциацию со смертью: началось это ещё в Египте и Греции, где художники изображали загробный мир чёрным цветов. С другой стороны, из-за ассоциации с плодородным черноземом цвет также носил положительный оттенок.
![‘Would you like to read some Shakespeare with me?’ ‘Would you like to read some Shakespeare with me?’](https://habrastorage.org/getpro/habr/upload_files/38f/922/faa/38f922faa8a9b07c29e27ab8a482b52f.jpg)
Пережив средневековье под клеймом нечистого колдовского цвета, чёрный пришёл в 18,19 и 20 век под флагом индустриальной революции: нефть, уголь, все дела.
Как использовать в дизайне:
Чёрный, это чаще всего один из двух освоенных цветов продукта. И это хорошо - пользователь привык к «чёрным-по-белому» и чувствует себя комфортно с уже знакомым паттерном.
Как сказал мой знакомый фотограф: “чб - это нечестно”. Если взять хороший шрифт и сделать его белым на черном фоне это сразу выглядит стильно. Ну что ж, пусть и у дизайнеров будет свой на все случаи жизни экспелиармус.)
![https://dribbble.com/shots/15499981-Greece-Travel-Guide https://dribbble.com/shots/15499981-Greece-Travel-Guide](https://habrastorage.org/getpro/habr/upload_files/00a/df6/d4a/00adf6d4ad32d970e93326d4ae0ac225.png)
![https://dribbble.com/shots/16228762-Explore-Website-concept https://dribbble.com/shots/16228762-Explore-Website-concept](https://habrastorage.org/getpro/habr/upload_files/c9a/849/f07/c9a849f074280e83586eb9558248b0c2.png)
Белый
![](https://habrastorage.org/getpro/habr/upload_files/9cf/5ad/9de/9cf5ad9de2c6b44382fb6275517666b0.png)
1.Физиологический эффект:
Торможение (противоположность возбуждению)*
*[в большинстве случаев]
2.Социокультурные ассоциации:
Чистота, свадьба, абсолютная свобода, освобождение, бегство, мир, снег, молоко, мел, невинность
3.Связанные эмоции:
Легкость, свобода
Историческая заметка:
Начнём с того, что белых животных приносили в жертву богам как символ невинности и чистоты. До сих пор он используется в свадебных церемониях именно с этой семантикой. Из белого мрамора создавали скульптуры, белые тоги носили римляне как символ гражданства.
![так и не придумала подпись к этой картинке (разве что "пожалуйста только не опять пепперони") - если есть хорошие идеи - жду их в комментариях.) так и не придумала подпись к этой картинке (разве что "пожалуйста только не опять пепперони") - если есть хорошие идеи - жду их в комментариях.)](https://habrastorage.org/getpro/habr/upload_files/45b/a59/9b5/45ba599b5e885d65f2a5a8a230a5850e.jpg)
Есть ассоциация с мудростью поскольку белый - цвет седых волос.
Нужно также упомянуть, что было поверье, согласно которому белая одежда во время носки очищала хозяина. Суеверие ушло, но мыло и одежда врачей уже стали белыми навсегда.
В общем, белый однозначен по значению: чистота, ясность, доброта и тд.
Как использовать в дизайне:
В дизайне в чистом виде белый - это просто белый чистый лист.) В основном, это либо классический белый фон либо наоборот белый шрифт или элемент на оттеняющем фоне.
Белый как обычный фон:
![https://thisisgrey.tumblr.com/post/138671974848/paulgaconcom https://thisisgrey.tumblr.com/post/138671974848/paulgaconcom](https://habrastorage.org/getpro/habr/upload_files/08a/ae4/0d2/08aae40d23d70dd9459f1c76e70b6449.jpg)
Белый как цвет шрифта:
![https://dribbble.com/shots/9891189-M-Editorial-Website-Loading-Animation?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=M.+Editorial+Website+Loading+Animation&utm_medium=Social_Share https://dribbble.com/shots/9891189-M-Editorial-Website-Loading-Animation?utm_source=pinterest&utm_campaign=pinterest_shot&utm_content=M.+Editorial+Website+Loading+Animation&utm_medium=Social_Share](https://habrastorage.org/getpro/habr/upload_files/708/384/a53/708384a538cb51908a2ed974fce946fd.png)
Карта ассоциаций цвета
С цветами более менее понятно. Но ведь это же гид. А гид создан для помощи в принятии решений.
В разработке цветовой системы мы ведь идём не от цвета к продукту а от концепции продукта к цвету. Для этого я сделала небольшую схему для выбора цвета.
Сначала цвета делятся по первому уровню физиологическому, а потом просто скомпонованы со связанными культурными ассоциациями и эмоциями.
Есть проект. С чем должен ассоциироваться? Определяющие слова будут подсказками к цветам.
Небольшая так сказать помощь для рефлексии.)
![карту я составляла в первую очередь на английском. Если кто-то заинтересован в русской версии - пишите. карту я составляла в первую очередь на английском. Если кто-то заинтересован в русской версии - пишите.](https://habrastorage.org/getpro/habr/upload_files/1f1/347/422/1f134742288cd1abc8043d77db42cfe8.png)
Ну... как-то так.)
Заключение
Итак, мы поговорили о трёх уровнях относительность на которые нужно делать поправки при разработке: физиологический, социокультурный и эмоциональный.
Также мы провели краткий экскурс по цветам и составили на данном основании карту.
Но, несмотря на все это, все же хочется сказать снова:
Цвет - как слово, понятие относительное. Оно меняется от контекста к контексту.
Возможно, ваш продукт создаст новую культурную ассоциацию.
Всем спасибо.)
Sources:
Rowe C., Color concepts and color symbolism in the ancient world;
Jung R., Color and expression of inner time in Western painting;
Goethe I.V., To the Doctrine of Color (chromatics);
Denisov V.S., Glazova M.V., Сolor perception;
Klar G., Lischer M., Scott Y., Color Magic;
https://www.jpl.nasa.gov/edu/teach/activity/using-light-to-study-planets/
Комментарии (3)
1A1A1
10.03.2022 21:28+2Немного о сигнальных функциях красного и оранжевого: красный - опасность и запрет, оранжевый же имеет очень специфичную функцию привлечения внимания (attention). Красный, казалось бы, тоже подошёл. Но есть одна особенность: в сумерках красный раньше теряет свою заметность, превращаясь в черный, в то время как оранжевый остаётся заметным. Поэтому дорожные конусы оранжевые, спасательное снаряжение оранжевое, поэтому и космонавты одеты в оранжевое, чтобы их было проще найти.
dadgo
12.03.2022 17:08Смею предположить что здесь играет психология если не полностью, то почти на 100%. Детство, семья и общество в котором существуют пользователи продукта.
Если по каким-то причинам черный будет цветом сексуальности, то и восприниматься он будет не через смерть. Хотя возможна игра на этом стыке. Если оранжевый будет принят цветом революции, то и восприниматься он будет именно так. Возможно недолгий промежуток времени, но это будет именно так.
А для других людей за пределами этого контекста будет по другому. Другой ассоциативный ряд, другое значение. Привет 15 оттенкам белого для эскимосов и т.д.
Собственно моя мысль - KYC. Как всегда, впрочем.
agray
Вот бы еще повторное исследование, научное, с выделением социальных и культурных групп, с множеством когорт, с n>5000.