Визуальный вес
Это степень визуальной значимости элемента в композиции, которая зависит от его размера, формы, площади заливки и занимаемого пространства.
Оптическая компенсация
Это корректировка размера или положения элемента, при которой дизайнер отходит от математически точного выравнивания ради визуального баланса.
Что в видео-уроке:
В уроке разбираем визуальный вес элементов и принцип оптической компенсации. На примерах фигур и иконок учимся замечать дисбаланс, корректировать размер и положение объектов и добиваться более гармоничной композиции.
Почему одинаковые элементы воспринимаются по-разному
Даже в обычной жизни мы визуально понимаем, что телефон тяжелее ручки: он шире, объёмнее и занимает больше пространства. В веб-дизайне работает тот же принцип. Один элемент может сильнее привлекать внимание и визуально перетягивать композицию, даже если его размеры формально совпадают с соседними.
Поэтому математически точное выравнивание не всегда выглядит правильным. Иногда композицию нужно дополнительно корректировать на глаз.
Математический центр не всегда выглядит как визуальный
Если вписать квадрат в круг и выровнять его по центру по X и Y, результат воспринимается гармонично. Но с треугольником ситуация меняется: его bounding box (ограничивающая рамка) может быть расположен идеально, а сама фигура всё равно кажется смещённой.
Причина в пустом пространстве вокруг треугольника. Масса фигуры распределена неравномерно, поэтому одна сторона начинает визуально перевешивать.
Как работает оптическая компенсация
Если одна сторона элемента кажется тяжелее, фигуру немного сдвигают в противоположную сторону. Например, треугольник можно переместить на несколько пикселей до момента, когда он начнёт восприниматься сбалансированно.
Точное смещение не нужно рассчитывать формулами. Сначала используем математическое выравнивание как отправную точку, затем корректируем положение на глаз.
Стрелки тоже нужно выравнивать оптически
Этот принцип особенно хорошо заметен на навигационных стрелках. Из-за острого угла стрелка, расположенная строго по центру кнопки, может казаться смещённой.
Если визуальный вес уходит вправо, стрелку немного двигаем влево. Если направление стрелки меняется, компенсация также происходит в противоположную сторону.
Размер фигуры тоже влияет на вес
Круг и квадрат с одинаковой шириной и высотой воспринимаются по-разному. Квадрат выглядит тяжелее, потому что полностью заполняет свою область, а у круга отсутствуют углы и появляется дополнительное пустое пространство.
Чтобы уравновесить фигуры, круг можно немного увеличить или квадрат уменьшить. Визуально они станут равнозначнее, даже если их реальные размеры будут разными.
Иконки нельзя приводить к одному размеру только по высоте
То же самое происходит с иконками. Например, телефон, конверт и иконка сообщения могут иметь одинаковую высоту, но конверт будет выглядеть тяжелее из-за широкой прямоугольной формы.
Поэтому при выравнивании иконок нужно учитывать не только высоту или ширину, но и общую площадь заливки. Для вертикальной иконки ориентиром может быть высота, для горизонтальной — ширина, а для близкой к квадрату формы — обе стороны.
Социальные иконки должны быть из одной системы
Особенно хорошо разница заметна на иконках социальных сетей. Залитые и контурные значки при одинаковом размере воспринимаются совершенно по-разному, поэтому лучше выбрать один стиль: либо все иконки залитые, либо все контурные.
Также не стоит смешивать иконки с подложкой и без неё без необходимости. Например, Facebook в круге и обычный YouTube уже имеют разный визуальный вес и требуют дополнительного выравнивания.
Подложки помогают уравновесить разные формы
Один из способов привести набор к единой системе — поместить все иконки в одинаковые круглые подложки. Тогда появляется общая внешняя форма, а сами символы можно отдельно масштабировать и сдвигать внутри неё.
Даже после этого математического центрирования может быть недостаточно. Telegram из-за диагональной формы, WhatsApp из-за хвостика, Facebook или другие асимметричные знаки могут потребовать небольшого смещения по X или Y.
Главное — сравнивать элементы визуально
Гармоничный набор не обязан состоять из элементов с одинаковыми числовыми размерами. Важнее, чтобы они воспринимались равнозначными по весу.
При проверке смотрим на форму, площадь заливки, количество пустого пространства и положение внутри подложки. Если один элемент явно выбивается, его можно уменьшить, увеличить или немного сдвинуть.
Сначала выравниваем точно, затем корректируем на глаз
Удобный рабочий принцип — сначала использовать стандартные инструменты Figma и получить математически точное положение. После этого оцениваем композицию визуально.
Если чувствуется перекос, корректируем размер или положение элемента на несколько пикселей. Именно сочетание математического выравнивания и оптической компенсации даёт наиболее гармоничный результат.
Визуальный баланс важнее одинаковых цифр
В веб-дизайне элементы оцениваются не только по ширине и высоте, но и по тому, как они воспринимаются человеком. Поэтому одинаковые значения не всегда означают равный визуальный вес.
Навык оптической компенсации развивается с практикой. Полезно сравнивать простые фигуры, стрелки и наборы иконок и наблюдать, как небольшое изменение масштаба или положения влияет на всю композицию.
