Почему один элемент кажется «тяжёлым», даже если он меньше остальных? Почему взгляд сразу цепляется за одну кнопку, а другую просто пролистывает?
Дело в визуальном весе, то есть в том, насколько объект кажется нам тяжелее или легче. Чем больше визуальный вес элемента, тем сильнее он притягивает внимание на экране.
От чего зависит визуальный вес
Как использовать визуальный вес в дизайне сайтов
✅ Выделять, что важно
Главная кнопка должна выделяться среди остальных элементов. Сделайте её тяжелее, задав более контрастный фону цвет или увеличив размер.
✅ Балансировать композицию
Знание о визуальном весе поможет сбалансировать композицию и сделать её гармоничнее. Например, если с одной стороны экрана тяжёлый визуальный блок — другую часть можно уравновесить текстом или пустым пространством.
✅ Достигать оптического баланса
Одинаковые по размеру элементы могут казаться разными. Например, если рядом расположить квадрат и круг одинакового размера, квадрат будет казаться больше. От этого дизайн может казаться неаккуратным. Поэтому для достижения оптического баланса, круг стоит сделать немного больше.
Чтобы проверить, соблюдается ли визуальный баланс, можно заблюрить фигуры или иконки, которые будут располагаться рядом. Если их размеры кажутся одинаковыми и ни один элемент не выделяется, значит всё сбалансировано.
Дело в визуальном весе, то есть в том, насколько объект кажется нам тяжелее или легче. Чем больше визуальный вес элемента, тем сильнее он притягивает внимание на экране.
От чего зависит визуальный вес
- Размер — чем больше элемент, тем тяжелее он выглядит.
- Контраст — элементы, которые лучше выделяются на фоне, кажутся тяжелее. Например, белый текст на чёрном фоне будет притягивать больше внимания, чем текст серого цвета.
- Форма — необычные, сложные формы привлекают больше внимания.
- Текстура и детализация — чем больше деталей, тем больше вес.
Как использовать визуальный вес в дизайне сайтов
✅ Выделять, что важно
Главная кнопка должна выделяться среди остальных элементов. Сделайте её тяжелее, задав более контрастный фону цвет или увеличив размер.
✅ Балансировать композицию
Знание о визуальном весе поможет сбалансировать композицию и сделать её гармоничнее. Например, если с одной стороны экрана тяжёлый визуальный блок — другую часть можно уравновесить текстом или пустым пространством.
✅ Достигать оптического баланса
Одинаковые по размеру элементы могут казаться разными. Например, если рядом расположить квадрат и круг одинакового размера, квадрат будет казаться больше. От этого дизайн может казаться неаккуратным. Поэтому для достижения оптического баланса, круг стоит сделать немного больше.
Чтобы проверить, соблюдается ли визуальный баланс, можно заблюрить фигуры или иконки, которые будут располагаться рядом. Если их размеры кажутся одинаковыми и ни один элемент не выделяется, значит всё сбалансировано.
