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

95

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

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

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

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

96

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

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

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

97

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

Круги и закругления

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

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

Возражения вызывает также активная симметрия окружно­сти (из всех фигур она явный чемпион по выраженности

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

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

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

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

99

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

Кривые Безье

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

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

Бесформенность

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

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

Бесформенность бывает не только расплывчатой и облако-образной, но и рваной, ломаной и даже узорчатой, повто­ряющейся (рис. 16). Иными словами, разнообразие типов бесформенности сравнимо с разнообразием типов текстур. Нарисовать по-настоящему аморфную форму, не произво­дящую впечатления нарочитости или неопрятности, совсем не просто. Для этого, в частности, разумнее пользоваться не векторными, а растровыми графическими редакторами. С другой стороны, именно в векторных редакторах есть инструмент, по­зволяющий создавать весьма любопытные аморфные эффекты. Взяв за основу какой-нибудь абстрактный по содержанию и характерный по тек­стуре (стр. 119) фотографический фрагмент и напустив на него функцию трассировки (trace), вы получите пучок характерных векторных форм, ко­торый, в зависимости от использовавшихся опций трассировки и стоящих перед вами задач, можно считать либо интересным искажением исходного изображения (см. также стр. 295), либо ни с кем и ни с чем не связанным воплощением аморфности, способным, вполне вероятно, натолкнуть вас

101

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

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

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