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

23.02.2021

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

Цветовая гамма логотипа сети быстрого питания

Как выглядит логотип Subway

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

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

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

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

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

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

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

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

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

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

Основной цвет

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

Красный (Coca-Cola, Nintendo). Ассоциируется с волнением, счастьем, увлеченностью.
Дизайн сайта Coca Cola

Оранжевый (Nickelodeon, Fanta). Говорит, что впереди активное и веселое времяпрепровождение.
Дизайн сайта, где основной цвет — оранжевый
Желтый (Nikon, McDonalds). Символизирует оптимизм и счастье.
Дизайн сайта с жёлтым цветом в основе гаммы
Зеленый (Subway, Greenpeace). Ассоциируется со свежестью и природой. Часто используется в рекламе органических продуктов питания и природоохранных организаций.
Дизайн сайта с зеленым цветом в основе гаммы
Синий (Walmart, American Express). Подразумевает надежность и уверенность.
Пример дизайна сайта с синим основным цветом
Фиолетовый (Hallmark, Cadbury). Подчеркивает уверенность бренда, богатую историю, эксклюзивность, качество.
Использование фиолетового как основного цвета в дизайне сайта
Коричневый (Nespresso, UPS). Ассоциируется с качеством и доступностью; подчеркивает, что данным продуктом может пользоваться кто угодно.
Использование коричневого в дизайне сайта
Черный (Chanel, Adidas). Вызывает ассоциации с роскошью, элегантностью.
Черный цвет в основе дизайна сайта
Белый (Apple, Nike). Подразумевает технологичные, удобные для пользователя продукты.
Белый цвет в основе цветовой палитры сайта

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

Совет! При выборе цвета(ов) для сайта не забудьте сохранить шестнадцатеричный код для каждого.

Дополнительные оттенки

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

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

Совет! Постарайтесь выбрать не более 1–2 цветов кроме основного. Если оттенков будет больше, вам придется бороться с визуальным беспорядком, который запутывает и отталкивает пользователей.

Гармонично использовано сочетание цветов для сайта продажи слуховых аппаратов Eargo. Его основной тон — оранжевый, поэтому разработчики использовали более тусклый синий, чтобы выделить наиболее важный раздел своего веб-сайта. Этот синий контрастирует с ярко-оранжевым, который также выделяет важные элементы, такие как кнопка «Добавить в корзину» и логотип.

Полезно! Для работы с цветами рекомендуем использовать специальные сервисы.

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

Цвет фона

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

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

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

Яркие зеленые элементы дизайна на белом фоне сайта

Читайте также: Главные тренды UX/UI дизайна 2021 года

Текст

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

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

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

Полезные советы

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

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

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

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