---

Контраст

Контраст это более базовый аппарат дизайнера, он исполняет разные функции:

разделяет элементы

подчеркивает наиболее принципиальные элементы

приглушает побочные элементы

придает динамизм

Контраст завлекает внимание

Контраст выделяет составляющие из их окружения и готовит наиболее заметными.

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

Как применять контраст

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

Пример недостающего контраста

 

www.getinspired.at

Симпатичная метка, милые фигуры, простой контур как фон для навигации выглядит довольно органично.

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

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

Текст разговаривает очень не достаточно для основной странички и употребляет очень немало слов, недостает более принципиальной инфы. «Главная мишень интернет-сайта в том, чтоб поведать вам, кто я и нежели занимаюсь», мне видится, еще лучше составить «Это собственный интернет-сайт Юргена Ленга, интернет разраба работающего в Линзе, Австралия» позже разрешено обрисовать, будто вы увидите на сайте.

 

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

Читабельность существенно улучшена обычным повышением тонального контраста.

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

Еще 1 пример

Посетите интернет-сайт Алекса Кинга, попытайтесь переключать стили, применяя иконки в верхнем правом углу, какой-никакой из их наиболее комфортен для чтения?

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

Высококонтрастные области завлекают взор еще посильнее наименее контрастных элементов

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

Резкие конфигурации цветов завлекают внимание

Чем посильнее конфигурации цветов и сильнее рубежа, тем посильнее контраст.

Толстые полосы наиболее видны, нежели изящные, однако очень толстые полосы (толще нежели отступы меж ними) отличаются никак не настолько верно. Абзацы жирного слова, совсем отлично отличаются в масштабе странички, однако отдельные знаки стают наименее контрастными и утрачивают четкость.

Области, имеющие краска либо оттенок хороший от расцветки фона странички либо её цветовой палитры, отлично выделяются

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

Новые высококонтрастные составляющие, лучше направляют на себя интерес, нежели привычные

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

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

Движение завлекает взгляд

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

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

Пример: Amok

 

Приятный дизайн с внедрением нетяжелых градиентов.

Тем никак не наименее, контрасты избраны ошибочно, высококонтрастные области никак не содержат принципиальной информации.

Наиболее ощутимые составляющие страницы:

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

Что стоит изменить

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

Навигация обязана этак ведь верно изолироваться от контента как боковые гиперссылки и реклама.

Стоит прищуриться

Тест прищуриванием — это обычный метод поставить совместный контраст страницы.

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

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

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

 

Проведите опыт на точном и контрастном изображении, к примеру, на данной рекламе iPod.

Мера контраста

Чтобы испытать степень контрастности вам необходимо сопоставить насыщенность переднего намерения и фона. нежели более отличалка, тем более контраст.

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

Пример A: интернет Design from Scratch

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

Пример B: sealedmedia.com

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

Пример C: transformationalbreath.co.uk

На веб-сайте употребляется темный контент на фоне изображения в сероватом и белоснежном цветах.

Минимальный контраст 91%, будто довольно для неплохой читабельности текста.

Пример D: usernomics.com

Для рацион употребляется желтоватый контент на сероватом фоне, контрастность такового сочетания только 20%, при наведении мышки анализ делаться серым, а фон желтоватым, контраст некоторое количество более и добивается 40%, будто также недостаточно.