Как стать автором
Обновить

Гид по цвету: физиологические эффекты, социокультурные ассоциации и связанные эмоции

Время на прочтение17 мин
Количество просмотров24K

Дикий лонг-рид о цвете в разработке дизайна: какое влияние цвета оказывают на людей как на вид животных, на какие ассоциации мы должны обратить внимание и как работать с эмоциями пользователей.

Что такое цвет?

Часть электромагнитного излучения, видимая человеческому глазу.

электромагнитный спектр
электромагнитный спектр

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

На картинке: слева - человеческое зрение. Справа - зрение пчелки.

Bee’s vision
Bee’s vision

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

Мы видим цвет → Как и каждый объект, что мы воспринимаем, цвет оказывает на нас определенное воздействие.

И тут закрадывается большая проблема: относительность.

Цвет - как слово, понятие относительное. Оно меняется в зависимости от контекста, в который его поместить. Красный в виде свежих помидоров и красный в открытой ране вызовет совсем разные эмоции.

Как в таком случае поступать в дизайне продукта?

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

Что делать с этой относительностью?

Здесь можно пойти поэтапно. Понять, где эта относительность, и как с ней обращаться, начав с фундамента. Как данная сущность влияет на нас?

1. Физиологическое воздействие

Это единое воздействие чего-либо на человека как на вид.

Здесь с цветами все просто: есть возбуждающие нервную систему, есть наоборот тормозящие (успокаивающие) и нейтральные.

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

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

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

В чем польза знать о воздействии цвета на физиологическом уровне?

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

Это первый шаг в выборе цвета для продукта. На нужно ответить на вопрос:

должна ли ассоциация с продуктом возбуждать или успокаивать?

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

Видимая часть электромагнитного спектра
Видимая часть электромагнитного спектра

2. Социокультурные ассоциации

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

Общие ассоциации формируются в процессе социально-культурного развития.

Как это работает:

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

Charles Gleyre-La Danse des bacchantes, 1849
Charles Gleyre-La Danse des bacchantes, 1849

Гомер в "Одиссее" апеллирует к этому, описывая цвет моря как oinopsтемно-винное.

Формирование общих ассоциаций происходило исходя из этого алгоритма. Сначала цвет связывался со свойством каких-то предметов а потом становился самостоятельным словом но сохранял в себе первичные свойства «предка».

Но оставляя древнюю Грецию позади, мы можем найти существование созданной общей ассоциации в нашей современности.

Создатели главного антагониста в последних Мстителях использовали фиолетовый для придания ему свойств мистической необратимости. При слове «фиолетовый» у меня в голове появляется Танос. Не знаю, как долго это продлится,) но созданное авторами персонажа впечатление сильное: оно усиливает созданный эффект космической силы и таинственности.

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

Тот же фиолетовый в Ватикане является символом воздержанности и смирения. Фиолетовый аметист носят кардиналы для выражения данной символики.

Это были общие социально-культурные ассоциации.

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

3. Связанные эмоции

Эмоция — это основной элемент, стоящий позади остальных шагов:

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

Итак, при разработке цветовой системы можно использовать три уровня для выявлений лучшего цветного решения (чтоб оно совпадало с основным тоном и идеологией продукта):

  1. Психофизиологическое воздействие

Возможные действия: возбуждение, торможение (спокойствие), нейтральность.

Как использовать:

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

  1. Социокультурные ассоциации (общие и индивидуальные)

Они должны приводить к верным образам о продукте.

  1. Связанные эмоции

Дополнительная проверка на совпадение. (Ведь проверок много не бывает?))

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

Окей, а теперь - краткая характеристика основных цветов по данным трём этапам с небольшими историческими заметками.

Красный

1.Физиологический эффект:

возбуждение

2.Социокультурные ассоциации:

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

3.Связанные эмоции:

Возбуждение, энергия, эйфория, восторг, страсть, гнев, ярость, агрессия

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

Историческая заметка:

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

