Прогладить с изнанки

Оставив на время в стороне вопросы эстетики фоновых изображений, давайте обсудим одну сугубо техническую пробле­му: как сделать бесшовный фон, у которого были бы незаметны стыки между соседними копиями «изразца». Сколь бы долго и мучительно вы ни пере­крашивали расположенные у края картинки пикселы вручную, добиваясь их соответствия пикселам противоположного края, — в окне броузера линии стыка все равно будут бросаться в глаза. Человеческое восприятие натре­нировано вылавливать признаки порядка в кажущемся хаосе, и какими бы незначительными ни были дефекты «сварки», их повторение в регулярной прямоугольной сетке делает их издевательски заметными. Но представьте себе, что у вас вдруг появилась возможность редактировать фоновый изразец прямо на плоскости, где он находится в окружении своих копий, причем так, что любые вносимые изменения отображаются одновременно во всех копиях размноженного изображения. Если при этом вы сможете свободно пересекать границы изразцов и сразу же будете видеть конечный результат своих действий — залитую этим фоном плоскость, — то ручное сглаживание и шпаклевка стыков становятся вполне реальным делом даже без использования каких-то нестандартных инструментов. Чтобы добиться описанного эффекта, достаточно разделить прямоугольник вашего изображения на четыре четверти (рис. 58, а) и поменять их ме­стами (рис. 58, б). После этого измененное изображение будет, по сути, представлять собой фрагмент плоскости, заполненной исходным изображе­нием — причем фрагмент этот выбран так, что на нем видны углы четырех соседних копий изразца. Разумеется, повторение этого изображения в окне броузера даст совершенно тот же результат, что и повторение исходного (с точностью до сдвига на половину его горизонтального и вертикального размера). Однако теперь края изразца уже не требуют никакой доводки, так как они только что были созданы заново разрезанием «по живому», — а все стыки, которые нужно замазать, теперь, наоборот, находятся внутри. Из всех методов производства бесшовных фонов этот — самый гибкий и удобный, так как он позволяет пользоваться для уничтожения следов стыка любыми инструментами рисования, размывкой, растушевкой и т.
п. Единственное, о чем следует помнить, — это то, что вы должны рабо­тать очень аккуратно в тех областях, где обрабатываемые стыки подходят к новым (после перестановки четвертей) границам изображения (например, на левом конце границы между четвертями 4 и 2 или на верхнем конце границы между четвертями 4 и 3 на рис. 58, 6). Дело в том, что здесь вы можете по неосторожности ввести новые дефекты, которые, опять-таки, станут заметны только после размножения фона на плоскости. Существует и еще один подход к созданию бесшовных фонов — на сей раз с помощью несложной (и во многих программах автоматической) проце­дуры, сплавляющей вместе противоположные края готового изображения. Как и в других случаях, когда нечто можно сделать либо автоматически, либо вручную, автоматизация позволяет быстрее и с меньшими затратами труда получать более устойчивые, хотя в целом менее удовлетворительные (но во многих случаях все же вполне приемлемые) результаты. Чтобы сделать аккуратный шов, этому методу нужен «запас материала» по краям прямоугольной «заплаты». Представьте, что вдоль внешних сторон выделения, которое надлежит превратить в бесшовный фоновый изразец, вырезаны четыре полоски определенной ширины (рис. S9, а). Затем ка­ждая из этих полосок перенесена к внутреннему краю противоположной

Рис. 58

Создание бесшов­ного фона перестановкой чет­вертей. Обратите внимание, как заметны стали в (б) не­стыковки деталей фона между четвертями 4 и 2, 4 и 3

262







Рис. 59

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

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

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

Программирование

За   всем,   что

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

64

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

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

Прогулка по цветовому кругу

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

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

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

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

106

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

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

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

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

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


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

107

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

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

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



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

108

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

Прописные и строчные

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

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

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

Заглавные Первые Буквы Значимых Слов (англ. Initial Caps) заставляют англоязычный заголовок звучать газетно, рекламно, самоуверенно, а в последнее время этот стиль

141

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

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

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

Пропорции

Рис. 6

Золотое сечение (sectio aurea): b так относится к а, как а к сумме а + b (при этом b = 0,618а).

С древних времен золотое сечение счита­ется самой совершенной, гар­моничной, уравновешенной про­порцией

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

Пропорций простота

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

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

84

Рис. 7

