Блог

Работа с контрастом

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

работа с контрастом

Здесь уместна шутка — это же молоко на фоне густого снегопада, то есть контраст полностью отсутствует. Если на белом разместить белое, то различить ничего не получится, контраста в таком случае нету.

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

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

К примеру, самый популярный дефект — используется не разница значений, а разница цветов. Изначально все кажется запутанным, но на деле это элементарно, допустим был выбран красный цвет в своем среднем значении (не слишком темный и не сильно светлый), а также синий в своем среднем значении. Естественно разница между выбранными цветами заметная, однако на глаза это оказывает очень не приятное воздействие. Создается ощущение пульсации синего цвета на таком фоне, на нем очень сложно сфокусироваться.

работа с контрастом

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

работа с контрастом

Здесь восприятие уже значительно лучше, все смотрится довольно красиво и читаемо.

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

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

работа с контрастом

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

Немаловажный момент — это водяные знаки, у многих возникают трудности с выбором прозрачности этого элемента, поскольку это тоже скажется на качестве контраста. Оптимальным значением в этом случае считается 10-15 процентов. Для светлого фона это прекрасное решение, поскольку и водяной знак в этом случае будет смотреться светлым. Рассмотрим пару вариантов использования водяных знаков, в одном прозрачность составляет 15%, а в другом 50%.

работа с контрастом

Помните, что контраст — это очень эффективный инструмент, при его правильном использовании можно добиться великолепных результатов. Допустим ваша задача в привлечении аудитории к определенному объекту. Это можно реализовать и благодаря контрасту. Таким образом, основные элементы дизайна можно сделать довольно светлыми, а вот объект, к которому требуется привлечение внимания следует выполнить темным. Наглядно такое решение можно посмотреть на данном примере:

работа с контрастом

На данном сайте, пользователем предлагается осуществить определенный «тур». Однако, разработчиками предусматривается совсем другая цель — это регистрация посетителей. Вот посмотрите внимательно — какие тут элементы выполнены в наиболее темных тонах? Это изображение девушки, на которое нельзя нажать, и кнопочка «Get Started Now», которая является кликабельной. Есть тут и еще одна кнопка, с надписью «Next Step», однако выглядит она значительно светлей, поэтому не так заметна. Однако, для совершения «тура» как раз и требуется кликнуть по ней. Вот таким образом благодаря контрасту кнопку «Get Started Now» удалось сделать более заметной и привлекательной, нежели другие объекты.

Пользуйтесь контрастом правильно и вы будете успешны!

Оригинал William Beachy

Соц. сети