Позднее цвет взяла революция на смену монархическому строю - отсюда ассоциации со социализмом и коммунизмом.

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

Как использовать в дизайне:

Красный стал из-за своей эмоциональности помощником в контроле внимания пользователя. Он используется для предупреждений, cta кнопок для отказов и удалений. Он уже имеет ассоциацию у пользователя со своего рода предупреждающей окраской: “осторожно, обрати внимание на это”. И это хорошая функциональная работа цвета, которая решает задачу и для разработчиков и для пользователя.

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

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

Пример: у нетфликса красный один из основных цветов.

Задача привлечения внимания решена другим цветом:

Здесь он используется для проставления акцента:

https://dribbble.com/shots/5701275-Content-Universe-Homepage-All-Services-Page
https://dribbble.com/shots/5701275-Content-Universe-Homepage-All-Services-Page

Оранжевый

1.Физиологический эффект:

возбуждение

2.Социокультурные ассоциации:

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

3.Связанные эмоции:

Волнение, Оптимизм, Энергия, Доступный, Предприимчивый, Независимый, Раздражение, Шок, Поверхностный, Неискренний, Неформальный

Историческая заметка:

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

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

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

Как использовать в дизайне:

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

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

https://dribbble.com/shots/7944148-Portfolio
https://dribbble.com/shots/7944148-Portfolio

Здесь мы можем наблюдать, как оранжевый цвет может отлично сочетаться со спокойным и минималистичным дизайном (важность соседних элементов):

https://www.behance.net/gallery/110724027/ArteDante
https://www.behance.net/gallery/110724027/ArteDante

Желтый

1.Физиологический эффект:

возбуждение

2.Социокультурные ассоциации:

Солнце, свет, изменения, наслаждение, идея, озарение, надежда, осень, бананы, трусость, мёд, золото, буддизм

3.Связанные эмоции:

Радость, бодрость, нежное возбуждение, приятные ощущения, навязчивость, дерзость

Историческая заметка:

Итак, до человека, предавшего Христа желтый был любим и почитаем, после истории с 30ю серебренниками он стал частью образа Иуды (что достаточно странно, поскольку нигде нет упоминаний о Иуде и его предпочтении в цветах, но что есть, то есть).

Поэтому как красный и оранжевый, желтый приобрел амбивалентность - двойственное свойство ассоциаций.

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

Как использовать в дизайне:

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

НО: является достаточно тяжело читаемым в виде текста, поэтому обязательно делать проверку по WCAG.

Например, на homepage ниже навигация слева трудно читаемая:

В этом примере желтый взят как фон - с черным шрифтом выглядит отлично:

https://dribbble.com/shots/3928077-Daily-UI-015-On-Off-Switch
https://dribbble.com/shots/3928077-Daily-UI-015-On-Off-Switch

Зеленый

1.Физиологический эффект:

Торможение (противоположность возбуждению)

2.Социокультурные ассоциации:

Жизнь, лес, джунгли, отдых, неподвижность, пассивность, покой, статичность, консервативность, армия, униформа, зависть, злость, Халк

3.Связанные эмоции:

Спокойствие, умиротворение, уравновешенность, уверенность, расслабление

Итак, зеленый цвет гораздо более однозначен (ура).

Историческая заметка:

В начале зеленый был в связке с синим. Было одно слово для обозначения и синего и зеленого. Но латынь расставила все точки над и - в языке появилось около 10 слов для обозначения зеленого цвета.

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

Вам мама в детстве выбирала зеленоватые обои для спальни?) Психотерапевт и социолог Макс Люшер описывал тягу пациентов к выбору зеленого цвета при состоянии напряжения. (можно взять на вооружение, если необходима ассоциация спокойствия у продукта).

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

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

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

Forrest Gump, 1994
Forrest Gump, 1994

Но здесь нужно осторожно подходить к оттенкам. При уходе в темно-зеленый, цвет уже ощущается как холодный, суровый, замкнутый и напряжённый (Привет от Слизерина).