Природа подсказы­вает пропорции для больших и для маленьких

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

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

Пространственные отношения

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

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

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

174

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

Особый вид нюансировки размеров и размещения при­меняется для компенсирования всевозможных оптиче­ских иллюзий (стр. 79).

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

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

165

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

Распределение материала

Чем же следует руководство­ваться, разделяя содержимое будущего сайта на отдельные страницы? На первый взгляд ответ очевиден: деление долж­но быть прежде всего логичным, так чтобы каждая страница была посвящена одной теме и чтобы всякая тема занимала

187

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

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

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

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

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

188

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

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

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

Расстановка пробелов

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

• после, а не до запятой, точки, точки с запятой, двоеточия,  вопро-

229

в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;

• до, а не после, открывающей скобки, открывающей кавычки и много­точия в начале предложения;

• и до, и после длинного тире (в английском языке, наоборот, длинное

тире не окружается пробелами).

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

Расстояние

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

Растр

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

60

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

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

Разделители

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

Очень часто вместо заголовков следующих уровней на веб-страницах используются нетекстовые разделители. Академи­ческий HTML предлагает для этой цели тег HR, призванный отделять друг от друга разнородные фрагменты текста. Пы­таясь придать визуальную привлекательность этому, вообще говоря, чисто логическому средству разметки, авторы пер­вого графического броузера Netscape поступили так, как поступил бы на их месте любой дизайнер-любитель: сделали соответствующие этому тегу горизонтальные линейки псев­дотрехмерными — не то выпуклыми, не то вдавленными в плоскость страницы. Создатели MSIE заимствовали этот прием оформления, хотя и в менее «агрессивном» варианте (рис. 48).

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

Рис. 48

Псевдотрехмер­ ность под микроскопом: концы линеек HR в NC (слева) и MSIE (справа)

204

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

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

Размер

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

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

79

даже не размера, а «заметности», «активности») элемента в композиции влияет множество факторов.

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

Размещение

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

85

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

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

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

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

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

Рис. 39

Выравнивание в со­четании со строгой осевой симметрией — классический, «античный» стиль

146

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

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

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

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

Разноуровневые элементы

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

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

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

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

89

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

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

Разновидности одинаковости

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

210

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

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

Развивая тему

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

136

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

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

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

С другой стороны, далеко не всякий рубленый шрифт хорошо сочетается с любым шрифтом с засечками. Кро­ме вашего собственного опыта и художественного чутья, пожалуй, путеводной нитью может служить только знание истории и родословной шрифтов (стр. 126). Так, трудно выдумать что-то более уродливое, чем сочетание вычурной, внутренне несвободной новой антиквы (гарнитуры Бодони, например) с тоже несколько нарочитой, но совсем в ином вкусе конструктивистской Футурой или Авангардом. В то же время нейтральная, достаточно традиционная Гельветика прекрасно сочетается с уравновешенной, классических пропорций переходной антиквой — не зря гарнитуры Таймc и Ариал были выбраны в качестве двух основных шрифтов в операционной системе Windows.

137

Прекрасно чувствуют себя вместе пары гуманистических шрифтов (например, Гарамон и Фрисет, положенные в основу дизайна московского журнала «Internet»), тогда как сочетание шрифтов Мета и Бодони в логотипе сайта www.alphaworks.ibm.com  производит не лучшее впеча­тление именно из-за конфликта «уровня гуманизации» этих шрифтов (рис. 36).

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

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

Режем по живому

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

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

Рынок визуалов

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

289

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

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

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

Рис. 74

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

290

логотипах, стр. 270), дикая природа натуральных текстур обнаруживает свою подлинную красоту.

Сам себе Гутенберг

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

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

12

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

