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

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

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

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

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

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

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

Типы баланса

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

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

Вертикальный Баланс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размер

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

Размер

Цвет

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

Цвет

Форма

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

Форма

Контраст

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

Контраст

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

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

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

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

Большие объекты тяжелее маленьких

Тёмные объекты тяжелее светлых

Насыщенные цвета тяжелее блеклых

Чем толще граница, тем она тяжелее

Чем больше текстуры, тем тяжелее объект с ней

Кроме горизонтального вида баланса не забывайте про вертикальный и радиальный

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

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

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

Контраст

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

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

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

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

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

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

пример1

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

пример2

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

пример3

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

пример4

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

пример5

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

пример6

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

пример7

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

пример8

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

пример9

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

Итоги

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

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

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

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

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

Комментарии Facebook:

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

  1. Наталья Лебедева

    Здорово! Классная статья!!!
    Я хоть и не веб-мастер, сайтов не создаю, а пользуюсь готовыми шаблонами)), но теперь поняла, почему некоторые сайты мне сразу же нравятся, а некоторые — с одного взгляда НЕТ!
    По-моему, баланс похож на композицию в живописи)- действительно асимметрия может быть крайне привлекательной, как в картинах Дали!

  2. Дмитрий Денисов

    Спасибо, очень наглядно. Но мне -не все по вкусу.

  3. Артур

    Очень хорошее руководство по web-дизайну. Буду пользоваться!

  4. Татьяна

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

  5. naikom

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

  6. Виктор

    Спасибо за полезную информацию.В дальнейшем пригодится.

  7. Роза

    Иртересная статья. Спасибо.

  8. Елена

    Михаил, большое спасибо тебе и всем ребятам за то, что делитесь очень полезной информацией, которая помогает многим из нас научиться профессиональнее разбираться и работать в веб-дизайне!!!

  9. Gala

    Доступно о сложном. И вправду работает. Спасибо!

  10. Александр

    Спасибо очень интересная лекция

  11. Eugene

    Точка зрения заслуживает на сущестование.
    Хотя если рассматривать примеры, то они статичны, как картины. Сайты же отличаются динамикой, которая привносит свой позитив в картинку. Поэтому часть делает «дисбаланс» сознательно чтобы запомнится.

  12. Максим

    Вывод:
    «как ни располагайте элементы на сайте, все равно это подпадет под какую-то категорию баланса».

  13. naikom

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

  14. Василий Мирчук

    Полезно и конкретно. Вот бы научиться балансировать!

  15. VLADIMIR

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

  16. Аня

    Спасибо за помощь!сама создаю сайт!если кому интересно,зайдите посмотреть live-dialogue.ru!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree