Телефон: +38 (093) 914-20-50
WEB-дизайн и создание продающих сайтов

Баланс в веб-дизайне или как должен выглядеть продающий сайт

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


ТИПЫ БАЛАНСА
Я расскажу вам о 5ти методах создания баланса в дизайне сайта. Их можно использовать для организации и упорядочивания элементов, для создания впечатления комфорта и простоты ориентирования на сайте. И так, вот эти 5 способов:
  • Асимметричный баланс
  • Вертикальный Баланс
  • Горизонтальный баланс
  • Радиальный Баланс
  • Симметричный баланс

АСИММЕТРИЧНЫЙ И СИММЕТРИЧНЫЙ БАЛАНСЫ
Эти виды балансов, чаще всего, хорошо сочетаются с вертикальным, горизонтальным и радиальным балансами. Симметричный баланс – вид баланса, в котором обе стороны сайта зеркально отражают друг-друга. Симметрия – очень строгий стиль, на сайтах с симметричным балансом легко ориентироваться и он комфортен для чтения.

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

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

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

ЧТО ЛУЧШЕ, СИММЕТРИЯ ИЛИ АСИММЕТРИЯ
Как узнать что подойдет именно вам, в конкретном случае? Все просто, за частую симметрия более проста к восприятию, и если вам нужен сайт для бизнеса или серьезной организации, то целесообразнее будет выбрать симметричный баланс. Он подчеркнет статус и стабильность компании.
Ну, а если же вы хотите подчеркнуть хрупкость, либо добавить остроты к визуальному восприятию, то обязательно поэкспериментируйте с асимметрией.

Что лучше, симметрия или асимметрия

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

ВЕРТИКАЛЬНЫЙ И ГОРИЗОНТАЛЬНЫЙ И БАЛАНСЫ
Одним из лучших способов упорядочить элементы – это сбалансировать их по осям. Оси, как известно, бывают горизонтальные и вертикальные.
Горизонтальный баланс – расположение элементов по левому и правому боку относительно друг-друга. Вертикальный баланс – расположение элементов сверху до низу по горизонтальной оси, сверху до низу.

Что лучше, симметрия или асимметрия
Что лучше, симметрия или асимметрия

РАДИАЛЬНЫЙ БАЛАНС
Радиальный баланс, это балансирование элементов вокруг центра композиции. Элементы можно размещать вокруг центра по оси, или в стиле лучей солнца.

Что лучше, симметрия или асимметрия

СВОЙСТВА БАЛАНСА
Каждый отдельный обьект имеет свои особенности и различные способы взаимодействия с другими элементами на сайте. Основные особенности баланса:
  • Размер
  • Форма
  • Цвет
  • Размер
  • Положение
Все эти свойства могут использоваться по отдельности, для создания симметрии в балансе, или сочетаться вместе создавай равновесие для асимметричного дизайне, при этом изменение одного элемента композиции будет влиять на другой и т.д.

РАЗМЕР
Большой по размеру обьект воспринимается легко и может быть легко сбалансирован с небольшим, но насыщеным обьектом. Для достижения симметрии баланса вашего дизайна, необходимо убедиться что все элементы имеют одинаковый размер, не зависимо от того какой у них визуальный вес.

Размер

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

Размер

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

Размер

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

Размер



РАСПОЛОЖЕНИЕ
Это один из важнейших факторов, при помощи которого можно сбалансировать элементы которые отличаются по цвету, размеру, весу и форме. Как уже говорилось выше – более яркие и большие обьекты притягивают больше внимания к себе, но их вес так же зависит и от того, на сколько близко они расположены к центру композиции. Чем ближе обьект к центру, тем больше его вес, зная это вы можете балансировать объектами приближая и удаляя их от центра. Расположение элементов и блоков является одним из самых важных факторов, когда речь заходит про создание landing page.

КАК ДОБАВИТЬ БАЛАНС НА САЙТ
Давайте теперь поговорим о том, как же все-таки сделать ваш дизайн сбалансированным. Для примера возьмем симметричный баланс. Для того чтобы разнообразить содержание – добавим меню. Практически в любом хорошем дизайне можно заметить, что меню всегда тяжелее области контента. Вот это и есть пример баланса – небольшой по своему размеру, но тяжелый элемент уравнивается большим по размеру, но легким текстом в контенте. Вот несколько правил которых следует придерживаться при разработке макета, которые не дадут вам совершить ошибку:
  • Чем больше обьект, тем он тяжелее
  • Чем темнее обьект, тем он тяжелее
  • Чем насыщеней цвет у элемента, тем он тяжелее
  • Обьекты с текстурами тяжелее обьектов без них, и чем больше текстур, тем тяжелее обьект
  • Не следует забывать про вертикальный и радиальный балансы
  • Яркие и теплые цвета (красный, оранжевый), тяжелее холодный цветов, таких как синий и зеленый
ПРАВИЛО ТРЕТЕЙ
В искусстве фотографии, живописи и дизайне есть понятие правила третьей, оно показывает где лучше располагать композиционный центр. Возьмем наше рабочее пространство и разделим его на 9 одинаковых частей двумя вертикальными и горизонтальными линиями, как это показано на рисунке снизу. На пересечении этих линий (на рисунке показано голубыми кругами) и необходимо размещать то, что должно попасть в центр композиции.

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



ПРИМЕРЫ С ПОЯСНЕНИЯМИ
Размер На сайте с рисунка выше, вы видите пример ассиметричное расположение элементов. Блок с картинкой – очень тяжелый, но он уравновешивается блоком меню, а именно его тяжелыми границами.


Размер На рисунке выше еще один пример асимметричного баланса.


Размер Сайт с рисунка выше – это пример симметричного баланса, яркие илюстрации разбавляют монотонность контента.


Размер Сайт-портфолио на этом рисунке имеет симметричный баланс, но дисбаланс в шапке смещает внимание на себя.


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


Размер Вот перед вами и пример вертикального баланса. При нарушении горизонтального баланса, вертикальный все еще будет уравновешен.


Размер Радиальный баланс. Все элементы сбалансированы относительно центра композиции.


Размер Пример сочетания двух балансов – горизонтального и вертикального.


Размер Один большой обьект сбалансирован тремя маленькими.


ИТОГИ
Как вы уже поняли, баланс в дизайне сайта очень важен, и если вам нужен действительно продающий сайт, то необходимость придерживаться всех тех правил которые я описал выше просто очевидна.
Если вам нужен строгий сайт – выбирайте симметрию.
Хотите индивидуальность, ваш выбор – асимметрия.
Skype

Skype: poltorrr

Контакты

+38 (093) 914-20-50
info@poltor.com

Я в соцсетях
Консультация

Бесплатная консультация
Написать мне

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

Заполните форму ниже, и я обязательно свяжусь
с вами в ближайшее время.

Не заполняйте это поле: