Веб-Острова Анатолия Куликова

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

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

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

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

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

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

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

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

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

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

Фото с Pixabay.com

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

Анатолий Куликов

Анатолий Куликов

Автор блога, дизайнер, веб-разработчик

Новые статьи

Разбираемся с Яндекс.Коннектом

Разбираемся с Яндекс.Коннектом

Разбираемся с новым сервисом от Яндекса
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Следим за клавиатурой с помощью JS

Следим за клавиатурой с помощью JS

Отслеживаем нажатие клавиш на клавиатуре и совершаем действия
Надежность пароля в картинках

Надежность пароля в картинках

Скажи пользователю, что ты думаешь о его пароле
Скроллинг по странице

Скроллинг по странице

Делаем плавный скроллинг по странице с помощью JQuery и HTML5
AI композитор Amper Music

AI композитор Amper Music

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

Статьи по теме

Бесплатный фотошоп в вашем браузере

Бесплатный фотошоп в вашем браузере

Редактируем файлы Photoshop и Sketch онлайн
Векторный редактор онлайн

Векторный редактор онлайн

Vectr — свободный векторный редактор онлайн и офлайн
Главные цвета весны 2018 от Pantone

Главные цвета весны 2018 от Pantone

Главные цвета весны 2018 от Института Цвета Pantone
Делаем паттерн из иконок

Делаем паттерн из иконок

Ещё один простой, но полезный онлайн-генератор
Классные фотографии для ваших проектов

Классные фотографии для ваших проектов

Где легально и бесплатно взять хороших фотографий
Простая защита фотографий от посторонних посягательств

Простая защита фотографий от посторонних посягательств

Полезная и надёжная программа Image Tuner