Оптический баланс в дизайне

Введение

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

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

Рис. Фигуры с одинаковыми размерами, но фокусом внимания становится квадрат.

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

Оптический баланс — это способ создания равновесия между элементами дизайна.

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

Рис. Круг немного крупнее квадрата, но фигуры кажутся визуально одинаковыми.

Хотя фигуры на втором примере имеют разные длины сторон, они выглядят визуально сбалансированными.

Для создания оптического баланса в веб-дизайне необходимо учитывать различные факторы: размеры и формы элементов, их выравнивание относительно друг друга, цветовые сочетания и оформление фона. Это помогает сделать дизайн сайта более красивым и удобным, поскольку пользователи смогут быстрее считать информацию и определить равнозначность между элементами.

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

Как работает оптический баланс?

Оптический баланс — это то, что делает дизайн интерфейса удобным для восприятия, понятным и приятным для глаз. Это связано с принципом гармонии в дизайне, где все элементы должны быть в балансе между собой.

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

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

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

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

Рис. Пример иконок, в которых не был учтен оптический баланс.

Рис. Пример иконок, которые были исправлены с учетом правил оптического баланса.

Оптическое выравнивание используется для создания равных по визуальному весу элементов, таких как иконки, логотипы, навигационные элементы (ссылки, кнопки), формы и элементы ввода, текстовый контент.

Далее мы расскажем о том, как можно достичь ощущения равновесия с помощью различных методов оптического выравнивания.

Способы оптического выравнивания

Рассмотрим несколько способов, которые обеспечивают гармонию в дизайне.

1. Выравнивание масштабом

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

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

Рис. Размеры фигур одинаковые, но визуально они не сбалансированы.

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

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

Рис. Размеры фигур разные, но визуально они сбалансированы.

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

Рис. Способ проверить оптический баланс

Приведем несколько примеров применения этого метода в веб-дизайне:

а) Иконки на сайте

Квадратные иконки тяжелее, чем иконки других форм. Поэтому их отрисовывают меньше по размеру.

Рис. Пример оптически сбалансированных иконок

б) Кнопки на сайте

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

Рис. Пример расположения текстового поля и кнопки

в) Формы с разными краями

Фигуры с острыми краями нужно делать больше или длиннее, чтобы выровнять их вес с прямоугольными объектами.

Рис. Пример оптически сбалансированных форм с разными краями

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

2. Цветовой контраст

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

Рис. Пример влияния заливки цветом на оптический вес кнопки

Перечислим особенности цвета, влияющие на визуальный вес:

— Темные объекты кажутся тяжелее светлых. Например, черный — самый темный цвет и выглядит самым тяжелым, а белый — самый светлый цвет и выглядит самым легким.

— Теплые цвета (желтый, оранжевый и красный) выглядят тяжелее, чем холодные цвета (синий, зеленый и фиолетовый).

— Насыщенные цвета привлекают больше внимания, чем менее насыщенные.

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

— Если фоновый цвет темный, то светлые элементы на нем будут казаться тяжелыми, а если фон светлый, то светлые элементы на нем будут казаться легкими.

Давайте рассмотрим пример использования цвета на веб-странице для создания оптического баланса между объектами разного визуального веса. Например, если рядом с текстом разместить цветной элемент того же цвета, то текст может показаться блеклым на его фоне.

Рис. Цвет элементов одинаковый, но текст выглядит светлее фигуры.

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

Рис. Пример создания оптического баланса с помощью цвета

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

3. Выравнивание смещением

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

а) Выравнивание фигур

Графические редакторы автоматически определяют центр любой фигуры как центр ее прямоугольного контейнера. Из-за этого иконка может выглядеть несбалансированно, как на примере слева. Чтобы достичь визуального равновесия, дизайнеры осознанно изменяют расположение элементов внутри объектов и создают более эстетичную иконку, как на примере справа.

Рис. Пример неудачного и гармоничного расположения треугольника внутри круга

Когда дело касается выравнивания фигур в иконке, сначала определяется ее форма: простая или сложная.

Простая фигура с симметрией помещается внутри круга, после чего центр круга выравнивается относительно внешних границ (контейнера). Например, именно так создается кнопка «Play».

Рис. Пример оптически сбалансированной кнопки Play в круглом контейнере

Рис. Пример оптически сбалансированной кнопки Play в квадратном контейнере

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

Рис. Пример выравнивания сложной фигуры

б) Выравнивание текста

Существуют два основных подхода к выравниванию текста внутри кнопки:

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

Рис. Слева пример выравнивания по высоте заглавной буквы, а справа — по высоте строчной.

В итоге, при выравнивании смещением объектов относительно внешнего контура требуется корректно определять центр элемента.

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

Оптическое скругление углов

Часто скругление углов с помощью встроенных инструментов графических редакторов выглядит неестественно, так как человек мгновенно замечает точку, где прямая линия переходит в кривую.

Рис. Пример стандартного скругления с помощью графического редактора

Чтобы избежать этой проблемы, нужно добавить дополнительный объем поверх геометрического круга при скруглении. Это позволит скрыть точку перехода прямой линии в кривую и сделать скругление более гармоничным и естественным.

Рис. Пример добавления дополнительного объема при скруглении

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

Рис. Кнопки справа выглядят более гладкими и гармоничными

‍

Для достижения такого эффекта можно использовать суперэллипс, который изобретен Габриелем Ламе. Например, дизайнеры компании Apple использовали суперэллипсы для создания закругленных углов иконок для iPhone.

Рис. Суперэллипс в дизайне иконок для iPhone

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

Плагины Figma

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

Geometric — плагин создает суперэллипс и другие сложные фигуры.

Logo Layout — плагин автоматически масштабирует и распределяет выбранные логотипы по сетке с учетом оптического веса.

Visual Center — плагин находит визуальный центр у выбранного векторного объекта.

Заключение

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

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

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

Введение Как работает оптический баланс?Способы оптического выравнивания Оптическое скругление углов Плагины Figma Заключение