Как использовать баланс в веб-дизайне
Как использовать баланс в веб-дизайне
08 июня 2016

Какие виды визуального баланса существуют в веб-дизайне и как их правильно использовать.

Достижение баланса в веб-дизайне требует умения мыслить, а также некоторых усилий и изрядную долю мастерства. Самое лучшее в балансе то, что он позволяет сохранить проект от экстенсивных элементов, перегруженности и беспорядка. Баланс в веб-дизайне означает умеренность во всем. Не слишком мало, но и не слишком много деталей - этого постулата вам и следует придерживаться. Умение во всём выстраивать баланс - это один из важнейших навыков для веб-дизайнера! В этой статье мы рассмотрим несколько принципов, следуя которым вы сможете привносить баланс в каждый клиентский проект, над которым работаете.

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

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

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

  • Одинаковое количество элементов в панели навигации с обеих сторон;
  • Заголовки и подзаголовки одинаковой длины с обеих сторон;
  • Кнопка действия идеально центрирована;
  • Одинаковое количество элементов в разделе "Быстрые задачи".

Кроме того, сайт является удобным и функциональным, так что большинство посетителей будут довольны навигацией. Давайте посмотрим на два другие примера симметрии:

Это сайт IWC Schaffhausen, швейцарской компания производителя часов. Их сайт выполнен с горизонтальным симметричным балансом. Если мы разделим страницу по центральной оси, то увидим симметрию по обе стороны.

То же самое происходит и на сайте Beanstalk App. Благодаря простоте и минималистическому дизайну его главная страница имеет прекрасную горизонтальную симметрию.

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

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

Сайт компании Honda является пример асимметрического дизайна. На своей домашней странице компания использует карточный дизайн, что создает несколько дезорганизованый вид. Но это в то же время визуально привлекательно и красочно. Сами карточки всегда разной длины, что создает интересную асимметрию, на которую интересно посмотреть. Это как небольшой лабиринт на домашней странице автомобильной компании! Есть и другие интересные примеры:

Сайт Typographisme идеально демонстрирует асимметрию в веб-дизайне. Сайт включает в себя два неравномерных элемента, которые создают асимметрию: логотип TG и зеленый штамп в правом верхнем углу.

В Duplos пошли ещё дальше. В дизайне сайта использовали плавающиме элементами, которые не выстраиваются относительно горизонтальной или вертикальной оси. И посмотрите какой захватывающих эффект получился.

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

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

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

Все виды баланса

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

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Настройки, направляющие, модульная сетка - Секреты веб-дизайна 1-2Уровень сложности:
1. Начинающий
2. Любитель
Настройки, направляющие, модульная сетка - Секреты веб-дизайна

Вступительный урок по веб-дизайну в котором автор рассказывает про настройки, направляющие и модульную сетку.

28.02 0
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

Что толкает людей на то, чтобы бросить работу в компании, на которую ушло так много времени и усилий?

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

Наша команда обращает пристальное внимание на все изменения в мире дизайна. Это помогает всегда держать вас в курсе новостей и новинок этой сферы.

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.