Весь текст книги набирался в консольном текстовом редакторе Aurora (www.ntext.stet ) с одновременным внесением разметки в нотации си­стемы TEX (www.tug.org ). Кроме автоматического контроля право­писания спелл-чекером Ispell 3.1.20 (ftcus- www.cs.uela.edu/ficus-memhers/geoff/ispeSi.btml ) и многократной вычитки автором и корректором, текст был с большой пользой обработан программой Fresh Eye 1.21 (www.kirsanov.com/fresheye/).
Схематические ил­люстрации, обложка и часть цветной вкладки делались в программе CorelXARA 2.0 (www.xnra.com) и, как и снимки экрана, сохранялись в формате EPS. Стилевой TEX-файл с макроопределениями был создан в самом начале работы, так что большая часть верстки делалась парал­лельно с писанием текста и созданием иллюстраций. Для компиляции TEX-файлов использовался emTeX v. 3.14159 [4b] (www.ctan.org/tex-archlve/systeiws/msdos/emtex/ ) со слегка модифицированным форматом на основе LATEX 2.09 (www.latex-project.org); dvi-файлы сразу же переводились в PostScript с помощью dvips 5.76 (www.radicaleye.com/dvips.html). Промежуточные гранки просма­тривались в Aladdin GhostScript 5.10 (www.cs.wise.edu/~ghost/ ) с GSView 2.4 (www.cs.wise.edu/--ghost/gsview/ ) и печатались на принтере HP LaserJet 5 с разрешением 600 dpi; окончательный макет (раз­мером около 1 Мб в виде TEX-файлов и свыше 60 Мб в формате PostScript) был напечатан на принтере Lexmark Optra R+ с разрешением 1200 dpi. Лю­бопытные могут ознакомиться со стилевым TEX-файлом и образцом верст­ки фрагмента книги по адресу www.kirsanov.com/web.design/ .

13

Сборно-панельный сайт

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

45

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

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

• Экземпляры одного блока должны быть абсолютно иден­тичны, за исключением вставок изменяемого содержи­мого (например, текста заголовка в блоке заголовка).

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

• За пределами блоков не должно оставаться никаких «висячих» тегов, за исключением самых необходимых средств оформления текста (тег Р и логические теги типа ЕМ и STRONG).

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

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

46

Рис. 1

«Модульная»   стра­ница на сайте www.oi.com

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

Семантика

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

208

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

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

и операционными системами и, как

 Похожая ситуация с конкурирую­щими платформами и операционными системами и, как следствие, с конкурирующими несовместимыми кодировка­ми наблюдается и в других языках, пользующихся своим собственным алфавитом или даже латинским алфавитом с расширениями. Международная организация по стан­дартизации (International Standards Organization, ISO) по­пыталась навести порядок в восьмибитных кодировках, создав серию кодировок ISO 8859, расширяющих таблицу ASCII для латинских букв с диакритикой и лигатур (кодировка ISO 8859-1), кириллицы (ISO 8859-5), арабского ISO 8859-6), греческого (ISO 8859-7), иврита (ISO 8859-8) и.других алфавитов.

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

18

По аналогии с ASCII первые 32 позиции во второй половине кодировок серии ISO 8859 (коды со 128 по 159 включи­тельно) объявлены «неиспользуемыми». На сей раз, однако, производители программ решили обойти этот запрет. Так, большинство шрифтов для Windows соответствуют кодиров­ке ISO 8859-1 начиная с позиции 160 до конца таблицы, но в диапазоне 128—159 размещают некоторые дополнительные символы (в частности, длинное тире и символ «торговой марки», стр. 233). Поскольку HTML обязан соответство­вать стандарту Latin-1 (а начиная с версии 4 — Unicode), числовые подстановки (стр. 29) не могут ссылаться на коды из этого диапазона.

Шрифт

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

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

166

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

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

 Чем крупнее кегль надписи и чем более важную роль она играет на странице, тем более вероятно, что ей потребуется основательная нюансировка. Два самых распространенных вида такой нюансировки — трекинг и кернинг (стр. 141). В логотипах и других особо ответственных надписях иногда приходится вручную перерисовывать некоторые буквы или их части, не укладывающиеся в общий стиль (см. историю переделки буквы Q в логотипе Quiotix, стр. 317).

175

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

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

Именно эта идея лежит в основе стандартных средств вы­бора шрифта в HTML и CSS. Значением атрибута face тега FONT может быть одно или несколько наименований шрифтов, разделенных запятыми. Броузер, сканируя эту строку, пытается найти хотя бы один из заказанных шриф­тов и включает его для вывода текста документа. Если ни один из них не найден (или если никаких указаний относи­тельно шрифтов в документе не содержится), используется

219

стандартный системный шрифт (на большинстве операци­онных систем это Times Roman).

CSS уровня 1 пользуется той же схемой: свойству font-family также можно присвоить в качестве значения строку, состоящую из имен шрифтов, — за тем исключением, что кроме названий конкретных гарнитур можно как один из вариантов (обычно на последнем месте в списке) указать родовой признак нужного шрифта — serif, sans-serif, monospace и т.

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

