Гармоничная композиция в веб-дизайне. Принципы веб-дизайна: визуальный вес и визуальное направление

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

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

Ох уж этот мозг…

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

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

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

Композиция - это определенное сочетание элементов сайта

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

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

Выбираем правильные цвета

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

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

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

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

2. Аналоговые цвета. Такие «соседи» на цветовом круге не имеют сильного контраста.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

4. Тетрада. Две пары дополнительных цветов следует применять очень осторожно, чтобы не добиться хаоса в теплохолодности.

Правило третей - что куда ставить?

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

Вначале хотел для примера показать вам картину «Витрувианский человек», но по причине его чересчур откровенного наряда, точнее, его отсутствия, решил, что не буду. Вдруг, здесь дети статью читают Поэтому полюбуйтесь на Мадонну:

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

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

Расчищаем пространство

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

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

Управляйте взглядом пользователя

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

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

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

Хотите, чтобы посетители не прошли мимо конкретной кнопки? Выделите ее контрастным цветом и разместите туда, куда сразу стремится взгляд. Желаете показать, какие обалденные у вас товары? Выделите их на общем фоне и разместите по правилу F-Z или правилу третей, рассмотренному выше.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

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

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

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

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

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

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

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

6. Масштаб
Масштаб — это реальный, видимый размер объекта, рассматриваемый в отношении других предметов, людей, окружающей среды.

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

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

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

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

Цвет

Ваша задача: выбрать правильные цвета

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

Цветовые акценты можно использовать и для привлечения внимания. Контрастные цветовые сочетания, например, черный с белым, бросаются в глаза в первую очередь, поэтому вы можете оформить таким образом важные кнопки - «Заказать» или «Связаться с нами».

Если же вы слабо представляете, какая цветовая гамма вам нужна, возьмите за основу . Или зайдите на сайт Adobe Color CC и поэкспериментируйте с цветами и правилами построения палитры.

Правило третей

Ваша задача: понять, куда что ставить

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

«Воздух»

Ваша задача: расчистить пространство

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

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

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

Ваша задача: направить взгляд пользователя на самое важное

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

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

Данное явление принято обозначать термином «визуальный вес» (visual weight), а направление, которое задает эта сила, — «визуальное направление» (visual direction). Понимание данных концепций очень важно в том случае, если вы хотите, чтобы в дизайне вашего лендинга присутствовала иерархия, плавность, ритм, баланс и конено конверсия.

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

Ранее мы писали о базовых характеристиках элементов веб-страницы, таких как размер, цвет и форма, и о том, как с их помощью можно показать схожесть (подобие) или различие (контраст) элементов.

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

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

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

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

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

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

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

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

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

Оттенок
Темные элементы обладают большим визуальным весом, чем светлые.

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

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

Форма
Объекты правильной формы кажутся «тяжелее» элементов неправильной формы, т. к. последние подсознательно воспринимаются как правильные, но лишенные части своей массы.

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

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

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

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

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

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

Насыщенность
Насыщенные цвета кажутся «тяжелее».

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

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

Визуальный вес и целостность восприятия

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

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

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

Фокус
Объекты, находящиеся в фокусе, имеют больше «веса», чем остальные элементы композиции.

Прошлый опыт
Опыт наблюдателя также будет влиять на силу его интереса к тем или иным объектам.

Визуальное направление

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

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

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

Форма элемента
Форма элемента может задавать ось, которая будет определять направление элемента. Главная ось объекта, как правило, параллельна его визуальному направлению.

Положение элемента
Визуальный вес создает иллюзию притяжения либо отторжения находящихся рядом объектов. Линия притяжения двух объектов может задавать визуальное направление.

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

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

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

Рассмотрим эту характеристику чуть подробнее.

В своей книге «Искусство и визуальное восприятие» Рудольф Арнхейм (Art and Visual Perception: A Psychology of the Creative Eye, Rudolf Arnheim) высказал идею о том, что каждая композиция имеет свою структурную основу, так что, даже если холст пуст, наш взгляд под воздействием комплекса сил, как это представлено на изображении ниже, будет притягиваться к определенным его частям.

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

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

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

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

Визуальное направление и целостность восприятия

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

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

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

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

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

Общая ориентация композиции

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

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

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

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

Примеры

В качестве примеров возьмем несколько реально существующих веб-страниц и проанализируем распределения «веса» на них.

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

В качестве основного инструмента оценки будет использоваться так называемый squint test — для этого надо прищурить глаза таким образом, чтобы некоторые из элементов композиции исчезли из зоны внимания. Те, которые останутся, можно назвать наиболее «тяжелыми».

Текст в центре внимания

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

Страница статьи на сайте bureau.tsailly.net

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

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

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

Если применить squint test, вся правая колонка исчезает, и перед вами остается лишь заголовок и текст статьи.

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

Яркая домашняя страница

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

Примечание. К моменту публикации этого материала компания Create Digital Media прекратила свою работу.

Домашняя страница компании Create Digital Media

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

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

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

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

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

На лендинге, посвященном свадьбе веб-дизайнеров Хавьера и Марты, в «весе» соревнуются три элемента: изображения, зеленые разделительные линии и элементы меню — все они требуют к себе первостепенного внимания.

Сайт Хавьера и Марты

Графика
Крупные изображения темного оттенка, окруженные пустым пространством. Каждое изображение наделено смыслом и вызывает интерес.

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

Элементы меню
Темные, крупные и тоже окружены пустым пространством.

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

Если провести squint test и снова прищуриться, элементы меню и логотип сливаются в один объект. Графика и разделительные линии остаются видны, а текст представляется крупными блоками. То есть все элементы остаются видимы, пусть вы и не можете разобрать текст.

Что касается ориентации, то когда на экране виден лишь верхний раздел — El evento — разделительная линия придает странице горизонтальный вид. Однако всего представлено 4 раздела, и если смотреть на всю страницу целиком, то, уже выстроенные в колонку, эти горизонтальные линии придают композиции вертикальное направление.

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

Искусство в Стэнфорде

На сайте Stanford Arts, посвященном деятельности Стэндфордского университета в области искусства, наибольший «вес» несет изображение в верхней части страницы. Помимо того, что это самый крупный элемент, его содержание представляет особый интерес. К тому же, из-за своего расположения, при открытии страницы в браузере он занимает практически весь экран.

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

Следующий по «весу» элемент — треугольные изображения на фоне прямоугольных объектов. Затем следуют хедер и футер — крупные блоки темно-красного цвета.

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

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

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

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

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

Заключение

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

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

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

В современном обществе Internet играет важную роль, как связующий инструмент между людьми. Веб-технологии стремительно развиваются, создавая новые возможности способам передачи информации. Современный человек привыкает к мобильности. Появляются новые беспроводные устройства, дающие доступ к удаленным ресурсам, находящимся в другой точке земного шара. Идет процесс глобализации. Библиотеки начинают «оцифровывать» свои фонды, давая возможность прикоснуться к мировому наследию любому желающему. Коммерческие структуры начинают вести свой бизнес на качественно другом уровне, используя современные достижения для привлечения новых клиентов.

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

Со временем композиция в графическом дизайне начала оказывать влияние на внешний вид Веб-страниц, так как в разработку сайтов включились художники и дизайнеры. В противовес «подростковому» дизайну появились четкие и строгие интерфейсы корпоративных Веб-сайтов, мягкие и ненавязчивые тона контент-проектов. Этот стиль также был некой ступенью в развитии Веб-дизайна, поскольку был предназначен для успокоения пользователей Интернета, истосковавшихся по зрительному комфорту в течении долгих лет.
Какие же знания прежде всего необходимо использовать при создании качественного Веб-сайта? Знания композиции. Почему композиция так важна? Дело в том, что композиция как учебный предмет является ключевым для всех видов искусств.

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

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

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

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

Композицию условно в искусстве принято делить на следующие виды:

фронтальная;
объемная;
глубинно-пространственная.

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

