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

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

Контраст чрезвычайно важен для восприятия человеческим глазом, поскольку он позволяет логически «отделить» один объект от другого, подчеркнуть главные элементы. Поэтому, фотографии в ч/б (отмечу, что не все, а именно удачные) выглядят насколько потрясающе — все главные детали контрастны и отделены он фоновых элементов.

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

Ахроматический / Световой / Тональный контраст — здесь мы используем градации серого для выделения объектов. Играя светлыми и тёмными тонами, мы можем выделить объект на переднем плане, а задний план затемнить, или наоборот. Собственно, этот приём и используется в черно-белой фотографии.

Посмотрите на великолепную фотографию Winter Tale Martin Rak.

За счёт правильного использования тонального контраста главные объекты мы видим очень чётко и можем точно запомнить, что изображено на фотографии — а это главная цель.

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

Вот классический пример цветового контраста — синий и жёлтый.

 

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

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

Суть такова — мы проектируем дизайн интерфейса в цвете, а затем конвертируем готовый проект из цветного изображения в черно-белое. И смотрим на получившийся результат — если основные элементы, которые должны быть на 100% заметнее, контрастны по отношению ко всему остальному — мы достигли полученного результата. В случае, если контраст маленький, то докручиваем цвета.

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

Как же без Apple! Главная страница на основном сайте.

Сайт банка Тинькофф

Сайт онлайн-кинотеатра Okko

Сайт Proberry — бесплатный заказ пробников и образцов продукции.

Сайт журнала «Батенька, да вы трансформер«.

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

Возьмём боевой пример. Допустим, мы разрабатываем сайт о сельско-хозяйственной технике, и у заказчика есть фотография, которая ну вот прямо ему очень нравится и мы имеем его принципиальное желание «чтобы она была на главной». Фотография вот такая:

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

Что изменилось — я приглушил небо и поле, а трактор перекрасил в жёлтый — контрастный цвет по отношению к голубому и он уже «всплыл». Не так, конечно, как хочется, но тем не менее. И на черно-белом варианте трактор уже более контрастен и чётко выделяется. А это только 5 минут простой работы — потратив времени побольше, можно получить и более хороший результат.

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

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

До встречи на Веб-Островах!