Содержание

Какие цвета наиболее предпочтительны при оформлении сайта?

Какие цвета наиболее предпочтительны при оформлении сайта?


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


Цветовые схемы учитываются и в веб-дизайне. Посетители сайтов обращают внимание на особенности ресурса, на то, как оформлены окна, заголовки, кнопки. Разработчики сайтов продумывают внешний вид кнопки Call-To-Action, которая заметна на общем фоне ресурса и мотивирует посетителя к выполнению того или иного действия.


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


Особенности «работы» различных цветовых композиций    


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


Синий цвет


Данная цветовая композиция широко используется в веб-дизайне, вызывает у пользователей доверительное отношение к владельцу ресурса, спокойствие, безмятежность. К примеру, такие цветовые оттенки использует компания PayPal, Facebook. Не рекомендуется синюю цветовую палитру использовать в сфере питания.


Красная цветовая палитра


Чаще всего, данный цвет ассоциируется со страстью, огнём, гневом, красотой. Выбирают оттенки красного при оформлении сайтов СМИ.


Желтый цвет


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


Зелёный цвет


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


Оранжевый цвет


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


Оттенки черного цвета


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


Белый цвет


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


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


Каким цветам отдают предпочтение современные пользователи?


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


Ограничения


Эффективность использования той или иной цветовой палитры зависит от

целевой аудитории и специфики интернет-ресурса. Стоит обращать внимание и на

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

Психология влияния цвета на конверсию сайта

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

Прежде чем выяснять «Как психология цвета влияет на конверсию сайта», стоит ознакомиться с теорией эмоционального поведения Келлермана-Плутчика:

«Колесо эмоций» американского профессора психологии Роберта Плутчика, 1980 г.

Все эмоции делятся на позитивные и негативные (побуждают действовать / останавливают человека от действий). В основе модели Плутчика три чувственно-эмоциональные тенденции: агрессия, подчинение, отчуждение. Психические процессы рассматриваются как трансформация «центральных» аффектов в базовые и составные эмоции, чувства и настроения. Так, во втором от центра круге восемь базовых биполярных эмоций: радость, грусть, страх, доверие, ожидание, удивление, злость, неприязнь. Их сочетания порождают эмоциональную реакцию посложнее. В арифметике эмоций возможны разные варианты:

  • Радость + Признание = Любовь;
  • Страх + Признание = Подчинение;
  • Доверие + Предвкушение = Надежда;
  • Радость + Предвкушение = Оптимизм;
  • Печаль + Предвкушение = Пессимизм.

Возрастные и гендерные предпочтения

Есть различия в цветовосприятии между мужчинами и женщинами. Мужской аудитории понравится синий и черный, а также зеленый. В дизайне, мужчины скорее оценят четкие цвета (bold colors). Совсем не многим по душе коричневый, оранжевый, пурпурный.

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

Дети любят теплые и яркие цвета, а также насыщенные тона. Молодых привлекают оранжевый, желтый, розовый (теплые цвета). Люди в возрасте предпочитают холодные и «спокойные» цвета, например голубой, сине-зеленый.

Любимые цвета потребителей

  • Импульсивных покупателей привлекают ярко-синий (Royal Blue), черный и красно-оранжевые цвета. Применяют в сфере фаст-фуд, при тотальных распродажах, на сайтах торговых центров. Провоцирующие цвета отлично продают, стимулируя безудержное потребление
  • Экономящим бюджет потребителям понравится освежающий цвет морской синевы, бирюзовый. Эти цвета отлично работают в продажах специализированных товаров
  • Рядового потребителя стимулируют к покупке разновидности розового и небесно-голубой – цвета, часто применяемые в онлайн-торговле одеждой

Красный

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

Синий

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

Зеленый

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

Оранжевый

Агрессивный и чрезвычайно заметный цвет. Оранжевым раскрашивают аварийно-сигнальные ограждения, а на веб-сайтах, кнопки призыва к действию (Call to Action). Это цвет уверенности, оптимизма, просветления и творческой активности. Цвет популярен в нишах здравоохранения и технологий, но не очень эффективен для тематик: одежда, финансы, авиа, авто, энергетика. Для сайтов о кулинарии, брендов в сегменте домохозяйства и сельского хозяйства, наблюдения показали непредсказуемость результата.

Черный

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

Белый и серебристый

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

Пурпурный

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

Желтый

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

Цвет может улучшить показатель конверсии

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

Регулярным посетителям важны дизайн и юзабилити. В конечном итоге, большинство онлайн-потребителей выбирает другой ресурс, если сталкиваются плохим дизайном или навигацией.
Что касается коэффициента конверсии кнопки call to action (призыва к действию) – лучшие цвета красный, оранжевый или зеленый, когда достаточно выделяют целевой призыв из контента. Они увеличивают на 13.5% коэффициент конверсии мобильных пользователей, а в целом на 9%. На 6.5% чаще добавляется товар «В корзину». Компании BMI, HubSpot, Ript, и VegasSlotsOnline добились улучшений конверсий от 2,5% до 175%, поменяв лишь цвет CTA-кнопок.

Вывод

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

Об этом исследовании психологии цветовосприятия и влиянии цветов на конверсию сайта – в удобном формате познавательной инфографики:

Цвета для сайта | Подбор цвета сайта

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

Цветовые предпочтения среди мужчин и женщин

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

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

Маркетинговый подход к выбору цвета для сайта

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

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

Цветовые ассоциации

Безопасные цвета для сайта

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

Для удобства выбора цветов сайта, разрабатывая бриф (см. страницу брифа на картинке слева), специалисты студии RBS-Webmarket учли рекомендации лидеров рынка и собственные наработки в этой области.

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

В брифе, над каждым цветом указаны два значения — RGB (для создания цвета в графическом редакторе) и HEX (для обозначения цвета в HTML).

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










































































































































