Контраст в дизайне — как сделать фон нормальным и текст читаемым
Контраст между элементами везде, в тексте, цветах, фонах и размерах различных элементов. Рассмотрим контрасты шрифтовые и цветовые. Есть еще контраст расстояний, про это рассказано в другой статье в Логове
Контраст в дизайне о том как элементы выглядят друг на друге, как сочетаются друг с другом. Обычно эта тема про фон и текст на фоне. Но также работает и для расстояний и размеров.
Контраст в цветах и фонах
Человеческий глаз по природе приспособлен искать паттерны (например надписи или морду тигра), но для этого требуется небольшое напряжение мозга. Когда вы делаете неконтрастный фон или текст - вы создаете сложности пользователю и упускаете клиента. Пользователь, сталкиваясь со сложностями, подсознательно оценивает сайт хуже.
Как в истории с доктором Фоксом, когда одну из лекций в университете провел актер, который на протяжении всей лекции говорил полную чепуху. Но из-за простоты лекции и яркости человека - большинство оценили лекцию положительно. Опыт пользователя завязан на таких мелочах и если их знать - ваши дизайны станут лучше.
Как проверить контраст просто
Заходите на сайт WebAim и вводите цвет фона и элемента на фоне, сайт автоматически подсчитает насколько цвета контрастируют, отлично работает для большинства задач :)
Подробнее о том как строится контраст фона и элемента поверх
Начнём с ошибок, как правильно и в чем принцип
Это ужасно. Текст того же цвета, что и фон, который к тому же детализированная фотография, из-за этого текст не читается. Самая частая ошибка и самая неприятная.
Сделаем лучше. Чуть-чуть уменьшим экспозицию и разместис текст в менее детализированный участок фотографии.
Так получше, но все еще не идеально. Все еще плохая читаемость, а фотография кажется слишком темной.
Еще лучше вообще не использовать фотографии как фон для текста. Вместо этого можно использовать схематические рисунки, 3д-иллюстрации или просто фон.
Логотип + фон с фотографией = треш
Когда логотип прикрепляется на картинку и логотип не видно — это плохо.
Но не всегда...
Цвета
На примере ниже контраст ужасен, из-за того, что цвета очень близки по оттенку и насыщенности. Это просто вырвиглаз, никогда не используйте близкие по насыщенности цвета, а лучше вообще не накладывать цвета друг на друга.
Чтобы фон был контрастным с текстом, не используйте фон и текст одинаковых цветов, а также следите, чтобы фон не был слишком детализированным. Проверяйте контраст на WebAim.
Большинство дизайнов работают именно так и не совершая этих ошибок - скорее всего получится круто. Но правила созданы, чтобы их нарушать. Когда делаете свой дизайн, опирайтесь на эти принципы, но не забывайте быть креативными и экспериментировать.
Контраст в типографике
Есть также и контраст в типографике. Это работает так:
В левом столбце хороший контраст. Заголовки отделены от текста большей жирностью, размером и прозрачностью.
Хороший контраст, это когда при беглом взгляде на текст легко можно прочитать основное.
В правом столбце все плохо. Невозможно отделить текст от заголовков и главный заголовок от подзаголовков.
Так выглядит контрастный текст. Заголовки жирнее и больше текста, главный заголовок явно отличается от подзаголовков.
Текст должен быть менее жирным и более прозрачным по отношению к заголовку, а также отличаться по размеру. Важно, чтобы текст явно отличался от заголовков. Чтобы заголовки разных уровней явно отличались друг от друга по размеру.
Спасибо за просмотр
Еще больше о дизайне в Телеграм канале: t.me/design_logovo