Подбор цветов на веб-ресурс

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

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

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

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

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

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

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

· Комплементарные цвета

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

· Классическая триада

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

· Соседствующие цвета

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

· Сочетание по прямоугольной схеме

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

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

Определившись с основным принципом выбора, перейдем к тонкой настройке цветовой гаммы:

1. Контрастность

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

2. Насыщенность

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

3. Температура

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

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

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

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

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

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