ПримерHTML-кодЭквивалентное названиеНазвание цвета
 #000000blackЧерный
 #000080navyТемно-синий
 #00008BdarkblueТемно-голубой
 #0000CDmediumblueУмеренно-голубой
 #0000FFblueГолубой
 #006400darkgreenТемно-зеленый
 #008000greenЗеленый
 #008080tealЧайный
 #008B8BdarkcyanТемный циан
 #00BFFFdeepskyblueТемный небесно-синий
 #00CED1darkturquoiseТемно-бирюзовый
 #00FA9AmediumspringgreenУмеренный синевато-серый
 #00FF00limeИзвестковый
 #00FF7FspringgreenВесенний зеленый
 #00FFFFaquaСиний
 #191970midnightblueНочной синий
 #1E90FFdodgerblueТускло-васильковый
 #20B2AAlightseagreenСветлый морской волны
 #228B22forestgreenЛесной зеленый
 #2E8B57seagreenМорской волны
 #2F4F4FdarkslategrayТемный синевато-серый
 #32CD32limegreenЗеленовато-известковый
 #3CB371mediumseagreenУмеренный морской волны
 #40E0D0turquoiseБирюзовый
 #4169E1royalblueКоролевский голубой
 #4682B4steelblueГолубовато-стальной
 #483D8BdarkslateblueТемный серовато-синий
 #48D1CCmediumturquoiseУмеренно-бирюзовый
 #4B0082indigoИндиго
 #556B2FdarkolivegreenТемно-оливковый
 #5F9EA0cadetblueБлеклый серо-голубой
 #6495EDcornflowerblueВасильковый
 #66CDAAmediumaaquamarineУмеренно-аквамариновый
 #696969dimgrayТускло-серый
 #6A5ACDslateblueСеровато-синий
 #6B8E23olivedrabТускло-коричневый
 #708090slategrayСиневато-серый
 #778899lightslategrayСветлый синевато-серый
 #7B68EEmediumslateblueУмеренный серовато-синий
 #7CFC00lawngreenЗеленой травы
 #7FFF00chartreuseФисташковый
 #7FFFD4aquamarineАквамарин
 #800000maroonОранжево-розовый
 #800080purpleПурпурный
 #808000oliveОливковый
 #808080grayСерый
 #87CEEBskyblueНебесно-голубой
 #87CEFAlightskyblueСветлый небесно-синий
 #8A2BE2bluevioletСветло-фиолетовый
 #8B0000darkredТемно-красный
 #8B008BdarkmagentaТемный фуксин
 #8B4513saddlebrownСтарой кожи
 #8FBC8FdarkseagreenТемный морской волны
 #9370DBmediumpurpleУмеренно-пурпурный
 #9400D3darkvioletТемно-фиолетовый
 #98FB98palegreenБледно-зеленый
 #9932CCdarkorchidТемно-орхидейный
 #9ACD32yellowgreenЖелто-зеленый
 #9CEE90lightgreenСветло-зеленый
 #A0522DsiennaОхра
 #A52A2AbrownКоричневый
 #A9A9A9darkgrayТемно-серый
 #ADD8E6lightblueСветло-голубой
 #ADFF2FgreenyellowЖелто-зеленый
 #AFEEEEpaleturquiseБледно-бирюзовый
 #B0C4DElightsteelblueСветло-стальной
 #B0E0E6powderblueТуманно-голубой
 #B22222firebrickОгнеупорного кирпича
 #B8860BdarkgoldenrodТемный красно-золотой
 #BA55D3mediumorchidУмеренно-орхидейный
 #BC8F8FrosybrownРозово-коричневый
 #BDB76BdarkkhakiТемный хаки
 #C0C0C0silverСеребристый
 #C71585mediumvioletredУмеренный красно-фиолетовый
 #CD5C5CindianredЯрко-красный
 #CD853FperuКоричневый
 #D2691EchocolateШоколадный
 #D2B48CtanЖелтовато-коричневый
 #D3D3D3lightgrayСветло-серый
 #D8BFD8thistleЧертополоха
 #DA70D6orchidОрхидейный
 #DAA520goldenrodКрасного золота
 #DB7093plaevioletredБледный красно-фиолетовый
 #DC143CcornsilkМалиновый
 #DCDCDCfainsboroСветлый серо-фиолетовый
 #DDA0DDplumСливовый
 #DEB887burlywoodСтарого дерева
 #E0FFFFlightcyanСветлый циан
 #E6E6FAlavenderБледно-лиловый
 #E9967AdarksalmonТемный оранжево-розовый
 #EE82EEvioletФиолетовый
 #EEE8AApalegoldenrodБледно-золотой
 #F08080lightcoralСветло-коралловый
 #F0E68CkhakiХаки
 #F0F8FFaliceBlueБлекло-голубой
 #F0FFF0honeydewСвежего меда
 #F0FFFFazureЛазурь
 #F4A460sandybrownРыже-коричневый
 #F5DEB3wheatПшеничный
 #F5F5DCbeigeБежевый
 #F5F5F5whitesmokeБелый дымчатый
 #F5FFFAmintcreamМятно-кремовый
 #F8F8FFghostwhiteТуманно-белый
 #FA8072salmonОранжево-розовый
 #FAEBD7antuqueWhiteАнтичный белый
 #FAF0E6linenЛьняной
 #FDF5E6oldlaceСтарого коньяка
 #FF00FFfuchsiaФуксия
 #FF1493deeppinkТемно-розовый
 #FF4500orangeredКрасно-оранжевый
 #FF6347tomatoТоматный
 #FF69B4hotpinkЯрко-розовый
 #FF7F50coralКоралловый
 #FF8C00darkorangeТемно-оранжевый
 #FFA07AlightsalmonСветлый оранжево-розовый
 #FFA500orangeОранжевый
 #FFB6C1lightpinkСветло-розовый
 #FFC0CBpinkРозовый
 #FFD700goldЗолотой
 #FFDAB9peachpuffПерсиковый
 #FFDEADnavajowhiteГрязно-серый
 #FFE4B5moccasinБолотный
 #FFE4C4bisqueБисквитный
 #FFE4E1mistyroseТуманно-розовый
 #FFEBCDblanchedalmondСветло-кремовый
 #FFEFD5papayaawhipДыни
 #FFF0F5lavenderblushБледный розово-лиловый
 #FFF5EEseashellМорской пены
 #FFF8DCcornsilkТемно-зеленый
 #FFFACDlemonchiffonЛимонный
 #FFFAF0floralwhiteЦветочно-белый
 #FFFAFAsnowСнежный
 #FFFF00yellowЖелтый
 #FFFFE0lightyellowСветло-желтый
 #FFFFF0ivoryСлоновой кости
 #FFFFFFwhiteБелый

Трендовые цвета в веб-дизайне

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

 

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

 

 

Теплые цвета в веб-дизайне в 2021 году

 

В 2021 году в моду возвращаются насыщенные яркие цвета, которые были очень популярны в 80-90 годах. Ретростиль сейчас преобладает везде — в модной одежде, аксессуарах и даже в дизайнерских оформлениях сайтов. Подобное сочетание цветов для сайта вызывает ностальгию и теплые воспоминания, а это, в свою очередь, формирует позитивную эмоциональную связь с компанией.

 

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

 

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

 

Жидкое золото

 

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

 

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

 

 

 

 

Все оттенки розового

 

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

 

 

 

 

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

 

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

 

Красно-оранжевые тона

 

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

 

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

 

 

 

 

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

 

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

 

 

Цвета, как напоминание о единстве человека с природой

 

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

 

 

 

 

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

 

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

 

 

Холодные цвета в веб-дизайне

 

Серый как основа

 

Дизайнеры раньше использовали серый исключительно как дополнительный. В этом сезоне все кардинально изменилось. Серый в сочетании с желтым и зеленым — это необычное дизайнерское решение. А все, что выглядит необычно, привлекает к себе внимание.

 

 

 

 

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

 

Радикально черный 

 

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

 

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

 

 

 

 

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

 

Классический синий

 

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

 

 

 

 

Цвет морской волны и мята

 

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

 

 

 

 

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

 

 

Актуальное сочетание цветов в веб-дизайне в 2021 году

 

Футуристические сочетания цветов

 

Сочетание розового, синего и пурпурного, фиолетового сегодня в тренде у веб-дизайнеров. 

 

Шаблон сайта от Ucraft

 

 

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

 

Трио: голубой, серый и синий

 

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

 

 

 

 

Классика: черный, белый и серый

 

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

 

Шаблон сайта от Ucraft

 

 

Цветовые тренды для разных стран

 

Shutterstock было проведено исследование, с целью изучения популярности тех или иных цветов для сайтов в различных странах. После анализа результатов определилась такая тенденция: жители Германии и Франции предпочитают оттенки фиолетового; для японцев в фаворе белый, а россиянам нравится оформление в бледно-зеленых тонах.

 

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

 

 

Полезные сайты подбора цвета для веб-дизайнеров

 

