Как использовать контраст в веб-дизайне?
Веб-дизайн 0 Комментариев ,

Как использовать контраст в веб-дизайне?

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

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

Открытый и закрытый.

Посмотрите, как изображения контрастируют с местами, занятыми текстом.

контраст в веб-дизайне

Заполненный и пустой.

Также и левая сторона примера ниже заполнена контентом в отличии от правой.

контраст в веб-дизайне

Симметричный и асимметричный.

На изображении ниже контент организован симметрично, но после этого была добавлена стрелка «назад», которая контрастирует со всем контентом, помогая пользователю понять, что ее можно воспользоваться.

контраст в веб-дизайне

Большой и маленький.

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

контраст в веб-дизайне

Заполненный и пустой.

Простой способ расставить приоритеты по важности среди кнопок.

контраст в веб-дизайне

Шрифт с засечками и без.

Не обязательно использовать только один шрифт.

контраст в веб-дизайне

Упорядоченный и хаотичный.

Чистый и хорошо организованный текст отлично контрастирует с хаотично расположенными элементами.

контраст в веб-дизайне

Текстурный и плоский.

Ни изображении ниже видим смесь градиента и фото с одной стороны с простым белым фоном с другой. Великолепно.

контраст в веб-дизайне

Возможности использования контраста бесконечны:

  • Текст с отступом и без;
  • Квадратная форма и окружность;
  • Заполненный и прозрачный;
  • Горизонтальный и вертикальный;
  • Линейный и точечный;
  • Детализированный и чистый.

Контраст – одна из основ графического и, следовательно, веб-дизайна. И он не ограничивается использованием разных цветов и разного размера текста.



Подпишитесь на обновления блога!

Будьте всегда в курсе новостей

Добавить комментарий