Веб-дизайн - Дмитрий Кирсанов

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

АСПЕКТЫ КОНТРАСТА

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

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

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

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

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

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

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

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

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

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

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

Динамика

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

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

Рис. 44 Примерная карта движений восприятия ни странице сайта www.bdaweb.com (пример 13)

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

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