Хотя у рубленых шрифтов есть важное преимущество читабельности в малых кеглях и хорошей сочетаемо­сти с любой графикой, вполне приемлемы в логотипах и простые по рисунку и прозрачные для восприятия (стр. 129) шрифты с засечками. Нужно лишь учитывать, что эти последние налагают более суровые ограничения на графическую часть знака: чтобы контраст между тек­стом и графикой звучал достаточно отчетливо, форма не должна содержать сложных криволинейных контуров и мелких деталей (рис. 66). С рублеными же шриф­тами требование это не столь категорично, и нередко можно видеть даже примеры «перевернутого» контраста, когда формы графической части кажутся явно сложнее очертаний рубленых букв (как в логотипе Lucent на рис. 64, в котором из-за насыщенности графики мел­кими деталями никакой шрифт с засечками не смог бы ужиться).

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

Шрифт и текст

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

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

123

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

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

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

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

124

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

Шрифты и названия

 Согласно законам США, авторское право может защищать конкретный шрифт (font) в векторном формате, приравниваемый по статусу к компьютерной программе. Однако эта защита не распростра­няется на то начертание (typeface) букв, которое используется в шрифте. Это значит, что характерные графические особенности, скажем, шрифтов Тайме или Бодони (так же как, собственно говоря, и форма букв алфави­та) не принадлежат никому. Любой желающий может перерисовать буквы какого-нибудь известного шрифта, записать их в шрифтовой файл и про­давать под любым именем.

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

(а)

(б)

Рис. 36

Какое из этих двух шрифтовых сочетании, на ваш взгляд, более гармонично?

138

копировали буквы друг у друга, а самостоятельно рисовали их по образцам французского типографа XVI века Клода Гарамона). Другие фирмы неред­ко выдумывают для своих шрифтов имена новые, но все же чем-то схожие с оригинальными — так возникают Opus вместо Optima, Freeset вместо Frutiger и даже Borjomi вместо Bodoni.

Шрифты и время.

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

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

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

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

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

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

128

Рис. 29

Гарнитура Гарамон (Garamond) — характерный представитель гуманистиче­ской антиквы

(a)



(б)

Рис. 30

Форма засечек (а, гарнитура Лазурского) и сме­щение наплывов на округлых частях букв (6, шрифт Adobe Jenson) в шрифтах гуманисти­ческой антиквы объясняются подражанием рукописному по­черку наклонным пером с плос­ким концом

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

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


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

Принято различать ранний и поздний периоды развития классической ан­тиквы. В ранних образцах этого стиля контраст толщин штрихов ниже, а общий очерк букв небрежнее и ближе к рукописным оригиналам. Со временем формы букв становятся строже, засечки укорачиваются, контраст повышается, исчезает несимметричное расположение наплывов. Заглавные буквы становятся уже, теряют свои «античные» квадратные пропорции. Особенно заметны изменения у курсивных шрифтов (которые в ту эпоху еще не составляли пару прямому начертанию, как сейчас, а были само­стоятельными шрифтами). Ранние гуманистические курсивы отличаются небольшим наклоном букв и общей открытостью форм (по мотивам этих шрифтов в XX веке создан шрифт Zapf Chancery). Co временем формы курсива становятся вычурнее, закрытее и уже, а наклон букв повышается; для некоторых из них характерен разный наклон у строчных и прописных курсивных букв (например, в Monotype Garamond Italic).

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

129



Рис. 31

Гарнитура Таймс (Times Roman) — самый из­вестный и самый употребимый из шрифтов переходной анти­квы

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

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

Символ и слово

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

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

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

269

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

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

Символы и метафоры

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

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

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







Рис. 50

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

www.revo.com

212

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

Изучение любого компьютерного языка  начинается

