Законы композиции и законы гештальта в веб-дизайне

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

Собственно, именно гармоничное восприятие дизайна часто и становится точкой назначения, до которой дизайнер пытается довести макет.

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

К счастью, такие принципы существуют, и этот материал мы посвятили именно им. Первая группа принципов — это законы композиции.

Еще одна группа принципов основана на гештальт-психологии и называется законы гештальта.

Если вы проходили наш курс «Основы дизайна», то для вас они будут уже немного знакомыми, но в этой статье мы рассмотрим их именно в контексте веб-дизайна.

Законы композиции в веб-дизайне

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

Всего их три:

  • Закон целостности.
  • Закон равновесия.
  • Закон соподчинения (или закон иерархии).

Рассмотрим, как эти законы можно применять в области веб-дизайна!

Закон целостности

Закон целостности говорит, что композиция, которую вы создаете (в нашем случае — дизайн веб-сайта), должен восприниматься целостно. Причем, как стилистически, так содержательно.

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

В веб-дизайне ощущение визуальной целостности обеспечивает целый ряд составляющих:

  • гармоничный подбор шрифтов,
  • гармоничные цветовые палитры,
  • общая стилистика иллюстраций (одинаковое качество, аналогичная работа с цветовой коррекцией и так далее) и других декоративных элементов,
  • пропорциональность элементов и отступов между ними,
  • тому подобное.

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

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

Закон равновесия

Закон равновесия говорит, что композиция должна быть визуально уравновешенной. Чтобы этого достичь, вам следует практиковаться воспринимать элементы вашей композиции как такие, которые наделены своеобразным оптической весом.

Восприятие веса композиции зависит от количества элементов, их размера, цвета, насыщенности, положения.

Попробуем объяснить на примере:

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

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

Закон соподчинения (иерархии)

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

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

На этот раз только отметим, что в веб-сайтах важной составляющей визуальной иерархии является положение элементов в пределах планов. Условно, на большинстве сайтов существует три плана:

  • Задний план (на нем расположен фон сайта)
  • Средний план (на нем расположено содержание)
  • Передний план (на нем расположены все элементы, находящиеся перед содержанием — рекламные баннеры, модальные окна, закрепленные меню).

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

Законы гештальта в веб-дизайне

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

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

Например, эту: «Вбдзйн».

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

Всего существует 8 законов гештальта, каждый из которых описывает определенную особенность восприятия человека:

  • Закон замкнутости
  • Закон близости
  • Закон сходства
  • Закон симметричности
  • Закон непрерывности
  • Закон общей судьбы
  • Закон предыдущего опыта
  • Закон простоты

На курсе «Основы дизайна» мы посвятили принципам и законам гештальта целую лекцию, а пока предлагаем выяснить, каким образом они могут быть применены в веб-дизайне. Конечно, на примерах.

Закон замкнутости

Согласно закону замкнутости, мы склонны собирать отдельные элементы в участки замкнутой формы.

Последствий у этого закона для дизайнеров несколько:

  1. Текстовых абзацев или групп текстов совсем не обязательно использовать прямоугольники, чтобы показать пределы блока, к которому они принадлежат. Наше сознание это сделает за нас.
  2. Любые текстовые строки воспринимаются как прямоугольники.
  3. Чтобы сбалансировать изображение, содержащее несколько текстовых колонок, необходимо подбирать тексты примерно одинакового объема, чтобы количество строк в каждой из колонок совпадало.

Закон близости

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

Последствий у этого закона несколько:

  1. Используя поля элементов (внешних отступов), вы можете формировать восприятие групп.
  2. Элементы, принадлежащие к одной группе по содержанию, лучше размещать рядом. Например, контактный телефон и физический адрес относятся к группе «Контактная информация», и поэтому мы подсознательно будем искать все связанные с контактами данные рядом.

Закон сходства

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

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

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

Закон симметричности

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

Следствием этого закона для композиции является то, что применение симметрии помогает вам легче визуально объединять элементы в группы, в совместные композиции.

Закон непрерывности

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

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

Закон общей судьбы

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

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

Также он определяет, что траектория движения элементов продолжается, а не начинается заново.

Закон предыдущего опыта

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

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

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

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

Закон простоты

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

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

  1. Уменьшайте количество декоративных элементов.
  2. Не используйте слишком много шрифтов в пределах одной страницы. Часто двух гарнитур вполне достаточно.
  3. Сдержанные палитры воспринимаются лучше, чем пестрые сочетания цветов.
  4. Старайтесь оптимизировать количество элементов в одной строке до 3–5. Часто заказчики, описывая качества своего продукта, составляют списки из 10 и даже 15 качеств. Но человеческое восприятие так устроено, что большинство из нас просто не способно помнить подобные массивы. Если честно, не все качества одинаково важны. Поэтому лучше перечислить только те, которые действительно являются преимуществами, а остальные — скрыть.
  5. Перед тем, как завершить макет, попробуйте посмотреть на него и ответить на вопрос: что из него можно убрать.

Упрощайте все, что можно упростить.

Навигацию:

Формы:

Согласно закону простоты, 3 всегда лучше, чем 4. 4 лучше, чем 5. И в контексте содержания, и в контексте оформления.

·
803
·
goodsuper 5
Наступна стаття
Тексты как инструмент обеспечения удобства веб-сайтов
0
Головна