Одноклассники увеличили доходы от рекламы на 25%
Previous
выбрать за меня
46 интереснейших фактов о предпринимательстве. Инфографика
Next
web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити
Юзабилити

Как использовать цветовой контраст в онлайн и оффлайн маркетинге

Автор: Ия Пфанштиль28.02.2017

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

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

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

Итак, давайте начнем с основ.

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

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

В рамках контрастных цветов, мы можем также говорить об оттенках, насыщенности и температуре цвета.

Оттенок

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

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Температура

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Использование контрастных цветов

В дизайне логотипов:

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Mountain Dew использует зеленый и красный. Сразу же название “Mountain Dew” вызывает у нас образы на свежем воздухе. Зеленый цвет работает на логотип Mountain Dew, потому что он говорит нам о связи бренда с природой. Но красный привлекает внимание к центру логотипа.

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Visa использует желто-оранжевый и синий. Это, безусловно, комплиментарные цвета. Но кроме позиций цветов на цветовом колесе, нужно поближе подобраться к значению цвета. Синий цвет часто ассоциируется с доверием, лояльностью, доброжелательностью, мудростью и миром. Желтый вызывает позитив. Таким образом, общей темой является доверие, верность, положительность и мудрость. Что еще мы можем просить у компании, которой отдаем пачки денег?

В веб-дизайне:

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

В дизайне печати:

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Во внутренней и наружной рекламе:

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Например, Starbucks использует белый текст на темно-зеленом фоне; и на вывеску можно смотреть и днем и ночью. Staples использует белый текст на темно-красном фоне. Несмотря на это, в сочетании с темно-красным цветом, нейтральный белый цвет выигрывает!

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

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

web-дизайн, веб дизайн, выбор цветов, дизайн, дизайн логотипов, контрастность, тренды веб-дизайна, цвет, цвет логотипа, цвета, юзабилити

Итог

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

Реакция на статью
поделюсь
20%
интересно
70%
полезно
40%
не уверен
10%
скучно
0%
где автор?
0%
Ия Пфанштиль
Главный редактор, контент-маркетолог, автор. Четыре года пишу о digital. Делюсь открытиями.
Комментарии
Оставить отзыв

    You must log in to post a comment