Изучение любого компьютерного языка  начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки Зрения  язык  HTML  крайне  прост,  чтобы  не сказать —
28
примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые теги (tags).
Важно понимать различие между тегами — единицами разметки и элементами — составными частями документа. Теги, во-первых, разделяют исходный неформатированный текст документа на элементы, а во-вторых, создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты). Со­ответственно, и сами теги бывают двух видов — парные, охватывающие какой-то фрагмент текста и/или другие теги, и стоящие в одиночестве непарные:
<парный-тег>текст или другие теги</парный-тег> <непарный-тег>
Парные теги должны вкладываться друг в друга без пересе­чений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А. Особый подкласс составляют парные теги с игнорируемым содержимым. Например, стандарт предписывает броузеру игнорировать все, что распо­ложено между тегом OBJECT и парным ему закрывающим тегом. С другой стороны, встретив любой неизвестный ему тег, броузер интерпретирует со­держимое этого тега как обычно, не обращая внимания на «скобки» парно­го тега. В результате новые версии броузеров, поддерживающие тег OBJECT, увидят именно этот тег и его атрибуты, а более старые версии, наоборот, отреагируют на его «заместитель» — текст или другие теги, вставленные внутрь парного тега OBJECT.
Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:
<тег атрибут1="значение" атрибут2="значение" ...>
Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами. В большинстве случаев атрибуты являются необязатель­ными, и в их отсутствие интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка. Существуют атрибуты, не требующие присвоения значения, сам факт присутствия которых просто включает какой-то режим работы данного тега. Согласно стандарту, кавычки вокруг значения атрибута обязательны в тех случа­ях, когда значение это содержит какие-либо символы кроме букв, цифр, точки или дефиса; однако если вас интересует совместимость с XML, то лучше пользоваться кавычка­ми всегда.

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

Системы представления цвета

 Самая распро­страненная и понятная компьютеру без перевода система RGB (от англ. «Red, Green, Blue», т. е. «красный, зеленый, синий») — не единственная. Если цвет компьютерного экрана изменяется от черного (отсутствие цвета) до бе­лого (максимальная яркость всех трех составляющих), то на бумаге, наоборот, отсутствию цвета соответствует бе­лый, а смешению максимального количества красок — черный (точнее, темно-бурый). Поэтому вместо системы RGB, называемой аддитивной («складывающей»), при под­готовке к печати изображение должно быть переведено в субтрактивную («вычитающую») систему, использующую противоположные исходным цвета — противоположный красному голубой, противоположный зеленому пурпурный и противоположный синему желтый. Чтобы расширить диапазон цветовоспроизведения, к этим трем компонентам добавляется четвертый — черный, и вся система получает наименование CMYK («Cyan, Magenta, Yellow, blacK»; чер­ный обозначается в этой аббревиатуре буквой К, чтобы не путать его с синим). Таким образом, для подготовленного к печати изображения в системе CMYK нужно 4 байта на пиксел, и далеко не все растровые форматы способны хра­нить такое изображение (чаще всего для этого используется формат TIFF).

В компьютерных графических программах применяется еще одна система представления цвета — система HSV (от англ. Hue-Saturation-Value, тон-насыщенность-яркость; эту же систему называют иногда HSB, Hue-Saturation-Brightness, или HLS, Hue-Lightness-Saturation). Эта система представляет собой абстракцию, моделирующую не физические свойства цвета, а его восприятие человеком. Растровые форматы не используют систему НSVдля хранения изображений, но с ее помощью очень удобно подбирать цвет при практической работе (стр. 103).

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

Сколько натикало?

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

276

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

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

Статистика показывает, что ротация баннеров (подстановка новой кар­тинки при каждом запросе страницы с сервера) повышает эффективность рекламы по сравнению со статическими баннерами, висящими на одном и том же месте страницы в течение дней и недель. В то же время владелец сайта не имеет возможности динамически менять HTML-код своей стра­ницы, так чтобы при каждой загрузке страницы на ней появлялся новый, случайно выбранный из общего репертуара баннер, — тем более что сами файлы баннеров хранятся на сервере службы обмена.
И хотя атрибут src тега IMG может указывать на любой URL, в том числе расположенный и на другом сервере сети, адреса всех входящих в ротацию баннеров известны только службе обмена (собственно говоря, каждый входящий в систему сайт может в любой момент изменить набор своих баннеров). Для ротации рекламы на баннерном сервере устанавливается специальная CGI-программа (стр. 71), работающая с текущими базами данных банне­ров, рекламодателей и участвующих в системе сайтов. Владельцу страницы достаточно прописать в соответствующем теге IMG особый URL, комби­нирующий адрес сервера баннерной службы, обращение к CGI-программе на этом сервере и код сайта-участника, по которому программа узнает, из какой тематической группы выбирать (по случайному алгоритму) баннер и чей счетчик показов увеличивать. Это значит, в частности, что загруз­ка страницы с рекламой может замедляться из-за перегрузки баннерного сервера. Поэтому все сколько-нибудь крупные контент-сайты предпочи­тают устанавливать на своих серверах собственные системы управления рекламой, позволяющие минимизировать задержки, полностью контроли­ровать всю показываемую на сайте рекламу, прописывать свой alt-текст для каждого баннера и включать в ротацию составные HTML-баннеры (стр. 285).

Главным мерилом эффективности баннера считается отно­шение числа посетителей, щелкнувших по нему, к общему

числу видевших страницу с этим баннером. Эта величи­на, обозначаемая по-английски аббревиатурой CTR (click-through ratio, что можно было бы перевести на русский словом «проклик»), поддается объективному измерению: по статистике сервера нетрудно подсчитать, сколько копий баннера было перекачано пользователям и сколько раз произошел переход по соответствующей ссылке. Оплата ре­кламы, тем не менее, рассчитывается обычно в зависимости от общего количества показов баннера (цены сейчас лежат в диапазоне от 3 до 50 долларов за тысячу показов в за­висимости от степени адресности рекламы). Лишь изредка цена привязывается не к количеству показов, а к количеству переходов по баннерной ссылке или даже к количеству тех людей, которые, попав через баннер на сайт рекламодателя, заказали там его продукт или услугу.



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

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

Скорей любите нас

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

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

Конечно, большинство корпоративных сайтов содержит ин­формацию не только о самой фирме, но и о ее продуктах —

182

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

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

Скульптура или барельеф

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

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

Рис. 75

«Скульптурная» (а) и «барельефная» (6) разно­видности трехмерных изобра­жений

294

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

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

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

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

295

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

Слева при входе

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

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

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

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

280

предполагаемую аудиторию, традиционный дизайнерский Я стиль фирмы-заказчика. 1

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

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

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



281

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

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

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



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



1



2



3



4



5



6



7



8



Рис. 68

Типичный трех-частный анимированный бан­нер. Кадры с 1 по 7 — завязка, привлечение внимания: трудно удержаться и не проследить с сочувствием за страданиями симпатичного персонажа. Вто­рой этап (кадр 8) — заявление основной темы: оказывается, речь идет о некоем продукте, который поможет вам следить за многочисленными конферен­циями и выставками, чтобы они не заставали вас врас­плох. Наконец, финал баннера (кадр 9) решен в традиционном стиле: мы видим полное назва­ние продукта, имя разработ­чика (компания IBM) и, само собой, неизбежное «click here»...

282

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

Слишком декоративные шрифты

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

135

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

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

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

Смена поколений

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

Собственная гордость

Как я уже упоминал, важ­нейшим мерилом эффективности баннера повсеместно

Рис. 69

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

1

2

3

4

5

Рис. 70

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

284

считается величина CTR. Однако представления о приоритетах в создании рекламы и о роли ее в деятельности 1 фирмы сильно отличаются на Западе и в России. Если 1 западные фирмы — как те, что у всех на слуху, так и мало 1 кому известные — на одном уровне важности с CTR ставят 1 имиджевый компонент, впечатывание (то, что по-английски 1 называется «branding») дизайн-образа и названия фирмы 1 в сознание даже тех, кто не собирается щелкать мышью на ж баннере, то в русскоязычной рекламе пока что преобладает чисто спортивный интерес повышения проклика любыми средствами.

Этому неявно способствуют и особенности русскоязычной аудитории. Средний пользователь Интернета в нашей стране чаще выходит в сеть, чтобы развлечься, почитать что-нибудь интересное или пообщаться с друзьями по IRC или ICQ, чем с какой-то конкретной деловой целью. Поэтому и увлечь его в сторону интересным баннером намного проще, чем пользователя западного. Имеет значение также то, что круг производителей и потребителей интернетовской рекламы в нашей стране пока еще очень узок — в русском Интернете, как в большой деревне, все знают всех, и очень часто щелчок по баннеру означает не заинтересованность потенциального клиента, а ревнивый интерес конкурента. Поэтому нет ничего удивительного в том, что средняя величина CTR, на Западе составляющая 2—3%, в русском Интернете ближе к 4%, — и не редкость баннеры, проклик которых у варящейся в собственном соку русскоязычной аудитории зашкаливает за десять и даже двадцать процентов.

Рис. 71

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

Сочетаемость цветов

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

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

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

111

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

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

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

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

112



Рис. 20

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



Рис. 21

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

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



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

Вы не хотите тратить время на поиски необычных, запоминающихся цве­тов? Простота ваших страниц не требует неординарных цветовых решений? Тогда примите к сведению совет дизайнера Роджера Блэка, отлитый в че­канную формулу: «The First Color is White, The Second Color is Black, The Third Color is Red». Все действительно настолько просто: самый яркий и самый темный из всех возможных цветов создают ощущение тесно­го единства и максимального контраста, а если вам нужен третий цвет — красный великолепно сочетается и с черным, и с белым. Противоположностью такого минималистского подхода является особый, нарочито пестрый цветовой стиль, соединяющий максимальное количество максимально ярких и насыщенных цветов. Известно, что всевозможные ра­дужные, «попугайские» заливки — один из коронных приемов дизайнеров-любителей. Однако этот мотив можно встретить и во вполне профессио­нальных композициях (таких как, например, логотип фирмы Fractal Design, рис. 21 на цветной вкладке), где он обычно уравновешивается максималь­ной цветовой сдержанностью в других частях композиции.

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

113

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

Соглашения

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

4

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

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

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

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

5

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

Согласование кодировок

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

К сожалению, этой возможностью пользуются далеко не все серверы русского Интернета. Часто, попав на стра­ницу по ссылке с другого сайта, приходится вручную переключать кодировку отображения командой в меню броузера. (Очевидно, что веб-серверы вряд ли игнориро­вали бы необходимость указывать кодировку отсылаемых документов, если бы броузеры не позволяли переключать кодировки пользователю.) Автор документа может эмулиро­вать HTTP-заголовок прямо в HTML с помощью тега МЕТА, заставляя броузер переключаться в нужную кодировку без перенастройки сервера.

34

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

Спецсимволы

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

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

231

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

• Длинное тире (англ. em dash) как знак препинания не имеет ничего общего с дефисом (hyphen) — в идеале оно должно выглядеть именно так, как в этом предложении. Из кодировок кириллицы (стр. 16) длинное тире есть только у Unicode, CP1251 и кодировки Макинтоша, поэтому им нельзя пользоваться в текстах, автоматически перекодируемых из/в КОИ8 или СР866. Хотя в Windows почти все шрифты (как с кириллицей, так и без) имеют длинное тире по адресу 151 (шестнадцатеричное 97), пользоваться им на законных основаниях нельзя и в английских текстах — в официально предписанной для HTML кодировке Latin-1 (как и в Unicode) это знакоместо объявлено «неиспользуемым» (стр. 17).
Увы, пока что единственный стопроцентно надежный способ воспроизвести длинное тире в HTML-тексте — набрать два или три дефиса подряд: --  или ---.

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

