Spiral group

_________________________________________________________________________________

 

< Раздел “Веб-дизайн > < Основная страница >

 

Законы композиции и Web дизайн

Статья опубликована: 17.04.2006

 

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

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

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

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

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

 

Целостность или неделимость композиции.

 

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

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

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

"Степан Разин" Суриков В.И.

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

Выразительность композиции

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

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

 

Композиционный центр

 

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

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

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

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

Размещая определённым образом композиционный центр, определяется процесс восприятия произведения, который начинается, как правило, с восприятия композиционного центра.

Классические примеры совпадения композиционного центра с геометрическим центром мы видим в русской иконописи, в произведениях итальянского Ренессанса, например в "Тайной вечере" Леонардо да Винчи.

"Тайная вечеря" Леонардо да Винчи

Примерами смещения композиционного центра относительно геометрического являются "Возвращение блудного сына" Рембрандта, в русской живописи - картина И.Е. Репина "Бурлаки на Волге", картина А.К. Саврасова "Грачи прилетели" и многие другие.

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


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

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

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

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

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

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

 

Структура композиции

 

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

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

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

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

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

 

Психология в дизайне

 

Основной процент получаемой человеком информации воспринимается зрением. По статистике, воспринимается 83% информации зрительно. И 40% из нее запоминается человеком (против 20% услышанного!). А изображение может нести в себе ничуть не меньше (а иногда и больше) информации, чем текст. Психология проявляется в том как заставить дизайн нести тему страницы.

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

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

Способы и инструменты для концентрации внимания

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

Кроме этого необходимо учитывать пространственное понятие восприятия информации. То, что находится ближе (на переднем плане), воспринимается раньше, чем то, что на заднем. Эффект заднего плана можно получить достаточно сильной размывкой. Объект с нормальной резкостью будет выглядеть расположенным на переднем плане и восприниматься первым. Крупные и достаточно яркие (контрастирующие) элементы также воспринимаются раньше мелких, детализированных. Любой "выделенный" объект в композиции становится тематическим центром. Специалисты советуют использовать не более 3 тематических центров при 5-7 управляющих элементах (в рекламных материалах еще меньше).

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

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

Теперь, немного о "вечном" - о цвете. Вы, скорее всего, уже не раз читали различные материалы на эту тему и не раз видели статьи о психологическом восприятии цветов. Советую всегда скептически подходить к этому вопросу. Оставим бесспорным физические аспекты сочетания и свойств цветов, а остановимся на психологии. Многие выводы сделаны на основе достаточно спорных утверждений. В вопросе восприятия конкретного цвета психологи подходят индивидуально к каждому человеку. Дело в том, что конкретный цвет у каждого ассоциируется с конкретным образом, вещью или событием в его жизни и находится в подсознании человека. А эти ассоциации могут быть различными - как положительными, так и отрицательными. Это относиться не ко всем цветам подряд, а только к некоторым основным (у всех по-разному). Еще восприятие цвета может носить тематическую направленность. Например, красный. В технической области он символизирует опасность, а в области моды - чувственность и смелость. Если взять красный цвет в природе, то, скорее всего, он породит ассоциации со спелыми ягодами. А в социальной сфере он заставит вспомнить о коммунизме, однако у жителей других стран этой ассоциации может и не быть.

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

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

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

 

 

Ссылки:

 

1. XXP-Design. DESIGN-портал веб-студия - Правила композиции.

http://www.xxp-design.ru/index.asp?mode=151&typ=lek

2. Дизайн и композиция

http://www.blz.ru/kompo.html

3. Якоб Нильсен. 10 главных ошибок веб-дизайна.

http://webmascon.com/topics/designdetails/29a.asp

 

 

Автор:

 

 

Загребин Виктор Александрович

 

 

< Раздел “Веб-дизайн > < Основная страница >

 

 

Hosted by uCoz