На все четыре стороны

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

Национальные особенности

Хотя с текстовыми кодиров­ками мы уже знакомились (стр. 14), теория и практика создания разноязычных HTML-документов — особая тема. Как я уже упоминал, стандартной кодировкой HTML-доку­ментов начиная с версии 4 объявлена кодировка Unicode. Однако это совсем не означает, что все HTML-документы

33

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

Для дизайнера это требование имеет, пожалуй, только одно практическое следствие: числовые подстановки (стр. 29) должны ссылаться на Unicode-коды нужных символов, а не на их коды в текущей кодировке документа. Это сделано для того, чтобы не только мнемонические, но и числовые под­становки, во-первых, не зависели от кодировки документа, а во-вторых, давали возможность ссылаться на символы за пределами текущей кодировки. К сожалению, поскольку многие версии броузеров до сих пор не подозревают об этом требовании стандарта, с известной гарантией можно пользоваться только числовыми или мнемоническими кода­ми из репертуара Latin-1 (которая является подмножеством Unicode).

Надстройки

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

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

Например

Описанные выше принципы были взяты за основу в дизайне сайта www.oi.com  (рис. 1). Этот корпоративный сайт по объему и ча­стоте обновления своего материала близок к контент-сайтам (стр. 182), и возможность свободно редактировать содержимое, оставляя нетронутым дизайн, для него особенно важна. Вот, к примеру, как выглядит блок, со­здающий стандартный внутритекстовый заголовок:

<!-- trained heading -->

<table cellpadding=0 cellspacing=0><tr>

<td bgcolor=ffaf60><img alt="" src="e.gif" width=15 height=4></td>

<td bgcolor=ffaf60><img alt="" src="e.gif" width=350 height=4></td>

<td bgcolor=d8d8d8 valign=top rowspan=2>

<img width=16 height=26 alt="" src="zak-gob.gif "></td>

</tr><tr>

<td bgcolor=d8d8d8><img alt="" src="e.gif" width=15 height=22></td>

<td bgcolor=d8d8d8 valign=bottom><small>THE COAD METHOD</small></td>

</tr></table>

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

<!-- top navigation -->

<!-- solid heading -->

<!-- open text block -->

Peter Coad is perhaps ... Reach him at pc@oi.com.

<!-- close text block -->

<!-- framed heading -->

<!-- open text block -->

The Coad Method focuses on ... frequent, tangible, working results. <!-- close text block --> <!-- decorated close -->

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

Навигация

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

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

206

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

На страницах портфолио (рис. 82) этот элемент сдвинут еще и влево, а правый конец па­нели занят линейной (стр. 20?) навигационной системой I для перемещения по цепочке страниц в данном разделе портфолио. Как известно, минимум навигации в таких слу­чаях — пара ссылок, ведущих на следующую и предыдущую страницы цепочки. Однако существенно удобнее система нумерованных ссылок, количество которых равно количе­ству страниц, что позволяет перейти с любой страницы цепочки на любую другую.

Линейная навигация встречается в Интернете реже, чем древовидная; кроме того, в данном случае она является «инородным телом», неожиданностью для посетителя сайта, уже ,

314

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

• элементы линейной навигации используют яркие и кон­трастные цвета логотипа, в отличие от уже привычного светло-оливкового в остальных навигационных ссыл­ках;

• сдвинутый влево логотип-«подпись» выровнен по право­му краю светлой горизонтальной полосы, — тем самым подчеркивая, что в этой точке кончается привычная структура страницы и начинается принципиально новый элемент;

• для перемещения взад и вперед по цепочке предусмо­трены как текстовые кнопки «next»/«prev», так и яркие графические стрелки. Это дублирование информации делает ее более доступной для людей с разными типами восприятия;

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

Неразрываемые пробелы

Значительно интерес­нее вопрос о расстановке не обычных, а неразрываемых пробелов. Последовательность символов &nbsp; интерпре­тируется броузером как пробел, не позволяющий разорвать в этом месте строку, и помимо применения в качестве визуальной распорки (стр. 238) должна использоваться для предотвращения неблагозвучных или затрудняющих чтение межсловных переносов. А именно, неразрываемый пробел ставится:

• между двумя инициалами и между инициалами и фами­лией: Д.&nbsp;Б.&nbsp;Кирсанов;

• между сокращенными обращениями и фамилией: г-н&nbsp;Кирсанов, а также после географических со­кращений типа г.&nbsp;Москва или о-в&nbsp;Крым;

• между знаками номера (№) и параграфа (§) и относящи­мися к ним числами;

• внутри сокращений «и т. д.», «и т. п.», «т. е.», «ж. д.» и им подобных (хотя английские «e.g.» и «i.e.» пробелами обычно не разделяются);

• между внутритекстовыми пунктами, такими как «а)», «б)» или «1.», «2.», и следующим за ними текстом;

• между числами и относящимися к ним единицами измерения: 200&nbsp;кг; это же относится и к указаниям дат: XVIII&nbsp;b., 1998&nbsp;г.;

• перед длинным тире в середине предложения (таким образом, этот знак препинания отделяется пробелами с двух сторон — неразрываемым слева и обычным справа);

• между классами многозначных чисел, начиная с пяти­значных: l&nbsp;302&nbsp;569;

• перед номерами версий программных продуктов и частями их названий, состоящими из цифр или сокращений: Windows&nbsp;3.1, Windows&nbsp;95, Windows&nbsp;NT;

230

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

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

Нетекстурирующие эффекты

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

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

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

297

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

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

• полная десатурация, приведение цветного изображения к серой шкале;

• приведение к монохромной шкале с константной насы­щенностью и тоном (т.е. не к черно-белой, а, к примеру, к черно-красной или черно-голубой палитре);

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

Эти методы регулировки видимости можно комбинировать друг с другом. Так, на сплэш-странице сайта www.cap-stonestudio.com  (пример 14) прямоугольная фотография разделена на центральную и периферийную части, и в пол­ном соответствии с классическими законами композиции центр (в монохромной синей гамме) сделан более ярким и заметным, чем периферия (в серой шкале). Контраста

298



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



С меньшим успехом цветовые эффекты применены на сай­те www.vivid.com (пример 20). Левая часть страницы с логотипом студии представляет собой один из редких примеров удачного вписывания скульптурной трехмерности (стр. 2ЭЗ) в плоскую композицию: узкий вертикальный просвет похож на щель, через которую мы видим часть трехмерного шарика логотипа, явно расположенного позади плоскости страницы и, таким образом, однозначно скоорди­нированного с ней в третьем измерении. Цветовое решение этого элемента — монохромная, но притом достаточно яр­кая сине-фиолетовая шкала — также выгодно отличается от типичных трехмерных изображений.

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

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

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


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

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

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

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

Неупорядоченный континуум

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

185

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

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

Нюансировка

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

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

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

172

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

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

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

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

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

173

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

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

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

Новая антиква

 В конце XVIII века появился новый тип шрифтов, который сразу же завоевал широкое признание

130

Рис. 32

Гарнитура Бодони (Bodoni) — ранний, «классиче­ский» образец новой антиквы, сохранивший некоторые черты шрифтов переходного периода

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

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

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

Новые рубленые

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

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

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

Ну и что?

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

О вас

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

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

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

6

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

Обо мне

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

10

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

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

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

Общий обзор

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

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

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

207

в последнее время, — с помощью динамического HTML (www.ibm.com ). На особо разветвленных древовидных сайтах (www.yahoo.com ) каждая страница ссылается на всех своих «родителей» — членов цепочки, ведущей от корня сайта к данной странице.

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

Одним куском

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

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

(a)

(б)

(в)

(г)

Рис. 60

Типология    фонов:

(а) — обычный фон, размно­жаемый по обоим измерениям;

(б) и (в) — полосатые фоны, размножаемые только по вер­тикали и горизонтали соот­ветственно; (г) — полностра­ничный фон

264

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

т

Характерен с этой точки зрения пример 11. Здесь фоновое 1 изображение «дымка от чашки с кофе» (кстати, клишированный образ для всего, что связано с языком Java) прежде 1 всего визуализирует динамику восприятия информации, по сути, делая видимыми «силовые линии» (стр. 167), ведущие от заголовка к визуалу (изображение упаковки программы, которой посвящена страница) и от него снова к тексту.
Что особенно важно, фон этот сшивает в единое целое все актуальное содержимое страницы (т. е. все, за исключением навигационной панели и других элементов, повторяющихся на каждой странице сайта). Заметьте, что такой же по форме (хотя иной по текстуре) «дымок» украшает и саму упаковку с программой.

Этот пример дает повод обсудить еще один технический аспект полностра­ничных фонов: чтобы общий вес страницы с таким фоном не выходил за рамки приличия, все фоновое изображение размерами в сотни и даже тысячи (по высоте) пикселов должно уложиться не более чем в 20—30 Кб. Достичь этого можно двумя путями: либо сжатием в JPEG с большими потерями, которые будут незаметны только для «очень фотографических», размытых и к тому же темных по цвету изображений, либо сжатием плоско­цветных изображений в GIF до 2—4-цветной гаммы (естественно, при этом придется отказаться от анти-алиасинга, что опять-таки допустимо только при низком уровне контраста). Если же в формате GIF нужно сохранить изображение с чуть более сложной текстурой, можно «аппроксимировать» ее плоским цветом с помощью, например, имитации типографского растра, как сделано в примере 11.

Однобайтовые кодировки

Задействовав в кодировке ASCII

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

16

конкурирующих компьютерных платформ и операционных систем, привела к тому, что для кириллицы существует сразу несколько однобайтовых кодовых таблиц. Хронологически одним из первых стандартов кодирования русских букв на компьютерах был КОИ8 («Код обме­на информацией, 8-битный»). Эта кодировка применялась еще в доисторические советские времена на компьюте­рах ЕС ЭВМ, и когда в середине 80-х появились первые русифицированные версии операционной системы UNIX, они унаследовали эту кодировку у своих «предков». Сеть Релком, открывшая в начале 90-х эпоху российского Интер­нета, в те годы состояла в основном из компьютеров с UNIX и потому также приняла кодировку КОИ8 в качестве стан­дартной. В результате КОИ8 является сейчас единственно допустимой кодировкой в русскоязычной электронной по­чте и телеконференциях Usenet и одной из кодировок, которые обязательно должна поддерживать любая русская веб-страница.

Вторая по значению в русском Интернете (и, безусловно, первая по употребимости на персональных компьютерах) кодировка — это стандартная кириллическая кодировка Microsoft Windows, обозначаемая аббревиатурой СР1251 («СР» расшифровывается как «Code Page», «кодовая стра­ница»). Все Windows-приложения, работающие с русским языком, обязаны понимать эту кодировку без перевода. Благодаря распространенности Windows кодировка СР1251, вместе с КОИ8, входит в абсолютный минимум коди­ровок, которые приходится поддерживать русскоязычным сайтам.

Реликтом эпохи MS DOS остается так называемая «альтер­нативная» кодировка, в терминологии фирмы Microsoft — кодировка СР866.
И хотя в Интернете компьютеры с MS DOS — большая редкость, кодировка эта сохра­ няет определенный авторитет благодаря тому, что она принята в качестве стандартной в операционной системе OS/2 и в некоммерческой сети Фидо. Поэтому изредка можно встретить сайты, предлагающие посетителям в ка­честве одного из вариантов и альтернативную кодировку MS DOS.

Однако первой фирмой, выпустившей русифицированную операционную систему, была все-таки не Microsoft, a Apple. И разумеется, русифицированные Макинтоши, появивши­еся в конце 80-х, имели свою собственную, ни с кем не

совместимую кодировку кириллицы. Хотя в нашей стране компьютеры этой марки так и не приобрели популярности, сравнимой с их популярностью на Западе, в Сети можно встретить и кириллическую кодировку для Макинтошей. Так и срослось. Зачем, однако, вообще понадобилось создавать разные кодировки для одного и того же алфавита? Помимо соображений кон­куренции, вообще способствующих появлению несовместимых решений, изобретателями кодировок в первую очередь двигал чисто практический расчет. Как правило, еще до того, как операционная система русифици­руется, за символами из верхней половины таблицы ASCII (с кодами от I28 до 255) уже закреплено то или иное употребление, и чтобы разместить в этом же диапазоне кириллический алфавит, приходится чем-то жертво­вать. Разумеется, наименее ценные кодовые позиции, замещение которых нанесет меньше всего ущерба функциональности системы, в каждом слу­чае свои, и чаше всего необходимые для полного набора кириллицы 66 знакомест (включая букву «ё», которая традиционно выносится за пределы основного алфавита) не удается расположить подряд. Этим и объясняет­ся тот факт, что ни в одной из кодировок, кроме ISO 8859-5 и Unicode, русские буквы не идут сплошным блоком. В некоторых кодировках допус­каются даже отклонения от алфавитного порядка — в частности, в КОИ8 расположение русских букв определяется, как это ни смешно, алфавитом тех латинских букв, которые на клавиатурах советского производства рас­полагались на одних клавишах с соответствующими буквами кириллицы: например, буква «Ю» стояла на одной клавише с символом «@», идущим в ASCII перед латинской «А», и потому стала в КОИ8 «первой буквой алфавита».

Одномерные фоны

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

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

263

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

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

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

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

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

161

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

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

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

Одноуровневые элементы

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

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

86

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

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

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

87

(а)



(б)



(в)

Рис. 8

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

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


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

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

88

вписать их в композицию, и далеко не всегда эти усилия вознаграждаются по заслугам.

ОПТИМИЗАЦИЯ

Технологическая цепочка производства графики для веб-

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

Когда проект завершен, в архиве безусловно должны остаться векторные оригиналы и конечный результат работы — оптимизированная графика в GIF или JPEG. Промежуточные же растровые файлы (для которых чаще всего используется формат TIFF) вполне можно стереть, если только к ним не применялось никакой специфической пост-векторной обработки.

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

Особые случаи

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

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

Кроме выделения текущей кнопки иногда может понадо­биться убрать или добавить ссылок на панель в зависимости от контекста текущей страницы. Общую рекомендацию можно сформулировать так: не ленитесь делать разные

213

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

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

Осторожно: кириллица

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

Собственно говоря, из описанных выше технологий только встраивание шрифта в документ способно гарантировать соответствие кодировок текста и шрифта (что и понятно —

223

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

Сейчас на русскоязычных сайтах изредка применяется лишь самое простое из всех шрифтовых решений — переключе­ние в рубленый шрифт, для чего можно написать FONT face="arial cyr,arial". Однако даже этот простейший вариант почти наверняка доставит неприятности многим вашим пользователям, так что лучше всего не искушать судьбу и обойтись для русского текста шрифтом по умолчанию.

От общего к частному

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

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

179

Относительность размера

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

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

Палитра и диффузия

Как вы уже знаете, большинство графи­ческих вставок на веб-страницах используют формат GIF с его ограниченной максимум 256 цветами палитрой. Огра­ничению палитры, однако, можно придать двоякий смысл: оно может распространяться либо только на количество ис­пользуемых цветов, либо и на количество, и на конкретный их набор. И хотя сам формат накладывает ограничения толь­ко первого рода (стр. 61), принцип «общего знаменателя» заставляет иногда прибегать к некоторой «общепринятой» GIF-палитре с фиксированными цветами. Зачем это нужно? Дело в том, что перевод изображения в ограниченную палитру часто сопровождается диффузией (dithering). При этом области, которые в оригинале были залиты однородным цветом, после преобразования заполня­ются смесью беспорядочно разбросанных пикселов разных цветов. Как правило, каждый отсутствующий в редуциро­ванной палитре цвет передается смесью в нужной пропор­ции пикселов двух самых близких к нему цветов новой палитры. В результате изображение приобретает характер­ную зернистую, шершавую фактуру. Очень часто диффу­зия является единственным способом хоть сколько-нибудь адекватно передать исходные цвета с помощью палитры, на которой этих цветов уже нет (рис. 54).

Рис. 54 Диффузия под ми­кроскопом: так Adobe Photo­shop распределяет пикселы при попытке передать черно-белый градиент восьмицветной пали­трой

246

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

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

Проблема эта действительно серьезна, так как для мно­гих изображений, составляющих нередко основу дизайна страницы, диффузия крайне нежелательна. Что же делать? Оказывается, существует набор из 216 цветов, которые с га­рантией никогда не подвергаются диффузии ни в одном из броузеров и ни на одной из платформ. Если ваше изобра­жение будет содержать только цвета из этого набора (или, по крайней мере, к этому набору будут относиться цвета, занимающие наибольшую площадь), на 256-цветном экране оно будет выглядеть намного чище и привлекательнее. Эту палитру часто называют «безопасной» (англ. browser-safe palette) или «интернетовской».

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

24?

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



Очевидно, что серьезно относящийся к цветовому решению своих работ дизайнер должен позаботиться о цветовой безопасности на самых ранних стадиях проекта. Встроенная или загружаемая «интернет-палитра» есть сейчас во многих векторных и растровых графических программах. Ничто не мешает вам выбирать ее цветовые значения и вручную, пользуясь таким несложным правилом: 216 цветов этой палитры получаются комбинированием красной, зеленой и синей составляющих, каждая из которых может принимать только шестнадцатеричные значения 00, 33, 66, 99, СС и FF (или десятичные 0, 51, 102, 153, 204 и 255). Таким образом, три составляющих, каждая из которых может принимать шесть разных значений, дают б3 = 216 возможных цветов. Диффузия в броузере и безопасная палитра, еще недавно бывшие источ­ником головной боли для веб-дизайнеров, постепенно теряют актуальность по мере того, как устаревают и вымываются из общей массы персональных компьютеров 256-цветные дисплеи. Эту тенденцию нельзя не приветство­вать хотя бы потому, что она открывает перед автором настоящий океан цвета, позволяет выбирать неочевидные, неприевшиеся оттенки. С другой стороны, если какие-то цвета в вашей композиции не несут большой смы­словой или эстетической нагрузки, надежнее округлить их до ближайших значений безопасной палитры.

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

Палитры

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

Таким образом, объем памяти, выделенной на каждый пиксел, делится на три равные части, хранящие яркость красной, зеленой и синей составляющих цвета данного пиксела. В режиме high color на каждую составляющую приходится по 5 бит (что дает 32 градации яркости), а в true color — 1 байт (256 градаций). А поскольку известно, что режим true color превосходит цветовую разрешающую способность человеческого глаза, можно сделать вывод, что для качественной передачи монохромного изображения, изменяющегося только по одной цветовой координате (или, что то же самое, сохраняющего одно и то же соотношение трех составляющих), должно быть достаточно одного байта на пиксел.

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

63

Параметры Набора

 Итак,   шрифты   для   композиции   выбраны.

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

Переходные шрифты

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

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

Первая страница

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

191

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

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

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

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

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

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

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

319

Рис. 89

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

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


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

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

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

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

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

320

Первый шаг

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

180

Рис. 46

Примерное распре­деление четырех основных ти­пов сайтов на диаграмме «ди­зайн—содержание». Обратите внимание, что по горизонтали и вертикали отложена слож­ность, а никак не качество ди­зайна и содержания соответ­ственно. В противном случае пришлось бы поменять места­ми \ и 1 по горизонтали, а 2 и 3 — по вертикали

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

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

Пиксельные эффекты

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

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

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

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

Здесь же уместно напомнить о правиле выравнивания пропорций при уменьшении (стр. 84), о пиксельных текстурах (стр. 119) и о том, что

252

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

Пиксельные текстуры

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

Рис. 25

Фон сайта www.wpdfd.com  в увели­чении (горизонтальные полосы имеют высоту в один пиксел)

Пластмассовый призрак

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

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

293

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

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

Плоский цвет

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

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

118

Рис. 23 Сочетание геоме­трической и фотографической текстур

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

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

Плотность

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

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

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

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

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

По ту сторону кнопок

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

И наоборот, если страница и без того насыщена фотогра­фическими текстурами и криволинейными формами, имеет смысл вспомнить о популярной в современном дизайне теме прямых линий (стр. 93), часто применяемой для объедине­ния кнопок панели навигации в единое целое. На рис. 50 показаны фрагменты трех последовательных страниц, на­чиная с заглавной, сайта www.revo.com . Мотив прямых линий с засечками на концах, ограничивающих навигаци­онную панель и выделяющих ее на фоне доминирующих на странице плавных дуг и градиентов, вводится уже на первой странице (а). Сайт этот содержит двухуровневую иерархию страниц, и на подчиненных страницах дизайнер из тех же прямых линий строит элегантную и интуитивно прозрачную двухэтажную навигационную панель (б, в).

Почему эта тема?

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

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

11

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

Отсюда и мое особое отношение к предмету изложения. Я ощущаю себя не потребителем, пассивным зрителем или «пользователем», но деятелем и делателем, в какой-то мере ответственным за то, каким будет Интернет завтрашнего дня. Чтобы разделять это мое отношение, не обязательно быть дизайнером или писателем — просто делая ежесекунд­ный выбор, щелкая по одной ссылке и игнорируя другую, заинтересовываясь или, наоборот, пропуская мимо внима­ния мелькающие вокруг нас в киберпространстве тексты, образы и послания, каждый из нас прямо и непосредствен­но влияет на будущее Сети. Поэтому даже если читатель моей книги не станет настоящим дизайнером, но начнет чуть-чуть лучше разбираться в том, что по-настоящему красиво, а что нет и почему, — я посчитаю свою задачу выполненной.

Подбор Шрифтов

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

134

цветового решения (стр. 110), главная роль при этом при­надлежит началам единства и контраста.

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

Подстановки

 Чтобы ввести в документ символы, от­сутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки (entities) двух видов — мнемонические и числовые. Первые имеют вид & мнемонический код;, например:

&egrave; для

&lt; для   <

&amp; для  &

Набор мнемонических кодов, определенный в стандарте HTML, включает в себя, в частности, весь символьный репертуар Latin-1 (в том числе символ неразрываемого пробела &nbsp;, стр. 229), а начиная с HTML версии 4 и некоторые из символов Unicode (стр. 231).

В числовых подстановках вместо мнемонического кода используется десятичный числовой код нужного символа с добавлением впереди символа # (например, &#160; для того же символа неразрываемого пробела). Важно помнить, что код символа берется из стандарта Unicode вне зависимости от кодировки основного текста документа. Так, в какой бы кодировке ни был представлен русский текст документа, подстановка для кириллической буквы «А» всегда будет иметь вид &#1040; (хотя поймет ли такую подстановку броузер — это уже другой вопрос).

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

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

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

90

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

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

Позиционирование

Последний

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

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

234

Вообще говоря, точное позиционирование материала по двум (и даже, как мы увидим ниже, по трем) измере­ниям есть второе по важности из условий творческой свободы дизайнера (первое — возможность пользовать­ся графикой). Характерно, что дизайнер Дэвид Сигель (www.dsiegel.com ) — вероятно, самый известный из популяризаторов визуального подхода к веб-дизайну — прославился в первую очередь изобретением невидимой распорки из однопиксельного GIF'a (стр. 237).

Позиционирование в CSS

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

Для начала давайте рассмотрим, чем вообще определяется положение на странице того или иного элемента документа (стр. 27). Язык CSS унаследовал от HTML идею разделения всех элементов, чье содержимое подлежит в той или иной форме выводу на экран, на строчные (inline) и блочные (block). Разница между ними состоит в том, что идущие подряд строчные элементы выстраиваются по горизонтали, переходя на новую строку, только если исчерпано горизонтальное пространство, тогда как блочные элементы располагаются вертикально друг под другом (можно сказать, что каждый блочный элемент начинает собой новый абзац).

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

Теперь вам будет легко понять разницу между двумя основ­ными режимами позиционирования, введенными в CSS2: относительным (relative) и абсолютным (absolute). Относи­тельное позиционирование позволяет смещать объект от той точки, которую он занимал бы по умолчанию с учетом обоих упомянутых только что факторов.
Относительное позиционирование отдельных букв в абзаце позволяет, например, воспроизвести логотип системы TEX, в котором буква «Е» cмещена вниз не относительно какой-то точки на странице, 1 относительно своих соседей. Такой логотип ведет себя как единый строчный элемент (в частности, он свободно

241

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

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

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

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

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


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

242

Оба визуальных броузера поддерживают абсолютное позиционирование на­чиная с четвертых версий. К сожалению, как и в других компонентах CSS, в реализации этой технологии пока что много ошибок и несовместимостей. Причем вместо того, чтобы бросить все силы на доводку своего сырого продукта, создатели Netscape Communicator сочли более важным застолбить новый участок очередным нестандартным тегом. Teг LAYER, хотя и предоставляет ровно те же возможности, что и абсолютное пози­ционирование средствами CSS, рекламируется фирмой намного активнее (так, вместо термина «absolute positioning» в документации Netscape гораздо чаше употребляется «layers» или «layer technology»). Хотя до сих пор смелое теготворчество давало Netscape известное преимущество в конкурентной борьбе, я сильно сомневаюсь, что кто-то станет пользоваться тегом LAYER при наличии полноценной альтернативы, освященной авторитетом Кон­сорциума W3.

243

Правила набора текстов

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

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

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

158

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

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

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

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

 

Рис. 40

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

159

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

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

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

Предлагаемая вашему вниманию книга задумывалась

Предлагаемая вашему вниманию книга задумывалась не как практическое руководство по веб-дизайну, а скорее как учебник общего дизайна на част­ном материале веб-сайтов. Иначе говоря, я пишу о том, как сделать что-то (в том числе сайт) красиво, а не о том, как что-то сделать.
Слово «дизайн» в последние годы необычайно девальвиро­валось. Лишь постепенно интернетовская публика начинает осознавать, что даже с приставкой «веб-» это понятие отнюдь не является синонимом для языка HTML, сетево­го программирования на Java или компьютерной верстки. Поэтому в моей книге вы не найдете ни справочника по HTML, ни описаний последних версий Adobe Photoshop или Microsoft FrontPage. Самое трудное в любом деле — не как, а что, и вместо составления инструкций по тем или иным эффектам в той или иной программе я рассказываю о том, какие оформительские эффекты в принципе возможны, где они уместны и как воспринимаются зрителем. Конечно, в чистом виде такой сугубо теоретический подход труднореа­лизуем. Чтобы позволить себе роскошь не учить инструкции, дизайнер должен свободно ориентироваться в существующих дизайнерских техно­логиях и программах. Кроме того, нужно учитывать, что в веб-дизайне «как» сильно влияет на «что»: компьютер не только великолепно спра­вляется с техникой традиционного дизайна, но и открывает множество новых эффектов, новых возможностей, новых способов комбинирования материала. Поэтому дизайнер, не имеющий представления о специфиче­ских возможностях компьютера, вряд ли сможет создать на нем что-нибудь конкурентоспособное.

Преграды и препоны

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

Первая группа ограничений определяется намного более низким, по сравнению с печатью на бумаге, разрешением компьютерного экрана — в среднем 96 dpi (dots per inch, пикселов на дюйм) у компьютеров с Windows и 72 dpi у Макинтошей против минимум 300 dpi у самых деше­вых лазерных принтеров. Как вы уже знаете, экранная графика компенсирует свое низкое разрешение более ши­роким цветовым охватом — экрану доступны такие цвета, которые немыслимо воспроизвести на бумаге (стр. 63). Однако в веб-дизайне и это преимущество подпорчено

177

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

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

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

178

не предусмотрено еще в соответствующих стандартах.


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

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

Приемы

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

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

Прикладная философия

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

глазах медленному и трудному процессу вычленения и очищения аспектов компьютерного представления информации. До сих пор подавляющее Большинство текстов создаются и хранятся в «фирменных», ориентированных на визуальное представление форматах вроде MS Word, — которые,

•к языки первобытных племен, неспособны отделить «существительное» содержимого документа от «прилагательного» его представления в той или иной среде.

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

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

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

22

соответствовали заранее заданной структуре, — смысл которой придан ей человеком и существует только для него.

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

Как любой учебник, эта книга

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

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

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

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

304

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

Принципы

Система CSS предоставляет в распоряжение дизайнеров набор обобщенных свойств (параметров оформления), та­ких как имя шрифта, цвет элемента и фона под ним, ширина любого из четырех окружающих элемент полей. Написание спецификации для HTML-документа заключа­ется в присвоении значений нужным свойствам для тех или иных элементов (т.е. HTML-тегов), классов элементов (которые маркируются в HTML с помощью атрибута class у соответствующих тегов) и отдельных экземпляров тегов (идентифицируемых атрибутом id). Кроме того, можно варьировать свойства элементов, стоящих в том или ином контексте (например, увеличить расстояние между строками только для тех элементов Р, которые следуют сразу за эле­ментом H1, — что было бы аналогом одной из особенностей верстки данной книги).

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

42

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

Прямоугольники

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

95

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

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

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

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

96

(о)



(б)



<a>



(г)

Рис. 13

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

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

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


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

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

97



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

Прямые

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

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

Рис. 10

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

93

на плоскости, стр. 109) и даже текстуру поверхности (как обращенной к зрителю, так и контурной, стр. 117).

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

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

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

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

94

Рис. 11

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





Рис. 12

Стремление по­строить устойчивую компози­цию на основе наклонных линий завело дизайнера слишком дале­ко (www.yandex.ru )

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

Другой источник «линейной темы» в дизайне — вспомо­гательные прямые на чертежах и набросках (аналогичные им вспомогательные горизонтали и вертикали есть и в век­торных графических редакторах). Желая стилизовать свою графику (чаще всего шрифтовой заголовок) под «набросок», дизайнер проводит несколько неярких горизонтальных, вер­тикальных линий или дуг окружности через узловые точки контура (рис. 11). Разновидностью этого приема является визуализация базовой линии (baseline) текста — попросту говоря, горизонтальное подчеркивание, вплотную прижа­тое к буквам (пример 4), визуально родственное заголовкам с тесно прилегающими друг к другу строками (стр. 143).

Про что картинка?

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

268

(а)

(в)

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

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

---

---