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

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

23.02.2021

Ольга Коцофанэ, главный редактор блога Webpromo


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

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

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

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



 

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

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

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

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

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

 

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

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

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

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

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

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

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

    Дизайн сайта Coca Cola

    Дизайн сайта Coca Cola

  • Оранжевый (Nickelodeon, Fanta). Говорит, что впереди активное и весёлое времяпрепровождение.

    Дизайн сайта с основным цветом оранжевым

    Дизайн сайта, где основной цвет — оранжевый

  • Жёлтый (Nikon, McDonalds). Символизирует оптимизм и счастье.

    Дизайн сайта с основным цветом жёлтым

    Дизайн сайта с жёлтым цветом в основе гаммы

  • Зелёный (Subway, Greenpeace). Ассоциируется со свежестью и природой. Часто используется в рекламе органических продуктов питания и природоохранных организаций.

    Дизайн сайта с зеленым цветом в основе гаммы

    Дизайн сайта с зеленым цветом в основе гаммы

  • Синий (Walmart, American Express). Подразумевает надёжность и уверенность.

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

    Пример дизайна сайта с синим основным цветом

  • Фиолетовый (Hallmark, Cadbury). Подчёркивает надёжность бренда, богатую историю, эксклюзивность, качество.

    Каким цветом сделать сайт

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

  • Коричневый (Nespresso, UPS). Ассоциируется с качеством и доступностью; подчёркивает, что данным продуктом может пользоваться кто угодно.

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

    Использование коричневого в дизайне сайта

  • Чёрный (Chanel, Adidas). Вызывает ассоциации с роскошью, элегантностью.

    Как составить цветовую схему для дизайна сайта

    Черный цвет в основе дизайна сайта

  • Белый (Apple, Nike). Подразумевает технологичные, удобные для пользователя продукты.

    Белый цвет в основе цветовой палитры сайта

    Белый цвет в основе цветовой палитры сайта

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

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

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

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

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

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

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

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

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

    Цветовая палитра для дизайна сайта

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

Цвет фона

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

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

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

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

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



Текст

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

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

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

 

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

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

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

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

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

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

Разные уровни яркости одного цвета тоже смотрятся оригинально и интересно

Разные уровни яркости одного цвета тоже смотрятся оригинально и интересно

 

Также читайте другие статьи в блоге Webpromo:

И подписывайтесь на наш Telegram-канал про маркетинг.

Последние материалы рубрики

GMB тестирует функцию «Журнал звонков», которая поможет...

Google начал закрытое бета-тестирование журнала звонков в Google My Business (GMB). Так, у некоторых владельцев аккаунтов из США появилась...

Удержать нельзя потерять: 3 инсайта, которые улучшат CX

Удержать нельзя потерять: 3 инсайта, которые улучшат CX

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

Above-the-fold: какой контент хотят видеть люди, а какой —...

Как важный контент в верхней части страницы влияет на ранжирование сайта в поисковой системе Google сегодня? Дает ли такое расположение...

20 советов, как увеличить эффективность видеорекламы в App Store и Google Play на этапе создания

20 советов, как увеличить эффективность видеорекламы в App...

В продвижении мобильных приложений в интернете действует всем известный закон: видеореклама эффективнее картинки или текста....

Остались вопросы?
Наши эксперты готовы ответить на них

Свяжитесь по указанному ниже телефону с нашим менеджером или воспользуйтесь услугой «Перезвонить мне». Мы свяжемся с вами в ближайшее время.

Каждый участник — мастер своего дела
Ценю Webpromo за гибкость
Команда Webpromo, как продолжение нашего отдела маркетинга
Спокоен за продвижение своих проектов в интернете