• То же самое можно сказать и о коротком тире (англ. еп dash). В русской типографской традиции этого символа не было, но в английском наборе им принято пользо­ваться для численных интервалов, например: 1998-2000 (короткое тире не только чуть короче длинного, но и приподнято над строкой до середины высоты ци­фровых символов). В Windows большинство шрифтов имеют этот символ по адресу 150 (шестнадцатеричное 96); в HTML, однако, его приходится опять-таки имити­ровать одиночным или двойным дефисом. Надо сказать, что в HTML 4 уже предусмотрены символь­ные коды &mdash; и &ndash; для длинного и короткого тире соответственно. Однако ссылаются они на кодо­вые позиции этих символов в Unicode — и увы, ни MSIE, ни NC в четвертых версиях еще и не думают эти коды поддерживать (хотя MSIE понимает их числовые Unicode-подстановки &#8212; и &#8211;).

232

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



К сожалению, в HTML вам вряд ли удастся щегольнуть знанием всех кавычечных тонкостей. В Latin-1 предусмо­трены только французские «елочки», для вызова которых стандартный HTML имеет мнемонические подстановки &laquo; и &raquo;. Однако на практике этими кодами нельзя пользоваться именно там, где они больше всего нужны, — в русском языке: из всех кодировок кирилли­цы «лапки» есть только в Unicode, CP1251 и в кодировке Макинтоша. И хотя в теории броузер обязан относить мнемонические подстановки к набору символов язы­ка HTML (т. е. Latin-1), а не к текущей кодировке документа, на практике мысль украсить русский текст «елочками» можно оставить до тех пор, пока все бро­узеры не научатся правильно разбираться с кодировками и мнемоническими подстановками.

Еще печальнее ситуация с немецкими и английскими кавычками. Их нет даже в Latin-1, и надеяться оста­ется лишь на Unicode, — точнее, на ссылающиеся на символы Unicode подстановки &bdquo; („), &ldquo; ("), &rdquo; ("), &lsquo; (') и &rsquo; ('). Эти символьные коды введены в HTML 4, но еще не поддерживаются графическими броузерами.

Кстати, имейте в виду, что в английском языке точки и запятые при­нято вносить внутрь кавычек, даже если по смыслу они должны стоять снаружи: "так," а не "так".

• Сравнительно неплохо обстоят дела с символами автор­ского права (©) и параграфа (§) — они есть и в Latin-1, и в большинстве шрифтов (как с кириллицей, так и без). Для их вызова из HTML можно пользоваться

233

символьными кодами &сору; и &sect; соответственно. Напротив, символ торговой марки (™), также присут­ствующий в большинстве шрифтов, в Latin-1 отсут­ствует, так что вместо &trade; предпочтительнее писать <SUP><SMALL>tm</SMALL></SUP>.

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

Среды и доступность

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

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

Второй главный принцип доступности — это поддержка текстового эквивалента для всей информации страницы.

35

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

Ссылки

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

225

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

Общепринятые визуальные атрибуты ссылки — измененный по отношению к основному тексту цвет (о принципах выбора которого мы говорили на стр. 113) и подчеркивание — явно дублируют друг друга. И хотя такое двойное акцентирование помогает ориентироваться в текстовых ссылках быстро и почти подсознательно, подчеркивание все же не стало в массо­вом сознании обязательным признаком гипертекстовой ссылки. Косвенным подтверждением этому может служить тот факт, что в графических ссылках (например, на кнопках навигации) текст почти никогда не снабжается под­черкиванием. Поэтому в последнее время появляется все больше сайтов, отключающих с помощью CSS подчеркивание и для текстовых ссылок (для этого в стилевой спецификации достаточно написать A {text-decoration: none}).

Ссылки и привязки

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

Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name того же самого тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #. Для документов, генерируемых в ответ на запрос программой на сервере (стр. 71), прямо в адресе можно передавать параметры вызова (например, строку поиска); обычно такие параметры, записанные в виде переменная=значение, отделяются от URL вызываемой программы символом ?.

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

Ступеньки ригидности

Интересно  проследить,  как  меняется отношение страницы к описанным ограничениям формата в зависимости от назначения сайта и стиля дизайна. Для страниц, оформленных в строгом академическом стиле (с  использованием  только  тегов  HTML  2.0,  стр.   150), размеры окна вообще не имеют значения, так как HTML 2.0 просто не позволяет задавать размеры или расположение чего бы то ни было в пикселах (в нем нет даже атрибутов height  и  width  для  указания   размеров  изображений). В отсутствие таблиц и других приемов позиционирования материала колонка текста верстается враспор от левого поля до правого (и, естественно, переверстывается при изменении ширины  окна).   Иными  словами,  академический   HTML легко приспосабливается к любому разрешению экрана — причем без малейших усилий со стороны автора. Следующая  ступень  после  академического  стиля  —  так называемый «резиновый» дизайн, при котором для разме­щения текста и изображений уже используются таблицы (стр. 234), но ширина этих таблиц задана не в пикселах, а в процентах от ширины окна. Это позволяет оставлять вокруг текста поля, значительно облегчающие чтение, вер­стать текст в несколько колонок и достаточно свободно размещать графику. Главное же достоинство «резиновой» страницы — то, что она позволяет столбцам текста свободно

198

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

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

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

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

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

Сверим часы

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

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

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

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

7

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

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

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

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

8

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

Systema naturae

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

Основную массу шрифтов можно разделить на две большие группы: шрифты с засечками (англ. serifs) и без засечек, или рубленые (англ. sans serifs; более подробно об исторической

125

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

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

Таблицы

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

Таблицы и распорки

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

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

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

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

235

поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, вы начнете следующую «строку», прилегающую верхним краем самой высокой из картинок к нижнему краю предыдущей «строки». Собственно говоря, поведение графических вставок при этом ничем не отличается от поведения букв в абзаце за тем исключением, что броузер может сам перенести такую «строку» после любой «буквы» (если она грозит вылезти по ширине за край окна или за границу отведенной для нее ячейки); предотвратить перенос можно, заключив строку картинок внутрь <NOBR> ... </NOBR>.

---

---