Главное Авторские колонки Вакансии Образование
Выбор редакции:
2 391 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Контраст в web-дизайне

UX/UI дизайнер компании «Веб-Эталон» подробно расписала, зачем, где и как использовать контраст в веб-дизайне.
Мнение автора может не совпадать с мнением редакции

b_5aad57b50b9f5.jpg

Анна Липатова - UX/UI дизайнер «Веб-Эталон»

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

b_5ac213b8b5f69.jpg

Цветовой контраст привлекает внимание к заголовку на сайте nstudio.io

Варианты контраста:

  • Цвета. Самый очевидный и эффективный контраст — цветовой. Фокусирует внимание и выделяет важные элементы.

    b_5ac213ce20944.jpgЯркие цвета на сайте juste-debout.com указывают на основные детали

  • Оттенки. Работает как цветовой контраст, но мягче.

    b_5ac213dda9649.jpgНа яркой странице на сайте arm-auto.de с помощью контраста оттенков и форм удается выделить важную информацию

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

    b_5ac213f057d2a.jpgБольшая цифра на сайте viporte.com выглядит необычно и за счет этого концентрирует на себе первоначальное внимание

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

    b_5ac2140acbd7b.jpgНа сайте easterneuropeanmovies.com используется два контраста для заголовка - нестандартная фигура и яркий цвет.

  • Расстояния. Объект на расстоянии от остальных привлекает больше внимания.

    b_5ac2141ba8cbc.jpgНа сайте galitos.in видим сразу три контраста: цвета, формы и расстояния. Контент в правой части отделен пустым пространством, что привлекает внимание.

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

    b_5ac21430b31ac.jpgНа сайте medium.com в списке применено выравнивание, чтобы создать больший контраст с заголовком

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

  • Очевидно. Убедитесь, что контраст достаточный и выполняет свою функцию.

    b_5ac2144092207.jpgЯркий контраст на сайте oneupstud.io заметен сразу.

    b_5ac2145d18f22.jpgКонтраст слабо выражен и разбросан по сайту babyhit.ru. Попытки привлечь внимание пользователя привели к обратному: взгляду пользователя не за что зацепиться.

  • Умеренно. Важно не переусердствовать с контрастными элементами. Слишком частый или неуместный контраст раздражает.

    b_5ac214bc83221.jpgЯркие цвета, сосредоточенне на заголовке и СТА-кнопке. Ничего лишнего на bonboss.ca/fr.

    b_5ac214ccd438f.jpgНепонятно подобранное и слишком интенсивное сочетание ярких цветов вызывает желание закрыть сайт fresitapizza.ru.

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

    b_5ac214e892fae.jpgКонтрастность подчеркивает красоту и уникальность ювелирных украшений на сайте new.oberig.jewelry/en.

    b_5ac214f620425.jpgСтранное применение контраста на сайте turbomos.ru выглядит неуместно.

  • Обоснованно. Не стоит делать дизайн ради дизайна; если контраст не нужен, или есть сомнения в его целесообразности, лучше обойтись без него.

    b_5ac21505b3054.jpgНа сайте action4.com.ua на контрастном фоне выделяется только самая важная информация и иллюстрации.

    b_5ac2151783451.jpgКонтрастные элементы на фотографии не несут никакой практической пользы. Сайт bucketlistly.blog.

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Классные решения
Юридическое сопровождение ВЭД
Gonzalo Riveros
Спасибо. Пошарю себе.
Ответить
Projectburo
Бюро дизайна
Борис Матвиенко
В последнем примере польза в том, что это прикольно выглядит )
Ответить
Веб-Эталон
Создание, продвижение сайтов и мобильных приложений
Максим Михайличенко
Возможно, вы правы, но креатив не должен быть самоцелью.
Ответить
Витязь-Строй - Дома из бревна
Строительство деревянных домов ручной рубки под ключ.
Александр Полторак
Не все, что прикольно выглядит, несет пользу.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.