Как выбрать цвет для сайта


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

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


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

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

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

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

Прочитав эту статью, вы узнаете, как:

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

Если я попрошу вас подумать о Кока-Коле, что первым придет вам на ум? Скорее всего, в вашем воображении всплывёт красный логотип Кока-Колы:


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

Красный в цветовой схеме несет в себе два важных послания:

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


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

85% покупателей признают, что основной причиной покупки товара явился его цвет.

Узнаваемость бренда увеличивается на 80% при использовании цвета.

При разработке дизайна сайта нужно:

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

Фиолетовый – символ величия, богатства, успеха и мудрости. Часто присутствует в косметике. Влияет на людей успокаивающе.

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

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

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

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

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

На кого преимущественно рассчитан ваш сайт, на мужчин или на женщин? А может и на тех, и на других?


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

Мужчины предпочитают яркие цвета, а женщины приглушенные.

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

Ахроматические цвета

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

Светлые и темные оттенки

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

Женщины

Наиболее предпочтительные цвета: синий, фиолетовый, зеленый.

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

Мужчины

Наиболее предпочтительные цвета: синий, зеленый, черный.

Наименее предпочтительные цвета: коричневый, оранжевый, фиолетовый.

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

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

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

Часто люди покупают определенные товары или услуги, чтобы произвести конкретное впечатление на других.

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


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

Теперь ясно?

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

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

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

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

Например, позвонить по телефонному номеру, заполнить форму, подписаться на обновления и т.п.

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


Где использовать преобладающий цвет на сайте?

  • Логотип;
  • Вкладки меню;
  • Кнопка «Позвонить»;
  • Важная информация;
  • Заголовки и названия;
  • Кнопки.

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

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

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

Как только вы определились с преобладающим цветом, нет ничего проще, чем подобрать акцентные цвета с помощью таких программ, как Adobe Color CC Tool:


Вот короткая инструкция, которая покажет вам, как создать цветовую схему одним из двух способов:

  1. На основе преобладающего цвета

Шаг 1. Для начала узнайте код вашего преобладающего цвета. Например, на сайте ColorPicker.com. Код цвета указан в прямоугольнике прямо над квадратом с цветовой палитрой.

Скопировав код с ColorPicker.com, вставьте его в поле «НЕХ» инструмента Adobe Color. Убедитесь, что вы вставили код в колонку посередине:


Вставьте код преобладающего цвета вашего сайта в прямоугольник ПОСЕРЕДИНЕ.

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

Шаг 2. В левой верхней стороне вы увидите прямоугольник со следующими цветовыми схемами:

  • Последовательная;
  • Монохромная;
  • Треугольная;
  • Комплементарная;
  • Составная;
  • Оттенки.


Выберите цветовую схему

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

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

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


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

CMS и конструкторы сайтов позволяют вставить цветовые коды (HEX) для выделения любой части вашего сайта:


Скопируйте цветовые коды (HEX) для вашей цветовой схемы для сайта.

  1. На основе понравившейся фотографии

Порой проще искать цветовые решения на просторах интернета и вдохновляться ими.

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

Шаг 1. Загрузите фотографию:


Нажмите на значок камеры, чтобы загрузить изображение.

Шаг 2. Выберите одно из пяти цветовых настроений:

  • Красочное;
  • Яркое;
  • Приглушенное;
  • Насыщенное;
  • Темное.

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


Выберите цветовое настроение.

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


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

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

Чтобы увидеть коды (HEX) цветов, нажмите на цветное колесико, расположенное в правом верхнем углу:


Нажмите на цветное колесико, чтобы увидеть коды цветов:


Скопируйте цветовые коды (HEX) для вашей цветовой схемы.

Где размещать вспомогательные цвета

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

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


Где использовать вспомогательные цвета на вашем сайте?

  • Активная кнопка меню;
  • Подзаголовки;
  • Выделение второстепенной информации.
  1. Выбор фонового цвета

Вам когда-нибудь приходилось красить стены в своем доме?


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

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

Выбор фонового цвета для вашего сайта не сильно отличается от выбора краски для вашей комнаты!

Как правильно выбрать цвет фона

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

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

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

Фоновый цвет вашего сайта зависит от того, на что вы хотите обратить внимание пользователей.

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

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


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

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

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

При создании корпоративного ресурса преследуется одна цель – продвижение товаров или услуг.

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

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

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

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

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

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

Если вы собираетесь создать сайт, связанной с творчеством (мода, дизайн, ресторанный бизнес, красота и т.д.), для вас нет никаких ограничений.

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


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

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

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

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

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

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

  • Выбрать для сайта правильный преобладающий цвет;
  • Выбрать для преобладающего цвета правильные вспомогательные цвета;
  • Выбрать соответствующий фоновый цвет.

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

Данная публикация представляет собой перевод статьи «How to Choose a Good Color Scheme For Your Website» , подготовленной дружной командой проекта Интернет-технологии.ру

6 советов по выбору потрясающей цветовой схемы веб-сайта

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

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

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

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

  1. Познакомьтесь с основами психологии цвета
  2. Познакомьтесь с теорией цвета
  3. Подумайте о смешивании цветовых сочетаний
  4. Все просто
  5. Контрастите свои цвета
  6. Добавьте свой брендинг

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

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

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

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

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

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

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

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

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

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

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

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

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

Во-вторых, давайте поговорим о теплых и холодных цветах .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. Будьте проще

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

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

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

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

Цветовая схема

WordStream - отличный тому пример.На главной странице используются всего три цвета: синий, оранжевый и зеленый.

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

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

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

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

Блог

Evernote - еще один отличный пример:

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

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

Эти простые дизайны имеют огромное влияние - помните об этом при выборе цветовой схемы своего веб-сайта.

5. Контрастируйте цвета

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

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

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

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

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

6. Добавьте свой брендинг

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

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

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

Полезно узнать, что сделали и другие бренды. Вот пример с Medium:

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

А теперь приступим к (цветному) проектированию!

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

Все, что осталось, это пойти и сделать это.

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

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

Об авторе

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

. .

Как выбрать цвета для веб-сайта

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

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

В этой статье мы узнаем о:

  • Цвет фона и содержимого;
  • Различные цветовые палитры и теория цвета;
  • Цветовые ассоциации и способы их использования;
  • Цвета целевой страницы и цвета платформы.

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

Цвет фона и текста

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

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

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

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

Цветовые палитры и теория цвета

Сколько цветов я должен использовать на своем веб-сайте? Это зависит.

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

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

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

Давайте посмотрим на самые популярные теории цвета.

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

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

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

Это также поможет вам избежать упомянутого ранее «эффекта радуги».

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

Хороший метод для онлайн-инструментов, веб-сайтов электронной коммерции и платформ.

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

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

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

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

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

А как насчет ваших клиентов? Они, вероятно, тоже выберут красный цвет.

Итак, если вы хотите ассоциироваться со страстью - выбирайте красный - это так просто.

Другой пример. Как вы относитесь к СПА-процедурам? Скорее всего, белый и синий подойдут лучше, чем черный и желтый, верно?

Можно привести неограниченное количество примеров, но давайте перечислим основные ассоциации:

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

Целевые страницы и платформы

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

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

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

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

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

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

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

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

Цветовые ресурсы

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

Adobe Kuler

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

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

Color Hailpixer

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

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

Design Inspiration

Интересный подход для подбора не только цветов сайта, но и настроения.

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

Помимо ресурсов, упомянутых выше, не забудьте часто посещать Behance, Dribbble, Awwwards и другие основные ресурсы-витрины.Эти веб-сайты - отличный способ найти вдохновение и учиться у лучших.

Заключение

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

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

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

.

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

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

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

Что означают цвета?

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

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

Теплые тона

Красные могут пробуждать страсть. Веб-дизайн от Aneley

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

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

Холодные цвета

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

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

Нейтральные цвета

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

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

Психология цвета и узнаваемость бренда
-

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

Цвет - это наука. Иллюстрация Ненада Максимовича

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

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

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

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

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

Хорошая реализация триадной цветовой схемы через MercClass

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

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

Выбор основного цвета

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

Этот веб-дизайн заимствует свой основной цвет из логотипа бренда. Веб-дизайн от Iconic Graphics

Разработка оттенков и оттенков

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

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

Основной оранжевый цвет используется в разных оттенках для создания акцентов. Дизайн от UI Maniac

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

Правило 60-30-10

Хороший пример реализации правила 60-30-10.Дизайн JPSDesign

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

Контраст

Высокая контрастность, но приятный для глаз.Дизайн JPSDesign

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

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

Работа с изображениями

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

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

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

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

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

цветов оживляют веб-дизайн
-

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

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

Хотите создать идеальный веб-сайт?
Наши дизайнеры могут создать уникальный веб-дизайн именно для вас.

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий