Просил ли вас когда-нибудь клиент увеличить его логотип? Может, он просил вас об этом сразу после того, как вы выполнили его просьбу увеличить заголовок. Новый заголовок выделяется, но теперь логотип слишком мал в сравнении с ним, и уже не так заметен. Клиент хочет сделать логотип больше.

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

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

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

Примечание: Это пятый пост в серии, посвященной основам дизайна. Вы можете найти первые четыре поста здесь:

• Основы дизайна: визуальное восприятие и принцип гештальта
• Основы дизайна: пространство и соотношение фигуры и фона
• Основы дизайна: соединение и разделения элементов посредством контраста и сходства
• Основы дизайна: визуальный вес и направление

Преобладание

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

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

Круг преобладает над квадратом из-за их относительных размеров. (Полная версия)

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

Как установить преобладание

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

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

Ваша цель заключается в создании элементов с заметной разницей визуального веса.

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

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

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

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

В идеале вам нужен один преобладающий элемент.

Преобладающий элемент

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

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

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

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

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

Точки фокуса

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

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

Три из четырех квадратов, также красноватого цвета, хотя и не такие яркие, как круг. Они того же размера, что и другие квадраты на изображении, но они выделяются среди серых квадратов из-за своего цвета.

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

Красный круг и квадраты – точки фокуса. Круг является преобладающим  элементом или доминирующей точкой фокуса. (Полная версия)

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

Уровень преобладания

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

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

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

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

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

Визуальная иерархия

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

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

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

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

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

Перевернутая пирамида

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

Перевернутая пирамида написания (Изображение: Wikipedia) (Полная версия)

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

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

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

Опять же, я рекомендую применять три уровня преобладания или иерархии, хотя можно установить четыре или пять.

Принципы гештальта и визуальная иерархия

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

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

Такие законы, как содержательность (prägnanz) и симметрия, способствуют созданию порядка, и делают вещи проще и понятнее. Именно это вы делаете, когда вы строите иерархию в дизайне. Вы организуете элементы дизайна, чтобы создать ощущение порядка.

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

Примеры

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

Это мое мнение. Вы можете видеть дизайны иначе, и это нормально. Критически мыслить о дизайне – важнее, чем соглашаться с тем, что мы думаем.

An Event Apart

Преобладающий элемент на главной странице An Event Apart –изображение в верхней части. Это самый крупный элемент. Кроме того, это изображения людей, которые мы, как правило, обращают на себя внимание. Большой белый текст на изображение составляет контраст с изображением, привлекая к нему внимание.

Скриншот верхней части главной страницы An Event Apart (Полная версия)

Текст «Дизайн-конференция для людей, создающих веб-сайты», вероятно, наиболее важная информация, которую должен знать человек, посещающий сайт. Это весьма четкое заявление о том, что представляет из себя сайт An Event Apart, и для кого предназначен этот сайт. Вероятнее всего, это первое, что должен увидеть новый посетитель сайта.

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

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

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

Paid to Exist

Доминирующим элементом на домашней странице Paid to Exist является изображение рюкзака в верхней части страницы. Это изображение и оно больше, чем все окружающие его элементы. Оно контрастирует с окружающей средой, потому что этот рисунок имеет внутренней интерес и отличается по форме.

Скриншот верхней части главной страницы Paid to Exist (Полная версия)

Точки фокуса включают в себя название веб-сайта, некоторые тексты в правой части, и большую зеленую кнопку «Скачать». Кнопки социальных сетей являются еще одной точкой фокуса.

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

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

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

Mandy Sims

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

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

Скриншот раздела сайта Менди Симс (Полная версия)

Кроме того, точками фокуса являются отзывы внизу справа. Обратите внимание, как цвет фона отзывов перекликается с цветом фона активной ссылки в меню.

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

Vanseo DESIGN

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

Скриншот верхней части статьи с сайта Vanseo Design (Полная версия)

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

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

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

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

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

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

Выводы

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

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

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

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

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

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

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

 

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

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

Примечание: Это четвертый пост в серии, посвященной основам дизайна. Вы можете найти первые три поста в серии здесь:

• Основы дизайна: визуальное восприятие и принцип гештальта
• Основы дизайна: пространство и соотношение фигуры и фона
• Основы дизайна: соединение и разделения элементов посредством контраста и сходства

Визуальный вес в веб-дизайне

Физический вес является измерением действия силы тяжести на объект, но двумерные объекты (такие как элементы на веб-странице) не имеют массы и, следовательно, не имеют какого-либо физического веса. Визуальный вес является измерением усилия, прилагаемого элементом для привлечения взгляда. Двумерные объекты могут привлечь внимание. Чем сильнее элемент притягивает взгляд, тем больше его визуальный вес.

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

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

Управление комбинацией этих особенностей – это управление визуальным весом. Красный привлекает взгляд больше, чем синий, а более крупные элементы привлекают взгляд больше, чем мелкие. Большой красный объект имеет больший визуальный вес, чем маленький синий.

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

Как измерить визуальный вес в дизайне?

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

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

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

Давайте начнем с базовых особенностей, которые я упоминал в прошлом посте: размер, цвет, сочетание света и тени, положение, текстура, форма и ориентация.

• Размер
  Большие элементы обладают большим визуальным весом, чем маленькие.
• Цвет
  Теплые цвета лучше применять на переднем плане, они обладают большим визуальным весом, чем холодные цвета, которые отступают на второй план. Красный считается самым тяжелым цветом, а желтый – самым легким.
• Сочетание света и тени
  Более темные элементы обладают большим визуальным весом, чем светлые.
• Положение
  Элементы, расположенные выше в композиции, воспринимаются более весомыми, чем элементы, расположенные в композиции. Чем дальше от центра или доминирующей области композиции находится элемент, тем больший визуальный вес будет иметь элемент. Элементы на переднем плане имеют больший вес, чем элементы на заднем плане.
• Текстура
  Текстурированные элементы кажутся тяжелее, чем нетекстурированные. Благодаря текстуре элемент выглядит трехмерным, что придает ему ощущение массы и физического веса.
• Форма
  Объекты правильной формы выглядят тяжелее объектов неправильной формы. Неравномерность создает впечатление удаления массы из правильной формы.
• Ориентация
  Вертикальные объекты кажутся тяжелее, чем горизонтальные. Диагональные элементы обладают наибольшим весом.

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

• Плотность
  Размещение большого количества элементов в заданном пространстве увеличивает визуальный вес пространства. Зритель воспринимает большие и более темные скомбинированные элементы, в отличие от нескольких небольших и более светлых элементов.
• Локализованное пустое пространство
  Пустое пространство не имеет визуального веса, потому что оно выглядит пустым. Любой объект, находящийся в этом пространстве, будет казаться тяжелее из-за пространства вокруг него.
• Внутренний интерес
  Некоторые предметы интереснее других. Чем сложнее или запутаннее элемент, тем больший интерес он вызовет и тем больше внимания привлечет. Ваши собственные интересы также играют свою роль. Если вы интересуетесь автомобилями больше, чем самолетами, то изображение автомобиля с большей вероятностью привлечет ваше внимание.
• Глубина
  Большая глубина резкости повышает визуальный вес элемента, находящегося в фокусе, это происходит из-за контраста между фокусом и нечеткими областями.
• Насыщенность
  Насыщенные цвета выглядят тяжелее, чем ненасыщенные.
• Предполагаемый физический вес
  Мы знаем, что дом весит больше, чем ботинок. Изображение дома визуально будет весить больше, чем изображение ботинка, потому что мы предполагаем, что дом весит больше.

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

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

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

Гештальт и визуальный вес в веб-дизайне

Одна из идей, стоящих за этой серией, — показать, как важны принципы гештальта для основ дизайна.

• Фигура и фон
  Визуальный вес может быть использован для разделения фигуры и фона, придавая фигуре больше веса, чем фону.
• Соседство
  Пространство между элементами приводит к различному количеству локализованного пустого пространства и различной плотности объектов в пространстве.
• Сходство и контраст
  Вы можете использовать визуальный вес, чтобы сообщить о любом из них. Контраст придаст больше визуального веса контрастирующему элементу. Элементы с близким визуальным весом, естественно, выглядят похожими.
• Основной акцент (следующая тема в серии)
  Точки притяжения в композиции – это основные акценты, и они несут больший визуальный вес по сравнению с другими элементами.
• Прошлый опыт
  Опыт зрителя будет влиять на его восприятие того, каким внутренним интересом может потенциально обладать элемент.

Визуальное направление в веб-дизайне

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

Визуальное направление выполняет аналогичную визуальному весу функцию: оно пытается заставить вас заметить определенные части композиции. В то время как визуальный вес кричит: «Посмотри на меня!», визуальное направления говорит «Посмотри туда!»

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