Чтобы дизайнеру облегчить работу по подбору палитры для сайта, созданы специальные сайты и сервисы:

 

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

  • Color Mixer — инструмент для работы над палитрами. Регулируя параметры оси, формируйте оптимальное цветовое сочетание. 

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

  • Color Leap — сервис поиска из 180 цветовых схем, используемых человечеством на протяжении последних 4000 лет. На сайте легко проследить, как менялись популярные оттенки в каждом веке и столетии.

  • Color Designer — помогает в формировании гармоничной гаммы для сайта. Для этого нужно выбрать цвет, а сервис все сделает автоматически. Вы можете опираться на заранее выбранные цвета или же на месте работать на составление собственного варианта.

  • CoolHue 2.0 — представляет в общее пользование 60 разнообразных градиентов, их можно экспортировать как изображение или скачать кодом.

  • Pigment — сервис, который поможет генерировать яркие оттенки. Система отталкивается от определенного пигмента и освещения. 

  • Palettable — на этом сервисе можно подобрать цвета по принципу хорошо/плохо. Редактирование происходит вручную, поэтому можно подобрать тон так, чтобы он гармонировал с другими тонами.

  • Culrs — на этом ресурсе профессионалами собраны готовые цветовые схемы. Здесь можно найти подходящую палитру для дизайна своего сайта.

  • Mesh Gradients — бесплатный сервис, где собрана коллекция фоновых градиентов. Их можно скачать в различных разрешениях.

 

 

Как подобрать цвета для сайта?

 

Прежде чем применить на своей сайте один из трендов цветовой гаммы 2021 года, необходимо понимать, почему это так важно:

 

  • Грамотно подобранный цвет сайта, на 80% делает бренд более узнаваемым.

  • На 90% первое впечатление, которое появляется у юзера от сайта зависит от выбранной палитры.

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

  • При помощи изменения оттенков можно расставить акценты и сформировать путь клиента, который ведет, например, к кнопке с призывом к действию.

  • Выбор определенной цветовой палитры упрощает дизайнеру работу при расширении сайта.

 

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

 

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

 

В палитре веб-сайта дизайнер может использовать несколько тонов. Однако во всем должна быть мера: лучше всего выбрать 1 основной и 2-3 дополнительных цвета. 

 

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

Лучшие цвета для оформления сайта: палитры из кино

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

  1. Лучшие цвета для оформления сайта
  2. Цвета для сайта на тему мода и красота
  3. Спорт, хобби и развлечения
  4. Бизнес и услуги
  5. Цветовые тренды 2020 года

Выбор цветовой палитры — это сложный процесс из-за бесконечного количества возможных комбинаций. Веб-дизайнеры часами могут щелкать по цветовому кругу в Photoshop в поисках того самого идеального оттенка, который бы “зажег” дизайн.

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

Лучшие цвета для оформления сайта

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

  •     Синий: уверенность, спокойствие, успех
  •     Фиолетовый: очарование, гламур, престиж
  •     Зеленый: прочность, экологичность, надежность
  •     Желтый: современность, задор
  •     Красный: уверенность в себе, экспертность, мотивация

Холодные цвета отлично передают профессионализм и спокойствие. Теплые цвета — хороший выбор, если ваш бренд отражает энергию, страсть и энтузиазм. Используйте правило, где 60% — доминирующий оттенок, 30% — вторичный цвет, а 10% — акценты (например, СТА).

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

Цвета для сайта на тему мода и красота

Интернет-магазин одежды

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

«Эдвард Руки-ножницы»

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

“Волк с Уолстрит”


Сайт свадебного салона

“Мария-Антуанетта”


Сайт салона красоты

“Волк с Уолл-стрит”


Спорт, хобби и развлечения

Сайт на тему автомобили

Красный — цвет страсти, энергии, скорости. В продуманном сочетании с черным и синим придаст сайту авторитетности.

 “Неоновый демон”


Сайт в тематике развлечения

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

“Бегущий по лезвию 2049”


Магазин домашнего декора

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

“Леон-киллер”


Сайт фотографа

“Ребенок Розмари”


Спортивный сайт

“Омерзительная восьмерка”


Бизнес и услуги

Сайт ресторана

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

“От заката до рассвета”


Сайт недвижимости

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

“Светская жизнь”


Медицинский сайт

Медицинские сайты должны вызывать доверие и чувство исцеления. Это хорошо выходит у синих оттенков.

“Шоу Трумана”

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

“Бронсон”


Сайт турагентства

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

“Любовь и милосердие”


Бизнес-сайт

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

“Марсианин”

 “Оно”

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

“Труп невесты”


Сайт адвоката

“Темный рыцарь”


Интернет-магазин электроники

Веселый и игривый желтый цвет привлекает внимание. Его можно использовать в названии бренда, СТА-кнопках, навигационных элементах в сочетании с нейтральными тонами.

“Афера по-американски”

“Терминатор”


Цветовые тренды 2020 года

                    Информация взята с www.shutterstock.com

Откройте для себя Lush Lava, Aqua Menthe и Phantom Blue — три оттенка, которые будут доминировать в 2020 году и продемонстрировать тенденцию к максимализму и насыщенным оттенкам.

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

Пышная лава

взято с www.shutterstock.com

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

Аква Менте

Взято с www.shutterstock.com

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

Фантомный синий

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


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

Друзья, а какая палитра понравилась вам больше всего? Из чего вы черпаете вдохновение? Поделитесь с нами!


Читайте также:

10+ трендов веб дизайна 2020

Дизайн в пастельных тонах: примеры использования

40 Бесплатных Photoshop градиентов для дизайна

Теория цвета: как выбрать правильные цвета для сайта

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

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

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

Как цвет влияет на поведение потребителей

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

В исследовании «Влияние цвета на маркетинг» (Impact of color on marketing) говорится, что использование разных цветов может существенно влиять на настроение и поведение потребителей. Утверждается, что от 60 до 90% покупателей (в зависимости от категории продукта) дают положительную или отрицательную оценку товару, основываясь только на его цвете.

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

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

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

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

Теория цвета

Цветовой спектр

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

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

Основные цвета (Primary Colors) — красный, синий, желтый. Источник — color-wheel-artist.com

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

Вторичные цвета (Secondary colors) — зеленый, оранжевый, фиолетовый. Источник — color-wheel-artist.com

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

Третичные цвета (Tertiary Colors) — сине-зеленый, красно-оранжевый, желто-зеленый, красно-фиолетовый, желто-оранжевый, сине-фиолетовый. Источник — color-wheel-artist.com

Цветовой круг

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

Цветовой круг (цветовое колесо, хроматический круг). Источник — www.ecolourprint.co.uk

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

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

Аналогичные цвета. Источник — www.ecolourprint.co.uk

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

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

Комплиментарные (дополняющие) цвета. Источник — www.ecolourprint.co.uk

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

Триадные цвета. Источник — www.ecolourprint.co.uk

Параметры цвета

В начале XX века американский художник Альберт Манселл ввел важные для современной теории цвета понятия — параметры цвета. Это тон (оттенок), яркость, насыщенность.

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

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

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

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

Цветовые ассоциации и психология цвета

Маркетологи Университета Севильи (Испания, Universidad de Sevilla) выяснили, что на поведение потребителей влияет не столько сам цвет, сколько его «уместность и целесообразность» для продукта. Уместность определяют цветовые ассоциации — образы и эмоции, которые человек связывает с определенным оттенком.

О важности цветовых ассоциаций в маркетинге также говорят результаты маркетингового исследования «Влияние цветов продуктов на восприятие уместности логотипа бренда» (The interactive effects of colors and products on perceptions of brand logo appropriateness).

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

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

Красный

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

Красный используют многие бренды сферы быстрого питания и ресторанного бизнеса из-за способности пробуждать аппетит. Также красный часто можно увидеть на сайтах и в рекламных кампаниях фитнес-клубов, магазинов нижнего белья, товаров 18+. Считается, что красный даже может повышать пульс!

