Различия притягивают взгляд, а контраст дает возможность усилить эти различия. Контраст — это ключевой элемент веб-дизайна, позволяющий определить приоритеты в распределении важности каждого элемента во всем проекте.
Обычно люди замечают контраст только между двумя цветами. Но это еще более широкий прием. Давайте рассмотрим несколько примеров применения контраста.
Содержание
Открытый и закрытый
Посмотрите, как изображения контрастируют с местами, занятыми текстом.
Заполненный и пустой
Также и левая сторона примера ниже заполнена контентом в отличии от правой.
Симметричный и асимметричный
На изображении ниже контент организован симметрично, но после этого была добавлена стрелка «назад», которая контрастирует со всем контентом, помогая пользователю понять, что ее можно воспользоваться.
Большой и маленький
Здесь маленькие элементы дизайна контрастируют с большим цифровым счетчиком, захватывая внимание пользователя.
Заполненный и пустой
Простой способ расставить приоритеты по важности среди кнопок.
Шрифт с засечками и без
Не обязательно использовать только один шрифт.
Упорядоченный и хаотичный
Чистый и хорошо организованный текст отлично контрастирует с хаотично расположенными элементами.
Текстурный и плоский
Ни изображении ниже видим смесь градиента и фото с одной стороны с простым белым фоном с другой. Великолепно.
Возможности использования контраста бесконечны:
- Текст с отступом и без;
- Квадратная форма и окружность;
- Заполненный и прозрачный;
- Горизонтальный и вертикальный;
- Линейный и точечный;
- Детализированный и чистый.
Контраст – одна из основ графического и, следовательно, веб-дизайна. И он не ограничивается использованием разных цветов и разного размера текста.