Инструкция по созданию продающего сайта

Часть 9. Цвет и подбор палитры для сайта

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

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

  • На лендинге нужно использовать определенный набор цветов, его называют палитрой, цветовой гаммой и цветовой схемой. Смысл один и тот же. Как правило вся цветовая гамма строиться из 3-4 цветов и их оттенков. Не должно быть такого что ваш лендинг похож на детскую раскраску.
  • Старайтесь чтобы подобранные цвета соответствовали нише. Я это называю цветовой принадлежностью. О чем я говорю приведу пример. Возьмем нишу спецтехники, основной цвет в этой нише это оранжевый или желтый цвет. Или ниша такси где устоявшийся цвет желтый. Все эти цвета уже закреплены в сознании людей и нам не стоит идти против этого. Если есть четкая цветовая принадлежность - используйте это.
  • Цвета должны передавать правильные эмоции и доносить посыл посетителям сайта. Например если у вас лендинг юридической компании - не нужно цветовой палитрой передавать эмоции радости, веселья, а наоборот передать эмоции надежности, стабильности, защиты. Если вы продаете экологически чистые продукты, то и передавайте цветом эмоции натуральности, чистоты, а не эмоции дешевизны или безудержной крутости. Всегда думайте какая у вас ниша и кто целевая аудитория.
В вебе существует правило, что нужно использовать не более 1-2 шрифтов в одном проекте. Соответственно шрифты должны быть сочетаемы друг с другом и гармонично смотреться вместе. Именно для этого придумано понятие - шрифтовая пара. Как правило шрифтовая пара подбирается для связки заголовка и основного текста.

Типы лендингов и палитры

  • Есть 2 типа лендингов, в которых разные правила подбора цветов.
  • Первый тип это лендинги которые транслируют профессионализм и качество. На таких лендингах цветовая палитра состоит от 2 до 4 цветов, при этом основные цвета (это 1-2 цвета) занимают 80%-90% пространства, а остальные 10-20% это цветовые акценты. Такого типа лендингов 95%. И скорее у вас именно этот случай.
  • Второй тип это лендинги которые передают эмоции. Здесь уже нет ограничений по количеству цветов и красок, их используют множество. Это подходит для лендингов различных фестивалей, праздников, веселий, тусовок, развлечений и подобных ниш. Лендингов такого типа не более 5%.

Расскажу свой опыт и свой набор цветов

  • Цвет текста. Как правило это всегда оттенок черного, но не чистый черный цвет.
  • Главный цвет фона. Это цвет, который заполняет 60-70% пространства лендинга. Всегда берите белый цвет в качестве основного и не заморачивайтесь. Это беспроигрышное решение.
  • Также нам понадобится еще один цвет фона, который будет создавать ритм с основным цветом. Обычно такой цвет занимает 20-30 % пространства лендинга. Наша задача чтобы была видна блочная структура лендинга. Как правило у меня это оттенки серого цвета. Конечно может быть и другой цвет, здесь четкого правила нет.
  • Четвертый цвет который подбираем это цвет акцентов. Этот цвет занимает не более 10% пространства и служит для выделения главных элементов, которые несут основные смыслы для целевой аудитории. Иногда бывает что используем не 1 а 2 цвета акцента, такое тоже допустимо.

Как подобрать палитру?

  • Взять цветовую палитру с другого хорошего сайта - не бойтесь брать чужие идеи. Самый надежный и лучший способ.
  • Взять готовую палитру с сайтов где дизайнеры выкладывают популярные палитры (https://colorhunt.co, https://color.adobe.com/ru/explore, https://coolors.co). Но по моему опыту это больше цветовые палитры для дизайна интерфейсов.
  • Подобрать самостоятельно. Для этого есть специальные сервисы. Мы берем один цвет из референсов, это как правило цвет акцентов и от него отталкиваемся и подбираем все другие цвета и оттенки по цветовому кругу через сервисы https://color.adobe.com/ru/create, https://colorscheme.ru
Чтобы вам было легче понимать какие цвета передают эмоции я подготовил небольшие заготовки по психологии цвета.
  • Красный цвет. Это цвет энергии, победы. Его часто используют в нишах праздников, спорта и еды
  • Желтый цвет. Это цвет передает позитив и еще главное это цвет сигнал “дешевизны”. Даже в обычных магазинах желтые ценники используют чтобы показать акции и скидки. Очень часто желтый цвет используется в нишах такси, продажи мебели. Да и в целом используется как цвет акцентов во многих нишах, чтобы как раз таки выделить элементы акции.
  • Оранжевый цвет. Передает эмоцию дружбы, дружелюбия. Используется в нишах строительства и ремонта.
  • Зеленый цвет. Это цвет гармонии, природы. Используется в нишах здоровья, туризма, также часто используют этот цвет в банковской сфере.
  • Синий цвет. Передает эмоции профессионализма, доверия. Используется в нишах которые связаны с недвижимостью и политикой
  • Фиолетовый цвет. Создает эмоции романтики. Также используется чтобы передать что то новое, неизвестное. Встречается в нишах все что связано с красотой и инновациями.
  • Коричневый цвет. Передает эмоции прочности и надежности. Используется в нишах мебели, недвижимости и все что связано с юридической сферой.
  • Черный цвет. Передает эмоции силы и элегантности. Важно понимать что я сейчас не про черный цвет текста. А когда акценты или основной фон или какие либо градиенты используются черного цвета. Чаще всего черный используется в нишах связанных с модой и косметикой.
  • Белый цвет. Передает эмоции чистоты и простоты. Белый цвет стоит использовать без исключения во всех проектах и во всех нишах он применим.
  • Серый цвет. Передает эмоции практичности и характер. Используется на сайтах где нужно показать профессионала. Очень часто используют его фотографы.
  • Розовый цвет. Передает эмоции искренности и любви. Подходит для любых женских ниш.
Инструкция по созданию продающего сайта