• Форма элемента
  Форма элемента может создать проходящую сквозь него ось, и эта ось может предложить направление. Основная ось, как правило, рассматривается как параллель визуального направления элемента.
• Расположение элементов
  Визуальный вес – это сила, которая может привлечь или оттолкнуть соседний элемент. Эта сила будет двигаться в направлении, объединяющем оба элемента.
• Смысловое наполнение элемента
  Стрелка, указывающий палец, или глаз – все эти символы предлагают смотреть в определенном направлении.
• Движение
  Элемент может буквально двигаться сквозь ваш дизайн, и его движение будет иметь направление.
• Структурный скелет
  Каждая композиция имеет структурный скелет, с силами, которые естественным образом его окружают и проходят по различным осям. Это, наверно, стоит объяснить немного подробнее.

Структурный скелет в веб-дизайне

В своей книге «Искусство и визуальное восприятие: Психология творческого взгляда», Рудольф Арнгейм предложил идею структурного скелета в каждом изображении.

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

Структурная сеть Рудольфа Арнгейма

 

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

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

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

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

Гештальт и визуальное направление в веб-дизайне

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

• Равномерная связность
  Линии, соединяющие элементы, имеют направление. Взгляд создает воображаемую линию между глазом и всем, на что он смотрит.
• Непрерывность
  Этот принцип относится к элементам, расположенных вдоль линии или кривой, так, будто они движутся в направлении линии или кривой.
• Общая судьба
  Элементы, рассматриваемые как имеющие общую судьбу, — это те элементы, которые выглядят перемещающимися в одном направлении.
• Параллелизм
  Для того, чтобы элементы казались параллельными, должны быть заданы их внутренние оси (те же, что задают направление).

Общее направление композиции в веб-дизайне

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

• Горизонтальное направление заставляет композицию казаться спокойной и стабильной.
• Вертикальное направление придает ощущение формальности, настороженности и баланса.
• Диагональное направление предполагает движение и действие.

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

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

Примеры

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

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

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

Bureau

Примечание: Скриншот Bureau был сделан моим браузером, установленным шире, чем на 1280 пикселей. Сделайте чуть меньше, и конструкция сольется в один столбец вместо двух.

 

Скриншот статьи с веб-сайта Bureau

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

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

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

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

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

Основное направление композиции  — по вертикали, потому что это две длинные колонки, идущие вниз страницы. Разница в цвете фона между колонками создает вертикальную линию, ведущую вас вниз страницы и усиливающая вертикальное направление композиции.

Create Digital Media

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

Примечание: В промежутке времени между написанием и публикацией этого поста, Create Digital Media закрыли свои двери. Посетите их домашнюю страницу, если хотите узнать, почему это произошло.

 

Скриншот домашней страницы Create Digital Media

 

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

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

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

Здесь, я думаю, основное направление – горизонталь. Линии проходят по горизонтали, так же, как и главный заголовок и навигация по сайту. Еще один из визуально заметный элемент – выделенный текст – также находится в горизонтальном положении.

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

Javier Marta

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

 

Скриншот домашней страницы сайта Javier Marta

• Изображения
  Они большие, темные и окружены пустым пространством. Каждое изображение содержит внутренний интерес.
• Зеленые разделители
  У них есть цвет, они крупнее и, как и изображения, окружены пустым пространством.
• Пункты меню
  Они темные, большие и, опять же, окружены пустым пространством.

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

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

На моем экране, виден только заголовок и раздел «El Evento», придавая странице горизонтальное направление. Тем не менее, на странице всего четыре раздела. Когда все разделы видны одновременно, расположение зеленых разделителей придает композиции вертикальное направление. И, конечно же, обзор всей страницы сразу меняет направление изображения с горизонтального на вертикальное.

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

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

Stanford Arts

Изображение в верхней части главной страницы Stanford Arts несет больший визуальный вес. Это наибольший элемент на странице, и, являясь изображением, он имеет большой внутренний интерес. Кроме того, он расположен в верхней части композиции. По правде говоря, он занимает большую часть моего экрана.

 

Скриншот домашней страницы Stanford Arts

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

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

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

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

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

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

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

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

Выводы

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

Визуальное направление – это предполагаемое направление сил, действующих на элементы и оказываемых ими. Направление — это намек для зрителя, поясняющий куда перевести взгляд.

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

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

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

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

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