Почему текст должен хорошо контрастировать с фоном лендинга?

Posted on by riasevastopol

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

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

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

Но, в большинстве случаев, эти упрочнения имеют очень неприятные последствия, в случае если текст не контрастирует с фоновым изображением.Почему текст должен хорошо контрастировать с фоном лендинга? В соответствии с стандартным требованиям, соотношение контрастности текста, что не есть частью оформления либо логотипа, должно равняться хотя бы 4,5:1 (либо 3:1 для громадных знаков — шрифт размером в 18 пунктов, либо 14 жирный шрифт).

  • подобия и Принципы контраста как средства ясности в веб-дизайне

Узкие настройки имеют громадное значение для юзабилити

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

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

Нет

Слева: фоновое изображение, применяемое для третьего слайда основной страницы Spire.com, смотрится блекло, помимо этого, оно перегружено в визуальном замысле. Справа: мы видим, что текст белого цвета плохо контрастирует с фоновым изображением.

Да

Слева: затемнение фона оверлеем делает белый текст более заметным, кроме того без трансформаций визуального тона изображения. Справа: отредактированная затемненная версия соответствует требованиям (4,5:1) касательно контраста.

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

В таких обстановках, для получения хорошей контрастности, фоновое изображение необходимо затемнить. Этого возможно достигнуть, или обработав сам снимок, или дополнив его полупрозрачным тёмным градиентом в CSS. Расширение Гугл Chrome называющиеся Contrast Analyzer разрешит вам выяснить степень затемнения фона, нужную для получения оптимального контраста с текстом.

Нет

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

Да

Слева: в данной отредактированной версии изображения, которые содержат текст, были дополнены эффектом размытия, а цвет шрифта поменяли на тёмный. Кроме этого, надписи сместили вниз для поддержания однородности с другими элементами сетки, что разрешило применять зрительный эффект в меньшей части картины. Справа: сейчас текст контрастирует с фоном в нужном соотношении 3:1, снабжая тем самым лучшую читабельность для пользователей.

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

Размещение текста в согласованном месте разрешает применить зрительный эффект в ограниченной области изображения, и тем самым поменять его в меньшей степени.

Нет

Слева: сайт REI размещает полупрозрачный тёмный бокс за текстом, перекрывающим изображение, но для белой надписи на ярком фоне таковой контрастности не хватает. Справа: главный заголовок, появляющийся над тучами, не контрастирует с фоном кроме того в соотношении 3:1 для больших знаков.

Да

Слева: в поменянной версии затененность всех боксов была увеличена до 50%, что разрешило сохранить неспециализированный стиль бренда и обеспечило нужный уровень контраста белого текста с тучами. Справа: текст прошел тест и контрастирует с фоном в соотношении 3:1.

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

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

  • Теория цвета — как руководить вниманием пользователя?

Вместо заключения

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

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

Высоких вам конверсий!

По данным: nngroup.com, image source: Pok

Случайные статьи:

Как написать текст для лендинга?


Подборка похожих статей:

riasevastopol

More Posts