book-open 1 test
Основы дизайна

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

 Визуальный баланс помогает расположить к себе и дать пользователям возможность присесть, расслабиться, немного осмотреться и хорошо провести время.
Иллюстрация Halo Lab: https://dribbble.com/shots/6591633-Lazy-Sloths-Illustration

Вы читаете перевод статьи Патрика КоксаDeveloping Balance in Web Design”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.

iSpring — решение для запуска дистанционного обучения.

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

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

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

Как уравновесить чаши весов? Нужно подобрать предметы одного веса — воображение сразу рисует известные весы Фемиды. У физического веса и веса “дизайнерского” много общего: физический объект может быть очень маленьким, но тяжелым (независимо от массы); элемент дизайна также может быть небольшим, но забирать на себя большую долю внимания пользователя. Гравитацию физических тел можно сравнить с визуальной важностью элементов дизайна: каждый элемент дизайна притягивает и отталкивает другие элементы, так же как гравитационное поле физического тела способно притягивать и отталкивать другие тела.

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

Типы баланса

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

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

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

likeness.com
danielmart.in

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

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

ipolecat.com

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

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

frontend2011.com

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

teamviget.com

Характеристики баланса

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

Размер

Пустой объект большого размера можно визуально уравновесить небольшим, но более плотным элементом. Возьмем, к примеру, блог: текстовая область блога обычно больше, чем боковое меню. Чтобы сбалансировать эти два элемента, можно добавить больше белого пространства в текстовую часть, а область бокового меню заполнить чем-то визуально более тяжелым. А если вы добиваетесь симметричного баланса в дизайне, нужно делать элементы равными по размеру, вне зависимости от визуального веса.

atlason.com

Цвет

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

touchtech.co.nz

Форма

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

infinvision.com

Значимость

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

galp.in

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

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