Колористика в графическом и веб-дизайне: психология и правильный выбор

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

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

Психология цвета

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

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

Давайте перейдем к значениям цветов, которые есть в нашей культуре.

Значения цветов

• Синий. Вы можете заметить, что сайты и приложения Facebook, Twitter или ВКонтакте используют в своем дизайне палитру синих оттенков, потому что синий это цвет доверия. Доверия, компетенции, спокойствия, лояльность.
• Красный. Это страсть, энергия, деньги, любовь, сила.  Это база, которая вбита в наше подсознание чаще всего и её важно знать понимать, но также вы можете найти дополнительные примеры.  
• Желтый. Цвет счастья, благополучия, энергии, бодрости, креативности.
• Оранжевый. Успеха, дружелюбия, общительности, уверенности.
• Розовый. Искренности, изысканности, доброты, игривости, женственности.
• Фиолетовый. Духовности, царственности, роскоши, верности.
• Зеленый. Природы, естественности, здоровья, бодрости, развития.
• Коричневый. Природы, долголетия, прочности, строгости, дружелюбия.
• Черный. Формальности, радикальности, безопасности, надежности и скорби.

Также, кроме каких-то определенных цветов, у каждого цвета есть свои оттенки, а у этих оттенков есть свои характеры. Например, пастельные, нежные, натуральные цвета:

Есть глубокие, темные цвета:

Есть яркие, кричащие цвета:

Или спокойные, яркие цвета:

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

Основа выбора цвета, главное правило

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

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

А теперь посмотрите на фото и ответьте себе честно, понятно ли что здесь происходит? Хочется ли смотреть на такой слайд? Сравним с другим слайдом.

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

Как понять где и какие оттенки цвета правильно использовать?

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

Для того чтобы найти цветовые палитры, нужно вбить в поиск pinterest нужный нам цвет на английском, плюс фразу «Color Palette». Например желтая цветовая палитра будет «Yellow Color Palette», если нам нужна пастельно-розовая цветовая палитра мы вбиваем пастель «Rose Color Palette».

Мои рекомендации при работе с цветом:

• Я рекомендую новичкам придерживаться монохромных цветов. Допустим, у нас есть цвет и мы добавляем немного черного, немного белого и в итоге получаем целую гамму хорошо сочетаемых цветов. Например, в данном случае это 5 различных оттенков зеленого.

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

• Простота и минимализм — это ключ к тому, чтобы информация усваивалась легко и емко. Используйте правило 60-30-10, то есть 60 процентов площади графики занимает основной цвет, 30 второстепенный и 10 цвет акцентов. Так соблюдается хороший и проверенный баланс.

• Грязные цвета.  Я стараюсь подбирать более чистые цвета и не уходить слишком в серые, иначе будет создаваться не очень приятное впечатление «грязного дизайна».

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

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

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

Поделиться записью: