Глава 1. Теория

Бурное развитие «всемирной паутины» – WWW, широкое использование на размещенных в Internet страницах разнообразных элементов мультимедиа, постоянно растущие «оформительские» возможности языков гипертекстовой разметки определили причисление специалистов-разработчиков Web-сайтов к обширному и весьма разнородному в своей массе цеху дизайнеров.

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

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

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

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

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

Теория промышленного дизайна предлагает следующие принципы композиции:

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

• соподчиненность, то есть упорядоченность всех элементов или групп, определяющая последовательность восприятия композиции;

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

• равновесие – уравновешенность всех частей и целого относительно пространственных осей;

• единство или целостность композиции как самый обобщающий признак композиции.

§1. Ахроматические средства композиции

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

Одни из них (например – пропорции, симметрия) осуществляют пространственно-декоративные отношения. Другие (метр и ритм) – пространственно-временные.

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

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

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

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

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

Ритм особенно ощутим и привлекателен, когда ясно заметна закономерность повтора и когда он явственно выделяется из «фона». Это могут текстовые выделения, шрифтовые сочетания, рубрикация (заголовки) и т.д.

Равномерный повтор вдоль горизонтальной и вертикальной направляющей превращает ритм в метр (метрический повтор), который выглядит довольно скучно (рис.1).

Сравните:

Рис. 1

Последние два варианта динамичнее и интересней.

Композиционные контрасты могут быть очень разными: пространство и предмет; объем и плоскость; большое и малое; черное и белое; серое и цветное; текстура и чистый цвет и т.д.

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

Одномерный контраст – контраст по лишь одному признаку формы предмета, например – размеру (рис. 2):

Рис. 2

Очень важна мера контраста. При незначительной разнице в размерах контраст создает впечатление недоделанности, слишком большая разница приводит к потере связи между объектами (рис. 3).

Многомерный контраст – по нескольким признакам:

Заметно усиление контраста

Контраст растет

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

Рис. 3

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

Так же плохи и контрастные отклонения от формы внутри уже выбранного класса фигур (рис. 4). Возникает впечатление неопрятности дизайнера:

Рис. 4

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

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

a

b=0.618a

Рис. 5

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

Разумеется, простые пропорции (1:2, 2:3 …) популярнее.

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

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

Динамикаопределяет «движение» и «направленность» в композиции. Атрибуты динамики – контраст и асимметрия.

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

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

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

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

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

Пример возрастания динамичности линии (рис. 6):

Рис. 6

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

Следует также учесть естественность восприятия: право – лево, верх – низ.

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

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

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

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

Центр равновесия для несимметрично расположенных элементов смещен в сторону более тяжелого (плотного).

Сгущение в центре (ядре) и разрежение на периферии динамично и привлекательно.

Можно выделять или не выделять центр равновесия.

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

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

Разновидности:

• тщательное выравнивание объектов (может быть второстепенных) вдоль координационных осей (нюансные выравнивания);

• нюансировка размеров для компенсации оптических иллюзий;

• нюансировка цвета – для маленьких объектов;

• нюансировка шрифта – трекинг и кернинг.