Доска вдохновения: сочетания цветов в дизайне

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

Как узнать какой оттенок подойдет вам?

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

• Монохроматическая

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

Монохроматическую палитру легко подобрать. Но у нее нет цветового контраста.

• Аналоговая

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

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

• Комплементарная

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

• Триадная

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

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

• Тетраидная

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

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

У каждого цвета свое значение и мы по-разному их воспринимаем. Что-то нас успокаивает, а что-то драйвит.

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

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

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

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

✔Adobe Color CC

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

✔Coolors

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

✔Material Color Tool

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

✔Colordot

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

✔Colourcode

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

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

✔Фиолетовый

Подойдет для оформления интернет-магазинов, ассортимент которых состоит из люксовых и нишевых товаров. Он транслирует энергию утонченности, изысканности и элегантности, а еще драйв и силу, как на сайте KUKOYAKA.PRO.

✔Розовый

Уместное решение для сайта, у которого преимущественно женская целевая аудитория. С ним ассоциируются такие понятия, как женственность, романтичность, юность, радость.

✔Синий

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

✔Коричневый

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

✔Красный

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

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

Рассмотрим основные цвета и их комбинации, которые могут погубить ваш сайт.

✔«Вибрационные» цвета

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

✔Белым по белому

Самая частая ошибка дизайнеров веб-сайтов. Фразы светлым шрифтом на светлом фоне, практически нечитаемые. А поэтому клиенту проще выйти с сайта, чем пытаться что-то разобрать.

✔Радужная радуга

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

✔Неоновая история

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

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

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

Цветовое оформление CTA:

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

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

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

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

• Незаметная кнопка CTA

Если есть призыв к какому-то действию, то он должен быть заметен пользователю — бросаться в глаза. Незаметный, блеклый call-to-action не работает. Но и слишком вызывающий, кричащий «НАЖМИ МЕНЯ» CTA тоже не хорошо. Призыв к действию нужно делать гармоничным и выделить на фоне контрастными оттенками.

• Изобилие цветов и оттенков

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

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

• Разный цвет у однотипных элементов

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

• Одинаковые цвета у разнотипных элементов

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

• Нестандартный цвет ссылок

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

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

Чтобы проверить правильно ли расставлены акценты на сайте, можно воспользоваться простым приемом. Его суть: взять страницу сайта и размыть ее в любой графической программе и посмотреть какие блоки первыми «цепляют»» внимание. Первые три считаются самыми важными с точки зрения пользователя, а поэтому их нужно использовать максимально. Звучит сложно и долго? Для дизайнеров KUKOYAKA.PRO это простая и любимая задача. Приходите, обсудим!