Значение цвета в дизайне сайтов и рекламе: как вызвать у пользователя нужные эмоции

Posted on by riasevastopol

Эмоциональный дизайн с примерами

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

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

Умение применять цвета возможно прокачивать до бесконечности. Это настоящая пропасть возможностей для действия на человека.

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

Теория цвета

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

Возможно разбить теорию цвета на три части:

Контраст

У каждого оттенка имеется противоположность, так сообщить, его «заклятый неприятель», что образовывает самый громадный контраст с этим цветом. Дабы отыскать таковой цвет, вы имеете возможность применять цветовой круг.Значение цвета в дизайне сайтов и рекламе: как вызвать у пользователя нужные эмоции Легко выберите цвет на противоположной стороне круга.

Дополнение

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

Резонанс

Любой цвет приводит к определённому настроению. броские тёплые цвета (красный, оранжевый, жёлтый) наполняют человека энергией, пробуждают его, а холодные чёрные оттенки (зелёный, светло синий, фиолетовый), напротив, расслабляют и успокаивают.

К примеру, BBC News применяют красную панель навигации, дабы пробудить читателя, усилить его возбуждённое состояние. Учитывая специфику сайта – сенсационные новости, – красный цвет выглядит логичным ответом.

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

Эмоциональное восприятие цвета

Никто не будет отрицать тесное сотрудничество цвета и чувств. И, очевидно, любой веб-дизайнер желает применять это влияние, дабы создавать верную воздух для каждого сайта. На базе нескольких изучений – анализа, размещённого на сайте Vandelay Design, и поста о цветах в Smash Magazine – мы объясним, как цвета воздействуют на эмоции и оказывают помощь создавать UX-дизайн.

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

ассоциации

и Красный Эмоции: власть, важность, юность.

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

К примеру, красный цвет весьма подходит сайту No Way NSA, цель которого – давать предупреждение о предполагаемых угрозах.

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

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

Оранжевый

ассоциации и Эмоции: дружелюбие, энергия, уникальность.

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

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

Жёлтый

ассоциации и Эмоции: счастье, энтузиазм, архаичность (более чёрные тона).

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

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

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

ассоциации и

Зелёный цвет Эмоции: рост, стабильность, темы финансов, темы внешней среды.

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

Более чёрные оттенки зелёного создают изобилия и впечатление богатства, как на сайте Ameritrade.

ассоциации и

Синий цвет Эмоции: самообладание, безопасность, открытость (более яркие оттенки), надёжность (более чёрные оттенки).

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

Соцсети наподобие Twitter и Facebook применяют более лёгкие и средние оттенки светло синий, а корпоративные сайты предпочитают более надёжности и тёмные оттенки силы. Хороший пример – агентство событийного дизайна Van VlietTrap. Применяя светло синий цветы в качестве фона, они визуально намекнули на умения и свои знания во флористике, и создали доверия и ощущение надёжности.

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

Фиолетовый

ассоциации и Эмоции: роскошь, романтика (яркие оттенки), мистика и тайна (чёрные оттенки).

Фиолетовый цвет исторически ассоциируется с королевским величием, намекает на роскошь. Пурпурные оттенки отражают богатство и щедрость в целом, что делает их хорошим выбором для предметов роскоши и модных товаров (кроме того для шоколада, к примеру, как Cadbury, что выбрал его цветом бренда). Более яркие оттенки, такие как лавандовый (фиолетовый с добавлением розового), навевают мысли о романтике, в то время как чёрные оттенки кажутся более роскошными и загадочными.

Тёмный

ассоциации и Эмоции: власть, изысканность, нервозность.

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

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

Белый

ассоциации и Эмоции: чистота, простота, добродетель.

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

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

ассоциации и

Серый цвет Эмоции: нейтральность, формальность, меланхолия.

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

 А в сочетании с более броскими цветами в дизайне серый фон думается современным, а не мрачным, к примеру на Awwwards.

Бежевый

ассоциации и Эмоции: передаёт темперамент остальных цветов.

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

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

Цвет слоновой кости

ассоциации и Эмоции: комфорт, элегантность, простота.

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

К примеру, на сайте Art in My Coffee коричнево-оранжевые элементы размещены на фоне цвета слоновой кости (что выглядит сероватым), что сохраняет чувство теплоты.

Цветовая гамма

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

 Не обращая внимания на то, что существует множество способов сочетать цвета, мы остановимся на трёх самых успешных и довольно часто применяемых.

Триада (тройная гармония, треугольник)

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

Двойная комплиментарная совокупность

Эту гамму тяжелее воплотить, но она может оказаться удачным ответом. Употребляется четыре цвета: два контрастных и два дополнительных. Посмотрите, как превосходно выглядит страница Florida Flourish, основанная на таковой схеме.

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

Аналоги (последовательная совокупность)

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

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

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

Инструменты-ассистенты для выбора цвета

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

  1. Adobe Color CC, ранее известный как Adobe Kuler. Это один из самых надёжных инструментов в выборе цвета.
  2. Paletton. В случае если вам нужен несложный инструмент для максимально стремительного выбора цвета, Paletton превосходно подойдёт.
  3. Flat UI Color Picker. Красивый инструмент для выбора цвета интерфейса пользователя.

А вдруг эти инструменты вам не подходят, вот ещё 28 сайтов с разными инструментами и палитрами для выбора цвета.

Прямая зависимость между эмоциями и цветом

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

И цвет играется во всём этом огромную роль.

© Ия Зорина, Лайфхакер

Случайные статьи:

Цвет. Беспроигрышное сочетание


Подборка похожих статей:

riasevastopol

More Posts