Визуальные контрасты формы в дизайне

Для понимания и успешной практики современного дизайна важно понимание визуальных контрастов. Основные принципы, которые касаются формы и цвета, были заложены Йоханнесом Иттеном в 1920-х. С тех пор прошло сто лет, но его курс еще не утратил своей актуальности. В данной статье я покажу несколько примеров на основе современного UI-дизайна.



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

1) Самый простой контраст — контраст самой формы — это может быть простая форма, состоящая из одной линии и другой, сложной ассиметричной формы, ( также контрасты круга, треугольника и квадрата);
2) Контраст по масштабу (большой и маленький);
3) Контраст по восприятию объекта в пространстве (одна и та же форма, которую поместили в пространство вертикально или горизонтально, может ощущаться по-разному);
4) Контраст по ширине (широкий и узкий);
5) Контраст по глубине (применимо к трехмерным объектам);
6) Контраст по динамичности. В зависимости от композиции, направления и угла, форма может производить разное впечатление на зрителя, к примеру давать ощущение статики и движения;

Другая группа контрастов, это контраст одной и той же формы:
1) Светлый и темный. Одинаковые формы кажутся разными, в зависимости от светлоты тона;
2) Четкий и размытый контур производят также визуальный контраст
3) По объему, тяжести предмета, к примеру, некоторые предметы будут казаться легче в зависимости от композиции или от того, закрашен объект или нарисован одной линией.

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

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





Примеры контрастов между формами:

Примеры контрастов между шрифтами: