Использование цвета в дизайне

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

Страсть, любовь, гнев, дерзость.

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

Пример ниш, где можно использовать красный цвет:

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

Энергия, счастье, жизненная сила.

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

Пример ниш, где можно использовать оранжевый или желтый цвет:

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

Изобилие, природа, новые начинания.

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

Пример ниш, где можно использовать зеленый цвет:

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

Спокойствие, ответственность, надежность и качество.

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

Пример ниш, где можно использовать синий цвет:

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

Творчество, богатство, атмосфера, волшебство.

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

Пример ниш, где можно использовать фиолетовый цвет:

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

Загадочность, элегантность.

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

Пример ниш, где можно использовать черный цвет:

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

Используем преимущественно на женскую аудиторию.

Пример ниш, где можно использовать черный цвет:

В одном проекте вы вряд ли встретите только один из цветов, которые мы разобрали выше. Так или иначе для того, чтобы добиться хорошего результата - нужно использовать 2-3 цвета. Но очень важно брать во внимание то, что цвета должны хорошо сочетаться между собой. Ниже я расскажу про основные принципы сочетания цветов, внедрив один из которых - вы точно не ошибетесь и получите красивый результат. Разумеется, это не значит, что цвета нужно сочетать только по этим правилам. Цвет - это больше про ощущение. И с опытом вы будете больше понимать, какими способами можно сочетать цвета еще, опираясь на внутренние чувства. Однако на первых этапах лучше придерживаться цветового круга и принципов, которые точно не дадут вам ошибиться.

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

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

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

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

В первом варианте - синий цвет не очень сочетается с фоном, выбивается по оттенку и плохо воспринимается. Чтобы текст читался лучше - его можно делать белым или черным цветом (картинка 2), или же к цвету применяться режим наложения (картинка 3, на черный текст применен режим наложения overlay).

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

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

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

Например, если:

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

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

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

Где 70% картинки у вас будет в одном цвете (и его оттенках), а оставшиеся 30% будут в виде 1-2 контрастных цветов для акцентов.

Например, на первой картинке выше - 70% занимает синий цвет, 15% - оранжевый цвет товара и 15% - акцентный белый цвет у текстовых элементов.

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