Оранжевый

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

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

Желтый

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

Наиболее эффектно желтый смотрится в сочетании с контрастными цветами.

Зеленый

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

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

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

Синий

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

Среди отрицательных чувств, которые вызывает синий — замкнутость, отстраненность, холодность и недоступность

Фиолетовый

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

Отрицательные ассоциации с фиолетовым — подавленность, мрачность, удрученность, излишняя экстравагантность.

Розовый

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

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

Несмотря на это, в веб-дизайне розовый прекрасно уживается с более «серьезными» базовыми оттенками — серым, черным, синим.

Черный

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

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

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

Белый

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

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

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

Есть два основных способа применить теорию цвета для создания эффективных продающих страниц:

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

Как использовать психологию цвета

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

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

Дизайн сайта свадебного салона: нежные пастельные оттенки низкой насыщенности на преобладающем белом фоне

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

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

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

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

Дизайн сайта магазина мужской одежды и аксессуаров: сдержанное сочетание базовых оттенков

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

Как подбирать комбинации оттенков для повышения удобства восприятия информации

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

Например, в ColoRotate есть целая библиотека цветовых схем, которые можно выбирать, сохранять и редактировать с помощью современного 3D инструмента (3D color tool).

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

При выборе цветовой палитры не используйте больше трех-четырех цветов на одной странице. Аляповатый дизайн производит плохое впечатление, способствует расфокусировке внимания пользователей, отвлекает от основной информации на сайте и «уводит» от СТА-кнопок.

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

Существует специальная формула эффективного соотношения базовых цветов на продающей странице: 60/30/10. Это значит, что фон страницы занимает 60% площади, вторичный оттенок — около 30%, цветовой акцент — остальные 10%.

Формула эффективного соотношения базовых цветов на продающей странице. Источник — lpgenerator.ru

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

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

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

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

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

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

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

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

Медицинские цвета — использование цветовой гаммы в дизайне сайта

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

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

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

Белый как основной цвет

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

Протестировать бесплатно

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

Протестировать бесплатно

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

Синий как дополнительный цвет

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

Протестировать бесплатно

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

Протестировать бесплатно

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

Протестировать бесплатно

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

Зеленый как дополнительный цвет

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

Протестировать бесплатно

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

Розовый как дополнительный цвет

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

Протестировать бесплатно

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

Желтый и оранжевый как медицинские цвета

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

Протестировать бесплатно

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

Купить хостинг

Лучшие цвета для веб-сайтов с большим трафиком, конверсией и продажами

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

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

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

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

«Какой цвет выбрать для своего веб-сайта?»

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

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

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

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

Как выбор цвета веб-сайта может повлиять на конверсию и продажи

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

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

Как выбрать цветовую комбинацию для вашего веб-сайта

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

Обратите внимание на графику, созданную Material UI, которая демонстрирует все цвета, используемые ведущими сайтами со всего мира.

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

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

Используйте основные цвета, чтобы выделиться

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

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

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

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

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

Использование цветовых комбинаций для объединения оттенков

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

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

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

Бесплатные цвета

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

Аналогичные цвета

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

Триада цветов

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

Цвет — это все о психологии аудитории

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

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

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

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

10 лучших цветов для веб-сайтов с высоким коэффициентом конверсии

Имея в виду все эти знания, давайте перейдем к медным гвоздикам.

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

Белый

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

Без пробелов вы можете ошеломить свою аудиторию и заставить ее скакать.

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

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

Word-Form использует белый цвет для демонстрации своей профессиональной фотографии, и дизайн работает хорошо.Это просто и приятно для глаз.

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

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

Источник

Синий

Синий цвет используется на многих веб-сайтах различных оттенков, а именно на Facebook, Twitter, LinkedIn, Skype, Dropbox, WordPress и многих других.

Для этого есть веская причина. Синий считается цветом общения, интеллекта и спокойного размышления.

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

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

Черный

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

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

Вы заметите, что черный цвет широко используется в производстве мощных и люксовых брендов, таких как Mercedes-Benz, Under Armour, Loreal, Rolls Royce и многих других.

Источник

Обратите внимание, что Mercedes также использует много серого, что аналогично черному цвету на цветовом круге.

серый

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

Источник

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

Красный

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

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

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

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

Источник

желтый

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

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

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

Источник

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

Источник

оранжевый

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

Nickelodeon и Hooters — два примера, в которых апельсин хорошо используется для возбуждения и побуждения к действию.

Источник

Источник

коричневый

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

Бренд стал синонимом коричневых грузовиков и столь же украшенных водителей-курьеров.

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

Источник

фиолетовый

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

Многие бренды используют фиолетовый цвет, например Yahoo, но лишь немногие будут активно его использовать, например, стартап-сетевой сервис Big Top.

IBM Watson использует фиолетовый, но это скорее акцент, уступающий место черному, белому и синему.

Источник

Зеленый

Этот цвет помогает людям чувствовать себя гармоничными и уравновешенными.

Зеленый — это цвет равновесия, мира и экологической осведомленности. Если ваша компания занимается сельским хозяйством, можно использовать зеленый цвет. Взгляните на веб-сайт John Deere в качестве отличного примера.

Источник

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

Источник

Секрет определения того, какие цвета привлекают и преобразуют больше всего

Чтобы помочь вам создать наилучшую цветовую схему для вашего веб-сайта, используйте удобный инструмент, например Калькулятор цветов, предоставленный Sessions College for Professional Design.

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

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

Посмотрите, как взаимодействуют ваши пользователи

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

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

Источник

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

Источник

A / B Тест различных цветов и комбинаций

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

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

Заключение

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

Выбор цвета веб-сайта — это серьезное решение.

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

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

Ваша аудитория обязательно заметит.

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

Лучшие цветовые палитры для повышения вовлеченности веб-сайтов (2020)

Знаете ли вы, что определенные цвета заставляют людей чувствовать и реагировать по-разному?

Вы ошеломлены количеством возможных цветовых палитр веб-сайта? Не зная, какой выбрать?

У всех есть любимые цвета.

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

Цвета на самом деле вызывают эмоциональные отклики в зависимости от используемой палитры.

Хороший выбор цвета требует тщательного планирования.

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

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

Почему ваша цветовая схема так важна?

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

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

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

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

Вот как:

1. Обеспечение узнаваемости бренда

Ваш сайт — это, по сути, дом вашей компании в Интернете.

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

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

К счастью, цвет повышает узнаваемость бренда на 80%.

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

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

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

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

Конечно, веб-дизайн — это гораздо больше, чем просто цвет.

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

2. Сформируйте отношение посетителей к вашему сайту

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

В определенной степени причина этого ясна.

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

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

Многие компании пользуются этими связями, как показано логотипами на следующей диаграмме.

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

Это напрямую связано с «индивидуальностью» вашего бренда.

В одном исследовании личности бренда психолог и профессор Стэнфордского университета Дженнифер Аакер пришла к выводу, что пять основных параметров играют роль в индивидуальности бренда:

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

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

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

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

Например, синий часто считается самым безопасным выбором.Отчасти это связано с тем, что это самый распространенный «любимый» цвет среди большинства населения.

На самом деле 57% мужчин и 35% женщин считают, что это их любимый цвет.

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

Также стоит отметить, что синий цвет также часто ассоциируется с чувством доверия, авторитета и надежности.

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

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

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

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

3. Развивайте чувство порядка

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

Лучший способ сделать это — изучить несколько основных принципов теории цвета.

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

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

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

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

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