Фронтальная композиция в свою очередь, как и объемная и глубинно-пространственная, может классифицироваться как:

сюжетная;
формальная.

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

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

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

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

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

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

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

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

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

Вот как Якоб Нильсен рассматривает процесс создания дизайна Веб-сайта:

«Юзабилити в некотором роде это тоже проверка на соответствие реалиям. И делается это двумя способами:

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

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

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

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

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

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

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

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

Безусловно, на наш взгляд, это может являться, наряду с использованием композиционных знаний, следующим принципам гармонизации визуального материала.
Сегодня существуют два вида верстки Веб-страниц: табличный и блочный. Метод модульных сеток больше всего подходит для табличной верстки. Но к сожалению, часто происходит подмена понятий. И дизайнеры начинают путать композицию с компоновкой. Что, кстати довольно таки часто происходит и в других областях дизайна. Об этом в частности упоминает Чернышев О.В.: «Если бы это было не так, то сам процесс художественно композиционного творчества сводился бы к чисто механической процедуре соединения разнородных элементов в некую совокупность при наделении их лишь внешними признаками совместного существования. Именно таким образом поступают дилетанты от искусства, которые понимают композиционный процесс как более или менее упорядоченное расположение материала на изобразительной плоскости или поэзию – как рифмованную обыденную речь.»

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

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

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

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

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

Хотя в некоторых случаях допустимы и другие приемы: например принцип игры – хаотическое расположение форм на определенном участке визуального материала.Кирсанов Д. так же указывает на необходимость чувства меры:

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

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

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

Бандуристый Ф.Ф. Семиотические системы как средство образовательного и воспитательного процесса в изобразительном искусстве и дизайне / Ф.Ф. Бандуристый // Современное искусство: проблемы, тенденции, перспективы, (в рамках второго Международного фестиваля современного искусства "Увидеть невидимое"): сб. статей / под ред. Л. В. Блинова. - Хабаровск: Издательство ДВГГУ, 2011. С. 23-33.
Блуднов Г.П. Веб-дизайн как средство специальной подготовки студентов художественно-графических факультетов: диссертация … канд. пед. наук / Г. П. Блуднов. – М., 2004. – 186 с.
Бородаев Д.В. Веб-сайт как объект графического дизайна. Монография. – Х.: «Септима ЛТД», 2006. – 288 с.
Голубева О.Л. Основы композиции: Учеб. пособие. – 2-е изд. – М.: Изд. дом «Искусство», 2004. – 120 с.
Дизайн. Иллюстрированный словарь-справочник / Г.Б. Минервин, В.Т. Шимко, А.В. Ефимов и др.: Под общей редакцией Г.Б. Минервина и В.Т. Шимко. – М.: «Архитектура-С», 2004. – 288 с.
Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова. – СПб.: Символ-Плюс, 2004. – 376 с.
Кринский В.Ф. Элементы архитектурно-пространственной композиции / В.Ф. Кринский, И.В. Ламцов, М.А. Туркус. – М.: Издательство литературы по строительству, 1968. – 168 с.
Нильсен Я. Юзабилити: наука или идеология? URL: http://www.webmascon.com (Usability: Empiricism or Ideology? (June 27, 2005), перевод: Александр Качанов, 20.12.2005 г.). Дата обращения: 19.10.2010 г.
Файола Э. Шрифты для печати и Web-дизайна. – СПб.: БХВ-Петербург, 2003. – 288 с.
Чернышев О. В. Формальная композиция. Творческий практикум. Мн.: Харвест, 1999. – 312 с.
Краткий словарь по эстетике / под ред. М. Фовеянникова. – М.: Изд-во Просвещение, 1983. – с. 152-153.

Филенко Р. Е. Композиция в Web / Р. Е. Филенко // Современное искусство: проблемы, тенденции, перспективы, (в рамках второго Международного фестиваля современного искусства "Увидеть невидимое"): сб. статей / под ред. Л. В. Блинова. - Хабаровск: Издательство ДВГГУ, 2011. - С. 258-266.