Текст книги "Веб-дизайн"
Автор книги: Дмитрий Кирсанов
Жанр:
Интернет
сообщить о нарушении
Текущая страница: 8 (всего у книги 29 страниц) [доступный отрывок для чтения: 11 страниц]
Если пространственные отношения – главное, что связывает элементы композиции друг с другом, то форма – главное отличительное свойство отдельного элемента как такового. Даже при отсутствии цвета, текстуры и всех остальных свойств любой объект можно было бы без труда узнать по его форме (истина, которая была хорошо известна изобретателю жанра силуэтных портретов).
В то же время переклички и противопоставления форм способны устанавливать прочные и разнообразные отношения между объектами. При работе над реальным проектом нет смысла приступать к поискам шрифтового, цветового или текстурного решения до тех пор, пока вам не будет ясна композиция вещи – рисунок составляющих ее форм и пространственных отношений между ними.
Понятие формы тесно связано с понятием размера; пожалуй, вернее всего определить форму как конфигурацию размеров внутри объекта – то есть форма определяется тем, что и в каких направлениях можно в этом объекте измерить. Кроме того, форма тесно связана с текстурой объектов – настолько тесно, что между ними трудно провести четкую границу. По мере усложнения любая форма плавно переходит в текстуру – либо умножением мелких черт (рис. 9), либо переходом в расплывчатость и аморфность.
Классифицировать бесконечное множество форм можно, понятно, бесконечным множеством способов; для книги о дизайне естественно было выбрать способ, имеющий отношение не столько к геометрии, сколько к психологическому, субъективному восприятию формы. Такой подход позволяет разбить все мыслимые формы на две большие группы: формы, построенные из прямых линии и углов (в первую очередь сами горизонтальные и вертикальные прямые, а также прямоугольники), и всевозможные криволинейные формы (прежде всего окружности и дуги, входящие в состав других форм). Кроме того, важную роль в дизайне играют бесформенные (аморфные) объекты.
Рис. 9 Усложняясь, эта фрактальная форма теряет свою изначальную геометричность, становится аморфной и плавно переходит в разряд текстур
Рис. 10 Чертежный стандарт весьма жестко регламентирует толщину линии на чертежах, соотношение длин штрихов и промежутков в штриховых и штрихпунктирных линиях, а также правила вычерчивания стрелок, и размерных линий
В определенном смысле, элементарные геометрические формы также являются разновидностью «чужого творчества», о котором мы говорили на стр.76. Мы вряд ли открыли бы для себя красоту прямых линий и идеальных окружностей, если бы не были приучены к ним с детства всей материальной и художественной культурой, внутри которой мы живем. А начав заниматься искусством, пусть даже таким прикладным, как веб–дизайн, вы, возможно, снова сможете почувствовать себя ребенком, играющим в кубики или мяч.
В нашем столетии, начавшемся взлетом кубизма и других форм абстрактного искусства, произошло возрождение интереса к красоте простых геометрических форм. Еще сто лет назад ни одну самую серьезную книгу нельзя было выпустить без хотя бы пары узорных виньеток или цветочков на титульном листе, а геометрически строгий, без засечек и утолщении рубленый шрифт выглядел непривычно и даже, пожалуй, шокирующе (не зря его тогда называли «гротесковым»). Теперь вычурные криволинейные формы чаше используются с целью стилизации под старину, а в основе дизайна почти всегда лежат прямая линия или дуга окружности. Любопытно, что в сфере промышленного дизайна эволюция шла в обратном направлении – достаточно сравнить угловатые силуэты автомобилей 20‑х годов, состоящие почти исключительно из прямых и дуг, со сложными обтекаемыми обводами переменной кривизны, характерными для современных машин.
Абстрактная прямая лежит в основе любых пространственных отношений – без нее немыслимо ни какое–либо выравнивание, ни даже простое измерение размеров. Здесь, однако, мы будем говорить о видимых, реальных прямых, участвующих в дизайне в качестве полноправных фигур, а не вспомогательных построений.
Евклид определял прямую как «длину без ширины», и это определение вполне применимо не только к геометрии. Я не хочу сказать, что прямые на экране компьютера не имеют толщины, – однако любая фигура начинает восприниматься как линия именно тогда, когда ее толщина перестает иметь значение для композиции, становится пренебрежимо малой по сравнению с длиной. Вместе с тем прямая линия обычно достаточно толста для того, чтобы иметь свой собственный цвет (хотя в ней он значительно труднее различим, чем на плоскости, стр.109) и даже текстуру поверхности (как обращенной к зрителю, так и контурной, стр.117).
В дизайне прямые линии выполняют две противоположные функции: разделителей и соединителей. Разделительная роль прямых была известна даже создателям HTML, предусмотревшим на этот случай специальный тег HR (стр. 203), который предлагается ставить в местах стыка разнородных фрагментов документа, не разделенных заголовком или какими–то другими средствами. Прием использования линий–разделителей опирается на давнюю традицию книжного оформления (типографы называют такие горизонтальные разделители «линейками»). Тем не менее в современном дизайне в качестве разделителей чаще используются другие средства – пустые интервалы, переходы фонового цвета и т. п.; если же линии–разделители и присутствуют, то, как правило, они являются частью более сложных форм (чаще всего прямоугольников, см. пример 1).
Противоположная функция прямых – соединительная, – наоборот, явный фаворит современного дизайна. Корни этой графической темы лежат в эстетике чертежей, блок–схем и тому подобных артефактов современной технической цивилизации. Линии эти используются для соединения заголовков с текстом, подписей с иллюстрациями, кнопок навигации с относящимися к ним изображениями, – иначе говоря, для «коммутации» объектов, обладающих логической связью любого рода. Иногда, впрочем, линии связывают элементы, не имеющие друг с другом ничего общего (пример 8), или даже нарочито «подвисают в воздухе», благодаря чему композиция может приобрести несколько ироническое звучание.
Связующие линии – весьма сильнодействующий прием, позволяющий при умелом исполнении связать композицию в единое целое и придать ей своеобразный (хотя, к сожалению, уже не выглядящий новаторским), размашистый и в то же время точный рисунок. Общий темп восприятия повышается; глаз зрителя скользит по «силовым линиям», приземляясь прямо в узловые точки композиции. В то же время прием этот не слишком требователен – он хорошо сочетается со многими стилями и типами элементов (лучше всего, по принципу контраста, – с размытыми фотографическими текстурами, стр.119).
Все визуальные аспекты соединительных линий выдают их техногенное происхождение. Прежде всего, в подавляющем большинстве случаев они идут по горизонтали и вертикали, поворачивая только под прямым углом. Встречаются не только сплошные, но и пунктирные линии, имеющие стрелки, кружки или засечки на концах и даже образующие «мостики» на пересечении друг с другом, как на старых радиосхемах (пример 17). Иногда можно увидеть объекты, напоминающие выноски (линии с поясняющими надписями, относящимися к частям чертежа или схемы) и размерные спецификации. Внешний вид подобных элементов, разумеется, определяется общим стилем вашей композиции, но для ориентировки на рис. 10 показаны рекомендованные ГОСТом советских времен виды чертежных линий и правила вычерчивания стрелок, выносных и размерных линий.
Рис. 11 Вспомогательные построения из прямых и дуг как художественный прием
Рис. 12Стремление построить устойчивую композицию на основе наклонных линий завело дизайнера слишком далеко (http://www.yandex.ru/)
Другой источник «линейной темы» в дизайне – вспомогательные прямые на чертежах и набросках (аналогичные им вспомогательные горизонтали и вертикали есть и в векторных графических редакторах). Желая стилизовать свою графику (чаще всего шрифтовой заголовок) под «набросок», дизайнер проводит несколько неярких горизонтальных, вертикальных линий или дуг окружности через узловые точки контура (рис. 11). Разновидностью этого приема является визуализация базовой линии {baseline} текста – попросту говоря, горизонтальное подчеркивание, вплотную прижатое к буквам (пример 4), визуально родственное заголовкам с тесно прилегающими друг к другу строками (стр. 143).
Дизайн Пизанской башни. Почти все случаи употребления прямых, рассмотренные выше, пользуются горизонтальными и вертикальными линиями – и это не случайно. Горизонтали и вертикали (так же как и образуемые ими прямоугольники, о которых пойдет речь ниже) – самые естественные направления, определяемые неизбежной прямоугольностью компьютерного экрана и листа бумаги. Любое отклонение от этих доминирующих направлений – опасный шаг, на который можно решиться только при крайней необходимости и с полным пониманием последствий. При этом наклон должен быть немедленно очевиден для взгляда, а незначительные, едва заметные отклонения ни при каких обстоятельствах недопустимы. Даже если наклонная прямая будет не одинока, а поддержана всем строем композиции, результат может быть весьма неоднозначным (рис. 12). Пожалуй, можно рекомендовать лишь эпизодическое употребление наклонных прямых в тех случаях, когда это оправдано семантикой самого элемента – например, для линий выносок, которые чаще всего наклонны (пример 8) или для линии отбрасываемой тени (см. рис. 40 на стр. '158).
Прямоугольник с полным правом может быть назван основой компьютерной геометрии. Это – самая часто употребляемая и самая естественная для компьютера форма; почти все объекты на компьютерном экране – окна, блоки текста, изображения, Java–апплеты – по умолчанию имеют прямоугольную форму. Понятно поэтому, что прямоугольник играет совершенно особую роль в компьютерном дизайне вообще и веб–дизайне в частности.
И упражнения любителей, и продукция профессионалов пестрят множеством явных и подразумеваемых, подчеркнутых и замаскированных прямоугольников (хотя разница в отношении к ним и, соответственно, в производимом ими эффекте бросается в глаза сразу). Собственно говоря, раздел о прямоугольниках как таковых может быть очень кратким, так как никакого принципиального различия между «профессиональными» и «любительскими» прямоугольниками нет и быть не может, а все волшебство объясняется правильным выбором пропорций, размещения и цветового оформления этих фигур.
Пожалуй, главное отличие заключается в том, что профессиональные дизайнеры не относятся к прямоугольнику как к «служебному построению», а уделяют ему такое же внимание, как и всем остальным элементам композиции. Если материал на странице стремится принять прямоугольную форму, этот прямоугольник не останется в своем первозданном виде. Как минимум, дизайнер попытается скоординировать его с другими элементами (прежде всего, конечно, с другими прямоугольниками) путем регулировки пространственных отношений – подбором пропорций, выравниванием и т. п. Если прямоугольник упорно не хочет становиться на место, от него можно попытаться избавиться, замаскировать его прямоугольную форму уничтожением его границ и/или цвета заливки фона, размывкой, искажением, слиянием его с соседними элементами или же придвиганием вплотную к границам страницы.
Прием маскировки особенно актуален для таких насыщенных прямоугольниками объектов, как таблицы. Как вы знаете, HTML предлагает на выбор либо отсутствие каких бы то ни было линеек, либо назойливые выпуклые, псевдотрехмерные линейки вокруг всех ячеек без исключения (стр. 203) – трудно даже представить себе дизайн, в котором последний вариант оформления смотрелся бы хоть сколько–нибудь уместно. Поэтому веб–дизайнер Должен освоить некоторые особые приемы работы с таблицами, использующие вложенность и варьирование фонового цвета ячеек (стр. 226).
При выборе пропорций (отношения высоты к ширине) прямоугольников следует избегать невыразительных отношений, делающих прямоугольник слишком близким к квадрату. Геометрически правильный квадрат может применяться с успехом (хотя, как и круг, он не слишком популярен в современном дизайне из–за своей ярко выраженной симметрии), но небольшие отклонения от квадратности, скорее всего, будут восприниматься как неточность или искажение, а не как художественный прием. Точно так же как при размещении материала на двумерной плоскости выгодно отдавать явное предпочтение одному из направлений перед другим (стр. 86), отдельно стоящий прямоугольник смотрится лучше, если его ширина подчеркнуто больше или подчеркнуто меньше высоты.
Особое внимание следует уделить отношениям прямоугольника с его содержимым (чаще всего текстом). Обычная ошибка начинающих дизайнеров (которые еще не привыкли подвергать сомнению все «параметры по умолчанию») заключается в слишком тесном прилегании границ прямоугольника к тексту, отсутствии полей (см. также стр.90). Ошибка станет очевидна, если мы вспомним, что и сам прямоугольник, и его содержимое являются отдельными и почти равноправными элементами, которые в большинстве случаев требуют вокруг – и внутри – себя определенной ширины «нейтральную зону». (Прижимание объектов вплотную друг к другу также имеет право на существование как прием композиции, однако в случае прямоугольника и его содержимого этот прием работает редко.)
Кроме того, при выборе расположения объекта внутри прямоугольника нужно учитывать, что так называемый «оптический центр» (его логичнее было бы назвать психологическим центром – это точка, которая кажется нам центром прямоугольника) всегда лежит несколько выше его геометрического центра, и если вы поместите объект точно в геометрический центр, он будет казаться слегка смещенным вниз. Относительное расстояние между оптическим и геометрическим центрами тем больше, чем сильнее прямоугольник вытянут в вертикальном направлении и чем больше он по своему абсолютному размеру.
Для тех случаев, когда прямоугольник полноправно участвует в композиции, нужно особо рассмотреть вопрос о его контуре («рамке»). В большинстве случаев прямоугольник отличается от своего окружения цветом заливки; при этом цветовой переход на его границах обладает достаточной силой выделения и не требует дополнительного подчеркивания какими–либо линиями. Если снабдить такой прямоугольник тонким контуром, это будет восприниматься едва ли не как тавтология: зритель подсознательно чувствует, что что–то – либо контраст цветов, либо линия контура – здесь лишнее. (По этой же причине никогда нельзя оставлять тонкий контур у букв текста.)
Однако если сделать контур достаточно толстым, ощущение его неуместности пропадает. Теперь мощная рамка становится главным «носителем прямоугольности», и фоновый цвет превращается в оправданное дополнение, «второй голос», подчеркивающий основное звучание фигуры. Кроме того, так как внутренний цвет теперь отделен от внешнего достаточной ширины промежутком, глаз уже не пытается «достраивать» линию границы этих двух цветов, которая могла бы конфликтовать с видимой линией контура (рис. 13). Поэтому прямоугольники с толстым контуром достаточно часто можно видеть в работах профессиональных дизайнеров (пример 12). В качестве рамки для текстовой надписи такой элемент лучше всего сочетается с рублеными шрифтами повышенной насыщенности.
Рис. 13
Еще один сравнительно часто применяемый класс прямолинейных фигур, не заслуживающий, однако, собственного раздела, – треугольники. Треугольникам свойственна яркая асимметрия формы («тяжелое» основание и «легкая» вершина) и, как следствие, – динамичность, направленность (стр. 166). Поэтому треугольник (обычно небольшого размера) применяется чаще всего в качестве «указующего перста», стрелки, маркера элемента списка или кнопки.
Во многих древних культурах круг считался совершенной, божественной формой, и это неудивительно – из всех геометрических форм только окружность (в трехмерном пространстве – сфера) обладает многими уникальными, поистине удивительными свойствами. В частности, круг также можно назвать «естественной» фигурой – предоставленная самой себе, материя обычно стремится собраться в шар, будь то под действием сил гравитации (звезды) или поверхностного натяжения (мыльные пузыри). Но распространяется ли это стремление на элементы дизайн – композиции?
Нельзя сказать, чтобы окружность была популярной формой в современном дизайне. Причин этому немало. Прежде всего, круг слишком явно противоречит врожденной прямоугольности компьютерного экрана и листа бумаги, а также горизонтальности и вертикальности основных элементов информационного дизайна – строк и столбцов текста. Конечно, контраст форм (стр. 159) может стать основой динамичной, захватывающей композиции, – но в данном случае контраст граничит с разобщенностью и уже не может служить объединяющим началом.
Возражения вызывает также активная симметрия окружности (из всех фигур она явный чемпион по выраженности этого свойства: у окружности бесконечно много осей симметрии). В античности и средневековье симметрии придавалось необычайно важное значение, однако в современном дизайне она уступила свою роль гармонизирующего начала более общему понятию баланса (стр. 155); «классическая» симметрия теперь воспринимается скорее как нечто ограничивающее, стесняющее.
Рис. 14 Сравните ощущения, которые у вас вызывают эти две композиции, отличающиеся только закругленностью углов прямоугольников
Наконец, окружность с трудом поддается интеграции с другими видами элементов: в нее с трудом вписывается изображение и с еще большим трудом – текст, она не слишком хорошо сочетается с прямоугольными фигурами и почти не поддается выравниванию на расстоянии (даже если центры двух окружностей, находящихся на некотором расстоянии друг от друга, лежат на одной горизонтали или вертикали, глазу существенно труднее заметить эту координацию, чем если бы вместо окружностей были квадраты). Вспомним, что из всех фигур данной площади круг обладает минимальным периметром – а ведь именно длина периметра определяет «дружественность» фигуры к своему окружению, количество вариантов ее соположения и объединения с другими фигурами. Короче говоря, круг – фигура слишком скользкая и слишком самодостаточная, чтобы быть хорошим членом дизайн–композиции.
С другой стороны, у круга есть немало достоинств, которые не позволяют совсем отказаться от его услуг. Совершенно особый мотив «закругленности», вносимый им в любую композицию, часто оказывается незаменимым. Как же избавиться от недостатков круга, не теряя его достоинств?
Первой в голову приходит идея вырезать часть окружности – дугу. Тем самым мы сразу избавляемся от излишней симметрии, и у фигуры появляются эффективные точки привязки – концы дуги, которыми ее можно скоординировать с другими формами. Не так уж редко в композициях можно встретить дуги большого радиуса; центры их лежат далеко за пределами страницы, что придает масштабность – пусть и только подразумеваемую – даже небольшой по размерам композиции (см. пример 17, где дуга замаскирована под фотографию земного шара из космоса). Такие дуги позволяют ввести в композицию негоризонтальный и невертикальный мотив гораздо более элегантно, чем это можно было бы сделать просто наклонной прямой (см. также стр.94).
Следующий шаг – интеграция дуг с другими формами, в первую очередь с «главной компьютерной формой», прямоугольником. Так возникают прямоугольники с закруглениями вместо углов – еще один весьма популярный графический мотив в современном дизайне. В нем счастливо сочетаются, дополняя и уравновешивая друг друга, округлость круга и прямоугольность прямоугольника; круг в нем обнаруживает все–таки присущее ему горизонтально–вертикальное начало, а прямоугольник избавляется от назойливой угловатости, цепляющей взгляд (рис. 14). Правда, прием этот достаточно требователен – стоит ввести в композицию один закругленный прямоугольник, как он почти наверняка потребует скругления всех остальных углов, что заметно изменит общий стиль композиции (пример 12). Хороший пример целостного корпоративного стиля, основанного на закруглениях по дугам окружностей, можно найти на сайте http://www.macromedia.com/.
Рис. 15 Кривые Безье могут поспорить с фракталами за честь называться самы/ красивым математически! открытием нашего века
Окружностям родственны (и геометрически, и визуально) другие математические объекты – кривые Безье третьего порядка (названные так в честь француза Пьера Безье, который в 60‑е годы впервые стал применять их в дизайне; математический аппарат, лежащий в основе этих кривых, разработан 1912 г. нашим соотечественником Сергеем Бернштейном). Кривые Безье – главный инструмент построения криволинейных форм во всех без исключения программах компьютерной графики; с их помощью можно очень точно аппроксимировать любую линию переменной кривизны (раньше, в эпоху кульманов и ватманов, любые кривые, кроме дуг окружностей, вычерчивались подбором «на глазок» подходящего по характеру кривизны лекала).
Несмотря на присущий им шарм, в веб–дизайне кривые Безье как отдельный прием используются не так уж часто – обычно для стилизации под эпоху модерна (дизайн которой был целиком основан на сложных криволинейных формах) или более древние времена. Тем, кто увлечется кривыми Безье (а увлечься ими легко!), я могу дать лишь один совет: избегайте кривых, слишком похожих на дуги окружностей (по той же причине, по какой следует избегать прямоугольников, слишком близких к квадрату), – кривая Безье выглядит особенно выразительно тогда, когда разные ее точки имеют заметно различную кривизну (рис. 15).
Рис. 16 Сочетание регулярного, повторяющегося геометрического узора с нарочито бесформенным общим контуром определяет своеобразие этого объекта
Бесформенность.
Любые формы, не состоящие из прямых или из кривых с постоянной или подчиняющейся простому закону кривизной, человеческому восприятию представляются зыбкими, бесформенными, облакообразными сгустками. Дизайнеры пользуются этим, объединяя «бесформенные формы» со всевозможными мягкими, расплывчатыми, преимущественно фотографическими текстурами (стр. 119). Таким образом, последовательно усложняя простейшие геометрические фигуры (см. рис. 9), мы попадаем в область, где форма и текстура плавно переходят друг в друга. Впрочем, ничего удивительного в этом нет: вспомним, что понятие текстуры применимо не только к поверхности фигуры, которая обращена к зрителю, но и к ее контуру – то есть к тому в фигуре, что обычно определяется ее формой (стр. 117).
Аморфность используется в тех случаях, когда любая из обладающих собственным характером фигур была бы нежелательным добавлением к сложившемуся в композиции ансамблю форм. Подвешенное в воздухе бесформенное облако обладало бы полным набором отрицательных черт круга (см выше), кроме разве что симметричности, поэтому чаще всего аморфные элементы прилипают к другим объектам и с одной или двух сторон ограничиваются четкими прямыми линиями (комбинировать аморфность с дугами или более сложными кривыми не следует, так как недостаточный контраст между этими типами форм и невозможность понять, где кончается аморфность и начинается геометрия, будет раздражать глаз).
Бесформенность бывает не только расплывчатой и облакообразной, но и рваной, ломаной и даже узорчатой, повторяющейся (рис. 16). Иными словами, разнообразие типов бесформенности сравнимо с разнообразием типов текстур. Нарисовать по–настоящему аморфную форму, не производящую впечатления нарочитости или неопрятности, совсем не просто. Для этого, в частности, разумнее пользоваться не векторными, а растровыми графическими редакторами.
С другой стороны, именно в векторных редакторах есть инструмент, позволяющий создавать весьма любопытные аморфные эффекты. Взяв за основу какой–нибудь абстрактный по содержанию и характерный по текстуре (стр. 119) фотографический фрагмент и напустив на него функцию трассировки (trace), вы получите пучок характерных векторных форм, который, в зависимости от использовавшихся опций трассировки и стоящих перед вами задач, можно считать либо интересным искажением исходного изображения (см. также стр.295), либо ни с кем и ни с чем не связанным воплощением аморфности, способным, вполне вероятно, натолкнуть вас на неожиданные дизайнерские идеи (рис. 17). Искусственный интеллект алгоритмов трассировки (как и, кстати, компьютерных переводчиков с языка на язык) пока еще не развился до такой степени, чтобы им можно было пользоваться по прямому назначению, – однако в качестве источника упорядоченного шума и псевдоосмысленных образов «умные» программы не имеют себе равных.
Как своеобразная реакция на слишком геометрическое, «ненастоящее» компьютерное искусство, в последнее время особенно популярна подчеркнуто натуралистическая, небрежная графика, имитирующая грубые, размашистые мазки кистью (создаваемые, впрочем, тоже не без помощи компьютера – точнее, программ, моделирующих натуральные инструменты художника, таких как Painter или Expression фирмы MetaCreations). Этот прием в конечном итоге также сводится к аморфности, которая работает здесь на двух уровнях – у отдельных штрихов она ответственна за «брызги», шершавость, неровные края и т. п., а для рисунка в целом проявляется в свойственных наброскам от руки неточности и непрямолинейности контура, нарочитом «примитивизме» формы и искажениях пропорций (рис. 18). Еще один интересный прием основывается на противопоставлении гладкого яркого контура и слабоконтрастного, подчеркнуто аморфного заполнителя, который лишь весьма небрежно воспроизводит форму объекта, кое–где не доходя до края или вылезая за него (самый близкий аналог этому приему среди традиционных художественных технологий – раскраска акварелью рисунка пером).
Рис. 17 Фрагмент фотографии (а) легко превратить с помощью трассировки в восхитительный набор почти по–человечески небрежных живописных пятен (б) или же в плотный сгусток аморфных форм (в)
Глава о формах была бы неполной без упоминания удивительных математических объектов, открытых в последние десятилетия, – фракталов. Фракталами называют рекурсивные формы, части которых повторяют сами себя, видоизменяясь, до бесконечности (пример фрактальной формы приведен на рис. 9), Фракталы являют собой классический образец формы, переходящей в текстуру, и привносят в любую композицию совершенно специфическое звучание, которое трудно с чем–то спутать. К сожалению, применению этого средства в дизайне мешает то, что средства генерации фракталов реализованы пока только в виде растровых программ или подключаемых модулей Photoshop, а в векторных программах еще нет возможности работать с этими объектами.