При этом аналогичные цветовые схемы также являются одними из самых ярких.

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

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

Эти палитры — одни из самых простых в создании и «самых безопасных» в применении, потому что разные оттенки одного и того же цвета редко сталкиваются или кажутся слишком занятыми.

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

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

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

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

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

Триадная цветовая схема — один из основных вариантов.

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

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

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

4.Выделение определенных элементов

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

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

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

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

Такой подход также соответствует предпочтениям большинства потребителей.

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

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

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

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

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

5. Упростите конструкторские решения

Когда дело доходит до ведения веб-сайта или бизнеса (или того и другого!), Всегда полезно искать способы упростить базовые процессы.

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

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

Это особенно верно, если вы нашли время, чтобы документировать свою палитру простым в использовании способом, как это было в этом бизнесе:

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

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

Таким образом, вместо того, чтобы ломать голову над всеми различными возможностями, вы можете выбрать цвета из заранее заданного списка. И как только вы выберете несколько для использования или тестирования, все коды HEX и RGB уже будут прямо перед вами.

Сколько цветов нужно добавить?

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

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

Как выбрать цветовую схему веб-сайта

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

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

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

16 отличных цветовых палитр для повышения заинтересованности веб-сайтов (2020)

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

1. Mea Cuppa

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

Палитра веб-дизайна вызывает ощущение кафе и отражается в главном изображении сайта, что создает единство.

2. Большая вершина

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

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

3.Глаз Тори

Наш третий пример взят из инструмента визуализации Twitter Tori’s Eye. Это отличный пример преимущественно монохромной цветовой схемы. Здесь мы видим эффекты простой, но мощной цветовой палитры, сосредоточенной вокруг оттенков зеленого.

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

4. BarkBox

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

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

5. Набор для выживания с сыром

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

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

6. Северный рубин

У конференции

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

7. Озеро Нона

Lake Nona — это сайт для определенного места, в частности, у воды.Следовательно, нет ничего удивительного в том, что здесь представлен синий цвет. Другие нейтральные цвета позволяют хорошо выделяться синему.

8. Лимонная стойка

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

9. Монетный двор

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

10. Одопод

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

11. Fiverr

Вы могли заметить, что многие компании резервируют определенный цвет — в случае Fiverr — зеленый — исключительно для CTA.Его больше нигде на сайте нет. Фактически, ColorFav даже не подобрал его, потому что в нем преобладают более нейтральные цвета.

12. Школа цифровой фотографии

Вы ожидаете, что у компании, специализирующейся на графическом искусстве, будет отличная цветовая палитра веб-сайта, и Школа цифровой фотографии вас не разочарует. Яркие цвета помогают привлечь внимание зрителя. И, как и Fiverr, оранжевый цвет, используемый в CTA, даже не отображается на палитре сайта, потому что он используется экономно для воздействия.

13. Ahrefs

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

14. Millo.co

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

15.Брайан Гарднер

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

16. Ткацкий станок

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

Удобный список ресурсов для выбора идеальной цветовой палитры веб-сайта

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

Во-первых, нужно ли вам вдохновение?

1: BrandColors

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

Ищете готовую палитру?

2: ColourLovers

ColourLovers — это форум, посвященный дизайну палитр, пользователи которого прислали почти 2 миллиона палитр. Вы можете найти «палитры, включающие этот цвет», просмотреть или подписаться на дизайнеров. Часто вы найдете варианты одной и той же палитры, дающие вам готовые варианты оттенка и насыщенности.

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

3: ColoRotate

ColoRotate поставляется с библиотекой цветовых схем, которые вы можете просматривать, выбирать и изменять.Если вы хотите создать свой собственный с нуля, вы можете это сделать с помощью инструмента 3D-цвета. И вы можете использовать схему, созданную вами прямо в PhotoShop или Fireworks, с плагином ColorRotate и приложением для iPad.

Соответствие вашему бренду

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

4: Охотник за цветом

Color Hunter — это не инструмент с огромным набором функций, в отличие от некоторых многофункциональных устройств в этом списке.Вместо этого это надежное решение для одного: отслеживания определенного цвета. Зайдите на сайт, затем вставьте изображение, и инструмент создаст для вас палитру из изображения. Это надежный способ создания цветовых палитр вокруг изображений, с которыми вам нужно гармонизировать ваш сайт, и вы также можете использовать его для обратного проектирования палитр сайтов, внешний вид которых вам нравится.

5: Прекрасный

Pictaculous создает цветовые палитры из фотографий — загрузите фотографию, и Pictaculous предложит цвета, соответствующие ей.Помимо палитры, основанной на загруженной вами фотографии, Pictaculous предложит вам готовые цветовые схемы, которые подходят.

Эти инструменты будут генерировать целые цветовые палитры.

6: Цветовое колесо Adobe Color CC

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

7: Палетон

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

8: Color Spire

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

9: Цветовая сфера MudCube