Холодные оттенки зеленого были использованы для придания Слизерину эмоций опасности и зла
Холодные оттенки зеленого были использованы для придания Слизерину эмоций опасности и зла

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

Как использовать в дизайне:

В дизайне зеленый получил свою индивидуальную позитивную ассоциацию: yes’, ‘chech’, ‘accept’, ‘correct’ и т.д. Поэтому, если зеленый - один из основных цветов продукта, то нужно делать на эти элементы поправки.

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

Прекрасно передает эмоцию гармонии:

https://dribbble.com/greenchameleon
https://dribbble.com/greenchameleon

Уход в хаки оттенки сразу придаёт продукту тон качественности, надежности (видимо, работает ассоциация):

https://dribbble.com/shots/16954323-Sound-e-commerce-app
https://dribbble.com/shots/16954323-Sound-e-commerce-app

Бирюзовый

1.Физиологический эффект:

Торможение (противоположность возбуждению)

2.Социокультурные ассоциации:

Стерильность (безжизненность), холод, лёд, свежесть, легкость, вода, hi-tech

3.Связанные эмоции:

Возвышенность, приятные ощущения, удовлетворение, уверенность, нежность

Историческая заметка:

В основном, история цвета отсылает к драгоценному камню, который имеет этот цвет, а потому он имеет сильную ассоциацию с чем-то дорогим и ценным (В Тиффани это знают).

Также это цвет стекла, драгоценных минералов и океана. Всё это дало свой отпечаток на восприятие цвета. Мы видим в нем нечто чистое, свежее и приятное.

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

Также у этого цвета появилась новая ассоциация с высокими технологиями. В научно-фантастических фильмах мы обычно видим цифровые экраны с доминирующим бирюзовым цветом:

Как использовать в дизайне:

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

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

https://dribbble.com/shots/11884488-Smart-home-music-app
https://dribbble.com/shots/11884488-Smart-home-music-app
https://akash02designer.gumroad.com/l/dcOWE
https://akash02designer.gumroad.com/l/dcOWE

Синий

1.Физиологический эффект:

Торможение (противоположность возбуждению)

2.Социокультурные ассоциации:

Небо, море, океан, бесконечность, серьезность, глубина, традиции

3.Связанные эмоции:

Покой, удовлетворение, доверие, безмятежность, сверхчувствительность

Историческая заметка:

Гёте пишет о синем:

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

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

По статистике, синий - один из самых популярных ответов на вопрос “какой ваш любимый цвет.

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

Демократическое качество синий приобрел после появления синих джинсов.

Как использовать в дизайне:

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

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

Является своего рода универсальным ответом на вопрос: “ребят, какой цвет выбрать в нашу систему?”, - он охватывает практически все возможные ассоциации как негативные так и положительные поэтому станет отличным решением в каждом случае - нужно только выбрать нужный оттенок. Белый придаст легкости, черный - весомости и серьезности.

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

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

https://dribbble.com/shots/4913493-Mo-Banking
https://dribbble.com/shots/4913493-Mo-Banking

Если же добавить яркости или белого, цвет приобретает динаминку и оттенок креативности:

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://www.pentagram.com/work/national-women-s-history-museum
https://www.pentagram.com/work/national-women-s-history-museum

Есть волшебное сочетание синего с оранжевым, которое по статистическим данным является весьма привлекательными визуально, поскольку сочетание комплементарных цветов привлекает из-за одновременного возбуждения и торможения (оранжевый=возбуждение, бирюзовый/синий=спокойствие).

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

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

В общем, я думаю, вы поняли мою мысль;)

Если взять предмет искусства, то он просто содержит в самом себе проблему и решение. Это то, что заставляет нас понять: нравится ли нам фильм, песня, картинка или продукт? Если проблема нас не касается, то объект пройдет мимо и останется без внимания.


Сочетания вкусов и цветов работают по одному и тому же принципу.

Фиолетовый

