Самый простой способ создать настроение — это цвет.
Цвет очень сильно зависит от предметной области, с которой вы работаете.
Перед нами фрагмент интерфейса биржевого трейдера, который задизайнили в бюро:
Ребята, которые это дизайнили, сначала сделали его в светлой гамме из соображений, что это удобнее читать и так лучше подавать информацию. Когда они показали это клиенту, клиент сказал: «Всё здорово, интерфейс. Но если мы это мы покажем биржевым трейдерам, настоящим людям, которые этим занимаются, они этого не поймут. Они привыкли к тёмному — чтобы был тёмный фон и светлый текст». Так, видимо, исторически сложилось. Ну ничего не оставалось, как перекрасить.
В результате получился такой интерфейс:
При этом ребята оставили возможность сделать светлую гамму, если кто‑то готов к экспериментам, но по умолчанию была тёмная.
Вот скриншот с сайта сервиса ремонта «Руки»:
Здесь мы с помощью цвета пытались выразить привязку к той или иной категории, в которой можно делать ремонт. Из простых вещей: спальня — фиолетово‑тёмная, типа ночь и кто‑то спит. Кухня — это место, где плита, горячая вода и всё в таком духе, поэтому здесь оранжевый жар. Кабинет — место, где находится стол или кто‑нибудь учится, поэтому здесь деревянный цвет. Прихожая — это что‑то рядом с выходом на улицу, а на улице травка, поэтому зелёный. Туалет, ванная — понятное дело, вода, чистота, поэтому циан. Электрика в массовом сознании — это электричество, жёлтая молния, поэтому жёлтое. И так далее.
Можно было, конечно, всё перекрасить совершенно иначе, но такие простейшие цветовые ассоциации нам подсказали направление, и мы рассчитывали на то, что пользователям это поможет ориентироваться.
Мы поговорили о первичных ассоциациях, которые можно учитывать, и о том, что при выборе цвета и цветовой гаммы надо обязательно смотреть, как устроена предметная область и к чему люди привыкли. Потому что можно сделать всё очень красиво, а потом выяснится, что люди этого просто не поймут. И вы ничего с этим поделать не можете. Вы не можете людям влезть в голову и заставить их воспринимать реальность иначе. На это требуется много времени и много усилий, поэтому иногда приходится делать тёмную гамму даже при том, что она не очень удобная.
Следующее соображение — за каждым цветом стоят какие‑то ассоциации, которые нужно учитывать и иногда использовать. Иначе что‑то можно неудачно покрасить в тухлые цвета, и это будет вызывать нехорошие ассоциации.
Вот перед нами страница сайта благоустроительной компании, которую прислали в «Советы»:
Здесь, конечно, есть какие‑то проблемы с вёрсткой, но самое главное, что компания занимается благоустройством. Почему у неё такой тухлый сайт? Протухший серо‑зелёный цвет, протухшая серо‑зелёно‑жёлтая иллюстрация, и вообще ни разу не возникает ощущения, что эти ребята мне сделают хороший двор или что‑нибудь такое. Лучше вообще держаться от них подальше.
Ещё пример из «Советов»:
Кто‑то решил сделать своим знакомым подарок — плакат с правилами дома. Я оставлю в стороне оценку полезности всей этой затеи, давайте просто поговорим о цвете. Этот плакат, по идее, должен вызывать какие‑то приятные чувства. Здесь какие‑то слова про «любить», «улыбка», «поцелуй», ещё что‑то.
Но здесь опять какие‑то протухшие цвета: темнющий зелёный, серый, тухлый серо‑зелёный внизу — в сочетании с мрачными лицами и мусоркой на фоне. Ощущение, что лучше в этот дом не заходить.
А если бы всё было сделано в каких‑то чистых радостных цветах, я думаю, что хотя бы это радовало глаз. Поэтому, когда речь идёт про цвета, пожалуйста, внимательно смотрите на эту первичную эмоцию. Если вам нужно выразить радость, счастье и прочее, скорее всего, такие цвета вам не подойдут.
С зелёным самые простые ассоциации:
Зелёный — это цвет, который нам явно говорит, что произошло что‑то хорошее, что всё в порядке, что здесь какой‑то плюс, поэтому если нам нужно такие штуки выразить, то зелёный цвет нам подходит лучше всего.
А вторая ассоциация особенно важна в России. Зелёный цвет — это аптеки:
Попробуйте сделать аптеку не зелёной, и люди вас могут просто не узнать. Вам придётся прилагать какие‑то недюжинные усилия для того, чтобы люди поняли, что у вас здесь аптека. И в обратную сторону это работает. Если вы что‑то сделаете зелёным и там будет ещё хоть малейшая ассоциация с аптекой, скорее всего, вам придётся прилагать усилия, чтобы люди не подумали, что это аптека.
Жёлтый — это, конечно же, цвет предупреждения:
Это ещё не опасность, но, призыв обратить внимание и убедиться, что всё в порядке. Соответственно, оттенки жёлто‑оранжевого — в ту же степь.
Вот ещё предупреждение — плашка, что что‑то пошло не так:
Нет связи с интернетом. Не то что у вас вся работа обломилась и теперь вы умрёте, а просто оторвалась связь с интернетом. Потом восстановится, но прямо сейчас нет.
Вторая важная штука. Жёлтый — это цвет скидок и спецпредложений:
Зайдите в любой магазин, и там будут спецпредложения, скорее всего, жёлтые.
Ещё пример — всякие сумасшедшие дни в «Стокмане»:
В «Ашане» тоже спецпредложения, связанные с ценой, жёлтые:
В «Икее» — тоже жёлтые:
Когда вам нужно поиграть во всякую историю, связанную со спецценами, жёлтый — это ваш выбор.
Красный — это опасность, полный треш и угар, всё сломалось, отчёт не приняли:
Красный — цвет критических сообщений. Причём я показывал папки до этого, тоже с отчётами. И зелёные, и жёлтые папки были на сероватом фоне. А здесь мы мало того что поставили красный штамп, так ещё и всю папку покрасили в красный, и текст — усилили ощущение, что что‑то пошло не так.
А вот в интерфейсе произошли какие‑то критические ошибки, которые мешают работать дальше:
Появилось красное предупреждение сверху и всякие мелкие предупреждения в таблице.
Вот ещё критическое предупреждение, что здесь стоять нельзя:
Само собой, красный цвет — это ещё всякие знаки «стоп», всё остальное, что мы знаем из правил дорожного движения.
В большинстве случаев циановый цвет — это что‑то связанное с медициной:
Причём не с аптекой, а именно с медициной. Мы с этим столкнулись, когда сделали фирменный символ сервиса «Руки»:
У него основной цвет циановый. И мы отлично отдавали себе отчёт в том, что это совершенно нетипичный цвет для ремонтной области. Там скорее как раз принято что‑то жёлто‑чёрное. Но мы специально сделали циановый, чтобы выделиться.
На презентации, когда мы это всё показали, клиент первым делом сказал: «Ребята, а ничего, что это циановый? Это какая‑то медицина». Мы ответили, что вообще‑то это специально. Мы понимаем, что это может связаться с медициной, но, с другой стороны, у нас здесь куча артефактов, которые помогают понять, что медицина здесь ни при чём. Поэтому такой опасности нет. Но зато благодаря тому, что мы используем нестандартный для этой предметной области цвет, мы гораздо сильнее выделимся на фоне конкурентов.
При этом у нас были ещё другие цвета, но основной — циан. Вот «Руки» запомнились очень хорошо.
Самая главная ассоциация с розовым — это всегда спальня девочки:
Тут просто очень важно не переборщить и в эту штуку не влиться. Но на самом деле розовый цвет открывает очень интересные штуки и в последнее время довольно модный. Его можно использовать, главное, чтобы у вас не появилось это ощущение девочковой спальни, если оно вам не нужно. Главное — не подкреплять розовый цвет ещё какими‑то атрибутами: цветочками или ещё большим количеством розового.
Правильно подобранный коричневый цвет, особенно в сочетании с другими цветами, может создать впечатление чего‑то очень интеллигентного, богатого и клёвого:
Вот, например, перед нами какие‑то фрагменты иллюстрации фирменного стиля винного магазина «Гедонизм вайнс» в Лондоне. Здесь хорошо работает коричневый цвет вместе с этими чёрно‑белыми графическими штуками и оливково‑зелёным цветом. Прямо ощущение богатства, роскоши и интеллигенции.
Неправильно подобранный коричневый цвет грозит большими проблемами. В своё время мы делали интерфейс в «Высшей школе Главбуха». В какой‑то момент нам понадобилось сделать рамочки для сертификатов, которые люди получают после окончания школы. Сначала мы бы нарисовали какие‑то такие рамки:
Этот цвет вызывал образ какой‑то унылой школьной парты из детства, с которой не хотелось связываться совершенно. А иногда можно подобрать такой коричневый цвет и такое его количество, что у вас начнётся цвет детской неожиданности, какашки и всё прочее. С коричневым цветом надо действовать очень аккуратно, внимательно следить за его количеством и тем, какие цвета находятся рядом с ним. В данном случае мы рамочки перекрасили в тёмно‑вишнёвый:
Просто сравните, насколько такие сертификаты выглядят солиднее по сравнению с тем, что выше.
Что ещё хочу сказать по поводу цвета. В принципе очень хорошо понимать, откуда берётся наше восприятие цвета; как количество цвета, его соседство с другими цветами и соотношение цветов влияет на наше восприятие. Чтобы это всё знать и понимать, я очень рекомендую найти и прочитать книжку «Искусство цвета» за авторством Иоганнеса Иттена — это такой человек, преподаватель ещё в Баухаусе в начале 20 века. Работал с Кандинским и прочими ребятами. Написал книжку, она не очень большая. В ней всего 96 страниц. Выглядит примерно вот так:
И в ней автор очень хорошо рассказывает про то, откуда берётся наше восприятие цвета. Почему восприятие цвета всегда субъективно и как с этим можно работать. Рассказывает про теорию цветового круга, показывает принципы организации цветового контраста и так далее.
Даже обложка сделана по тем принципам, про которые он рассказывает. Рекомендую. Вроде бы при желании её можно найти в интернете, но, конечно же, в электронном виде все цвета страшно навраны, а так как мы говорим про цвет, там очень важно увидеть нюансы. В печатном виде книжку лучше воспринимать.