(Источник: http://htmlcolorcodes.com/resources/best-color-palette-generators/)

MudCube’s Color Sphere — это плагин для Chrome, который помогает гармонизировать цвета, контролировать дальтонизм и определять шестнадцатеричные коды. Вы также можете экспортировать цветовые схемы прямо в Illustrator, PhotoShop и CoIRD.com.

10: Сплошные цвета

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

11: Генератор шестнадцатеричных цветовых схем

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

Создайте свои цвета

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

12: Цветное приложение

Этот инструмент iOS позволяет принимать точные решения между похожими цветами, четко распределяя их с некоторым промежутком между ними, а не градиентами, как в цветовых кругах и сферах. Большие цветные сетки позволяют использовать весь экран (пользователи iPad Pro, радуйтесь!), А также позволяют выбирать цвета, находить значения RGB, Hex и HSLA и создавать цветовые палитры с нуля.

13: Цвет

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

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

Получить коды для цвета

Если вы где-то видели цвет и не знаете, как его назвать, это инструменты для вас.

14: SpyColor

SpyColor дает вам информацию о любом цвете, включая Hex, RGB, CMYK и другие коды. Инструмент показывает вам ряд типов схем, таких как дополнительные, раздельно-дополнительные, триадные, конфликтующие и аналогичные, на каждой цветной странице.

15: Цветовые коды HTML

HTML Color Codes находит шестнадцатеричные коды цветов изображений в вашем браузере. Вы выбираете изображение на рабочем столе и нажимаете «просмотреть изображение», затем наводите указатель мыши на него, чтобы получить шестнадцатеричные коды для различных частей изображения.

Проверьте свою палитру

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

16: Проверь мои цвета

Check my Colors позволяет вам проверять цвета переднего плана и фона вашей цветовой палитры, чтобы убедиться, что они обеспечивают достаточный контраст для людей с дефицитом цвета. Если вы хотите защитить свой сайт от дальтонизма или просто получить наиболее эффективные и интуитивно понятные цветовые комбинации с точки зрения UX, этот инструмент неоценим.Введите URL-адрес, и он выдаст отчет:

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

Соответствующие изображения

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

17: TinEye

TinEye более известен как альтернатива поиску картинок Google. Но он также работает как способ изучения цветовых комбинаций, используя базу данных из более чем 10 миллионов лицензионных фотографий Creative Commons, собранных с Flickr.Если вы ищете изображения с идеальной цветовой комбинацией, это отличный и простой в использовании способ их найти.

18: Дизайн

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

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

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

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

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

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

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

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

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

Вы не узнаете, пока не протестируете.

Начните использовать Crazy Egg

Создайте бесплатную учетную запись Crazy Egg, чтобы начать бесплатную пробную версию, или войдите в систему, чтобы настроить отчеты о поведении пользователей.

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

Заключение

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

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

Изменить цвета на сайте очень просто. Если вы знаете HTML, вы можете вручную изменить HEX-коды в файлах темы. Многие темы WordPress также поставляются с настройщиками, которые позволяют изменять цвета, не зная кода.

Дайте себе возможность сделать свой сайт максимально привлекательным и запоминающимся.

Как извлечь пользу из психологии цвета в дизайне вашего веб-сайта

Опубликовано 29 апреля 2020 г. Обновлено 21 мая 2020 г.

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

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

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

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

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

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

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

Рассмотрим эти общие значения, связанные с определенными цветами. Какие из них вы уже почувствовали? Что вас удивило?

Синий

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

Желтый

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

Зеленый

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

Оранжевый

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

Белый

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

Но белый цвет также имеет довольно важный недостаток: может быть трудно для глаз, когда настоящий белый (#ffffff) сочетается с истинным черным (# 000000), и его можно рассматривать как холодный, резкий или отталкивающий. .Продуманное решение — использовать не совсем белый цвет, например слоновую кость, который обладает теми же преимуществами, что и белый, но имеет немного более теплый оттенок, который более удобен.

Черный

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

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

Красный

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

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

Фиолетовый

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

Розовый

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

Коричневый

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

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

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

Общие цвета в различных отраслях:

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

Mayo Clinic использует синий веб-сайт, чтобы завоевать доверие своих пациентов.

Зеленый: Медицина, наука, правительство, подбор персонала, экологический бизнес, туризм, человеческие ресурсы, финансы

Инвестиционное приложение «Желуди» использует зеленый цвет, чтобы сигнализировать о росте счета.

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

Мы разработали черный веб-сайт для экспериментального маркетингового агентства BTWN Exhibits.

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

New York Times использует серый цвет для кнопок и текста своего веб-сайта.

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

Красные акценты на сайте Toyota ассоциируют автомобили с мощью и страстью.

Апельсин: напитки, розничная торговля, фитнес

Веб-сайт Orangetheory использует энергию, присущую его фирменному цвету.

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

Мы включили ярко-желтый цвет вертолетов Helicopter Express в дизайн их веб-сайта.

Pink: Медицина (педиатрия, акушерство и гинекология), продукты питания, косметика, розничная торговля

Covergirl воплощает нежную женственность в светло-розовом веб-сайте.

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

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

Цветовая гамма румян Thinx перекликается с идеей бренда об инклюзивности.

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

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

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

Самый любимый цвет в мире — синий (57% мужчин и 35% женщин заявили, что это их любимый цвет).

Любимые цвета мужчин — синий (57%), зеленый (14%), черный (9%) и красный (7%). Менее 5% мужчин сказали, что их любимым цветом был оранжевый, желтый, коричневый, серый или белый, и 0% мужчин сказали, что фиолетовый был их любимым цветом.

Любимые цвета женщин — синий (35%), фиолетовый (23%), зеленый (14%), красный (9%) и черный (6%).Менее 5% женщин заявили, что их любимый цвет — оранжевый, желтый, коричневый, серый или белый.

Изображение через

Среди представителей обоих полов оранжевый и коричневый — наименее любимые цвета: 22% мужчин и 33% женщин не любят оранжевый, а 27% мужчин и 20% женщин не любят коричневый.

Изображение через

В целом, мужчины предпочитают яркие цвета, а женщины — более мягкие.

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

  • Маленькие дети предпочитают более яркие цвета: красный, желтый, синий, оранжевый, зеленый и фиолетовый. Они также предпочитают однотонные блоки цветов узорам.
  • Подростки часто предпочитают черный цвет и открыты для большей графики и сложных цветов, чем их младшие сверстники.
  • В целом, большинство взрослых предпочитают приглушенные цвета, и их цветовые предпочтения высечены из камня.
  • Взрослые старше 65 не любят желтый цвет и предпочитают синий, розовый и зеленый.Они, как правило, предпочитают более спокойные оттенки ярким, возбуждающим, а фиолетовый становится тем более популярным среди женщин, чем старше они становятся.
  • Люди из рабочего класса предпочитают яркие вариации основного и второстепенного цветов. Между тем, более обеспеченные люди, как правило, предпочитают более сложные цвета, часто предпочитая третичные цвета с множеством оттенков.
  • Чем более образован человек, тем сложнее его выбор цвета. Образованные люди предпочитают третичные цвета, а менее образованные люди предпочитают основные и второстепенные цвета.
  • Люди предпочитают цвета, которые повторяют цвета, соответствующие их климату. Люди из тропического климата лучше всего реагируют на яркие теплые цвета, а люди из более холодного климата предпочитают более приглушенные цвета.
  • В западных культурах белый цвет символизирует чистоту и чистоту, поэтому его часто используют на свадьбах и в больницах. Но в восточных культурах белый цвет символизирует смерть и печаль и часто используется в похоронных ритуалах.

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

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

Многие веб-дизайнеры рекомендуют, чтобы каждый веб-сайт имел по крайней мере цвет фона, основной цвет и цвет акцента. Многие также рекомендуют так называемое правило 60-30-10, когда вы выбираете три цвета и используете один в 60% случаев (в качестве доминирующего), еще 30% времени (в качестве второстепенного) и третий в 10% случаев. время (акцент).

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

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

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

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

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

Если вас ошеломляют все доступные варианты, запомните несколько ключевых моментов:

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

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

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

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

Остались вопросы о цветовой гамме вашего сайта? Свяжитесь с нами и сообщите нам, с чем вы боретесь.

7 Передовые методы цветовой схемы веб-сайта

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

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

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

Оглавление:


7 рекомендаций по выбору цветовой палитры вашего веб-сайта

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

1) Используйте цвета вашего бренда

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

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

2) Учитывайте общие цветовые ассоциации

Подумайте об эмоциях и отношениях, связанных с разными цветами:

  • Красный: энергия, сила, страсть
  • Апельсин: радость, энтузиазм, творчество
  • Желтый: счастье, интеллект, энергия
  • Зеленый: амбиции, рост, свежесть, безопасность
  • Синий: спокойствие, уверенность, интеллект
  • Фиолетовый: роскошь, амбиции, креативность
  • Черный: сила, элегантность, загадка
  • Белый: чистота, чистота, совершенство

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

3) Обслуживайте вашу целевую аудиторию

Если ваша целевая аудитория — в основном женщины, используйте цвета, которые они предпочитают. Kissmetrics делится результатами исследования Джо Хэллока, в котором три основных цвета, выбранных женщинами в качестве своих фаворитов, были синим, пурпурным и зеленым. Лучшие цвета для мужчин? Синий, зеленый, красный и черный.

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

4) Учитывайте свою отрасль и конкуренцию

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

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

5) Добавьте акцентный цвет.

Лучшие цветовые палитры веб-сайтов соответствуют правилу 60/30/10. Один цвет используется на 60% сайта, а второй цвет используется на 30% сайта. Последние 10% должны быть акцентным цветом — чем-то, что контрастирует с двумя основными цветами и используется для выделения важного контента на веб-сайте.

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

6) Убедитесь, что цвет текста и фона контрастируют.

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

7) Используйте онлайн-инструменты, чтобы открыть или создать свою цветовую палитру

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

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

***

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


Вот еще несколько статей, которые вам, возможно, понравится:

7 цветовых тенденций для некоммерческого веб-дизайна в 2015 году

Тенденции дизайна веб-сайтов 2020: белое пространство, темный режим и цвета

