Создаем баланс в веб-дизайне
Вы читаете перевод статьи Патрика Кокса “Developing Balance in Web Design”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. При поддержке iSpring.
iSpring — решение для запуска дистанционного обучения.
Ваш дизайн должен располагать к себе и давать пользователям возможность сесть, расслабиться, хорошо провести время, немного осмотреться. Лучший способ добиться этого — визуальный баланс. Суть визуального баланса — в балансировке элементов относительно друг друга, словно они находятся на чашах весов.
Создавая веб-дизайн, вы уж точно не хотите, чтобы он нервировал или раздражал пользователей — как полная раковина грязной посуды. Если дизайн визуально “разбалансирован”, то сайт будет выглядеть неорганизованным и пользователи будут ощущать дискомфорт. Ваш дизайн должен располагать к себе и давать пользователям возможность сесть, расслабиться, хорошо провести время, немного осмотреться. Лучший способ добиться этого — визуальный баланс. Суть визуального баланса — в балансировке элементов относительно друг друга, словно они находятся на чашах весов.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook | Instagram, Telegram
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Как уравновесить чаши весов? Нужно подобрать предметы одного веса — воображение сразу рисует известные весы Фемиды. У физического веса и веса “дизайнерского” много общего: физический объект может быть очень маленьким, но тяжелым (независимо от массы); элемент дизайна также может быть небольшим, но забирать на себя большую долю внимания пользователя. Гравитацию физических тел можно сравнить с визуальной важностью элементов дизайна: каждый элемент дизайна притягивает и отталкивает другие элементы, так же как гравитационное поле физического тела способно притягивать и отталкивать другие тела.
Когда дело касается проработки визуальной важности элементов дизайна, в игру вступают два фактора: тип баланса и характеристики баланса, то есть как сбалансировать два или более элементов между собой и как представить визуальные характеристики каждого элемента.
Типы баланса
Существует множество различных типов баланса — то есть способов взаимодействия элементов композиции. При помощи различных методов, описанных в этой статье, вы сможете так настроить “гравитацию” элементов, чтобы создать у пользователя ощущение сбалансированности и комфорта. По сути вы можете достичь баланса пяти видов:
- Горизонтальный баланс
- Вертикальный баланс
- Радиальный баланс
- Симметричный баланс
- Ассиметричный баланс
Горизонтальный и вертикальный баланс
Отличный способ управлять визуальной важностью элементов — это сбалансировать их относительно центральной оси: горизонтальной или вертикальной. Горизонтальный баланс достигается балансировкой элементов, расположенных справа и слева — как на качелях-весах. Вертикальный баланс означает, что сбалансированы элементы, стоящие выше и ниже центральной оси.
Радиальный баланс
Вместо того, чтобы выстраивать элементы относительно центральной оси, вы можете отталкиваться от центральной точки — и получите радиальный баланс. Фактически вы размещаете элементы вокруг центральной оси; можно даже выстроить их так, словно они вылетают из центра.
Симметричный и асимметричный баланс
Еще один тип баланса, который обычно комбинируют с горизонтальным, вертикальным или радиальным — это симметричный и ассиметричный баланс. Симметричный баланс означает, что обе стороны композиции являются зеркальными отражениями друг друга — словно бумагу сложили пополам. Симметричный баланс очень формален: он приятнее взгляду, поэтому его часто используют в архитектуре и при создании веб-лейаутов на основе сетки. С ростом популярности адаптивного дизайна, растет и популярность симметричного баланса, потому что такой баланс проще воспроизвести в разных размерах экрана.
Ассиметрия, пожалуй, самая распространенная форма баланса. По сути это баланс, обратный симметричному: элементы композиции сбалансированы, но расположены не строго относительно друг друга. Ассиметрия гораздо интереснее симметрии, потому что в симметрии обычно отсутствует визуальная иерархия, а вот в асимметричных лейаутах иерархия заметна сразу. То, что композиция асимметрична, не означает, что в ней нет баланса: просто элементы расположены не зеркально.
Характеристики баланса
Каждый объект в композиции имеет свои собственные характеристики и уникальные особенности взаимодействия с другими объектами. Основные характеристики баланса это размер, цвет, форма, значимость и расположение. Каждую из этих характеристик можно использовать по-отдельности, если вы создаете симметричный баланс. Если же вы пытаетесь сбалансировать асимметричную композицию, вам нужно будет учитывать их все в совокупности: изменив одну из характеристик, вы повлияете на остальные.
Размер
Пустой объект большого размера можно визуально уравновесить небольшим, но более плотным элементом. Возьмем, к примеру, блог: текстовая область блога обычно больше, чем боковое меню. Чтобы сбалансировать эти два элемента, можно добавить больше белого пространства в текстовую часть, а область бокового меню заполнить чем-то визуально более тяжелым. А если вы добиваетесь симметричного баланса в дизайне, нужно делать элементы равными по размеру, вне зависимости от визуального веса.
Цвет
Цвет может сделать элемент композиции визуально тяжелее или легче. Более насыщенные и темные цвета воспринимаются как более тяжелые, а приглушенные и светлые — как более легкие. Таким образом, красный цвет тяжелее, чем желтый, потому что он привлекает больше зрительного внимания. Если вы хотите сбалансировать насыщенный, темный элемент несколькими светлыми, попробуйте “поиграть” с другими характеристиками баланса или поэкспериментировать с фоном, на котором размещены элементы.
Форма
Форма элементов композиции может оказать решающее влияние на баланс. Волнистая, неровная форма смотрится интереснее — а значит “весит” больше — чем простая, прямая форма. Тем не менее, не стоит пытаться сбалансировать одну сложную форму другой — это может смутить пользователей. Лучше сбалансировать сложный объект простой, но более рельефной формой.
Значимость
Контраст также может быть важным фактором сбалансированности дизайна. Чем выше контрастность объекта, тем он тяжелее — и наоборот. Существует несколько способов установления баланса между объектами с разной степенью контрастности; можно компенсировать низкую контрастность ярким фоном или интересной текстурой. А если нужно снизить контрастность элемента, можно добавить простые границы, градиенты и тени.
Расположение
Расположение — это важный фактор. Именно за счет расположения вы сможете уравновесить элементы с самыми разными характеристиками: цветом, формой, размером и значимостью. Как мы уже говорили ранее, большой объект тяжелее маленького, но вес объектов также зависит и от их удаленности от центральной оси. Объекты, расположенные ближе к линии центра, весят больше чем те, которые находятся на удалении. То есть если рядом с центральной осью находится большой красный объект, вы можете либо подвинуть его ближе к краю, либо переместить другие объекты ближе к линии центра.
Если вам понравилась статья и перевод, дайте нам знать — нажмите кнопку Recommend
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Скулкина и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи как привлечь, удержать и направить внимание пользователя
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