1.Физиологический эффект:

возбуждение нарастает (к синему добавлен красный)

2.Социокультурные ассоциации:

Тайна, мистика, противоположности, внушаемость, иррациональность, интерес, (воздержанность, смирение)

3.Связанные эмоции:

Захватывающий, завораживающий, головокружительный, волнующий

Историческая заметка:

Фиолетовый и его исторические моменты я обсуждала в начале.

Как использовать в дизайне:

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

Фиолетовый наравне с синим универсален для продукта, поскольку может быть как динамичным (добавить больше красного), так и спокойным как удав (уход в синий).

Фиолетовый цвет придает интерфейсу форму, но он не навязчив:

https://dribbble.com/shots/5602013-Corporate-Office-Identity-Card
https://dribbble.com/shots/5602013-Corporate-Office-Identity-Card

В темных оттенках используется для "серьезных" продуктов на пару с синим-банковским:

https://dribbble.com/shots/8659108-Dashboard-user-interface
https://dribbble.com/shots/8659108-Dashboard-user-interface

Для более творческой целевой аудитории и дружелюбного тона он часто используется в стиле 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

Розовый

1.Физиологический эффект:

возбуждение

2.Социокультурные ассоциации:

Любовь, нежность, легкость, обаяние, романтика, сладость , веселье, удовольствие

3.Связанные эмоции:

Покой, легкость, беззаботность, веселье

Историческая заметка:

Розовый в основном использовался художниками для изображения закатов и розовых щек, и лишь к 18-19 веку в эпоху романтизма он вошел в гардероб (опять же) могу-себе-позволить-особ.

‘Just got my new pink suit’
‘Just got my new pink suit’

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

Как использовать в дизайне:

В дизайне он отлично акцентирует внимание как контрастный цвет в палитре или даже как основной.

Его часто используют в продуктах где нужно дать понять пользователю, что продукт несет в себе тон веселья и удовольствия: dribbble, apple music, airbnb используют его в своих системах.

Розовый цвет для фона создает творческую и ‘сладкую’ атмосферу:

https://dribbble.com/shots/16790797-Marketing-agency
https://dribbble.com/shots/16790797-Marketing-agency

Коричневый

1.Физиологический эффект:

Торможение (противоположность возбуждению)

2.Социокультурные ассоциации:

Земля, тело, уют, дерево, примитивные инстинкты, простота, чувственные ощущения тела, комфорт, хлеб, крафт, история, книги

3.Связанные эмоции:

Спокойствие, умиротворение, покой, чувство защищенности, уверенность

Историческая заметка:

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

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

‘Just another Monday in our 17th century’
‘Just another Monday in our 17th century’

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

Вывод такой: спокоен, стабилен, приятен.

Как использовать в дизайне:

Использовать для продуктов связанных прямой ассоциацией: музеи, библиотеки, мебельные и тп. либо если необходим цвет спокойный и стабильный, а синий или зеленый не подходят.

Момент: не зря художники взяли этот цвет для фона, он и правда служит отличным фоном, поэтому call-to-action кнопки могут быть потеряны, но при верной работе с оттенками это может работать и с акцентами.

Коричневый в цветовой системе арт-галереи:

https://www.behance.net/gallery/104660787/Rijksmuseum
https://www.behance.net/gallery/104660787/Rijksmuseum

Оттенки коричневого для кофешопа:

https://www.wconcept.co.kr/Issue/7491
https://www.wconcept.co.kr/Issue/7491

Серый

1.Физиологический эффект:

нейтральный

2.Социокультурные ассоциации:

Нейтралитет, граница, стена, теория, недоступность

3.Связанные эмоции:

Светлый: легкость, возвышенное возбуждение, готовность к возбуждению 

Темный: тяжесть, спокойствие, повышенная чувствительность

Историческая заметка:

Тоже был цветов одежды низших слоев, но потом стал популярен и у знати.

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

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

Серый для фона:

Как использовать в дизайне:

Собственно, серый уже нашёл места в дизайне: это цвет неактивных кнопок и ghost-шрифта инпутов.

Это уже создаёт определённую ассоциацию - элементы серого цвета сразу наводят на мысли о «неактивности», поэтому это нужно учитывать.

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

Текст выглядит пассивным на фоне:

https://www.behance.net/RronBerisha
https://www.behance.net/RronBerisha

Серый как один из основных цветов в системе дает ощущение спокойствия и чистоты (в данном примере):

https://www.behance.net/gallery/73732855/WANDA
https://www.behance.net/gallery/73732855/WANDA

Черный

1.Физиологический эффект:

Торможение (противоположность возбуждению)

2.Социокультурные ассоциации:

Темнота, конец, смерть, страх, защита, застой, отказ, протест, анархия, хаос, стиль

3.Связанные эмоции:

Страх, беспокойство, растерянность, уверенность,

Историческая заметка:

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

‘Would you like to read some Shakespeare with me?’
‘Would you like to read some Shakespeare with me?’

Пережив средневековье под клеймом нечистого колдовского цвета, чёрный пришёл в 18,19 и 20 век под флагом индустриальной революции: нефть, уголь, все дела.

Как использовать в дизайне:

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

Как сказал мой знакомый фотограф: “чб - это нечестно”. Если взять хороший шрифт и сделать его белым на черном фоне это сразу выглядит стильно. Ну что ж, пусть и у дизайнеров будет свой на все случаи жизни экспелиармус.)

https://dribbble.com/shots/15499981-Greece-Travel-Guide
https://dribbble.com/shots/15499981-Greece-Travel-Guide
https://dribbble.com/shots/16228762-Explore-Website-concept
https://dribbble.com/shots/16228762-Explore-Website-concept

Белый

1.Физиологический эффект:

Торможение (противоположность возбуждению)*

*[в большинстве случаев]

2.Социокультурные ассоциации:

Чистота, свадьба, абсолютная свобода, освобождение, бегство, мир, снег, молоко, мел, невинность

3.Связанные эмоции:

Легкость, свобода

Историческая заметка:

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

так и не придумала подпись к этой картинке (разве что "пожалуйста только не опять пепперони") - если есть хорошие идеи - жду их в комментариях.)
так и не придумала подпись к этой картинке (разве что "пожалуйста только не опять пепперони") - если есть хорошие идеи - жду их в комментариях.)

Есть ассоциация с мудростью поскольку белый - цвет седых волос.

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

В общем, белый однозначен по значению: чистота, ясность, доброта и тд.

Как использовать в дизайне:

В дизайне в чистом виде белый - это просто белый чистый лист.) В основном, это либо классический белый фон либо наоборот белый шрифт или элемент на оттеняющем фоне.

Белый как обычный фон:

https://thisisgrey.tumblr.com/post/138671974848/paulgaconcom
https://thisisgrey.tumblr.com/post/138671974848/paulgaconcom

Белый как цвет шрифта:

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

Карта ассоциаций цвета

С цветами более менее понятно. Но ведь это же гид. А гид создан для помощи в принятии решений.

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

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

Есть проект. С чем должен ассоциироваться? Определяющие слова будут подсказками к цветам.

Небольшая так сказать помощь для рефлексии.)

карту я составляла в первую очередь на английском. Если кто-то заинтересован в русской версии - пишите.
карту я составляла в первую очередь на английском. Если кто-то заинтересован в русской версии - пишите.

Скачать карту в PDF

Ну... как-то так.)

Заключение

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

Также мы провели краткий экскурс по цветам и составили на данном основании карту.

Но, несмотря на все это, все же хочется сказать снова:

Цвет - как слово, понятие относительное. Оно меняется от контекста к контексту.

Возможно, ваш продукт создаст новую культурную ассоциацию.

Всем спасибо.)


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/

Теги:
Хабы:
Всего голосов 23: ↑23 и ↓0+23
Комментарии8

Публикации