2020 Тенденции дизайна веб-сайтов: геометрические формы / узоры, сетки и рамки и типографика

Выбор лучшей цветовой схемы для создаваемых вами веб-сайтов

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

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

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

Набор инструментов UX Designer

Неограниченные загрузки: 500 000+ шаблонов каркасов и UX, комплектов пользовательского интерфейса и ресурсов дизайна
От всего 16 долларов.50 в месяц!

СКАЧАТЬ

1. Pinterest приколол кучу красных

Без сомнения, красный считается самым горячим цветом. Если вы посмотрите цветовую палитру Pinterest, вы сразу заметите, что красный — их основной цвет.

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

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

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

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

Отличный пример красного в веб-дизайне

Держу пари, вы не знали

Человеческий глаз видит красный цвет, когда он смотрит на свет с длиной волны от 630 до 700 нанометров.Свет, выходящий за пределы этого диапазона, называется инфракрасным или ниже красного, и его нельзя увидеть человеческими глазами, хотя его можно почувствовать как тепло. — Источник

Фантастическая палитра красных цветов

10 ассоциаций с красным
  1. Кровь
  2. Война
  3. Пожар
  4. Мужественность
  5. Страсть
  6. Соблазнение
  7. Гнев
  8. Сила
  9. Энергия
  10. Мужество
Красные координаты

Шестнадцатеричный триплет: # FF0000
RGB: (255, 0, 0)

2.Amazon любит силу апельсина

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

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

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

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

Как следует использовать апельсин

Держу пари, вы не знали

Оранжевый веб-цвет, определенный как FFA500, — единственный именованный цвет, определенный в CSS, который также не определен в HTML 4.01. — Источник

Фантастическая палитра оранжевого цвета

10 Ассоциаций с Orange
  1. Оптимизм
  2. Определение
  3. Пожар
  4. Предупреждение
  5. Осень
  6. Религии
  7. Endurance
  8. Сострадание
  9. Хэллоуин
  10. Организм
Оранжевые координаты

Hex Triplet: # FF7F00
RGB: (255, 127, 0)

3.Синий цвет Facebook заставляет нас чувствовать себя в безопасности

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

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

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

Как использовать синий

Держу пари, вы не знали

Опрос, проведенный в Германии и опубликованный в 2009 году, показал, что синий цвет является любимым цветом 46 процентов респондентов-мужчин и 44 процентов женщин. — Источник

Фантастическая палитра синего цвета

10 ассоциаций с синим
  1. Истинность
  2. Дружелюбие
  3. Магия
  4. Мальчики
  5. Лед
  6. Роялти
  7. Зима
  8. Полиция
  9. Небо
  10. Вода
Синие координаты

Шестнадцатеричный триплет: # 0000FF
RGB: (0, 0, 255)

4.Groupon имеет некоторую зеленую коллективную мощь

Чувствуете себя очень оптимистично прямо сейчас? Дайте угадаю — вы смотрели на что-то зеленое? Может быть, вы смотрели просто на зеленое растение, так как оно успокаивало бы вас и вселяло оптимизм.

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

Посмотрите на 100-долларовую купюру. Это зеленое! У таких сайтов, как Groupon, много зеленого в своем бренде, поскольку они напрямую работают с деньгами.

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

.

Отличное использование зеленого в веб-дизайне

Держу пари, вы не знали

В некоторых языках, включая древнекитайский, тайский, старый японский и вьетнамский, одно и то же слово может означать либо синий, либо зеленый. Не существует натуральных источников зеленых пищевых красителей, одобренных Управлением по санитарному надзору за качеством пищевых продуктов и медикаментов США.- Источник

Фантастическая палитра зеленого цвета

10 Ассоциаций с зеленым
  1. Деньги
  2. Жадность
  3. Рост
  4. Зависть
  5. Природа
  6. Пружина
  7. Здоровье
  8. Молодёжь
  9. Трава
  10. Надежда
Зеленые координаты

Шестигранный триплет: # 00FF00
RGB: (0, 255, 0)

5. Yahoo! Брызги фиолетового на их логотип

Фиолетовый очень часто описывается такими словами, как воображение, творчество, достоинство, благородство и изобилие.Более насыщенные оттенки фиолетового больше связаны с весной и романтикой, а более темные — с роскошью и богатством.

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

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

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

Отличное использование фиолетового в веб-дизайне

Держу пари, вы не знали

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

Фантастическая пурпурная палитра

10 ассоциаций с Purple
  1. Богатство
  2. Роялти
  3. Дворянство
  4. Изысканность
  5. Романтика
  6. Искусственный
  7. экзотический
  8. Духовность
  9. Люкс
  10. Женский
Фиолетовые координаты

Шестигранный триплет: # 800080
RGB: (128, 0, 128)

6.1WD: умное использование монохромных цветов

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

Взгляните на наш сайт, 1stwebdesigner — 1WD. Мы используем немного оранжевого, поскольку это сильный и яркий акцентный цвет, но только в хорошем сочетании с темно-серым и светло-серым. И, конечно же, белый (какого цвета фон у нашего сайта?)

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

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

Отличное использование монохроматики в веб-дизайне

Держу пари, вы не знали

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

Фантастическая монохромная цветовая палитра

10 ассоциаций с монохроматическим
  1. Мощность
  2. Элегантность
  3. Космос
  4. Мягкость
  5. Небеса
  6. Мир
  7. Невинность
  8. Пессимизм
  9. Депрессия
  10. Скука
Монохроматические координаты

Черный:
Hex Triplet: # 000000
RGB: (0, 0, 0)

Серый:
Hex Triplet: # 808080
RGB: (128, 128, 128)

Белый:
Hex Triplet: #FFFFFF
RGB: (255, 255, 255)

Какой твой любимый цвет?

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

Этот пост может содержать партнерские ссылки. См. Раскрытие партнерских ссылок здесь .

Как стратегически использовать цвет в дизайне веб-сайтов

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

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

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

1. Учитывайте культурный контекст

Хотя разные цвета имеют разное значение на индивидуальном уровне, определенные цвета также имеют глубоко укоренившееся культурное значение. Например, в западных культурах красный цвет привлекает внимание и означает опасность и срочность (подумайте о знаках остановки). Однако в некоторых восточных культурах, таких как Китай и Индия, красный цвет символизирует удачу. Другой пример: черный — это цвет смерти и траура в западных культурах.В некоторых восточных культурах аналогичный цвет — белый.

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

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

2. Изучение теории цвета

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

Цветовой круг

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

Основные, второстепенные и третичные цвета на цветовом круге

Основные цвета

Три основных цвета: красный, желтый и синий.При объединении первичные цвета образуют вторичные цвета.

Дополнительные цвета

Дополнительные цвета: фиолетовый (красный + синий), зеленый (синий + желтый) и оранжевый (красный + желтый). Комбинирование вторичных цветов с первичными цветами создает третичные цвета.

Третичные цвета

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

Оттенки, оттенки и тона

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

Сравнение оттенков, оттенков и оттенков

Теперь, когда вы понимаете, как разные цвета формируются и располагаются на цветовом круге, будет проще создавать визуально привлекательные цветовые палитры.Цветовые палитры описаны более подробно ниже в Шаге 4.

Использование контраста

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

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

Обязательно используйте средство проверки контраста! Контраст — большая часть доступности

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

Источник: Raw Studio

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

3. Используйте психологию цвета для передачи сообщений и ценностей бренда

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

Цвета вызывают эмоции

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

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

