6 советов по выбору сногсшибательной цветовой схемы для сайта

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

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

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

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

1. Изучите основы психологии цвета
2. Ознакомьтесь с теорией цвета
3. Подумайте о сочетании цветовых комбинаций
4. Не усложняйте
5. Используйте контраст
6. Интегрируйте брендинг

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

1. Изучите основы психологии цвета

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

Цветовые ассоциации – очень мощный механизм. Мы развиваем их еще в младенческом возрасте, и они, как правило, остаются с нами на всю жизнь. Эти ассоциации инстинктивны и нередко являются подсознательными.

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

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

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

2. Ознакомьтесь с теорией цвета

В общем, теория цвета – это наука о том, как на нас влияет цвет. Если объяснять все подробно, на это уйдет слишком много времени – в университетах есть целые курсы, которые специализируются на теме цвета! Но существует несколько простых концепций, которые обогатят понимание вами цвета и могут использоваться для дизайна сайта.

Во-первых, необходимо понимать, что есть основные, вторичные и третичные цвета.

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

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

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

Теперь давайте поговорим о теплых и холодных цветах.

Вы, наверное, уже знаете, что такое теплые и холодные цвета. Красный, оранжевый и желтый классифицируются как теплые, а синий, зеленый и фиолетовый – как холодные.

В-третьих, важно понимать цветовые нюансы.

Не каждый цвет, который вы видите, является чистым. Многие цвета в Интернете, так или иначе смешаны.

Возможно, вы видите оттенок (цвет с добавлением белого), тень (цвет с добавлением черного) или тон (цвет с добавлением серого).

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

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

3. Подумайте о сочетании цветовых комбинаций

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

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

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

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

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

• Дополнительные цвета располагаются напротив друг друга в цветовом круге. Цветовая комбинация с использованием дополнительных цветов состоит из одного теплого и одного холодного цвета. Красный и зеленый – популярная пара дополнительных цветов.
• Контрастная триада состоит из основного цвета и двух цветов, смежных с дополнительным цветом основного.
• У триад и тетрад похожая ситуация. Триады используют цвета, равномерно распределенные по цветовому колесу (например, красный, синий и желтый). Тетрады – это четыре цвета, состоящие из двух пар дополнительных цветов (таких как красный, зеленый, синий и оранжевый).
• Аналоговые триады располагаются рядом друг с другом на цветовом круге. В результате аналоговые триады очень похожи, например, зеленый и желто-зеленый.
• Наконец, монохромные цвета –  это просто вариации одного и того же цвета. Этого можно достичь с помощью использования оттенков, теней и тонов.

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

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

4. Не усложняйте

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

У простоты есть два больших преимущества.

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

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

Цветовая схема WordStream – отличный пример сайта с продуманной цветовой схемой. На домашней странице всего три цвета: синий, оранжевый и зеленый.

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

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

Такая цветовая схема используется на всем сайте. Вот как выглядит одно из сообщений в блоге:

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

Блог Evernote – еще один замечательный пример такого подхода:

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

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

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

5. Используйте контраст

Далее давайте подумаем о контрасте. Это — один из самых важных элементов хорошего дизайна и его можно использовать при создании цветовой схемы сайта.

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

Взгляните на сайт WordStream еще раз:

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

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

6. Интегрируйте брендинг

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

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

Это ключевой момент – подумайте о цветовых ассоциациях людей. Соответствуют ли эти ассоциации тем ценностям, на которых вы строили свой бренд?

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

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

Наконец, начните использовать цветовые схемы!

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

Осталось только пойти и сделать это.

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

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

Источник