Работа с контрастом в веб-дизайне

Хороший контраст в вашем дизайне зависит от вашего выбора цветов. Контраст это разница значений цветов в вашем дизайне. Значение в данном случае определяет насколько цвет светлый или темный. Посмотрев на белый лист, кто-то может пошутить: «О! Да это же белая корова в снежный шторм!» — это пример отсутствия контраста. Белый на белом — это отсутствие контраста — вы не можете ничего различить.

Элементарно, не так ли? Вы можете подумать, что посыл статьи лишь в том, чтобы дизайн был видимым. Но это не так.

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

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

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

Второй вариант воспринимается намного лучше.

Быстрый способ понять достаточно ли контраста в вашем дизайне — конвертировать работу в черно-белый вариант. В этом случае вы увидите легко ли прочесть текст на фоне и все ли элементы хорошо видны. В Adobe Illustrator вы можете сделать это в меню Edit>Edit Colors>Convert to Grayscale/Редактировать>Редактировать цвета>Конвертировать в черно-белый. В Adobe Photoshop вам сначала нужно будет объединить работу в один слой, а затем найти в меню  Image>Adjustments>Desaturate/Изображение>Коррекция>Обесцветить. Так вы получите черно-белое изображение.

Вот пример дизайна с хорошим контрастом и плохим. Вот как оба примера смотрятся в черно-белом варианте:

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

Еще один вопрос напрямую связанный с контрастом: какой процент прозрачности должен быть выставлен для водяного знака? Хороший вариант — значение между 10%-15%. Если фон светлый, то водяной знак будет достаточно светлым в таком режиме прозрачности. Это все еще вопрос контраста в дизайне и его уместности. Ниже вы видите два примера применения водяного знака: на 15% и 50% прозрачности.

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

Это страничка E-Harmony, которая предлагает посетителям совершить «тур» на сайте. Но на самом деле создатели страницы хотят сделать так, чтобы пользователи зарегистрировались. Когда вы смотрите на страницу, какие элементы самые темные? Картинка, на которую нельзя кликнуть и кнопка "Get Started Now", на которую кликнуть можно. Конечно создатели страницы подталкивают вас к нажатию на эту кнопку. Посмотрите насколько она больше и заметнее по сравнению с кнопкой «Next Step»! Хотя чтобы продолжить тот самый «тур» нужно нажать именно на кнопку «Next Step», кнопка «Get Started Now» выглядит намного более привлекательной и манящей. А все дело в контрасте.

Используйте его с умом и у вас все получится!

 

Источник