Общие цветовые ассоциации

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

  • Красный : страсть, сила, любовь, опасность, возбуждение
  • Синий : спокойствие, доверие, компетентность, мир, логика, надежность
  • Зеленый : здоровье, природа, изобилие, процветание
  • Желтый : счастье, оптимизм, творчество, дружелюбие
  • Оранжевый : веселье, свобода, тепло, комфорт, игривость
  • Фиолетовый : роскошь, загадочность, изысканность, верность, креативность
  • Розовый : забота, мягкость, искренность , тепло
  • Коричневый : природа, безопасность, защита, поддержка
  • Черный : элегантность, сила, контроль, изысканность, депрессия
  • Белый : чистота, покой, ясность, чистота

Отъезд этот пост чтобы узнать больше о психологии цвета.

4. Создайте цветовую палитру

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

Coca-Cola гордо демонстрирует свой яркий красный цвет

Повторим предыдущий пример: бренд The ​​Coca-Cola Company взял свой основной цвет, яркий красный, и использовал его. Цвета на их веб-сайте и рекламе. Единственные другие цвета в их палитре — черный и белый, которые используются для текста. Красный ассоциирует Coca-Cola с чувствами возбуждения, любви и тепла. Зеленый цвет

Whole Foods идеально сочетается с миссией их компании.

Whole Foods использует землисто-зеленый в качестве основного цвета.Как и Coca-Cola, Whole Foods демонстрирует свой фирменный цвет на всем своем веб-сайте. Зеленый цвет прекрасно сочетается с ценностями и клиентурой Whole Foods: здоровьем, природой и изобилием.

Lowe’s темно-синий символизирует доверие и надежность.

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

Типы цветовых палитр

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

Аналогичные

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

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

Источник: Emme

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

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

Монохроматические цвета в основном связаны с изменением яркости.

Источник: Rosaluna

Triad

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

Триадные цвета равномерно распределены на цветовом круге

Источник: Parse

Дополнительные

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

Дополнительные цвета противоположны друг другу на цветовом круге Источник: Aerial

Разделить дополнительные

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

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

Источник: Shelby Kay

Как использовать цветовые палитры в дизайне веб-сайтов

В процессе создания цветовых палитр можно использовать различные онлайн-инструменты. Личным фаворитом, показанным на скриншотах выше, является Adobe Color. С помощью этого инструмента вы можете поиграть с цветовым кругом, чтобы создать индивидуальную палитру с любым из пяти типов цветовой палитры, перечисленных выше. Вы также можете загрузить изображение для извлечения цветов или щелкнуть вкладку «Обзор», чтобы просмотреть страницы и страницы цветовых палитр.

Для начала я рекомендую выбрать три цвета для вашей палитры: основной (или основной) цвет , дополнительный цвет и акцентный цвет . Затем используйте правило 60/30/10 , чтобы применить эти цвета в дизайне своего веб-сайта. Согласно этому правилу, 60% используемого цвета должно быть основным, 30% — второстепенным и 10% — акцентным. Имейте в виду, что черный и белый тоже считаются цветами. Ниже приведены несколько примеров потрясающих веб-сайтов, которые используют правило цвета 60/30/10.

Доминирующий фиолетовый с бирюзовым акцентом.

Spendesk использует фиолетовый как основной цвет, белый как вторичный и бирюзовый как акцентный цвет.

Доминирующий зеленый цвет в паре с красивым лососем в качестве акцента.

Greenlist использует зеленый как основной цвет, белый как вторичный и розовый как акцентный цвет.

Demuxed выводит с желтым и пары с черным и белым

Demuxed использует желтый как основной цвет, черный как вторичный и белый как акцентный цвет.

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

Освойте использование цвета в дизайне веб-сайтов с помощью нашего курса

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

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

Выберите правильные цветовые схемы для сайта электронной торговли в 2021 году

Цвет — это эмоции! Сайт без крутой цветовой гаммы — это как человек без эмоций.Мы сомневаемся, что вам будет интересно общаться и иметь дело с таким человеком или с таким сайтом.

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

Именно поэтому сегодня мы в агентстве WishDesk предоставим вам самую необходимую информацию о выборе цветов для вашего сайта электронной коммерции.

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

Согласно «Влияние цвета на маркетинг» Сатьендры Сингха

  • 85% людей подтвердили, что цвет влияет на их выбор
  • 66% людей будут покупать товары только в том случае, если в дизайне товара используется их любимый цвет
  • 26% людей больше реагируют на цветную рекламу, чем на черно-белую
  • 80% людей узнают свои любимые бренды по цвету

Имеют ли значение цветовые схемы?

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

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

Красный

Красный цвет обладает наибольшей силой. Это лучший цвет для привлечения внимания.

Он ассоциируется с опасностью, крайностями, максимальной концентрацией эмоций, страстью и силой.

Красный цвет вызывает такие эмоции, как:

  • беспокойство
  • энергия
  • пыл
  • смелость
  • внимание
  • агрессия

фиолетовый

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

Фиолетовый вызывает такие эмоции, как:

  • духовность
  • глобальность
  • глубина
  • тайна
  • изобретательность

Синий

Синий — это цвет моря, неба и умиротворения.

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

Синий используется для стимуляции таких чувств, как:

  • уверенность
  • ответственность
  • остаток
  • серьезность

зеленый

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

  • гармония
  • восстановление
  • надежность
  • интермеццо
  • устойчивость
  • безопасность

Желтый

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

В электронной коммерции он используется, чтобы вызывать такие чувства, как:

  • счастье
  • развитие
  • энергия
  • удовольствие
  • свобода

Оранжевый

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

Чаще всего передает такие эмоции, как:

  • оптимизм
  • изобретательность
  • Изобретательность
  • авантюризм

розовый

«Взгляд на жизнь через розовые очки» — наверное, первое, что приходит на ум, когда речь идет о розовом.Розовый символизирует женственность, легкомыслие и детскость.

Эмоции, вызывающие розовый цвет:

  • легкость
  • беспечность
  • нежность
  • мечтать

Черный

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

  • власть
  • тайна
  • ограничение
  • контроль
  • ответственность

Белый

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

  • обновление
  • ограничение
  • справка
  • чистота

серый

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

Серый стимулирует появление таких эмоций как:

  • благоразумие
  • равновесие
  • серьезность
  • консервативный
  • меланхолия

коричневый

Коричневый цвет олицетворяет стабильность, преданность и естественность.Обычно это связано с почвой / землей.

На веб-сайте электронной коммерции используется для отображения:

  • стабильность
  • натуральность
  • серьезность
  • тепло

Как сочетать цвета, чтобы ваш сайт оставался идеальным

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

  • Дополнительная цветовая схема

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

Это схема, в которой цвета расположены бок о бок. Например, фиолетовый и красный.

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

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

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

Эта модель состоит из цветов в кресте. Например, красный и зеленый, оранжевый и фиолетовый.

Цветовые схемы для сайтов электронной коммерции. Как выбрать подходящий?

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

Как правильно выбрать цветовую схему для электронной коммерции?

Прежде чем выбирать цветовую схему своего сайта электронной коммерции, рассмотрите 3 основных момента:

  1. Объем вашего бизнеса. Например, если вы ориентированы на продажу косметики, то вам стоит выбирать более девичьи цвета, например розовый и фиолетовый.
  2. Эффект, который вы хотите произвести. Если вы заинтересованы в стимулировании людей к импульсивным покупкам, то лучше использовать яркие цвета, например красный.
  3. Ваша потенциальная аудитория. Кто ваши клиенты? При разработке сайта вы должны подумать о поле вашего покупателя.

Получите лучшие цветовые схемы для веб-сайта электронной коммерции

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