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

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

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

Еще более неординарные варианты размещения заголов­ков не подчеркивают их главенство в паре «заголовок—

89

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

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

Плотность

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

Пол И характер

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

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

90

пространством от соседних элементов. Такой рваный, син­копический ритм плотности бывает совершенно необходим для свободного и выразительного звучания материала (при­мер 6, см. раздел «Галерея» на стр. 323).

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

Плотность текста

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

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

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

В нужное время и в нужном месте

 В заключение мне хотелось бы подчеркнуть важность пространственных

91

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

Форма

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

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

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

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

92

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

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

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

Прямые

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

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

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

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

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

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

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