Чья случайность лучше?

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

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

Цвет

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

Так, весьма популярен в последнее время прием противо­поставления по цвету двух половин заголовка или текста логотипа (см., например, логотип журнала «Internet» на рис. 36, а). Где бы ни проходила цветовая граница — вну­три слова или между словами, — прием этот вносит сильную ноту «диалектичноети», разделения и противопоставления частей дотоле однородного элемента. Искусственная эта диалектика весьма сильно влияет на восприятие текста; если, скажем, двуцветные заголовки приняты в качестве стандарта оформления в журнале, найти какой-нибудь ва­риант раскраски можно будет всегда, но во многих случаях он будет скорее мешать, чем помогать чтению текста заголовка.

Для оформления текстов, занимающих промежуточное по­ложение между заголовками и телом страницы, — лозунгов, Девизов, рекламных «вводных» и т. п. — иногда пользуются выделением отдельных слов, обычно цветом в комбина­ции со шрифтом и/или кеглем. Этот прием имеет мало общего с традиционными внутритекстовыми выделениями (например, курсивом); его цель — не облегчить восприятие смысла, а привлечь внимание к тексту чисто визуальными

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

Текст как текстура

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

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

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

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

в двух соседних абзацах при сохранении шрифта и всех остальных параметров недопустимы.

Единство

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

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

Принцип этот удивителен тем, что необычайно плодотворен — несмотря на то, что формулировка его абсолютно

отицательна (т. е. говорит лишь о том, чего делать не надо).

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

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

языка, лучше помалкивать» или даже «молчи — за умного

сойдешь».

Content is king

Хорошо, скажете вы, но если ничего нельзя, то что же тогда можно? Чем пользоваться для оформления заголовков, иллюстраций, кнопок навигации?

Нельзя же просто взять и покидать весь материал на страницу, не задумываясь о красоте?

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

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

Академический стиль

Подход, при котором оформ­ление документа полностью определяется его структурой, совсем не оригинален. Точнее, он именно оригинален в смы­сле английского «original» — ведь именно структура доку­мента, а не его внешний вид, и является объектом разметки в HTML согласно официальной идеологии этого языка (стр. 22), положенной в основу самой первой его вер­сии. HTML предназначен именно для разметки логической, а не визуальной структуры; внешний же вид докумен­та в броузере есть лишь побочный эффект логической разметки.

Правда, достаточно строго этот принцип соблюдался только в первые годы жизни языка. Впоследствии в HTML было введено множество визуально-ориентированных средств, не имеющих никакого структурного значения и употребляемых исключительно для управления внешним видом документа в графической среде (тег FONT — самый известный при­мер). Граница между «логической» и «визуальной» эпохами в истории HTML проходит приблизительно между версиями HTML 2.0 и 3.2 (о том, почему не 3.0 и не 3.1, см. стр. 23). В последней на момент написания книги версии 4.0 выде­лено самодостаточное подмножество структурных тегов (так называемый Strict DTD, стр. 49).

Это значит, что, ограничившись структурной частью тего­вого репертуара HTML 4.0 (или, что почти то же самое, HTML 2.0), вы сможете, совершенно не думая об оформ­лении и не тратя времени и денег, получить для своего документа вполне логичный, последовательный и стро­гий дизайн. Да, это тоже дизайн, — и, ей-богу, он гораздо лучше того, что выдается за дизайн на многих любительских страницах! Параметры оформления (шрифты, отступы и т. п.) для основных логических тегов HTML брались все же не с потолка, и положиться на вкус того, кто их выбирал, во многих случаях проще и надежнее, чем пускаться во все тяжкие самому.

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

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

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

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

• HTML 2.0 меньше всего зависит от свойств какого-либо конкретного броузера, наличия в системе определен­ных шрифтов, способности компьютера воспроизводить цвета и тому подобных условий, — на которые не слиш­ком разумно полагаться, если вы хотите донести свою информацию до максимально широкой аудитории.

• «Академические» страницы находятся в наилучшем со­гласии с духом и буквой официальной спецификации языка HTML. Это позволит вам, не краснея, иметь дело с весьма многочисленной и влиятельной прослой­кой HTML-пуристов (стр. 24), а самое главное — обеспечит легкую и безболезненную стыковку с други­ми технологиями, поддерживаемыми Консорциумом W3 (CSS, XML).

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

Зайдем, к примеру, на сайт норвежского программиста Эрика Наггума (www.naggum.no ). Забудем на минуту, что автор не ставил перед собой абсолютно никаких эсте­тических задач (его приверженность HTML 2.0 объясняется причинами скорее идеологическими), и попробуем посмо­треть на этот сайт именно как на образец дизайна. Мы видим единый, логичный, очень строго выдержанный стиль, в котором положение и оформление каждого элемента легко предсказуемы. Ничто не раздражает, не «цепляет взгляд», информация подается опрятными небольшими порциями, текст звучит негромко и выразительно. Право же, страницы

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

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

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

Я, конечно, не надеюсь на то, что строгое очарование академического стиля станет, после выхода этой книги, сле­дующей «большой модой» в веб-дизайне. Да это и не нужно. Я всячески прошу прощения за это отступление у Настоя­щих Дизайнеров (к которым, ну конечно же, принадлежите и вы, — или, по крайней мере, будете принадлежать после того, как одолеете эту книгу до конца); пожалуйста, считай­те мою агитацию за HTML 2.0 обращенной не к вам, а... э-э... ко всем остальным — которым вы, кстати, сможете сослужить хорошую службу, наставив их (если представится такая возможность) на путь истинный.

В полный рост

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

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

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

Форма

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

Размещение

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

Цвет

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

Шрифт

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

Текстура

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

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

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

Баланс

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

остаться в памяти поколений, должны были отличаться

совершенно особой строгостью, симметрией и сбалансиро­ванностью частей.

С веками понятие баланса становилось все расплывчатее и неопределеннее; все меньше оставалось в нем чистой гео­метрической симметрии и все больше — достаточно вольно понимаемой «соразмерности» и «уравновешенности». Соб­ственно симметрия не особо популярна и сейчас, однако без более общего понятия баланса вы не обойдетесь ни в веб-дизайне, ни в любом другом визуальном искусстве. Есть великолепные композиции, производящие на неискушен­ного зрителя отчетливое впечатление асимметрии и даже хаотичности. Но хаотичность эта не естественная (см. также стр. 146), а художественная, тщательно выверенная, осно­ванная на строгом выполнении законов баланса — пусть субъективных, но оттого не менее требовательных.

Центр масс системы

Что же это за законы? Прежде всего, давайте вспомним понятие плотности размещения материала, введенное в разделе о пространственных от­ношениях (стр. 89). Вспомнив физическое определение плотности как массы, деленной на объем, мы увидим, что о плотности можно говорить в нескольких разных смыслах — в зависимости от того, чему мы приписываем свойство иметь «массу».

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

Карты разных видов плотности в одной и той же ком­позиции, наложенные друг на друга, покажут нам совпа­дение пиков и провалов в одних частях и расхождение в других. Можно предположить, что самыми гармоничны­ми кажутся такие композиции, в которых распределения плотности в разных аспектах не совпадают, но скоорди­нированы друг с другом. Например, яркие цветовые пятна заголовков (вершины на карте цветовой плотности) не

совпадают с абзацами текста (сгустками плотности тексто­вой), но всегда занимают относительно них одно и то же положение.

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

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

Правило рычага

Эта стройная теория осложняется множеством факторов. Прежде всего, центр равновесия редко кажется расположенным посередине между двумя объектами — обычно он смещен в сторону того, который кажется нам тяжелее и компактнее (т.е. плотнее). Наиболее динамично и интересно выглядят именно те композиции, в которых баланс достигается не симметричными и равными по плотности группами объектов, а равновесием тяжелого «ядра» и асимметрично расположенной, менее плотной «периферии» . Взгляните, к примеру, на рис. 15 на стр. 99:

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

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

