Баланс в веб-дизайне

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

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

Почему сбалансированные сайты выглядят хорошо

Мы подсознательно любим баланс. Любовь к устойчивым конструкциям заложена в нас на подсознательном уровне, дисбаланс, напротив, вызывает чувство отторжения.
Таким образом, визуальный баланс – залог успешного дизайна. Это та дополнительная «искра», которую одни сайты имеют, а другие – нет.В качестве дополнительного преимущества, сбалансированный дизайн хорошо сочетается с функциональностью.

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

Типы баланса

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

Горизонтальный и вертикальный баланс

Отличный способ визуально упорядочить элементы — сбалансировать их по осям — горизонтальной или вертикальной. Горизонтальный баланс — вы располагаете элементы слева и справа от друга – как на детских качелях. Вертикальный баланс — вы развешиваете элементы сверху вниз по центральной оси.

Радиальный баланс

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

Симметричный и асимметричный баланс

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

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

Симметрия против асимметрии

Как узнать, какой из видов баланса было бы правильно сейчас использовать? Если в общем, то симметрия обычно проще воспринимается. Вот поэтому она чаще встречается в дизайне.

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

Свойства баланса

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

Размер

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

Цвет

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

Форма

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

Контраст

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

Расположение

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

Как добавить баланс на сайт

Итак, как же сделать страницу сбалансированной? В качестве примера возьмем самый простой симметричный баланс. Пустое содержание выглядит довольно уныло, так что добавим меню. Если посмотреть на практически любой неплохой дизайн, то можно увидеть, что меню оформлено «тяжелее» текста. Вот тут и получается самый примитивный баланс — небольшой тяжелый элемент уравновешивает объемный, но лёгкий текст. Начинайте разработку макета с наброска необходимых элементов. Эти правила помогут не совершить ошибок:

Правило третей

В визуальных искусствах есть такое понятие, как правило третей — это когда рабочее пространство мысленно разбивается на 9 равных частей 2-я вертикальными и 2-я горизонтальными линиями. Так вот, по этому правилу главные композиционные центры стоит располагать на пересечении этих линий.

Итак, как же разделить макет на 9 равных частей?

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

2. Мысленно делим вертикальную его часть на 3 равных доли и проводим для этого 2 паралленьные линии.

3. То же самое для горизонтальной составляющей

Соблюдение правила третей задаёт больший интерес к содержимому, чем при обычном центрировании.

Примеры с пояснениями

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

Ещё один пример асимметрии — сайт CVGvietnam. Спокойный вон служит для фоном для дисбаланса.

Сайт Biltmore симметричен, но его спокойный ритм нарушает иллюстрация.

Сайт-портфолио Нaluko тоже выполнен в симметричном ключе. Однако дисбаланс в шапке оттягивает внимание на себя.

Сайт Warble Entertainment имеет симметричную структуру, причём сбалансированную — логотип, например, уравновешивается картинками. Однако его богатое графическое оформление делает сайт очень живым, что соответствует его тематике.

А вот пример вертикально баланса. То есть если нарушить горизонтальный баланс, то вертикально сайт всё равно будет уравновешен.

Сайт Getactive — пример радиального баланса. Все элементы расположены пропорционально относительно центральной картинки.

А эта страница уравновешена как вертикально, так и горизонтально.

Три маленьких картинки балансируют с одним большим объектом.

Итоги

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

Автор: Найко Михаил

Редакция:Команда webformyself.

Комментарии Вконтакте:

Комментарии (16)