Чтобы достичь баланса в веб-дизайне, необходимо все обдумать, приложить некоторые усилия и навыки, но это того действительно стоит. Достоинствами баланса, которые могут быть применены к более широким категориям в дизайне в целом, являются то, что он «оберегает» вами созданное от чрезмерности, перегруженности и беспорядка, которые не в состоянии обслуживать пользовательский опыт. Иными словами, баланс в веб-дизайне гарантирует, что вы, как дизайнер просто помните об умеренности. Не слишком много, но и не слишком мало. Не слишком шумный, но и не слишком тихий. Он содержит весь ваш дизайн в гармонии, в то же время, выполняя все юзабилити-цели ваших клиентов. Это то умение, которое, безусловно, следует положить в панель инструментов вашего дизайнера! В этой статье мы рассмотрим то, как вы можете внедрить определенный баланс на веб-сайтах ваших клиентов.
Симметричный баланс
Один из наиболее распространенных примеров баланса, с которым вы сталкиваетесь при просмотре веб-сайтов – это симметрия, хотя вы даже можете не понять этого, потому что он так просто представлен. Симметрия интуитивно приятна глазу, и создает дизайн, который эстетически хорошо организован и гармоничен. Симметричный баланс определяется путем одинакового размещения элементов по обе стороны от горизонтальной или вертикальной центральной оси. Другими словами, обе стороны воображаемой линии через середину страницы, по существу, зеркальные отображения друг друга. В то время как некоторые критики могут списать этот тип баланса, назвав его скучным и предсказуемым, он, тем не менее, выдержал испытание временем и остается одним из лучших способов, чтобы продемонстрировать баланс в веб-дизайне.
1 cisco
Сайт компании Cisco решил пойти на этот испытанный временем и верный подход к дизайну. Обратите внимание на то, как сайт полностью сбалансирован по вертикальной оси. Если вы представите воображаемую линию и расположите ее прямо посередине домашней страницы Cisco, вы заметите следующее:
Одинаковое количество элементов в панели навигации (в том числе значок поиска) с обеих сторон;
Заголовок и подзаголовок одинаковой длины на обеих сторонах;
Кнопка «Сall to action» расположена прямо по центру;
Одинаковое количество элементов под значком «Быстрые задачи» главенствует на обеих сторонах.
В то время как данный сайт не может быть отнесен к ужасно интересным сайтам из когда-либо существующих, он и не должен быть таким, так как компания продает сетевое оборудование. Кроме того, сайт удобен и функционален, т.е. атрибуты, которые его клиенты могут оценить. Давайте посмотрим на два других примера симметрии:
2 i2 wc
IWC Schaffhausen, швейцарская компания по производству часов, владеет сайтом, который демонстрирует горизонтальный, симметричный баланс. Если мы разделим страницу по центральной оси посередине, обе стороны имеют симметрию.
3 beanstalk
То же самое относится и к веб-сайту Beanstalk App. Благодаря простому, минималистичному дизайну, его центральная ось проходит посередине главной страницы, которая оставляет две половинки страницы с горизонтальным симметричным балансом.
Асимметричный баланс
Полярная противоположность симметрии, асимметричный баланс тоже возможен. Не обманывайте себя тем, что асимметрия означает отсутствие эквивалентности между частями! Как вы скоро увидите, асимметричный баланс также имеет систему противовесов в дизайне … просто не теми способами, которыми вы ожидаете. Асимметрия может быть представлена разными способами на веб-странице. Например, одна половина экрана, вертикально или горизонтально, может похвастаться более интенсивным элементом, в то время как другая половина может иметь едва заметные элементы. Несмотря на это неравенство, как в яркости, так и в численности, баланс создается сопоставлением противоречивых элементов. Таким образом, асимметрия может быть по-настоящему красивой, возможно, даже больше, чем простая симметрия, потому что она играет на концепции несходства, чтобы создать равновесие. Это Парадокс дизайна, но тот, который так хорошо работает на любом сайте. Асимметричный баланс, следовательно, более интересен и дает пищу для размышлений, чем предсказуемая симметрия. Асимметрия придает живость и вызывает удивление. Дизайнеры должны принять к сведению, однако, что создание асимметрии на странице требует больше работы, чем обычная симметрия. В конце концов, вам предстоит показать отношения между более сложными элементами дизайна.
4 honda
Honda дает нам пример кристально точной асимметрии в веб-дизайне. Ниже сгиба, на домашней странице, компания использует карточный дизайн, но это производит несколько дезорганизованный вид, что, будучи визуально привлекательным и красочным, создает не равенство по обе стороны от вертикальной или горизонтальной центральной оси. С одной стороны, сами карты горизонтально всегда разной длины, а не всегда могут быть уложены в любом однородном столбце или строке. Это создает большую асимметрию, на которую очень интересно смотреть. Это почти как маленький лабиринт на домашней странице автомобильной компании! Есть и другие интересные примеры:
5 typographisme
Typographism – идеальный случай асимметрии фотографий в веб-дизайне. Этот сайт содержит два однобоких элемента. И логотип ТG и зеленая гербовая марка в правом верхнем углу создают асимметрию.
6d6uplos
Асимметрия Duplos является более удручающей. Этот сайт имеет дизайн с позиционными элементами, которые не будут выстраиваться последовательно с другой половиной, не зависимо от того, как расположена центральная ось – вертикально или горизонтально. В целом, это придает ему привлекательный внешний вид, с которым интересно иметь дело.
6 Радиальный баланс
Радиальный баланс довольно прост. Как следует из названия, радиальный баланс имеет место быть, когда все элементы дизайна на странице расположены в равноудаленных точках от единой центральной оси. Так что, если вы хотите разделить страницу по вертикали или по горизонтали вдоль центральной оси, элементы обеих сторон будут одинаково расположены – близко или далеко – от центральной точки. Некоторые из самых ярких примеров радиального баланса – это, например, солнечные лучи, идущие из центральной точки или пруд, у которого рябь по всей поверхности. Что делает эту форму баланса еще более особенной – это то, что излучающий эффект идет в обоих направлениях: Так как внимание движется от центральной точки к периферии, оно обязывает вернуться к ней из-за общего центра. Благодаря этому, сохранить фокус легко.
7 vlog
Лучшим примером радиального баланса – будучи довольно редко используемым на веб-сайтах, особенно на домашних страницах – является Vlog. Это воплощение радиального равновесия, как и все остальное, движется наружу от центральной точки белого цвета надписи «Vlog.it».
Все виды баланса
В настоящее время, довольно очевидно, что все виды баланса имеют некоторые общие связи. Есть объединяющие факторы, которые последовательно появляются в любом дизайне, который показывает привлекательный и интересный баланс. Баланс в веб-дизайне – везде вокруг вас. Скорее всего, вы не обратили на него внимание, посещая различные сайты, но это только потому, что баланс на самом деле имеет не первостепенное значение, когда вы посещаете какой-либо сайт. Тем не менее, баланс является важным элементом дизайна сайта. Он не только обеспечивает эстетические штрихи, которые интересны с визуальной точки зрения. Он также может помочь UX, делая визуальную информацию на сайте легкой для восприятия, а также повышает навигацию по сайту. Дизайнерам следует стремиться использовать больше баланса в веб-дизайне, уделив дополнительное пристальное внимание гармонии, противовесу и равноудаленности. Конечным результатом хорошего баланса будут несметные дивиденды для ваших клиентов и пользователей.
Высоких конверсий!