Рассмотрим небольшой пример. На сайте books.ru (стр. 330) темно-синяя вертикальная полоса слева вводит сильную асимметрию и нуждается в противовесе. Однако поскольку эта полоса занимает лишь около четверти шири­ны всей страницы, противовесу этому совсем не обязательно быть таким же тяжелым, как и сама полоса. Открытое еще Архимедом правило рычага позволяет ограничиться легким горизонтальным разделителем, смещенным к правому краю страницы (рис. 40). Центр равновесия здесь вычисляется совсем не по законам физики; его стягивает на себя гра­ница синего и белого, — т. е. правый край синей полосы, вообще представляющий собой самую сильную вертикаль в композиции.

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

Рис. 40

Тяжелая, но ком­пактная темная полоса по ле­вому краю страниц books.ru (пример 15) уравновешивает­ся легкой, но вынесенной дале­ко вправо асимметричной ли­нейкой — разделителем блоков текста (значком на физи­ческих чертежах обозначают центр масс)

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

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

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

Контраст

«Из всех отношений важнейшим для нас явля­ется контраст». Если единство и баланс суть условия sine qua поп, фундамент профессионального дизайна, то контраст — перводвигатель, животворящее начало, душа

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

Контраст — это продолжение единства дру­гими средствами

Уходя от идентичности, мы обяза­тельно должны прийти к контрасту — среднего не дано. Разумеется, контраст при таком понимании не может быть только примитивным противопоставлением, лобовым столкновением «черного» и «белого». Как мы скоро увидим, контраст может иметь ступени, оттенки, градации; это не логическая переменная с двумя возможными значениями, а неисчерпаемый, многомерный континуум. Вместе с тем в любом случае существует как нижний предел, за кото­рым вступает в действие запрет на «почти одинаковость» (стр. 153), так и верхняя граница, после которой контраст перерождается в бессвязность и разнобой.

Дизайнер должен уметь варьировать уровень контраста с такой же легкостью, что и кегль шрифта или насыщен­ность цвета. Разумеется, степень контраста — величина субъективная, и тренированный глаз увидит сложнейшие контрастные отношения там, где непрофессионалу даже само слово «контраст» просто не придет в голову. Однако законы, связывающие общий уровень контраста со степе­нью противоположности в каждом из аспектов (по цвету, по размеру, по расположению и т. п.), вполне объективны и не слишком сложны. Как тяжи и распорки, отношения единства и контраста дополняют друг друга и позволяют создавать композиции, которые не разлетаются на куски и в то же время не оседают бесформенной грудой.

Одномерный контраст

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

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

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

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

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

Многомерный контраст

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

Для этого примера возьмем пару квадратов, окрашенных в максимально контрастирующие цвета — черный и белый (рис. 42, а). Как мы уже знаем (стр. 105), цвет сам по себе — величина многомерная, разложимая на ком­поненты тона, яркости и насыщенности, причем каждый из этих компонентов по-особому ведет себя при подборе и контрастировании цветов. Чтобы не усложнять пример, я принял за отправную точку контраст только по одно­му аспекту цвета — по яркости (насыщенность у черного и белого равна нулю, а компонент тона в этих цветах отсутствует).

Рис. 41

Поиск максимума одномерного контраста

Рис. 42

Поиск максимума многомерного контраста

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

Попробуем сопроводить контраст цвета контрастом размера (рис. 42, б). Что произошло? Общий уровень контраста не повысился в два раза, как можно было бы ожидать; скорее наоборот, контраст стал объемнее, глубже и оттого в нашем восприятии — мягче и определенно слабее. Кон­траст в каждом из аспектов получает теперь оправдание в контрасте другого, и в целом связь между элементами упрочивается.

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

Эту конфигурацию, пожалуй, уже никому не придет в го­лову назвать «типичным примером контраста»; не читая предыдущего, вы вряд ли вообще догадались бы, что речь на рис. 42, в идет именно о контрасте. Вместо этого мы имеем просто достаточно интересную комбинацию форм, которую уже вполне можно представить себе в роли, скажем, логоти­па (стр. 264) или беспредметного декоративного элемента на веб-странице. Выведя контраст за пределы линейного, одномерного противопоставления, мы получили сложную, прочную и в то же время не бросающуюся в глаза связь между элементами.

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

Рис. 43

(см. цветную вкладку, стр. 335)

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

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

Одно из лучших упражнений для начинающего дизайне­ра - поаспектный анализ отношений контраста в профес­сиональных работах. Я приведу здесь лишь один пример. В логотипе сайта www.highfive.com (рис. 43 на цвет­ной вкладке) контраст между «Н» и «5» выражен в цвете (как я уже писал на стр. 112, черный образует прочную контрастную связь практически с любым другим цветом) и текстуре (плоский цвет «Н» противопоставлен фотогра­фической, размытой текстуре «5», стр. 119). В то же время между этими объектами немало общих черт, делающих зву­чание контраста особенно выразительным, — шрифт, кегль, выравненное расположение.

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

Аспекты контраста

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

способах контрастировать этих материалов. Здесь (как и при поаспектном анализе принципа единства на стр. 154) я буду поэтому сколь возможно краток.

Форма

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

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

Размер

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

Расстояние

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

Расположение

Выравнивание объектов (стр. 86) есть проявление единства, а не контраста. Контраст

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

Цвет

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

Текстура

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

Шрифт

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

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

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

Динамика

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

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

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

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

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

Рис. 44

Примерная кар­та движений восприятия на странице сайта www.bda-web.com (пример 13)

Динамика явная

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

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

пространства больше, чем впереди, его движение кажется замедляющимся, подходящим к концу; в обратном случае - ускоряющимся, только что начавшимся. Если же места до­статочно с обеих сторон, движение наиболее активно — его «психологическая скорость» максимальна.

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

Так, на сайте www.chess.ibm.com(пример 1?) ярко динамичная фигура спортсмена в прыжке задает наклонное направление, поддержанное и зафиксированное наклонной линией горизонта земного шара (то есть все-таки дугой, хотя и большого радиуса, — вспомните, что я писал на стр. 94 о нежелательности наклонных прямых). Наклон­ность эта поставлена в резкий контраст с горизонтальностью заголовка «the technology» и логотипа «Kasparov vs. Deep Blue», буквально зажавших атлета в тиски и дополнительно усиленных текстурой из горизонтальных полос, наложенной на фотографию.

Ветер по Гауссу

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

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

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

Динамика совсем явная

Конечно, раздел этот был бы неполным без упоминания о самом что ни на есть буквальном воплощении динамики — анимации. Настоящее «фотографическое» видео в Интернете еще не вышло из разряда экзотики, но несложная, по преимуществу плоскоцветная мультипликация (пользующаяся форматом GIF, стр. 253) популярна необычайно. Особенно часто анимация (как и остальные виды «явной динамики») используется в рекламном дизайне. Чтобы быть эффективной, реклама должна гораздо жестче и неуклоннее, чем любой другой носитель информации, вести читателя от привлекающего внимание вводного элемента, через мотива­цию действия, которое он должен совершить, к финальному призыву — номеру телефона в рекламе бумажной или надпи­си «click here» на баннере (подробнее о дизайне рекламных материалов мы будем говорить на стр. 275). Очевидно, что анимация просто незаменима на каждом из этапов этого нелегкого пути: естественный отбор приучил глаз человека обращать мгновенное, инстинктивное внимание на любой движущийся объект (прежде всего, конечно, потому, что он может таить в себе опасность).

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

его внимание достаточно долго, мало монотонного движения — необходимо развитие, превращение, развертывание

действия.

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

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

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

Динамика неявная

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

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

Если у линии свободен только один конец, а второй при­вязан к какому-то статичному, устойчивому объекту (будь то текстовая надпись, прямоугольник или что-то другое), возникшая асимметрия концов еще сильнее разгоняет вос­приятие. Отталкиваясь от «глухого» конца, взгляд наш разбегается и, как электрический заряд с острия, стека­ет с линии в бесконечность (рис. 45, в). Сделать этот полет еще более неудержимым можно, поставив у свобод­ного конца линии небольшой, не мешающий «съезжанию» динамичный объект — треугольник, наконечник стрелы (рис. 45, г).

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

Рис. 45

Развитие движе­ния вдоль горизонтальной пря­мой

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

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

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

Нюансировка

Последний раздел этой главы -

как и тема, которой он посвящен, - невелик по объему,

но необычайно важен. Тщательная нюансировка - главное

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

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

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

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

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

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

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

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

Поиск по сайту: