Серия «Библиотека дизайнера»

Дмитрий Кирсанов

Веб-дизайн: книга Дмитрия Кирсанова

Главный редактор Александр ГалуновДизайн книги, иллюстрации Дмитрий КирсановВерстка, корректура, индекс Алина Кирсанова

К43 Кирсанов Д.Веб-дизайн: книга Дмитрия Кирсанова. - СПб: Символ-Плюс, 2004. - 376 с: цв. ил.

ISBN 5-93286-003-0

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

ISBN 5-93286-003-0

© Дмитрий Кирсанов, 1999© Издательство Символ-Плюс, 1999

Все права на данное издание защищены Законодательством РФ, включая право на полное или частичноевоспроизведение в любой форме. Все товарные знаки или зарегистрированные товарные знаки,упоминаемые в настоящем издании, являются собственностью соответствующих фирм.

Издательство «Символ-Плюс». 199034, Санкт-Петербург, 16 линия, д. 7,тел. (812) 324-5353, edit@symbol.ru. Лицензия ЛП N 000054 от 25.12.98.

Налоговая льгота - общероссийский классификатор продукцииОК 005-93, том 2; 953000 - книги и брошюры.

Подписано в печать 19.11.2004. Формат 70х90*дв .Печать офсетная. Объем 23 печ. л. Доп. тираж 2000 экз. Заказ N 642.

Отпечатано с готовых диапозитивов в ГУП «Типография «Наука»199034, Санкт-Петербург, 9 линия, 12.

о г л а * • 1

1 р б Д И С Л О В И 6 (1) Что здесь есть и чего здесь нет (1) Примеры (2)Соглашения (3) Пара слов о словах (4) О в а с (5) Сверим часы (6) Каквыбрать дизайнера (8) Обо м н е (9) Почему эта тема? (10) Сам себеГутенберг (11) Книга как технология (12)

Техминимум.(13)1.1

I.2

L3

1,4

i.£

1,6

К О Д И Р О В К И Т е К С Т а (14) ASCII (15) Однобайтовые кодиров-ки (15) Так и срослось (17) Семейство 8859 (17) Двухбайтовые коди-ровки (18) ISO 10646 и UTF-8 (18)

I I V I L (19) История (19) В начале был SGML (19) Прикладная философия (21)Золотой век (22) HTML плюс (23) Идолы рынка (23) Бяки и буки (24) Теже и Microsoft (25) Три, четыре... (26) Синтаксис (27) Подстановки (28)Минимальный документ (29) Текстовая разметка (29) Ссылкии привязки (30) Формы (30) Изображения и объекты (31)Таблицы (32) Фреймы (32) Национальные особенности (32)Согласование кодировок (33) Среды и доступность (34) Доступ-ность: таблицы (35) Как писать alt-тексты (35) Доступность: изображения-карты (37) Мета-данные и поиск (38) Мертвая зона (38) Сухой ос-таток (39)

C S S (40) Принципы (41) Возможности (42) Модульный HTML (43) Режемпо живому (44) Сборно-панельный сайт (44) Например (46)

X M L (47) Синтаксис (48) DTD (48) Уровни соответствия (50) Конверсия (51)Надстройки (52) XLL (52) XSL (53)

" р а ф И К а (55) Вектор (56) Вектор в Интернете (57) 3D (59) Растр (59) Навсе четыре стороны (60) Цвета (60) Палитры (61) Системы представленияцвета (62)

П р О Г р а М М И р О В а Н И е (63) JavaScript (64) ДинамическийHTML (65) Модульные технологии (67) Динамические стра-ницы (71)

Основы дизайна.(73)

ff.2

Как учиться дизайну (75) Дизайн и «чужое творчество» (76) Материалыи инструменты (77)

Пространственные отношения (78> раз-м е р (78) Относительность размера (79) Форма и размер (79) Искусствовыравнивания текста (80) Цвет и размер (81) Текстура и размер (81) Про-порции (82) Золото и пластмасса (82) Пропорций простота (83) Микро-пропорции (84) Р а з м е щ е н и е (84) Одноуровневые элементы (85) Разно-уровневые элементы (88) Плотность (89) Пол и характер (89) Плотностьтекста (90) В нужное время и в нужном месте (90)

Ф О р М 21 (91) Прямые (92) Дизайн Пизанской башни (94) Прямоугольни-ки (94) Круги и закругления (97) Кривые Безье (99) Бесфор-менность (100)

n,i

il • GW

11.3 Ц в е Т (101) Как устроен цвет (103) Прогулка по цветовому кругу (105)Ну и что? (108) Главные цвета (108) Восприятие цвета (109) Сочета-емость цветов (ПО) Текст и фон (113)

11.4 Г б К С Т у р Ы (116) Плоский цвет (117) Геометрические текстуры (118)Пиксельные текстуры (119) Фотографические текстуры (119)Материальные текстуры (120)

11.5 Ш р И С ) З Т И Т е К С Т (122) Элементы шрифта (124) Гарнитура, начер-тание, шрифт (124) Systema naturae (124) Виды начертаний (125) Шрифтыи время (126) Классическая антиква (127) Переходные шрифты (129) Но-вая антиква (129) Кларендон (130) Новые рубленые (131) Маятник гуманиз-ма (131) Подбор шрифтов (133) Единство противоположностей (134)Слишком декоративные шрифты (134) Развивая тему (135) Шрифты и на-звания (137) Параметры набора (138) Кегль (138) Прописные и строч-ные (140) Интервалы (141) Выравнивание и отступы (144) Размещение (145)Чья случайность лучше? (146) Цвет (147) Текст как текстура (148)

Ихв Е Д И Н С Т В О (149) Content is king (150) Академический стиль (150) В полныйрост (153)

11*7 Ь Э Л Э Н С (155) Центр масс системы (156) Правило рычага (157)

11*8 1 \ О Н Т | Э З С Т (159) Контраст — это продолжение единства другими сред-ствами (160) Одномерный контраст (160) Многомерный кон-траст (161) Аспекты контраста 1̂63)

11,9 Д И Н Э М И К Э (167) Динамика явная (168) Ветер по Гауссу (169) Динамикасовсем явная (169) Динамика неявная (170)

п.ю Н ю а н с и р о в к а (I72)

Дизайн веб-сайтов.Преграды и препоны (176) От общего к частному (178)

III.1 Г И П Ы С Э Й Т О В (179) Первый шаг (179) В мире .org (180) Скорей любитенас (181) Бесплатный сыр (182)

!!§,2 У С Т Р О Й С Т В О С а Й Т а (184) Неупорядоченный континуум (184)Топология сайта (185) Распределение материала (186) Фреймыи окна (188) Первая страница (190) Всплеск и вскрик (191)

Ш.З Ф О р М а Т С Т р а Н И Ц Ы (192) The frame of reference (193) За-метки о полях (194) Во первых строках (195) У голубого экрана (196)Если тебе дадут линованную бумагу — пиши поперек (196) Ступенькиригидности (197)

МЛ З а Г Л а В И Я И З а Г О Л О В К И (199) Заглавие (199) Заголов-к и : логика (200) Заголовки: дизайн (201) Разделители (203)Баннеры (204)

onruii твштП 5 Н а В И Г а Ц И Я (205) Общий обзор (206) Семантика (207) Дизайн (208)

Разновидности одинаковости (209) По ту сторону кнопок (210) Симво-лы и метафоры (210) Особые случаи (212) Д и н а м и ч е с к а я навига-ция (213)

311.6 Б Л О К И Т е К С Т а (215) Кегль (216) Ш р и ф т (218) Коренные шрифты (220)Все шрифты ношу с собой (221) Осторожно: кириллица (222) Цвет (223)С с ы л к и (224) Д р у г и е параметры (225) When al l e lse fa i ls (227)Правила н а б о р а текстов (228) Расстановка пробелов (228) Неразры-ваемые пробелы (229) Текстовые выделения (230) Спецсимволы (230)

IH.7 П О З И Ц И О Н И р О В а Н И е (233> Т а б л и ц ы и р а с п о р к и (234) Дур-ная наследственность (235) Двойное дно (236) Белое место (237) Фэйсомоб тэйбл (238) П о з и ц и о н и р о в а н и е в CSS (240)

Веб-графика.IV.1 Г е Х Н И К а (244) Палитра и диффузия (245) Цветовые границы (247)

Экранный анти-алиасинг (249) Из-под пятницы суббота (249) Пиксель-н ы е э ф ф е к т ы (251) Оптимизация (252) JPEG (252) GIF (253) Взбол-тать и настоять (254) Чудное мгновенье (255) B low up (256)

IV.2 О у Н К Ц И И (257) Выставочная графика (257) Фоны (259) Как не надоделать фон (259) Прогладить с изнанки (261) Одномерные фоны (262)Одним куском (263) Логотипы (264) Диалектика формы (266) На единицуплощади (267) Про что картинка? (267) Символ и слово (268) Аспектылоготипа (269) Баннеры (275) Сколько натикало? (275) Форматы (277)В нужное время и в нужном месте (277) Слева при входе (279) Большежизни (279) Пьеса в трех действиях (280) В начале было что-то (282)Собственная гордость (283) Удар ниже пояса (284) Смена поколений (286)На килограмм живого веса (286) Acknowledgements (287) В и з у а л (288)Рынок визуалов (288)

IV.3 П р И в М Ы (290) Т р е х м е р н о с т ь (290) Император иллюзий (291) Пластмассо-вый призрак (292) Скульптура или барельеф (293) И с к у с с т в о и с к а ж е -ний (295) Что упало, то пропало (295) Нетекстурирующие эффекты (296)Текстурирующие эффекты (299)

Примеры.V.1 W W W - k i r S a n O V - C O I T l (304) Л о г о т и п (304) Цветовая с х е -

ма (307) Входные цвета (307) Информационные цвета (309) Перваястраница (310) Карты на стол (310) Навигация (312)

V.2 W W W . C J U I O f i X . c o m (314) Логотип OlS) Первая страница (317)Внутренние с т р а н и ц ы (320) Miscel lanea (321)

¥ , з Г а л е р е я огз)

И н д е к с (337)

предисловие •

Предлагаемая вашему вниманию &#%?|Цшгт %&S I %Jf SS Ir l IS?

книга задумывалась не как практическое руководство по

веб-дизайну, а скорее как учебник общего дизайна на част-

ном материале веб-сайтов. Иначе говоря, я пишу о том, как

сделать что-то (в том числе сайт) красиво, а не о том, как

что-то сделать.

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

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

должен свободно ориентироваться в существующих дизайнерских техно-

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

«как» сильно влияет на «что»: компьютер не только великолепно спра-

вляется с техникой традиционного дизайна, но и открывает множество

новых эффектов, новых возможностей, новых способов комбинирования

материала. Поэтому дизайнер, не имеющий представления о специфиче-

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

кон куре нтоспособн ое.

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

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

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

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

мах, а исключительно на моем собственном опыте практического осво-

ения, теоретического осмысления и последующего преподавания основ

дизайна. Три центральные главы книги во многом построены на

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

w w w . w e b r e f e r o i t c e . c o m / d i a b / , — и, разумеется, на основе читатель-

ских откликов, вопросов, поправок и дополнений к этим статьям. Конечно,

сюжет этого произведения не пытается повторять все зигзаги истории мо-

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

как можно точнее соответствовал сложившейся у меня системе понятий

и оценок.

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

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

поэтому при внимательном анализе из нее можно извлечьочень много поучительного.

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

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

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

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

предисловие • з

4 • t ip н е

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

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

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

поискать его.

предисловие • 5Одно из главных технических понятий в этой книге — компьютернаяпрограмма для путешествий с сайта на сайт и просмотра веб-страниц —ПО-руССКИ ПИШеТСЯ ДВОЯКО: браузер ЛИбО броузер. Я ПрИДерЖИВаЮСЬ ВТОрОГО брадилка или бродилка?

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

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

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

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

6 • iif л о в и е

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

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

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

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

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

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

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

8 • up э в и е

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1 2 •

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

Весь текст книги набирался в консольном текстовом редакторе Aurora(www,i i tent*net) с одновременным внесением разметки в нотации си-стемы ТЕХ (www.tug .org) . Кроме автоматического контроля право-писания спелл-чекером Ispell 3.1.20 (f icy s»www»cs«yeia»eelij/f l eys-ritemfeers/geoff/ispelLittrrtl) и многократной вычитки автором икорректором, текст был с большой пользой обработан программойFresh Eye 1.21 (wy ; . е/). Схематические ил-люстрации, обложка и часть цветной вкладки делались в программеCorelXARA 2.0 ( w w w s x a r a , c o r i i ) и, как и снимки экрана, сохранялисьв формате EPS. Стилевой Т^Х-файл с макроопределениями был созданв самом начале работы, так что большая часть верстки делалась парал-лельно с писанием текста и созданием иллюстраций. Для компиляцииТ^Х-файлов использовался emTeX v. 3.14159 [4b] (www*etan,org/tex«archive/sys tems/msc los/emtex/) со слегка модифицированнымформатом на основе Ш£Х 2.09 ( w w w J a t e x - p r o J e c t . o r g ) ; dvi-файлы сразу же переводились в PostScript с помощью dvips 5.76(www*radlicaleye*com/dlv!ps«html). Промежуточные гранки просма-тривались в Aladdin GhostScript 5.10 (www«cs»wisc.»€?dti/' ivgh0st/)с GSView 2.4 (www»cs«wisc.edu/-'git0st/g$view/) и печатались напринтере HP LaserJet 5 с разрешением 600 dpi; окончательный макет (раз-мером около 1 Мб в виде TgX-файлов и свыше 60 Мб в формате PostScript)был напечатан на принтере Lexmark Optra R+ с разрешением 1200 dpi. Лю-бопытные могут ознакомиться со стилевым TgX-файлом и образцом верст-ки фрагмента книги по адресу www«kir$atiov*com/web»desigfi/.

Техr n a s a I И13

M V MШ ШШ Ш шш I К сожалению, веб-дизайн еще

^ ^ н е достиг той ступени развития, на которой техниче-

ские средства реализации дизайнерских идей отошли бы

на второй план. Веб-дизайнер обязан не только свободно

ориентироваться во всем спектре технологий современного

Интернета, но и сам следить за тем, чтобы его сайты

отвечали духу и букве соответствующих стандартов и спе-

цификаций.

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

мум.^ ^ н е достиг той ступени р<не достиг той ступени развития, на которой техниче-

К сожалению, веб-дизайн еще

мини-

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

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

Кодировки текста. Отказавшись от пре-

тендующего на всеохватность изложения «от теории к прак-

тике» и «от простого к сложному», я сразу же попал во

власть встречных течений, то и дело отбрасывавших меня

назад: «Об этом писать нельзя, пока не объяснено то, а перед

этим обязательно нужно рассказать и о том».

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

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

1.1.2 код г сета И15

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

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

Однако прежде чем переходить к восьмибитным коди- A S C I Iровкам, нужно сказать несколько слов о кодировке подназванием ASCII (American Standard Code for InformationInterchange) — кодировке также восьмибитной, но охваты-вающей только 128 символов и потому довольствующейсясемью значимыми битами (старший, восьмой бит при этомвсегда равен нулю). Важность этой кодировки, включающейлатинский алфавит, цифры и основные знаки пунктуации,необычайно велика: почти все остальные (большие по раз-меру) кодировки совместимы с ней, т. е. размещают насвоих первых 128 знакоместах те же самые символы в томже порядке.

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

Задействовав в кодировке ASCII О д Н О б а Й Т О В Ы в КОДИРОВКИстарший бит, мы получаем дополнительные 128 знако-мест, которых должно хватить для кодирования, например,кириллического алфавита или набора каких-нибудь специ-альных символов. К сожалению, восьмибитных кодировокна свете существует гораздо больше, чем наборов символов,которые они кодируют. Очень характерна в этой связиситуация с русским языком — анархия компьютеризациив нашей стране, наложившаяся на всемирную анархию

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

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

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

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

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

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

С е м е й с т в о 8 8 5 9 . Похожая ситуация с конкурирую-щими платформами и операционными системами и, какследствие, с конкурирующими несовместимыми кодировка-ми наблюдается и в других языках, пользующихся своимсобственным алфавитом или даже латинским алфавитомс расширениями. Международная организация по стан-дартизации (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, — сумела стать об-щепринятым стандартом для кодирования «расширенной»латиницы. В эту кодировку включены почти все симво-лы, употребляющиеся в письменностях западноевропейскихязыков — французского, немецкого, испанского и т.д.

ютдшр0В1€и т е § с с т а • 17

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

Д в у х б а Й Т О В Ы е К О Д И Р О В К И . Языки с иероглифической пись-менностью (японский, китайский, корейский) пользуютсясмешанными кодировками, в которых иероглифы (а ихв сотни раз больше, чем букв в алфавите) представленыдвухбайтовыми кодами, а вставки на латинице кодируютсяпо однобайтовой таблице (обычно совпадающей с Latin-1).Переключение между двухбайтовым и однобайтовым режи-мами производится специально зарезервированными упра-вляющими символами.

В 1991 году была предпринята попытка создать единую уни-версальную двухбайтовую кодировку, охватывающую всеалфавиты и иероглифические системы мира. Результатомстал стандарт под названием Unicode, покрывающий нетолько системы письменности всех живых и большинствамертвых языков мира, но и множество музыкальных, мате-матических, химических и прочих символов. Хотя массовоеприменение Unicode в документах и программах остаетсяделом будущего, для веб-дизайнера эта кодировка имеетособое значение, так как именно она объявлена «стандарт-ной кодировкой документа» в HTML начиная с версии 4(стр. 32).ISO 1 0 6 4 6 и UTF-8. Предвидя неизбежное рано или поздно исчерпа-ние и двухбайтового кодового пространства (пока еще до этого далеко,так как около 30% кодов в Unicode до сих пор не заняты), ISO ужезастолбила стандарт четырехбайтовой, совместимой с Unicode кодировкипод названием ISO 10646. Пока что вместо этого обозначения, котороето и дело попадается в стандартах, вы можете с чистой совестью подста-влять «Unicode», так как никаких новых символов, выходящих за границысовпадающих с Unicode первых 65536 знакомест, в ISO 10646 еще не опре-делено.

По-видимому, в ближайшее время все более важную роль будет игратьособый формат Unicode (и ISO 10646) под названием UTF-8. Эта «про-изводная» кодировка пользуется для записи символов цепочками байтов

18 • техминимум

i.2.i h t m l • 19

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

Вместе с XML, которому посвящен следующий раздел, • 1 W 1 Мня

HTML обычно причисляют к «языкам разметки текста». На

самом деле роль этих двух языков, как и самого формата

под названием «просто текст» («plain text»), выходит далеко

за рамки обработки текстовой информации.

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

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

В н а ч а л е б ы л SGML. Начало истории HTML следуетотнести к далекому 1969 году, когда Чарльз Гольдфарб, ра-ботавший тогда в компании IBM, создал прототип языка дляразметки технической документации, впоследствии назван-ного GML, а с приданием ему в 1986 году статуса между-народного стандарта — SGML (Standard Generalized MarkupLanguage). Этот обобщенный метаязык предназначен дляпостроения систем логической, структурной разметки лю-бых разновидностей текстов. Слово «структурная» означает,что управляющие коды, вносимые в текст при такой

История

H T M L

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

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

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

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

2 0 • т е х м ш f м 1.2.1

i.2.i h t m l И 2 1

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

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

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

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

2 2 • т е х ? - м у м

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

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

З о л о т о й век. Принципы, на которых строится языкSGML, значительны и интересны; несомненно, идеологияязыка оказала влияние на многие компьютерные разработ-ки. Однако сам по себе SGML не получил сколько-нибудьзаметного распространения до тех пор, пока в 1991 г. со-трудники Европейского института физики частиц (CERN),занятые созданием системы передачи гипертекстовой ин-формации через Интернет, не выбрали SGML в качествеосновы для нового языка разметки гипертекстовых до-кументов. Этот язык — самое известное из приложенийSGML — был назван HTML (HyperText Markup Language,«язык разметки гипертекста»).

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

Первым же (и единственным в те далекие времена) графи-ческим броузером была программа Mosaic, разработанная,как и сам WWW, в научном учреждении — Национальномцентре суперкомпьютерных приложений США (NCSA). Такчто нет ничего удивительного в том, что в этот «золотой век»никаких противоречий между официальными стандартамии их реализацией в броузерах еще не существовало. HTMLнеторопливо развивался, оставаясь в рамках парадигмыструктурной разметки, и в апреле 1994 г. началась подго-товка спецификации следующей версии языка — 2.0. Этимзанимался образованный в том же году Консорциум W3(W3 Consortium, сокращенно W3C), перенявший от CERNверховную власть и авторитет в мире WWW.

В настоящий момент консорциум, имеющий статус «меж-дународного и некоммерческого», объединяет свыше 150

2 2 • т е х м и н и м у м

1.2.1 html И23организаций-членов, в том числе фирмы Netscape, Microsoftи множество других. Однако в 1994—1995 гг. его членамибыли почти исключительно университеты и научные учре-ждения. Столь академический состав W3C сказывался какна самих документах, публикуемых консорциумом, так и напроцедуре (и особенно на сроках) их принятия. Достаточ-но сказать, что спецификация HTML 2.0, единственнымсерьезным усовершенствованием в которой был механизмформ (стр. 30) для отсылки информации с компьюте-ра пользователя на сервер, была окончательно утвержденалишь в сентябре 1995 г., когда в W3C уже полным хо-дом шло обсуждение HTML 3, — или, как его называлипоначалу, «HTML+».

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

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

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

24 • т е Х М И Н И М у М 1.2.1

И д о л ы рынка. А между тем коммерческое освоениеWWW не заставило себя долго ждать. В начале 1994 г.группа разработчиков броузера Mosaic основала корпора-цию Netscape Communications и вскоре выпустила первуюверсию коммерческого броузера Netscape (начиная с вер-сии 2.0 — Netscape Navigator, а с версии 4.0 — NetscapeCommunicator). С этого момента начался экспоненциаль-ный рост WWW, продолжающийся по сей день. Чтобызакрепить лидерство (на которое, впрочем, тогда еще малокто покушался) и привлечь новых пользователей, Netscapeвводила в HTML все новые и новые усовершенствова-ния, — поддерживаемые, разумеется, только броузеромNetscape.

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

Бяки и б у к и . Такая политика компании, с одной сто-роны, принесла ей быстрый и впечатляющий успех (одновремя версии Netscape Navigator составляли более 90%всех используемых броузеров), а с другой — вызвалаожесточенное сопротивление наиболее сознательной ча-сти HTML-сообщества. Энтузиасты неустанно разъяснялии разъясняют каждому, кто согласен их слушать, что HTMLпо природе своей не имеет права зависеть от какого-токонкретного броузера и что заявления типа «эту страницулучше всего смотреть в Netscape Navigator» являются простонасмешкой над здравым смыслом.

Помимо использования «плохих» Netscape-ориентирован-ных тегов, широко распространена также практика «зло-употребления» средствами HTML ради сопутствующих им

1.2.1

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

Те же и M i c r o s o f t . В конце 1995 г. ситуация в ми-ре HTML была довольно смутной. Популярность броузераNetscape неуклонно росла; программисты этой фирмы гото-вили к выпуску версию 2.0, которая должна была утвердитьгосподство Netscape на вечные времена благодаря не-слыханному набору новшеств (интерфейс подключаемыхмодулей, поддержка Java-апплетов, встроенный язык сце-нариев JavaScript, возможность разбивки окна на фреймыи многое другое). К этому времени W3C окончательно завязв своем проекте HTML 3, который был слишком сильнооторван от реальности и на завершение которого у консор-циума попросту не хватало ни сил, ни средств. HTML 3по сравнению с HTML 2.0 был важным шагом вперед,однако он развивался по-прежнему в рамках идеологииструктурной разметки, а инструмент, дающий возможностьвыйти за эти рамки, — система CSS — был еще далек отзавершения.

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

И именно на броузерном фронте, где господство Netscapeоставляло меньше всего шансов конкурентам, корпорацияMicrosoft нанесла свой главный удар. Поначалу мало ктоверил, что броузер Microsoft Internet Explorer, который тогдасуществовал в версии 2.0 и не представлял собой ничего

h t m l B 2 5

• 1.2.1

выдающегося, сможет составить конкуренцию Netscape.Тем не менее выпущенная летом 1996 г. версия InternetExplorer 3.0, которая поддерживала почти все расширенияNetscape, вызвала настоящий бум и очень быстро утвер-дилась в качестве «второго главного броузера». СейчасMicrosoft и Netscape делят рынок броузеров почти поровну,и окончательный исход их битвы не берется предсказатьникто.Несколькими ловкими ударами поставив свой броузер на один уровеньс казавшимся некогда непобедимым Netscape, корпорация Microsoft, оче-видно, не собирается останавливаться на достигнутом. Но еще интереснеето, что Microsoft при этом пытается создать для себя новый имидж —компании, поддерживающей независимые организации вроде W3C и забо-тящейся об авторитете официальных стандартов не меньше, чем о своейвыгоде. На этом фоне Netscape, еще недавно имевшая репутацию главногогенератора идей и технологического локомотива всей Интернет-индустрии,начинает казаться слишком закрытой, негибкой и эгоистичной в своих на-мерениях. В действительности же стратегия Microsoft (как и незадолго доэтого Netscape) заключается в том, чтобы, объявив официально о поддержкекакого-то открытого стандарта, немедленно «улучшить» его расширениями,поддерживаемыми только в продуктах Microsoft, добиться признания этихрасширений де-факто частью стандарта — и тем самым установить кон-троль как над самим стандартом, так и над соответствующим сегментомрынка.

Очевидно, чувствуя потерю инициативы, корпорация Netscape решиласьвесной 1998 г. на беспрецедентный шаг — опубликовала исходные текстысвоего броузера на сайте www.moscil ia.org и пригласила всех желаю-щих программистов и тестеров принять на некоммерческой основе участиев подготовке следующей версии. Как это ни странно, именно работаю-щие из чистой «любви к искусству» энтузиасты создали многие свободнораспространяемые и пользующиеся притом огромной популярностью про-граммы (в их числе даже целая операционная система — Linux), и Netscapeявно не прочь подзарядиться новыми силами и идеями из этого неис-черпаемого и почти бесплатного источника. По некоторым сведениям, некоммерческих конкурентов, а именно «открытые» программы со свободнораспространяемым исходным кодом Microsoft считает главной угрозой длясвоего могущества.

Три, четыре. . . Одновременно с разработкой конкурен-тоспособного броузера Microsoft решила «навести порядок»и в мире HTML. Взяв под свою опеку W3C, она напи-тала его денежными и людскими ресурсами и тем самымзаработала право едва ли не решающего голоса в этойорганизации. Проект HTML 3 был заморожен, а вместонего в сжатые сроки создан стандарт HTML 3.2, который,по сути, всего лишь описывает большинство расширенийNetscape (с тем же успехом их можно назвать теперь «рас-ширениями Microsoft»). Пройдя обычный в W3C процессобсуждения и внесения поправок, спецификация HTML 3.2была утверждена в январе 1997 года. Спираль развития

2 6 • т е х м и н и м у м

1.2*2 html и27HTML завершила свой первый виток — как и в «зо-лотой век», расхождения между предписаниями стандартаи реализацией HTML в броузерах вновь были сведенык минимуму.

В декабре того же 1997 г., с принятием стандарта HTML 4.0,маятник, похоже, качнулся уже в обратную сторону —наряду с дальнейшим обогащением репертуара визуальныхтегов, эта версия ввела немало пусть и не вполне «ло-гических», но очень важных расширений для поддержкимногоязычных документов (стр. 32) и обеспечения доступ-ности документа в разных средах (стр. 34). Кроме того,в HTML 4 наконец-то прямо в тексте стандарта четкопроведено разделение логических и визуальных тегов (по-следние объявлены «нерекомендованными», «deprecated»).Кстати, объем спецификации HTML 4 (которую я советуюпрочесть всем, кто имеет хоть какое-то отношение к веб-дизайну) в несколько раз больше, чем у 3.2, в основномне за счет описания новых тегов, а благодаря гораздо бо-лее подробному обоснованию целей и идеологии языка —так, в спецификацию включен даже краткий курс SGMLи разбор HTML DTD.Многие считают, что язык HTML исчерпал потенциал своего развитияи что добавление новых тегов вряд ли выведет его на принципиально инойуровень. История HTML, полная борьбы и противоречий, по-видимому,близится к завершению. Точнее, подошла к концу история его развития,так как применяться в более или менее неизменном (и, по-видимому,близком к современному) виде он будет еще долго — ведь в мире накопленоогромное количество ресурсов, жестко привязанных к этому языку. Оченьхочется надеяться на то, что наследником HTML станет XML (стр. 47) —язык, гораздо более близкий по идеологии к SGML и в то же времядостаточно простой для массового применения.

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

Изучение любого компьютерного языка начинается со С И Н Т Э К С И Сзнакомства с его основными строительными блоками —операторами, выражениями, переменными. С этой точкизрения язык HTML крайне прост, чтобы не сказать —

Синтаксис

28 • Teit 1.2*2

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

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

<парный-тег>текст или другие теги<1'парный-тег>

<непарный-тег>

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

Многие теги, как парные, так и непарные, имеют атрибуты,изменяющие и уточняющие действие тега:

<тег атрибут1=пзначение | ! атрибут2="значение" ...>

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

2 8 • т е х м и н и м у м

1.2.3 h t m l B 2 9

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

Scegrave;&lt;&amp;

дляДЛЯ

ДЛЯ

е<&

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

В числовых подстановках вместо мнемонического кодаиспользуется десятичный числовой код нужного символас добавлением впереди символа # (например, &//160; для тогоже символа неразрываемого пробела). Важно помнить, чтокод символа берется из стандарта Unicode вне зависимостиот кодировки основного текста документа. Так, в какой быкодировке ни был представлен русский текст документа,подстановка для кириллической буквы «А» всегда будетиметь вид &//1040; (хотя поймет ли такую подстановкуброузер — это уже другой вопрос).Минимальный документ. Интересно задаться вопросом — каково со-держимое минимального документа, который тем не менее отвечает с фор-мальной точки зрения стандарту HTML? Ответ на этот вопрос содержитсяв спецификации HTML 4, но он достаточно интересен, чтобы привести егои здесь. Оказывается, обязательными в HTML-документе являются толькодва тега: TITLE (стр. 199) и IDOCTYPE. Последний тег, о существованиикоторого очень многие не подозревают, согласно синтаксису SGML не-обходим, чтобы удостоверить, что данный файл — именно HTML (а не,скажем, XML), и указать притом его версию (точнее, тот DTD, которомуон соответствует, — стр. 48). Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

О возможностях HTML и CSS в области Т в К С Т О В З Яразметки текста довольно подробно рассказывается в гл. ill.Здесь мне хотелось бы еще раз подчеркнуть врожденнуюдвуплановость языка HTML, сплетенность в нем средствструктурной и визуальной разметки, которая особенночетко проявляется именно в текстовой части документа.Использование минимума структурных тегов, результатомкоторого является «академический стиль» (стр. 150), —самый разумный выход для тех, кому не очень-то нужен

Текстовая разметка

30 • теж*; УМ i»2,sкакой бы то ни было дизайн или нет средств на егосоздание.

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

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

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

L Еще одно принципиальное отличие интерактивныхHTML-документов от документов бумажных — формы(forms), или бланки, предназначенные для «обратной связи»,

Формы.

30 • техминимум

L2s h t m l • 3 1

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

Собственно тег FORM, объединяет группу связанных по смы-слу элементов и указывает адрес той программы на сервере(стр. 71), которой будут посланы введенные пользователемданные из всех элементов формы. HTML-страница можетсодержать любое количество независимых друг от другаформ, в каждой из которых должна присутствовать «пуско-вая кнопка», отправляющая данные на сервер. Кнопке этойне обязательно быть стандартной интерфейсной кнопкой(создаваемой тегом INPUT с атрибутом type= l fsubmit");в этой же роли может использоваться изображение, а дляпростых форм, состоящих из одного поля ввода или выпа-дающего списка, посылка данных может активизироватьсянажатием Enter в поле ввода или операцией выбора элементав списке.

Тег IMG. предназначенный для И З О б р Э Ж е Н И Я И ОбЪвКТЫвставки изображений, относится к тегам, создающим но-вые элементы документа, отсутствовавшие в исходномтексте. Тег этот ссылается на хранящееся в отдельномфайле изображение в формате GIF или JPEG (стр. 252);этот графический файл может располагаться там же, гдеи HTML-файл страницы (в таком случае в атрибуте srcдостаточно указать имя файла), а может лежать и в дру-гом каталоге и даже на другом сервере (в этом случаенужно указывать полный URL-адрес). Большинство атри-бутов этого тега управляют форматированием изображения,устанавливая его размеры (стр. 256), поля, выравниваниеи проч. Правила использования атрибута a l t приведены настр. 35.В последующих версиях HTML, вполне вероятно, будет предпринята по-пытка перейти на использование тега OBJECT для вставки любых внешнихпо отношению к документу объектов или данных, в том числе и изобра-жений. Обобщенный синтаксис тега OBJECT позволяет указать множестводополнительных сведений об изображении и его роли в документе, а при-надлежность этого тега к разряду «парных с игнорируемым содержимым»

Изображения и объекты

32 • Т* М 1.2.9

(стр. 28) обеспечит его обратную совместимость с броузерами, понимаю-щими только тег IMG.

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

я Возможность поделить окно броузера на части, загру-зив в каждую из «форточек» — фреймов — отдельныйHTML-файл, замечательна не столько открывающимисяперспективами развития интерфейса сайта, сколько темфактом, что один HTML-файл получает при этом возмож-ность ссылаться на другие. Таким образом, URL читаемойвами с экрана страницы может совершенно не совпадатьс тем адресом, который отображен в строке URL броузера.Это особенно интересно, если учесть, что «просто вставить»внутрь одного файла содержимое другого средствами HTMLневозможно (хотя для этого могут использоваться, напри-мер, SSI-вставки, стр. 71). Сайты с фреймами нравятся невсем; иногда их критикуют за неудобство и нелогичностьнавигации. Более серьезными, однако, являются проблемыдоступности фреймов для неграфических сред и для ав-томатических сборщиков информации (программ-роботовпоисковых систем, стр. 38). Дизайнерские аспекты работыс фреймами подробно обсуждаются на стр. 188.

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

Таблицы.

Фреймы.

1.2.9

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

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

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

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

html • зз

3 4 • т е х м и н и м у м !.2.ю

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

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

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

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

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

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

Как п и с а т ь alt-тексты. Особого внимания заслужи-вает атрибут a l t тега IMG, предназначенный для запи-си текстового эквивалента изображения. Значением этогоатрибута может быть строка символов, содержащая любыеподстановки (например, &ribsp;), но не содержащая дру-гих тегов. (Впрочем, сам тег IMG можно вставить внутрьпарного тега логического форматирования — например,HI, — чтобы приписать его alt-тексту соответствующуюструктурную роль и средства выделения в неграфическихброузерах.)

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

3 6 • т е х м и н и м у м

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

• Для распорок (стр. 237) и декоративных элементов, ненесущих никакой информации, обязательно указыватьпустой alt-текст (alt= f f l ! ) . Как ни странно, этот про-стейший случай не является значением по умолчанию,так что автор должен сам позаботиться об обнуленииalt-текста во всех вспомогательных изображениях.

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

• Для разделителей, аналогичных по функции тегу HR(стр. 203), подходящим alt-текстом будет ряд небук-венных значков — например, "======" или " * * * * * * и .С другой стороны, такое решение неплохо смотритсятолько в текстовых броузерах вроде Lynx, тогда каквладельцам речевых броузеров, скорее всего, не очень-топонравится слушать монотонное «знак равенства, знакравенства, знак равенства...»

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

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

1.2.10

броузеры несколько переопределили семантику атрибута a l t : начиная с че-твертых версий броузеры Netscape и Microsoft не только показывают a l t -текст на месте отсутствующей графики, но и выводят его в виде «всплыва-ющей подсказки» (floating tip), возникающей при поднесении курсора мышик изображению. С одной стороны, это нововведение заставит визуальныхдизайнеров внимательнее относиться к расстановке alt-текстов на своихстраницах — не писать туда что попало и не забывать о пустых alt-текстаху вспомогательных изображений. С другой стороны, непосредственное уча-стие alt-текстов в процессе интерактивного исследования страницы заста-вляет дизайнера отказаться от дословного воспроизведения в alt-текстахсодержимого графических вставок: сейчас не редкость страницы, в ко-торых, например, alt-тексты дают расширенные пояснения для слишкомлаконичных или же вообще лишенных текста кнопок навигации.

Доступность: изображения-карты. В HTML су-ществует два способа сделать так, чтобы части одногоизображения служили ссылками на разные адреса: сервер-ные {server-side) и клиентские (client-side) изображения-карты{image maps). Первый из этих способов, предполагающийпосылку серверу координат точки, в которой произошелщелчок мыши, и получение в ответ URL-адреса, на ко-торый нужно перейти, сейчас встречается уже довольноредко, и это нельзя не приветствовать: поскольку самопонятие «координат» имеет смысл только в графическойсреде, оформленные таким образом ссылки по определе-нию недоступны никому, кроме пользователей графическихброузеров.

Клиентские изображения-карты, которые хранят конфигу-рацию областей, чувствительных к щелчку мыши, и соот-ветствующие им URL прямо в HTML-файле, с этой точкизрения куда предпочтительнее: неграфический броузер мо-жет, проигнорировав само изображение, представить списокего чувствительных областей в виде обычных ссылок. Дляэтого нужно не забыть снабдить каждый тег AREA вну-три тега MAP атрибутом a l t (который, кстати, согласностандарту является его единственным обязательным атрибу-том), чей текст и будет оформлен в виде соответствующейссылки.

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

html • 37

3 8 • т е х м и н и м у м галл

глубину и, соответственно, уменьшить общий объем файловстраницы (стр. 253).

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

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

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

Мета-данные и поиск.

1.2.11 html и з эLatin-1, а в некоторых случаях даже и ASCII. Другие не могутиндексировать сайты с фреймами. Наконец, многие робо-ты ограничивают количество страниц, сканируемых имив каждом домене. Например, высказывались подозрения(не подтвержденные, но и не опровергнутые руководствомкомпании), что Alta Vista сканирует не больше 600 страницв каждом домене верхнего уровня.

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

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

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

<МЕТА name= l fkeywords f f

content="searching, search engines, keywords, HTML"><META name= f ! description"

content="A descr ipt ion of web search engines, spiders,and search-friendly HTML author ing">

Важно понимать, что стандарт HTML предписывает длятега МЕТА только наличие атрибутов name и content, то-гда как интерпретация значений этих атрибутов оставленацеликом на усмотрение того, кто их читает. Поэтому раз-ные поисковые системы имеют разные требования в том,что касается максимальной длины списка ключевых слов,его синтаксиса (например, нужны ли запятые между эле-ментами списка), допустимости повторений одного слова

40 • т е х м и * - *?9A 1.3

в разных грамматических формах. Аннотация (description)используется многими поисковыми системами при выводерезультатов поиска; если она отсутствует, страница в спис-ке результатов обычно представлена первыми несколькимисловами своего текста.Кроме вставки ключевых слов и аннотаций, тег МЕТА может использовать-ся для указания автора страницы, программного обеспечения, в которомона создана, а иногда и кодировки текста. Этот тег способен выполнятьнекоторые функции HTTP-заголовка (стр. 33), пересылаемого вместе с до-кументом с веб-сервера на компьютер пользователя, в том числе и такуюважную для практики вещь, как автоматическое перенаправление броузерас данной страницы на другой URL-адрес (сразу или же через заданноеколичество секунд). С помощью этого же тега можно запретить индекси-ровать данную страницу роботами (еще один пример установки семантикиатрибутов по взаимному соглашению).

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

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

• Язык иерархических стилевых спецификаций (Cascading

Style Sheets, CSS) был разработан в качестве дополнения

CSS.

1.3.1 C S S • 4 1

к HTML, призванного восполнить ограниченные возмож-

ности этого языка в области визуального форматирования,

а в идеале — и полностью взять на себя определение внеш-

него вида документа, оставив за HTML только структурную

разметку.

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

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

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

Принципы

4 2 . • т е ж i м у м 1.з.2

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

В О З М О Ж Н О С Т И • От версии системы CSS очень сильно зависит, чего с еепомощью можно добиться. Первая версия спецификации(CSS level 1 или попросту CSS1), ставшая официальнымстандартом в конце 1996 года, по сути, лишь предлагалаCSS-запись для тех параметров форматирования, которыеи без того уже, будь то «законно» или «незаконно», бы-ли доступны HTML-документам в тогдашних графическихброузерах. Свойства CSS1 включали в себя выбор шриф-та, параметры форматирования текста, установку фоновогоцвета или изображения, ширину полей и еще нескольковторостепенных параметров, в большинстве своем аналогич-ных атрибутам тех или иных тегов. Управлять положениемэлемента на странице можно было, лишь изменяя величинуего полей и тем самым отодвигая его от границ предшеству-ющего элемента или элемента-родителя.

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

1.3.3 C S S • 4 3

свойства которого позволяют регулировать громкость, темппроизнесения текста и тембр голоса).

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

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

связи (стр. 177) и тот факт, что пользователям вряд ли понравится ждать

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

реализации HTML и CSS выводят текст на экран по мере его поступле-

ния из сети и, следовательно, не могут вернуться назад и перерисовать

то, что уже выведено. Это на первый взгляд несущественное ограничение

делает невозможным не только многие специальные эффекты, в которых

содержимое или форматирование одной части документа зависит от дру-

гой, но и просто достаточно качественную верстку текста. К примеру,

система TgX, прежде чем сверстать абзац текста, прочитывает его до конца

и пробует разные варианты разбиения его на строки, минимизируя общее

количество слишком тесных или слишком растянутых строк, переносов,

висячих строк и прочих отклонений от идеала. Понятно, что ничего похо-

жего нельзя ожидать от броузера, который выводит каждую строку текста,

как только получает достаточно материала для ее заполнения (если только

текст не заключен в таблицу, стр. 235).

Нельзя сказать, чтобы доступная на сегодня веб- М О Д У Л Ь Н Ы Й Н I IVIL.дизайнерам технология текстовой разметки — HTML с не-большой (из-за проблем совместимости) примесью CSS —была начисто лишена способности к разделению аспектовсодержания и представления (стр. 21). Опыт, врожден-ная аккуратность и ответственное отношение к материалу,с которым приходится работать, позволяет отдельным ди-зайнерам практиковать в HTML стиль, вполне отвечающийтребованиям идеологии SGML (или, что сейчас болееактуально, XML).

Модульный HTML

4 4 • «* \rM §.3.3

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

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

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

4 4 • т е х м и н и м у м

C S S • 4 5

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

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

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

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

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

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

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

fM 1.3.3

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

<!-- framed heading --><table border=0 cellpadding=O cellspacing=O><tr><td bgcolor=ffaf60><img al t="" src="e.gif" width=15 height=4></td><td bgcolor=ffaf60><img alt="" src="e.gif" width=350 height=4></td><td bgcolor=d8d8d8 align=right valign=top rowspan=2><img width=16 height=26 alt="" src="zak-gob.gif "></td></tr><tr><td bgcolor=d8d8d8><img alt="" src="e.gif " width=15 height=22></td><td bgcolor=d8d8d8 valign=bottom><small>THE COAD METHOD</small></td></tr></table>

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

<!-- top navigation •—><!-- solid heading ~><!-- open text block —>Peter Coad is perhaps ... Reach him at pc@oi.com.<!— close text block —><!-- framed heading —><!-- open text block -->

4 6 • т е х м и н и м у м

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

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

Как мы только что видели, модульный подход позволяет

достичь в HTML определенной ортогональности структуры

и представления. Конечно, гораздо удобнее было бы хранить

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

для всего сайта «стилевике», а документы размечать только

ссылками на тот или иной блок — то есть, по сути,

тегами логической разметки, говорящими лишь о том, что

стоит в данном месте документа, а не о том, как оно

выглядит.

Именно такое естественное, а не насильственно наса-ждаемое разделение аспектов содержания и представленияпредлагает язык XML (extensible Markup Language, «Расши-ряемый язык разметки») — компактное упрощенное под-множество языка SGML, разработанное Консорциумом W3в расчете на постепенное вытеснение из Интернета языкаHTML. Этот «HTML будущего», как его нередко называ-ют, уже активно осваивается ведущими производителями

X M L

4 8 И 1 - 1.4.1

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

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

DTD. Вся специфика HTML как одного из приложе-ний SGML выражена в особой формальной конструкции,называемой определением типа документа (Document TypeDefinition, DTD). В идеале DTD — высший авторитет вовсем, что касается синтаксиса той или иной версии HTML.Им, к примеру, пользуются HTML-валидаторы — интерпре-таторы SGML, проверяющие соответствие HTML-докумен-та некоторому DTD. Поскольку DTD для каждой версииHTML зафиксировано в официальной спецификации языка,

4 8 • т е х м и н и м у м

Синтаксис.

в самом документе приводить его не нужно, — однако любойHTML-документ обязан ссылаться на свое DTD с помощьютега IDOCTYPE (стр. 29).

Хотя синтаксис DTD мы в этой книге рассматриватьне будем, полезно знать, какая именно информация можетхраниться в определении типа документа:

• полный список допустимых элементов с указаниемна обязательность для каждого из них открывающегои закрывающего тегов;

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

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

Например, в DTD для HTML 4.0 указано, что у элементаHTML можно опускать как открывающий, так и закрыва-ющий теги (границы элемента устанавливаются интерпре-татором по контексту), а его содержимое должно состоятьиз элементов HEAD и BODY, идущих именно в таком по-рядке. Элемент 0L (нумерованный список) обязан иметькак открывающий, так и закрывающий теги, а содержимоеего должно состоять из одного или нескольких следую-щих друг за другом элементов LI. DTD в языке XML наэтом уровне рассмотрения имеет только одно существенноеотличие от DTD в SGML (и HTML): все элементы XML-до-кумента без исключения обязаны иметь и открывающий,и закрывающий тег.Важно понимать, что ни в SGML, ни в XML DTD не имеет никакихсредств для задания семантики тегов, — иными словами, DTD не даетответа на вопрос, что означает каждый тег. В каком-то смысле идеология 'SGML следует Людвигу Витгенштейну, которому принадлежит высказы-вание: «The meaning of a word is its use» («Значение слова — это то, каконо употребляется»). Тот факт, к примеру, что тег I включает курсив-ное начертание, формально средствами SGML не выразим, — он лишьподразумевается авторами языка HTML и указывается в комментариях илив сопроводительной документации к HTML DTD.

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

XITil И 4 91.4.1

50 • твжмттшж^т i.4.iтакой-то тег», по сути, лишен смысла — можно только выяснять, какойрезультат дает применение этого тега в том или ином броузере.

Уровни соответствия. Если в SGML каждый до-кумент обязан иметь свое DTD, а у HTML есть одноDTD на всех, то XML представляет собой компромисс:документ может иметь (или ссылаться на) DTD, а можети обходиться без DTD. В последнем случае каждый новыйтег и атрибут определяются самим фактом своего употре-бления. Таким образом, для XML-документов существуетдва уровня соответствия стандарту: документы, не имею-щие DTD, но удовлетворяющие всем другим требованиямсинтаксиса XML, называют правильно структурированными{well-formed), чтобы отличить их от документов валидных{valid), имеющих в своем составе DTD (или ссылку навнешнее DTD).

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

<ПРЕДЛОЖЕНИЕ><ПОДЛЕЖАЩЕЕ>

<СУЩЕСТВИТЕЛЬНОЕ> мама </СУЩЕСТВИТЕЛЬНОЕ></ПОДЛЕЖАЩЕЕ><СКАЗУЕМОЕ тип="простое ! |>

<ГЛАГОЛ> мыла </ГЛАГОЛ></СКАЗУЕМОЕ>ДОПОЛНЕНИЕ тип="прямое">

<СУЩЕСТВИТЕЛЬНОЕ> раму </СУЩЕСТВИТЕЛЬНОЕ></ДОПОЛНЕНИЕ>

</ПРЕДЛОЖЕНИЕ>Как видно из этого примера, имена тегов и атрибутов можно писать и по-русски. Опыт HTML показал, сколь важна тщательная и своевременнаяинтернационализация всех аспектов языка, претендующего на какую-тороль в Интернете. Поэтому создатели XML позаботились, в частности,о том, чтобы в именах тегов и атрибутов можно было пользоваться нетолько латинскими буквами, но и кириллицей, иероглифами и вообщелюбыми символами из репертуара Unicode, которые считаются «буквами»хотя бы в одном языке или системе письменности.

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

5 0 • т е х м и н и м у м

1.4.1 ЖГИ! B S 1

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

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

• все значения атрибутов должны быть взяты в кавычки;

• регистр букв в открывающих и закрывающих тегахдолжен совпадать (в отличие от HTML, язык XMLчувствителен к регистру);

• все элементы должны иметь открывающий и закры-вающий тег. Это относится не только к элементамс факультативными тегами (такими как упоминавшийсявыше элемент HTML), но и к пустым элементам, которыев HTML имеют только открывающий тег. Например, тегIMG придется записывать так:

<IMG al t= f f t f src= f fe.gif f ?x/IMG>

XML также допускает особую сокращенную запись дляпустых элементов:

<IMG a l t = " f f src= f fe.gif f7>

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

x m l В51

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

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

XLL. Почти одновременно с самим XML Консорци-умом W3 был стандартизован XLL (extensible LinkingLanguage, «Расширяемый язык ссылок») — механизм созда-ния гипертекстовых ссылок в ХМL-документах. Этот аспектязыка значительно усовершенствован в сравнении с HTML.Вот основные черты гипертекстовой модели XML:

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

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

• Для ссылки можно указывать результат ее активации,а именно: вывести ли документ, на который она ссылает-ся, вместо текущего (например, в том же окне броузера),создать ли для него новый контекст вывода (напри-мер, новое окно), или же содержимое нового документанужно вставить внутрь текущего документа.

5 2 • т е х м и н и м у м

Надстройки.1,4,2

1.4.2 ЖШ1 • S 3

• Важные усовершенствования внесены в синтаксис URL-адресов, использующихся в ссылках. Выше я уже упо-минал, что адреса могут содержать параметры вызовапрограммы или идентификатор фрагмента документа,отделяемые от основной части адреса соответственносимволами ? и # (стр. 3d). XML расширяет синтаксисэтих конструкций, благодаря чему, не теряя обратнойсовместимости с существующими адресами, они позво-ляют адресовать практически любой фрагмент любогоXML- или HTML-файла. При этом не требуется, чтобыавтор файла, на который ссылаются, как-то по-особомуразметил этот фрагмент (в HTML, как вы знаете, егонужно пометить тегом А с атрибутом name). Более того,вырезание этого фрагмента из документа можно пере-ложить на сервер, на котором документ хранится, темсамым избежав пересылки по сети документа целиком(правда, для этого нужно, чтобы сервер умел обрабаты-вать такие «расширенные» запросы).

XSL. Как я уже упоминал, ничто не мешает использоватьс XML-документами стилевые спецификации на языке CSS(стр. 40), и для не особенно требовательных к дизайну до-кументов эта комбинация технологий, по-видимому, будетоптимальной. С другой стороны, оформить заголовки, блокитекста и навигационные элементы хотя бы приблизительнотак же, как они оформлены на веб-странице на рис. 1,с помощью CSS невозможно. Поэтому в качестве однойиз стандартных надстроек над XML Консорциум W3 раз-работал стилевой язык XSL (extensible Stylesheet Language,«Расширяемый язык стилевых спецификаций»).

Один из прототипов XSL — созданный уже довольно дав-но для использования совместно с SGML язык DSSSL(Document Style Semantics and Specification Language, «Языкстилистических и семантических спецификаций докумен-тов»). Как и DSSSL, XSL предполагает два последовательныхэтапа при обработке документа. На первом этапе иерархи-ческое дерево элементов исходного документа преобразуетсяв другое дерево, которое, в принципе, может не иметьс исходным почти ничего общего: содержимое может бытьпереупорядочено, по-иному разбито на элементы, в немможет отсутствовать часть исходного материала (фильтра-ция) и добавлен новый (генерируемое содержимое, стр. 44).Теги, которыми размечен этот преобразованный документ,могут опять-таки быть любыми (стилевая спецификациядокумента описывает правила их порождения в зависимости

5 4 • T< /Ml 1.4.2

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

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

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

Этот сценарий предлагает путь относительно безболезнен-ной миграции на XML для огромной массы сайтов, исполь-зующих сейчас типично «визуальный» HTML. Для этого,однако, их HTML-разметка должна как можно точнее со-блюдать заповеди модульного HTML (стр. 45). Например,приведенный на стр. 46 блок внутритекстового заголов-ка глобальным поиском легко заменить на логическийXML-элемент:

5 4 • т е х м и н и м у м

LS графика В55

<FRAMED-HEADING>The Coad Method</FRAMED-HEADING>

Теперь достаточно написать стилевую спецификацию наXSL, которая преобразовывала бы каждую копию элементаFRAMED-HEADING в соответствующий HTML-блок и вста-вляла бы в нужное место внутри этого блока содержимоеобрабатываемого элемента — т. е. текст заголовка, попутнопереводя его в верхний регистр (несомненно, регистр текстапринадлежит в данном случае к аспекту представления, а несодержания, так что из XML-документа эту подробностьлучше убрать).На момент написания этой книги конверсия модульного HTML вXML + XSL реализуема только в броузере MSIE 4.0 с помощью разра-ботанного фирмой Microsoft ActiveX-компонента (стр. 70), транслирую-щего XML в HTML и передающего полученный HTML-код стандартномумеханизму форматирования броузера.

Технологии компьютерной графики опираются на Графиканисколько не менее абстрактные концепции и потому

ничуть не проще для освоения, чем только что рассмотрен-

ные технологии текстовой разметки. Даже профессионалам

в этой области полезно иногда отступить на шаг назад,

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

форматов, программ и стандартов.

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

• 1.5.1

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

Векторное изображение состоит из объектов — геометри-ческих форм, составленных из прямых, дуг окружностии кривых Безье (стр. 99). Во всех векторных форма-тах объекты могут варьировать толщину и цвет контура,а замкнутые объекты — еще и цвет заливки. Объектымогут накладываться, частично или полностью заслоняядруг друга. В качестве отдельных объектов могут включатьсярастровые изображения и строки или абзацы текста (бу-квы которых могут также храниться в виде геометрическихформ, но допускают и более высокий уровень абстракции —разделение на собственно текст, который можно редактиро-вать, и параметры его оформления). Именно такой базовыйнабор возможностей предусмотрен в языке PostScript — од-ном из первых векторных форматов, появившемся в 1986 г.и до сих пор остающемся lingua franca для векторныхизображений.

Фирма Adobe, которой принадлежит язык PostScript, раз-работала также первый векторный графический редакторAdobe Illustrator, для которого PostScript был стандартнымформатом файлов. Однако долгие годы сохранявшееся мо-нопольное положение этого формата сыграло с ним злуюшутку: тот факт, что он стал стандартным входным фор-матом появившихся к тому времени лазерных принтерови фотонаборных автоматов, практически затормозил его раз-витие, так как зашитое в принтер программное обеспечение,в отличие от программы, установленной на компьютере,не так-то просто обновить. В результате уже к началу 90-х

5 6 • т е х м и н и м у !

Вектор

1.5.1 г р а ф и к а • 57

PostScript стал узким местом и Adobe Illustrator, и векторныхредакторов других фирм, — которые могли бы реализо-вать, к примеру, частичную прозрачность объектов, но нерешались сделать это из боязни потерять совместимостьс PostScript.

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

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

В е к т о р в И н т е р н е т е . Есть у вектора и важные прак-тические преимущества: небольшой объем файлов (в срав-нении с сопоставимыми растровыми изображениями) и не-зависимость от разрешения устройства вывода. Эти двафактора сделали векторную графику вероятным кандидатом

5 8 • т е х м и н и м у м i.w

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

Тем не менее среди реально применяемых в Интернетевекторных форматов уже есть свои лидеры. У дизайнеровпопулярен формат Shockwave Flash фирмы Macromedia,замечательный своими богатыми интерактивными и анима-ционными возможностями (один из предков Flash — про-фессиональный пакет компьютерной анимации MacromediaDirector). Приспособленный специально для Интернета,формат этот поддерживает гипертекстовые ссылки, а в до-полнение к своей врожденной векторной нетребователь-ности пользуется сжатием информации на манер утилит-архиваторов. Для просмотра этого формата в броузере нуженподключаемый модуль (plug-in), бесплатно распространяе-мый фирмой Macromedia. Для отдельных анимированныхвставок использовать Flash вряд ли целесообразно, однакосуществуют сайты, целиком построенные на этой техноло-гии (например, www«0lympic«org).

Для статических текстовых документов популярен форматPDF (Portable Document Format, «Переносимый форматдокументов») фирмы Adobe, разработанный на основеPostScript со сжатием данных, обязательным инкапсули-рованием растровой графики и шрифтов и с возможностьюиспользования гипертекстовых ссылок и интерактивныхформ. Хотя графические возможности PDF ничуть не бога-че, чем у PostScript, формат этот удобен для выкладыванияв Интернете рекламных брошюр, проспектов, журнальныхстатей и прочих материалов, либо существовавших ранеев виде бумажных копий, либо предназначенных для распе-чатывания пользователем. Особенно удобно то, что форматPDF не привязан к какой-то одной графической программеи системе верстки: печатать на PostScript-принтерах и, сле-довательно, давать на выходе Postscript умеют все программыбез исключения, а конвертация из PostScript в PDF — про-цедура полностью автоматическая. Программа для чтенияэтого формата под названием Acrobat Reader распростра-няется бесплатно и существует как в виде подключаемогомодуля для броузера, так и в виде самостоятельного прило-жения.

г р а ф и к а • 5 9

Консорциум W3 готовит стандарт «языка векторной разметки» VML (VectorMarkup Language), использующего синтаксис XML и семантику CSS2 дляописания векторных объектов. Относительная примитивность этого язы-ка искупается тем, что для реализации его в современных броузерах непотребуется много усилий, так как VML максимально использует наборсвойств элементов разметки и механизм абсолютного позиционированияCSS2 (стр. 241). Поэтому вполне можно надеяться на то, что язык этотсможет найти свою нишу в современном Интернете.

3 D . Особую разновидность векторной графики предста-вляют трехмерные форматы, из которых самый известныйи чаще всего встречающийся в Интернете — язык VRML(Virtual Reality Modelling Language, «Язык моделированиявиртуальной реальности»). Описываемые трехмерным фор-матом сцены состоят, как и векторные изображения, изматематически описанных объектов, — с той только раз-ницей, что все их точки имеют по три пространственныхкоординаты (а в форматах с поддержкой анимации —еще и четвертую, временную координату). Кроме обычныхобъектов, сцены могут содержать разноцветные и произ-вольно размещаемые источники освещения, а программа-интерпретатор покажет вам сцену с любой точки и дажепозволит зайти внутрь и «побродить» между объектами. Ин-терактивная трехмерная графика как метод представленияинформации грозилась одно время занять место в арсена-ле приемов профессионального веб-дизайна, однако ничегоподобного так и не произошло — трехмерность остается лю-бимой игрушкой непрофессионалов, но для создания в этомжанре вещей, интересных с художественной точки зрения,время, по-видимому, еще не пришло (стр. 290).

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

Растр

6 0 • т е х м и н и м у м

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

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

фики — панорамные форматы, хранящие не двумерную картинку, а полный

круговой обзор из некоторой точки, «склеенный» из нескольких снимков

широкоугольным фотоаппаратом. Для просмотра такой панорамы нужно

либо распечатать и свернуть ее в кольцо, либо (что, конечно, гораздо удоб-

нее) «прокручивать» специальной программой, компенсирующей искаже-

ния, возникающие при проецировании кругового изображения на плоский

экран. Некоторые из этих форматов дают не только панорамный, но и сфе-

рический обзор, включающий вид «в зенит» и «под ноги». Такими пано-

рамами пользуется, к примеру, фирма Toyota для показа потенциальным

клиентам интерьера своих автомобилей.

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

s.5.2 графика • 61

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

Так, формат GIF имеет от одного до восьми бит напиксел и, следовательно, может отображать от 21 = 2до 28 = 256 цветов. С использованием диффузии дажеполноцветную фотографию можно ужать в 256 цветов так,что она будет выглядеть пристойно — но, к сожалению,не более чем «пристойно». Уровень качества, при которомглаз неспособен отличить компьютерную фотографию отнастоящей, достигается только при не менее чем трехбайтах на пиксел, что дает 2 2 4, или около 16 миллионовцветов.

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

Кроме идеального с точки зрения цветопередачи трехбай-тового режима, который обычно называется «true color»,у многих дисплеев есть промежуточный режим — «highcolor», отводящий по два байта (точнее, по 15 битов) напиксел. На широких плавных цветовых переходах в режимеhigh color можно, приглядевшись, заметить «ступеньки», нодля большинства практических нужд режим этот ничем неуступает true color.

62 • т е х м и н и м у м ».s.2

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

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

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

i.6 п р о г р а м м и р о в а н и е • 63

Системы представления цвета. Самая распро-страненная и понятная компьютеру без перевода система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). Эта система представляетсобой абстракцию, моделирующую не физические свойствацвета, а его восприятие человеком. Растровые форматы неиспользуют систему HSV для хранения изображений, но с еепомощью очень удобно подбирать цвет при практическойработе (стр. 103).Важно помнить, что цветовой охват системы CMYK существенно уже, чему RGB или HSV, так как на бумаге в принципе невозможно воспроиз-вести некоторые особо яркие и насыщенные экранные цвета. Поэтомуизображения, готовящиеся для печати на бумаге, с самого начала должнырассчитывать на узкий цветовой спектр CMYK.

За все» что П р О Г р Э М М И р О В Э Н Ивмы видим не только в окне своего броузера, но и во-

обще на экране компьютера, стоят программы — множество

ПрограммированиеЗа всем, что

6 4 • т е х м и н и м у м i.e.1

программ, передающих и преобразующих информацию на

длинном пути от веб-сервера к вашему экрану. В то

же время сами веб-страницы не относятся к категории

программ — это не более чем «мертвые» данные, лишенный

самостоятельности материал.

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

Разработанный в 1995 г. фирмой Netscape для версии 2.0своего броузера язык JavaScript до сих пор остается вспо-могательным, но в то же время абсолютно незаменимыминструментом, позволяющим загруженной в броузер стра-нице динамически управлять своим содержимым, а заоднои собственно броузером. По своему набору функций этотязык близок к макроязыкам, которые с давних пор встра-иваются в любую достаточно сложную программу илисистему программ. В отличие от Java, JavaScript-сценарийне замыкается в изолированном апплете (стр. S9), а сво-бодно переплетается и взаимодействует с HTML-разметкойстраницы. Будучи тесно связан с HTML, язык этот име-ет сходные недостатки и очень похожий по извилистостижизненный путь.

JavaScript из Netscape 2.0 не умел почти ничего, кроме какоткрывать и закрывать окна броузера (стр. 198), загружатьв них документы, управлять фреймами и взаимодействоватьс полями форм (например, проверяя правильность введен-ных в них значений). Сценарий, встроенный в документс помощью тега SCRIPT, мог вставлять кусочки HTML-кодав то место документа, в котором расположен сам, но немог ни считывать содержимое других частей документа, ни,

J a v a S c r i p t .

i.e.1 nporp* "штмв ш 65

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

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

Д и н а м и ч е с к и й HTML. Недоделанность JavaScriptпришлась как нельзя более на руку компании Microsoft, какраз в это время бросившей все усилия на завоевание рынкаброузеров. Еще в третьей версии Microsoft Internet Explorerязык сценариев (который фирме пришлось назвать JScript,так как марка JavaScript принадлежала Netscape) отличалсяот своего конкурента разве что тем, что многочисленныеошибки и упущения в его реализации были расположеныв непривычных местах. В четвертой версии, однако, фирмаMicrosoft решила уйти в отрыв.

Как известно маркетологам, одно из главных условий успехалюбой новинки — запоминающееся название. Чтобы не раз-дражать пользователей путаницей между JScript и JavaScript,фирма Microsoft окрестила комбинацию, включающую рас-ширенный язык сценариев, частичную поддержку CSS2и несколько мелких усовершенствований, словосочетанием«динамический HTML», — развернув, по своему обыкнове-нию, массированную рекламную кампанию, подающую егокак средство от всех без исключения болезней «обычного»HTML. Netscape волей-неволей должна была ответить навызов и, скрепя сердце, объявила о поддержке динамиче-ского HTML в четвертой версии своего броузера, — хотяего возможности имели довольно мало общего с наборомтехнологий Microsoft.

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

6 6 • т е х м и н и м у м i.e.i

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

До сих пор, впрочем, динамический HTML особого рас-пространения в Интернете не получил, и для этого естьобъективные причины. Главную роль играет, конечно, не-совместимость броузеров-конкурентов, из-за которой оченьтрудно, а в некоторых случаях и невозможно создать од-ну версию динамической страницы, которая сохраняла быработоспособность в обоих броузерах. Сказывается такжеконкуренция со стороны формата Shockwave Flash, в кото-ром можно реализовать не менее интерактивные эффекты,чем в динамическом HTML, который притом полностьюзастрахован от несовместимостей (существует только один,разработанный самой фирмой Macromedia подключаемыймодуль для просмотра Flash-вставок) и имеет стандартнуюспециализированную среду разработки. Конечно, с доступ-ностью информации в неграфических средах (стр. 34)у Flash дела обстоят куда хуже, чем у динамическогоHTML, но графические дизайнеры, к сожалению, редкозадумываются о таких вещах.

Как всегда с опозданием, свое слово сказал и W3C.Разработанный им стандарт «объектной модели докумен-та» (Document Object Model, DOM) подробно описываетвзаимодействие встроенного в веб-страницу сценария с эле-ментами документа, перечисляя все возможные действия,свойства и взаимозависимости для объектов, на которыераспадается содержимое документа с точки зрения сцена-рия. Пока достаточно близко к этим предписаниям подошелтолько броузер Microsoft.

Спецификация DOM оперирует достаточно общими прин-ципами и потому не зависит ни от конкретного языкаразметки документа, ни от языка сценариев. В то жевремя стандартизации не избежал и сам JavaScript; его«официальная», в общественном пользовании находящаясяверсия называется ECMAScript (стандарт этот был создан не

1.6.2 п р о г р а м м и р о в а н и е • 67

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

Недостатки JavaScript, как это обыч- М О Д у Л Ь Н Ы в Т в Х Н О Л О Г И Ино бывает, продолжают его достоинства. Тесная связьс HTML позволяет (по крайней мере, в идеале) сво-бодно манипулировать материалом страницы, но сильноограничивает репертуар доступных этому языку «общеком-пьютерных» функций, которые бы позволили реализоватьна веб-странице фрагменты по-настоящему интерактивногоинтерфейса.

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

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

• Исполняемый файл программы, скомпилированнойдля одной компьютерной платформы (например, дляWindows 95), не будет работать на другом типе ком-пьютеров (например, на Макинтоше) или в другойоперационной системе (например, в DOS). Веб-страница

Модульные технологииНедостатки JavaScript, как это обыч-

68 • Т С Х М И Н И М у М 1.6.2

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

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

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

На данный момент существуют три технологии встраиванияпрограммных объектов в документ. Все они так или иначепытаются справиться с перечисленными ограничениями.

• Технология подключаемых модулей (plug-in modules) под-разумевает наличие двух компонентов: общего для всехобъектов данного типа модуля, который достаточно пе-рекачать из сети один раз и установить на компьютерепользователя как обычную программу, и подключаемыхк HTML-странице объектов. Последние интерпретиру-ются и выводятся на отведенное им место в пределахстраницы соответствующим модулем, запуск которого(как правило, в фоновом режиме, т. е. без создания соб-ственного окна) берет на себя броузер.

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

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

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

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

70 • тежмттттум шлв апплетах этот язык имеет дело не с реальным ком-пьютером, а с внутренностями виртуальной машины,

РВОТНЫЙ пакетик надежно ограждающей компьютер от любых продуктовжизнедеятельности апплета. Конечно, везде, где естьзащита, можно постараться ее обойти, и поиск «дыр»в виртуальных машинах доставляет и долго еще будет до-ставлять приятные минуты компьютерным взломщикам.И все же в целом Java-апплеты можно считать достаточнобезопасной технологией.

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

• Одно время Java-апплетам пытались составить кон-куренцию так называемые «компоненты ActiveX» —технология фирмы Microsoft, ограниченная только бро-узером Internet Explorer и только платформой Windows.Это наделавшее поначалу много шума, но быстро за-бытое нововведение интересно отсутствием какой быто ни было «прокладки» между программным модулем(по сути, обычным исполняемым файлом в форма-те Windows) и операционной системой. Для решенияпроблемы безопасности была разработана система «элек-тронных подписей» с регистрацией законопослушныхавторов ActiveX-апплетов у спонсируемых Microsoft «ци-фровых нотариусов». Неудивительно, что эта громоздкаясистема оказалась нежизнеспособной. В настоящее вре-мя изредка используются лишь ActiveX-объекты самойфирмы Microsoft, поставляемые вместе с ее броузе-рами.

|.б.з mporpafc з в а н и е • 71

В Windows-версии броузера Internet Explorer (начиная с версии 4) тех-нология ActiveX является не одним из усовершенствований, а букваль-но фундаментом всей программы. При запуске броузера управлениеполучает контейнер, сразу же вызывающий ActiveX-модуль, в котором,собственно, и заключены все функции броузера. Любой программистможет, таким образом, без труда встроить в свою программу самыйнастоящий броузер, написав всего лишь небольшую функцию для вы-зова этого модуля и обмена данными с ним. Отдельные функциональ-ные блоки броузера — виртуальная машина Java, интерпретатор HTMLи даже сам блок взаимодействия с органами управления ActiveX — ре-ализованы в виде ActiveX-модулей.

Все рассмотренные выше техно- Д и Н Э М И Ч е С К И е СТрЭНИЦЫлогии программирования, расширяющие возможности веб-страниц, предполагают пересылку на компьютер пользо-вателя и последующий запуск на нем некоторого про-граммного модуля, так или иначе связанного с «несущим»HTML-документом. Интересно, однако, рассмотреть здесьже серверные технологии программирования, предназначен-ные не для спецэффектов на экране пользователя, а дляавтоматической генерации посылаемых ему страниц (кото-рые, в свою очередь, уже могут содержать программныевставки «уровня клиента»).

По некоторым оценкам, больше половины всех страницв современном Интернете генерируются и обновляются ди-намически — на основе информации из баз данных, в ответна действия пользователя или в зависимости от каких-товнешних обстоятельств (например, текущей даты или курсадоллара). Простейшая технология такого рода, поддержива-емая почти всеми веб-серверами, называется SSI {Server SideInclude, «Вставки на уровне сервера»). Возможности ее огра-ничены вставкой внутрь одного HTML-файла содержимогодругого, автоматической установкой даты, подсчетом числазагрузок страницы и т. п. Из более сложных технологийсоздания динамических сайтов особенно популярны две:CGI и ASP.

Стандарт CGI (Common Gateway Interface, «Общий интер-фейс шлюзов»), поддерживаемый большинством программ-серверов, не накладывает каких-либо ограничений на ис-пользуемый язык программирования, а лишь перечисляетправила, которые должна выполнять программа, генериру-ющая веб-страницу, чтобы сервер мог запускать ее в ответна запрос документа с определенным URL. Однако по-скольку большинство таких программ пишутся на специ-ализированном языке Perl, термины «CGI» и «Perl» частоупотребляются как синонимы. Стандарт CGI достаточно

Динамические страницы

программирование и?1

72 • Т« I '-1НИMyiM 1,6,3

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

Альтернатива CGI, появившаяся в последнее время, — языкASP (Active Server Pages, «Активные страницы на сервере»)фирмы Microsoft (вполне естественно, что поддержка ASPсуществует пока только в веб-сервере I IS этой же фирмы).ASP-код хранится не в отдельных объектах, а встраива-ется прямо в HTML «активной» страницы, но в отличиеот JavaScript никогда не выходит за пределы веб-сервера.Инструкции языка ASP позволяют генерировать фрагментыHTML-кода, выбирать один из вариантов кода в зависи-мости от каких-то условий, циклически повторять кускиHTML с изменениями и т. п. ASP-файл может состоять це-ликом из ASP-инструкций, а может и быть чистым HTMLбез единой ASP-вставки; так или иначе, сервер отсылаетброузеру только «сухой остаток» HTML после выполнениявсех команд ASP. С практической точки зрения главнымдостоинством ASP являются развитые средства доступа к ба-зам данных, многие из которых, как и веб-сервер Microsoft,работают на платформе Windows NT.

^ ^ глава IIИ73Основыдизай-на.Я не очень-то погрешу против истины, сказав,

что вся эта книга была написана ради единственной

главы — той, которую вы начинаете читать. Уверенное

владение современными технологиями веб-дизайнеру не-

обходимо, однако в основе его мастерства лежат все-таки

куда более фундаментальные и медленнее устаревающие

знания.

От читателей моих статей по веб-дизайну, публикуемых поадресу www.weforeference^com/cilab/, я получаю немалописем с одобрением их скорее теоретической, чем практи-ческой направленности (особенно выделяющейся на фонебесчисленных сайтов с «How To» и «Top Ten Dont's», наразные лады повторяющих небольшой набор разрозненныхпрактических советов). Многие читатели спрашивают, гденачинающий веб-дизайнер — иногда поневоле, иногда позову сердца окунувшийся в эту область творчества, но ни-когда не учившийся в художественном училище и даже не

7 4 • о с н о в ы д и з а й н а н

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

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

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

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

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

Почти то же самое, с некоторыми оговорками, можносказать и о любом дискурсе в области теоретического

о с н о в ы д и з а й н а • 7 5

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

Как у ч и т ь с я д и з а й н у . Философия эта, как и любаяфилософия, родилась из наблюдений, размышлений и со-поставлений. Я совсем не хочу, чтобы вы всегда и во всемразделяли мою точку зрения; моя цель — не вербовать сто-ронников, а сделать так, чтобы после прочтения этой книгивы глубже понимали свое ремесло и свободнее чувствовалисебя с палитрой дизайнера в руках. Поэтому я призываювас сразу же проверять все почерпнутые здесь знания своейпрактикой и анализом чужих работ и не пугаться, если вашивыводы не совпадут с моими. (И разумеется, я всегда будурад услышать от вас любые комментарии или возражениякак по теоретическим, так и по самым что ни на есть прак-тическим вопросам веб-дизайна. Пишите мне по адресу:dmitry@kirsatiov.c0iw.)

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

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

7 6 • о с н о в ы д и з а й н а н

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

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

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

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

о с н о в ы д и з а й н а • 7 7

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

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

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

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

78 • О С Н О В Ы ii-1.1

Пространственные% # • • • ' U L U щ!*г •• Ir l Jrl • Идет ли речь о дизайне или о любом

другом искусстве, ориентированном на визуальное воспри-

ятие (живописи, скульптуре или даже сочинении узоров

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

элементы, связанные между собой разного рода отноше-

ниями — отношениями баланса, контраста, вложенности,

последования и т. п.

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

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

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

отношения. Идет ли речь о дизайне или о любом

Размер.

и.1.1 . п р о с т р а н с т в е н н ы е о т н о ш е н и я • 7 9

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

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

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

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

8 0 • ^ с и о т ы д и з а й н а 11,1.1

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

Р и с . 3 В (а) круг кажет-ся уже, чем равновеликий емуквадрат; в (б) увеличенныйфрагмент буквы с закругле-нием (справа) выступает внизза базовую линию, проведеннуюпо низу букв без закруглений(показаны строчные буквы «н»и «о» из шрифта Тайме)

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

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

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

и.1.1 п р о с т р а н с т в е н н ы е о т н о ш е н и я • 8 1

за линию выравнивания целиком (так называемая «висячая пунктуация»,пример которой показан на рис. 39 на стр. 145).

Засечки, впрочем, бывают разные. У шрифтов типа новой антиквы (рис. 4,а\ о классификации шрифтов см. стр. 128) тонкие засечки соединяютсяс прямолинейным и вертикальным основным штрихом под прямым углом.Напротив, в большинстве шрифтов классической и переходной антиквы(рис. 4, б) более толстые засечки соединяются с основным штрихом с по-мощью широких плавных закруглений, а основной штрих имеет иногдасложную, вогнутую в центре форму. Очевидно, что засечки второго типагораздо больше добавляют к видимой ширине буквы и выносить их залинию выравнивания нужно в меньшей степени. Кроме того, как я ужеупоминал, величина этой поправки зависит от размера букв; сильнее всеговидимая ширина букв отличается от фактической для надписей мелкимкеглем (это одна из причин, по которым для них следует отдавать пред-почтение шрифтам без засечек), а при достаточно большом кегле шрифта,когда засечки хорошо различимы, такая коррекция размера может оказать-ся ненужной и даже вредной.

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

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

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

Р и с . 4 Засечки у заглавных«Н» в гарнитурах Бодони (а)и Тайме (б); засечки типа (а),хотя они и чуть короче, долж-ны сильнее свешиваться за вер-тикаль при выравнивании

4 7 • о с н о в ы д и з а й н а 11,1,2

(б)

Р и с . 5 В (а) левый прямо-угольник кажется уже, чемправый, хотя в (б), наоборот,левый квадрат выглядит ширеправого. На самом деле ширинавсех четырех фигур одинакова

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

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

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

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

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

Пропорции.

Р и с . 6 Золотое сечение(sectio aurea): b так относитсяк а, как а к сумме а + b (приэтом b = 0,618яЛ С древнихвремен золотое сечение счита-ется самой совершенной, гар-моничной, уравновешенной про-порцией

п р о с т р а н с т в е н н ы е о т н о ш е н и я • 8 3

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

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

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

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

114 • о с н о в ы д и з а й н а шлл

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

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

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

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

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

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

Размещение.

и.1.3 - ; : " ' я т в е н н ы е о т н о ш е н и я • 8 5

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

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

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

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

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

8 6 • 0 С И 0 В Ы д и з а й н а н.1.з

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

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

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

и.1.3 п р о с т р а н с т в е н н ы е о т н о ш е н и я • 8 7

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

делить намеренно случайное, хаотическое расположение — весьма силь-

нодействующий композиционный прием, почти всегда выступающий на

первый план (а потому применимый только к элементам, которые са-

ми по себе достаточно активны в композиции) и обязательно требую-

щий поддержки со стороны других элементов. Хотя прием этот популярен

в современном дизайне, пользоваться им нужно с большой осторожно-

стью; у профессиональных дизайнеров «псевдослучайное» расположение,

как правило, прочно зафиксировано множеством малозаметных нюансных

координации (стр. 173). Любители же, чувствуя носящуюся в воздухе моду

на разбросанность, обычно вытесняют этот прием на задворки компози-

ции, применяя хаотическое расположение для элементов заднего плана —

так возникают бессчетные фоны со «звездным небом» или «мятой бума-

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

нередко сочетается с назойливой повторяемостью изразца фонового изо-

бражения, стр. 259).

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

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

3 8 • 0 е « ю т ы д и з а й н а нл.з

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

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

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

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

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

и.1.4 п р о с т р а н с т в е н н ы е о т н о ш е н и я • 8 9

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

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

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

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

9 0 • о с н о в ы д и з а й н а 11.1.4

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

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

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

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

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

li.2 форма И91

Форма

отношений, которые не случайно стоят первыми в этойглаве. Достаточно связать элементы страницы тщательнои со вкусом выполненной системой пропорций и рассто-яний, как она приобретает законченный и профессиональ-ный вид, даже если на ней нет почти никакой графики.Дизайнер Дэвид Сигель (www»d5ieg;el*com) считает жест-кое, с точностью до пиксела, позиционирование материалана странице одной из важнейших отличительных чертпрофессионального дизайна.

Если пространственные отношения — главное, что свя-

зывает элементы композиции друг с другом, то форма -

главное отличительное свойство отдельного элемента как

такового. Даже при отсутствии цвета, текстуры и всех

остальных свойств любой объект можно было бы без труда

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

изобретателю жанра силуэтных портретов).

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

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

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

Рис. 9 Усложняясь, этафрактальная форма теряетсвою изначальную геометрич-ность, становится аморфнойи плавно переходит в разрядтекстур

9 2 • о с н о в ы д и з а й н а п.гл

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

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

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

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

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

Прямые.

11,2,1

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

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

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

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

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

форма • эз

9 4 • о с н о в ы д и з а й н а И.2.2

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

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

мых, рассмотренные выше, пользуются горизонтальными и вертикальными

линиями — и это не случайно. Горизонтали и вертикали (так же как

и образуемые ими прямоугольники, о которых пойдет речь ниже) — самые

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

компьютерного экрана и листа бумаги. Любое отклонение от этих до-

минирующих направлений — опасный шаг, на который можно решиться

только при крайней необходимости и с полным пониманием последствий.

При этом наклон должен быть немедленно очевиден для взгляда, а не-

значительные, едва заметные отклонения ни при каких обстоятельствах

недопустимы. Даже если наклонная прямая будет не одинока, а поддержа-

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

(рис. 12). Пожалуй, можно рекомендовать лишь эпизодическое употре-

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

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

наклонны (пример В) или для линии отбрасываемой тени (см. рис. 40 на

стр. 158).

1 р Я М О у Г О Л Ь Н И К И а Прямоугольник с полным правом может бытьназван основой компьютерной геометрии. Это — самаячасто употребляемая и самая естественная для компьютера

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

Рис. 12 Стремление по-строить устойчивую компози-цию на основе наклонных линийзавело дизайнера слишком дале-ко (www*^ati€fex*rtj)

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

li.2,2

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

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

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

никами объектов, как таблицы. Как вы знаете, HTML предлагает на выбор

либо отсутствие каких бы то ни было линеек, либо назойливые выпуклые,

псевдотрехмерные линейки вокруг всех ячеек без исключения (стр. 203) —

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

ления смотрелся бы хоть сколько-нибудь уместно. Поэтому веб-дизайнер

должен освоить некоторые особые приемы работы с таблицами, использу-

ющие вложенность и варьирование фонового цвета ячеек (стр. 226) .

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

ф о р м а • 9 5

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

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

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

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

9 © • р е т т о в ы д и з а й н а н.2.2

(г)

(в)

(б)

(а)

ф о р м а • 9 711.2.3

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

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

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

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

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

9 8 • остовы д и з а й н а 11.2*3

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

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

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

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

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

ф о р м а • 9 9

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

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

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

Кривые Безье

Рис. 15 Кривые Безье мо-гут поспорить с фракталамиза честь называться самымкрасивым математическимоткрытием нашего века

1 0 0 • © с н о в ы д и з а й н а

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

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

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

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

Р и с . 16 Сочетание регу-лярного, повторяющегося гео-метрического узора с нарочитобесформенным общим контуромопределяет своеобразие этогообъекта

аформную морфу

11.3 цвет ВЮ1

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

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

Наряду с формой, шрифтом и текстурой, цвет принадле-

жит к базовым строительным материалам как в «бумажном»,

так и в особенности в мультимедийном и веб-дизайне. Не-

обычный, но тщательно продуманный и сбалансированный

Р и с . 17 Фрагмент фото-

графии (а) легко превратить

с помощью трассировки в вос-

хитительный набор почти по-

человечески небрежных живо-

писных пятен (б) или же

в плотный сгусток аморфных

форм (в)

Цвет

набор цветов вполне может стать основой великолепной

1 0 2 • © С Н 0 В Ы д и з а й н а и л

композиции — при том что остальные ее аспекты будут

самыми что ни на есть ординарными.

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

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

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

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

Рис. 18 Стиль этой ве-щи — небрежность рисунка,помноженная на «натурали-стическую» аморфность мазков

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

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

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

В системе HSV цвет разлагается на три составляющих:

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

Как устроен цвет

цвет вюз

1 0 4 • о с н о в ы д и з а й н а н.з.1

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

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

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

Большинство графических программ позволяют работатьс цветом в том числе и в системе HSV. В программахMacromedia Freehand и CorelDRAW, к примеру, палитравыбора цвета представляет собой цветовой круг с курсором,движение которого по дуге изменяет тон, а по радиусу —насыщенность. Третий параметр — яркость — устанавлива-ется расположенной рядом вертикальной шкалой с движком(рис. 19 на цветной вкладке, а).

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

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

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

и.3.2 цвети 105замкнутом, не имеющем определенного начала и конца,а фиксированное расположение цветов «по сторонам света»к тому же тренирует цветовую память и ассоциативноемышление.

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

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

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

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

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

1 0 6 • о с н о в ы . д и з а й н а н.з.2

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

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

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

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

и.3.2 ц в е т а 1 0 7

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

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

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

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

1 0 8 • о с н о в ы д и з а й н а и.з.2

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

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

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

ПАЗ цвет в 109

в композиции (подробнее об этом — в разделе «Сочетае-мость цветов» ниже).

Как мы не раз уже видели в этой главе, В О С П р И Я Т И б Ц В 6 Т Эчеловеческое восприятие по природе своей синтетично,а не аналитично — мы раскладываем визуальный образпо составляющим размера, формы, цвета и так далееуже в мозгу, тогда как органы чувств передают нам всюкартинку целиком, со всеми искажениями и неточностями,вызванными взаимовлиянием элементов. В полной мереотносится это и к цвету — просто удивительно, насколькопо-разному воспринимается цвет в зависимости от того,какую форму и площадь он занимает и какие другие цветаего окружают. Не случайно я советовал вам исследоватьцвета, закрашивая ими сколь возможно большую плоскость,чтобы свести эти побочные влияния к нулю.

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

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

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

Восприятие цвета

1 1 0 • о с н о в ы д и з а й н а %\лл

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

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

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

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

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

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

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

11.3.4

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

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

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

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

ц в е т • 11 i

1 1 2 • о с н о в ы д и з а й н а И.3.4

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

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

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

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

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

11.3.5

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

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

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

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

Необычные цветовые решения веб-страниц можно разбитьна две большие группы: с темным текстом на светломфоне и со светлым текстом на темном фоне. Вторые

Текст и фон

цвет • 11 з

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

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

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

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

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

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

1 1 4 • о с н о в ы д и з а й н а и.з.$

Р и с . 22 (см. цветнуювкладку, стр. 114,)

11.3.5

опознавания ссылки обязаны иметь более заметный цвет,чем основной текст, хотя достичь этой заметности мож-но разными способами — контрастом тона, увеличениемнасыщенности, повышением или понижением яркости. По-сещенные (visited) ссылки должны сигнализировать о своей«отработанности» цветом менее насыщенным или простоболее близким к цвету основного текста. Принятая в графи-ческих броузерах раскраска ссылок по умолчанию — синийцвет для «свежих» ссылок и фиолетовый для «использован-ных» — достигает нужного результата и без каких бы то нибыло вариаций насыщенности, пользуясь тем, что фиоле-товый цвет обычно производит впечатление смешанности,«нечистоты» и потому «неизначальности».Сайт w w w . c h e s s . i b m . c o m (пример 17) являет собой великолепный

образец сбалансированного цветового дизайна. Его светлый, но притом

достаточно насыщенный фоновый цвет (#СССС99) выразителен сам по

себе и не требует поддержки со стороны текста, для которого выбран

слегка смягченный черный цвет (#333333). Для ссылок использован кон-

трастный, но равным образом смягченный синий (#0033FF). Остальные

графические элементы поддерживают эту разнообразную, но абсолютно

лишенную пестроты цветовую гамму.

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

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

ц в е т и 115

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

На втором месте по популярности после чисто черногофона стоят насыщенные холодные цвета — такие как,например, бархатно-синий фон сайта www«verso«com(пример 19). Для текста, наоборот, популярны оттенкитеплых цветов, в особенности желтого, призванного сим-волизировать золото. Необычный цветовой колорит сайтаwww.bdlaweb.com (пример 13) объясняется полным от-казом от цвета как такового — темно-серые буквы начерном фоне привлекательны своей сдержанностью, хотяони выглядели бы мрачновато, если бы не ярко-оранжевыйцвет логотипа и ссылок.

Текстуры. Термином «текстуры» в этой книге обозначаются,

по сути, все те свойства элементов, фигур и поверхностей,

которые нельзя свести к их форме, цвету или размеру.

По-иному это можно было бы выразить так: текстура

начинается там, где формы, цвета и расстояния, дробясь

и множась, сливаются в неразличимое целое.

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

и.4.1 т е к с т у р ы • 1 1 7

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

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

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

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

Несмотря на изобилие имитаций мрамора, красно- П Л О С К И Й Ц В 6 Тго дерева и слоновой кости в бесчисленных коллекцияхбесплатной «веб-графики», материаловедение не в честиу профессиональных веб-дизайнеров. Подавляющее боль-шинство со вкусом сделанных страниц обходятся для своихнужд простейшей из всех текстур — плоской однороднойзаливкой цветом.

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

Плоский цвет

1 1 8 • о с н о в ы д и з а й н а И.4.2

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

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

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

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

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

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

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

Геометрические текстуры.

ПАЛ

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

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

Если геометрической строго- Ф О Т О Г р а ф И Ч е С !сти плоского цвета и простых узоров для вашей композициинедостаточно, можно попробовать применить какую-то бо-лее сложную текстуру. Главным и едва ли не единственнымисточником таких текстур в современном дизайне являетсяфотография.

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

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

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

текстуры e n s

Рис. 25 Фон сайтаwwm*wpdfd*c®m в увели-чении (горизонтальные полосыимеют высоту в один пиксел)

Фотографические текстуры

ПАЯ

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

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

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

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

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

Материальные текстуры.

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

Я не буду распространяться здесь о том, что в большинствеслучаев мраморный фон выглядит претенциозно и создаетощущение неуюта (хотели бы вы жить в доме, пол и стеныкоторого облицованы мраморными плитами?). Если вы всеже уверены, что на сей раз без отделочных материаловвам не обойтись, постарайтесь хотя бы ограничиться однойматериальной текстурой на страницу. Прием этот весьмасильнодействующий, и вряд ли есть что-то более отвра-тительное, чем нагромождение разнородных материальных ковры в три СЛОятекстур. Даже единственная такая текстура заявляет о себеочень громко, требуя немедленной «материализации» кактого объекта, к которому она применена, так и всех его со-седей, — автору волей-неволей приходится вводить фаски,тени и прочие атрибуты трехмерности, подчас с разруши-тельнейшими последствиями для единства композиции (см.также стр. 2 9 0 ) .

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

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

1 2 2 • 0 с н 0 в ы д и з а й н а n.s

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

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

я называю «текстурщина» — чрезмерное увлечение дизайнеров (иногда да-

же талантливых) всевозможными выпуклостями и закруглениями, бликами

и затенениями, мерцаниями и переливами... У дизайнеров-профессионалов

это поветрие, конечно, мало похоже на наивное украшательство любителей,

но в основе его лежит, то же самое — происходящее прежде всего от увле-

чения техническими средствами создания текстурных эффектов (а именно

для этого предназначено большинство подключаемых модулей Photoshop)

увлечение «поверхностной» (не только в переносном, но и в прямом смы-

сле) красивостью при подчас обескураживающей примитивности цветов

и форм в композиции.

Ын1К#1г1Ъм9 I шш I V f l m ^ ^ I • Безусловно, шрифт — самый

интересный, самый сложный и самый благодарный из всех

строительных материалов дизайнера. Ни одна работа не об-

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

и не будет большим преувеличением назвать их самой от-

ветственной частью любого проекта, ибо ни в каком другом

аспекте дизайна разница между любительством и професси-

онализмом не бросается так сильно в глаза.

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

Шрифт и текст.

ш р и ф т и т е к с т • 1 2 3

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

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

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

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

1 2 4 • ОС ц.5.1

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

Э Л © М © Н Т Ы Ш р И ц Э Т Э в Сложность предмета этого раздела заставляетменя, прежде чем переходить к творческим, собственно ди-зайнерским аспектам работы со шрифтом, начать с неболь-шого введения, посвященного классификации шрифтов, ихразновидностей и используемой при этом терминологии.Если вы уже достаточно хорошо знакомы с техниче-ской стороной шрифтового дела, можете пропустить этотраздел.

Гарнитура, начертание, шрифт. Сначала разбе-ремся с терминами. В русской типографской терминологиигарнитурой принято называть набор начертаний одногошрифта, различающихся по толщине штрихов, ширинебукв, общему рисунку (прямое или курсивное) и другимпараметрам. В английском языке ему приблизительно со-ответствует термин font family, хотя чаще в этом смыслеупотребляется просто слово font. Русскому же термину на-чертание точнее всего соответствует английское font face илиtypeface.

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

S y s t e m a n a t u r a e . Прежде чем говорить о различияхначертаний внутри одного шрифта, попробуем вкратце на-метить классификацию существующих шрифтов. Системаэта не может не быть весьма огульной и приблизи-тельной; как правило, чем дальше некий шрифт отстоитот небольшого набора привычных и часто используемыхгарнитур, тем сложнее подыскать для него клеточку в та-блице.

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

Элементы шрифта.

§1.5.1 Шрифт И T6KCY • 125

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

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

В и д ы н а ч е р т а н и й . Из начертаний внутри одной гар-нитуры чаще всего используются прямое (англ. готап)и курсивное {italic). Последнее призвано имитировать на-клоненный вправо, более округлый и беглый рукописныйпочерк, сохраняющий тем не менее графические особен-ности прямого начертания и хорошо сочетающийся с ним.Курсивная разновидность есть у всех текстовых шрифтовс засечками и у большинства рубленых шрифтов, хотя дляпоследних создать близкий по стилю курсивный вариантзначительно труднее, и некоторые из рубленых и моно-ширинных шрифтов употребляют вместо курсива простослегка перекошенное вправо (англ. oblique) основное начер-тание (рис. 27). Большинство декоративных шрифтов неимеют курсива вообще.

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

Рис. 27 Принципы постро-ения курсива у шрифтов сзасечками (Тайме), рубленых(Гельветика) и моноширинных(Курьер)

126 • ПСШОШЫ дизайна 11,5.2сверхжирное (extra bold) начертания (рис. 28). Шриф-ты с засечками, как правило, ограничиваются обычными полужирным начертаниями. Декоративные шрифты редкоимеют вариации насыщенности.

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

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

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

Рис. 28 Рубленые шрифтыобычно имеют богатый наборвариаций насыщенности

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

м.5.2 Ш р и ф т И ¥е§€ОТ • 127

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

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

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

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

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

1.28 • о с * м а IS.5.2

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

{а)

(б)

Р и с . 30 Форма засечек (а,гарнитура Лазурского) и сме-щение наплывов на округлыхчастях букв (б, шрифт AdobeJenson) в шрифтах гуманисти-ческой антиквы объясняютсяподражанием рукописному по-черку наклонным пером с плос-ким концом

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

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

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

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

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

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

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

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

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

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

самый н и к а к о й

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

- » j • 0 c « 0 i y д и з а й н а II.5.2

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

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

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

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

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

ш р и ф т и T e i c c T • 1 3 1

Самые известные шрифты этого типа — гарнитуры Школь-ная (рис. 33), Академическая, Bookman.

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

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

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

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

Р и с . 33 Гарнитура Школь-ная (New Century Schoolbook) —типичный шрифт типа Кла-рендон

будущее в прошедшем

Р и с . 34 Шрифт Футура(Futura) оказал сильнейшее вли-яние на шрифтовое искусствоXX века

1 3 2 • о с н о в ы д и з а й » 11.5.2

Р и с . 35 Созвучность духу

времени (а может быть, и про-

сто мода) сделали гумани-

стические рубленые шрифты

самыми употребимыми в про-

фессиональном дизайне (пока-

зан шрифт Оффицина Сане

(Officina Sans), близкий по ри-

сунку к шрифту Мета и имею-

щий кириллическую версию)

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

Поскольку основную массу шрифтов с засечками сейчассоставляют «возрожденные шрифты» (англ. revivals) и все-возможные вариации на темы шрифтов прошлых эпох,в этом жанре тенденция к «регуманизации» проявиласьне в каких-либо новациях, а в постепенном отступлениимассового вкуса от новой антиквы обратно к истокамшрифтовой истории — через переходные шрифты, пикпопулярности которых пришелся на 30-е годы (именнотогда был воссоздан по образцам английских типографовXVIII века шрифт Times Roman), к классической гума-нистической антикве, привлекшей пристальное вниманиехудожников-шрифтовиков и дизайнеров во второй половиневека (кстати, в СССР массовое шрифтовое возрождение так-же пришлось на оттепель 50—60-х годов, когда было созданоили осовременено едва ли не большинство использующих-ся ныне кириллических гарнитур). Классическая антикваостается фаворитом моды и сейчас, хотя в целом для со-временного дизайна характерен не имеющий историческихпрецедентов шрифтовой плюрализм.

Более содержательная часть шрифтовой истории XX векапришлась на рубленые шрифты. Громко заявив о себев 20-е годы крайне дегуманизированными конструктивист-скими образцами, рубленые шрифты не избежали общегостремления к смягчению и «очеловечиванию». Футуре таки не удалось стать рубленым шрифтом «на все случаижизни»; вместо нее эту вакансию занял созданный в 1957 г.,более традиционный и значительно менее геометризован-ный шрифт Гельветика (он же Arial), который по своейнейтральности, прозрачности для восприятия уместно срав-нить с переходной антиквой.

11,5,3 шрифт ш текст • 133На Гельветике постепенная гуманизация рубленых, однако,не закончилась. Как важный этап этого процесса интересеншрифт Frutiger (он же Freeset), созданный в 1976 г. Напервый взгляд мало чем отличаясь от Гельветики, привнимательном рассмотрении Frutiger обнаруживает немало«антигеометрических» черт — таких как неравная толщинаштрихов (особенно в жирных начертаниях), неперпендику-лярные срезы, едва заметные отгибы штрихов (например,низ вертикального штриха в букве «d»). Все эти особенно-сти позволяют сгладить слишком острые углы традиционногеометрического рубленого дизайна, сделать шрифт болеелегким для чтения, более свободным и менее идеологизи-рованным.

С наибольшей полнотой тенденции гуманизации прояви-лись в шрифте Мета, созданном в 1984 г. (что любопытно,тоже в Германии) и ныне необычайно популярном во всехсферах дизайна, не исключая и веб-дизайн (примеры в,19). Последовательный отказ от дуг окружности и замена ихна линии переменной кривизны, суженные по сравнениюс другими рублеными шрифтами буквы относительно посто-янной ширины, закругленные углы и характерные отгибывертикальных штрихов — все эти черты придают шриф-ту необычайно мягкий, ненавязчивый, почти женственныйхарактер (рис. 35). В каком-то смысле Мета — удачныйпример гибрида традиционных форм рубленых шрифтовс некоторыми чертами шрифтов с засечками (в частности,отгибы концов штрихов играют ту же роль, что и засечки,улучшая распознаваемость букв).Стоит отметить, что создатель шрифта Мета Эрик Шпикерманн ставилперед собой не эстетическую, а прежде всего практическую цель — раз-работать экономичный рубленый шрифт, удобный для чтения больших пообъему текстов, набранных мелким кеглем. Однако в отличие от автораФутуры Яна Чихольда, Шпикерманн стремился не к абстрактно пони-маемому геометрическому лаконизму, а к графической выразительностикаждой отдельной буквы и к общей комфортности чтения, поддающейсяобъективному измерению методиками психологов.

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

Разобравшись с типографской терминологией и П о д б о р ШрИСрТОВрассмотрев основные типы шрифтов в исторической пер-спективе, самое время познакомиться с принципами подбо-ра и сочетания шрифтов в дизайне. Так же как при поиске

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

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

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

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

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

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

и т е к с т • 1 3 5

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

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

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

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

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

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

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

ii.s.3 ш р и ф т т т е к с т • 13?

Прекрасно чувствуют себя вместе пары гуманистическихшрифтов (например, Гарамон и Фрисет, положенныев основу дизайна московского журнала «Internet»), тогдакак сочетание шрифтов Мета и Бодони в логотипе сайтаwww.aiphaw0rksJfen1.c0!?! производит не лучшее впеча-тление именно из-за конфликта «уровня гуманизации» этихшрифтов (рис. 3S).

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

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

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

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

1 3 8 • it*s*4

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

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

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

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

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

Параметры набора.

li.5.4 **ф - и т е к с т И139

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Р и с - 37 Автоматическаярегулировка межбуквенных рас-стояний в зависимости откегля: текст без трекинга(вверху) и с трекингом (внизу)

not frightened of dying

1 4 2 • о с н о в ы д и з а й н а н.з.4

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

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

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

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

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

Р и с . 38 Ручная регулировкамежбуквенных расстояний —кернинг

11.5.4 ш р и ф т и т е к с т • 1 4 3

заглушённая удовлетворением от аккуратной подгонки и ко-ординации частей (рис. 39).

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

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

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

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

1 4 4 • о с i д и з а й н а н.5.4

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

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

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

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

11,5.4 ш текст И145

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

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

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

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

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

1 4 6 • о с н о в ы д и з а й н а n.s.4

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

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

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

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

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

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

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

1 4 8 • о с н о в ы д и з а й н а n.s.5

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

T G K C T y p a - Сходство этих двух слов не случайно. Текстура,определенная как форма, сложность которой превышаетвозможности одномоментного восприятия, находит в текстесвое самое яркое воплощение. Если не углубляться сразу жев чтение, а окинуть страницу беглым, «расфокусированным»взглядом, блоки текста предстанут перед вами как формы(стр. 91), заполненные специфической текстурой (стр. 116)серого цвета определенной яркости (стр. 1СИ). (Разумеется,серым этот цвет будет только для черного текста на беломфоне или наоборот.)

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

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

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

Текст как текстура.

11.в е д и н с т в о • 1 4 9

в двух соседних абзацах при сохранении шрифта и всехостальных параметров недопустимы.

Возможно, эту главу логичнее было бы начать

с обзора общих принципов дизайна и только потом перейти

к рассказу о материалах, из которых строится дизайн-

композиция. Я поменял эти две части местами прежде всего

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

рассуждениях. Почти все обсуждаемые ниже принципы уже

упоминались, когда речь шла о форме, цвете, текстуре,

шрифте; здесь нам нужно будет лишь обобщить сказанное

и проиллюстрировать некоторыми примерами.

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

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

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

Единство

1 5 0 • о с н о в ы д и з а й н а н.в

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

C o n t e n t is k ing. Хорошо, скажете вы, но если ничегонельзя, то что же тогда можно? Чем пользоваться дляоформления заголовков, иллюстраций, кнопок навигации?Нельзя же просто взять и покидать весь материал настраницу, не задумываясь о красоте?

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

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

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

n.6 единство В151Правда, достаточно строго этот принцип соблюдался тольков первые годы жизни языка. Впоследствии в HTML быловведено множество визуально-ориентированных средств, неимеющих никакого структурного значения и употребляемыхисключительно для управления внешним видом документав графической среде (тег FONT — самый известный при-мер). Граница между «логической» и «визуальной» эпохамив истории HTML проходит приблизительно между версиямиHTML 2.0 и 3.2 (о том, почему не 3.0 и не 3.1, см. стр. 23).В последней на момент написания книги версии 4.0 выде-лено самодостаточное подмножество структурных тегов (такназываемый Strict DTD, стр. 49).

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

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

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

1 5 2 • ОС ii.6

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

Посмотрите, сколько важных достоинств у академическогостиля:

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

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

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

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

Зайдем, к примеру, на сайт норвежского программистаЭрика Наггума (www.nagguin.rio). Забудем на минуту,что автор не ставил перед собой абсолютно никаких эсте-тических задач (его приверженность HTML 2.0 объясняетсяпричинами скорее идеологическими), и попробуем посмо-треть на этот сайт именно как на образец дизайна. Мывидим единый, логичный, очень строго выдержанный стиль,в котором положение и оформление каждого элемента легкопредсказуемы. Ничто не раздражает, не «цепляет взгляд»,информация подается опрятными небольшими порциями,текст звучит негромко и выразительно. Право же, страницы

е д и н с т в о • 1 5 3

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

Конечно, есть у такого подхода и недостатки. Хотя и неспособный раздражать как дизайн, академический стильвызывает у многих неприятие как свидетельство якобыбезразличия или даже презрения автора страницы к своимчитателям — «раз он ленится позабавить нас графикой илихотя бы необычным подбором цветов, мы его и читать нестанем». Так думают посетители — или, точнее, некото-рые авторы боятся, что их посетители могут так подумать.И начинают загромождать свои страницы разляписты-ми кнопками, «трехмерными» заголовками, мраморнымифонами, пестро-попугайскими линейками и кошмарнымианимированными иконками.Тонны подобных украшений и даже составленные из них «джентльмен-ские наборы» для оформления сайта, бесплатно раздаваемые доверчивымлюбителям сайтами типа w w w . o o o l a r c l t i v e . c o m , есть, по моему глу-бокому убеждению, самое бессмысленное и просто вредное, что толькоможно предложить в помощь начинающему дизайнеру. Представьте, чтовместо того, чтобы учить вас нотной грамоте и владению инструментом,вам выдали бы десяток готовых, неизменяемых аккордов, трелей и шумо-вых эффектов и предложили бы составлять из них музыкальные произве-дения.

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

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

1 5 4 основы дизайна н.екрайней мере, отчетливо различным. Едва заметные, нюанс-ные отклонения от идентичности допустимы только в томслучае, если их цель — как раз-таки создать впечатлениеполной одинаковости, нейтрализовав действие тех или иныхиллюзий восприятия.

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

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

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

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

11.7

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

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

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

баланс В155

Единство и баланс — два главных свойства, отличающих

творения человека от созданий природы. Понимание этого

было особенно сильно у людей эпохи античности — в те

времена, когда лишь тонкая пленка культуры покрыва-

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

Баланс

156 • и з а и н а и.т

остаться в памяти поколений, должны были отличаться

совершенно особой строгостью, симметрией и сбалансиро-

ванностью частей.

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

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

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

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

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

пасовпадают с абзацами текста (сгустками плотности тексто-вой), но всегда занимают относительно них одно и то жеположение.

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

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

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

б а л а н с • i о"*

1 5 8 • c€i ' ? д и з а й н а н.7

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

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

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

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

щр^ ,.,._ ••• ~ странице — оранжевый — сбалансирован совсем по-иному:яркий, тяжелый логотип в левом верхнем углу уравнове-

' ' шивается несколькими легкими пятнами оранжевых ссылокпактная темная полоса по ле- ^ /

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

текста (значком S на физи- воспринимающего центром «оранжевого равновесия» -ческих чертежах обозначают И ИМеННО ПОЭТОМУ ОН П о м е щ е н ТОЧНО На ОСИ раВНОВеСИЯцентр масс) С И Н е ГО.

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

1 5 8 • Ы ДИЗ

ii.8 . к о н т р а с т • 1 5 9

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

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

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

«Из всех отношений важнейшим для нас явля-

ется контраст». Если единство и баланс суть условия

sine qua поп, фундамент профессионального дизайна, то

контраст — перводвигатель, животворящее начало, душа

Контраст

160 • основы дизайна пллкомпозиции. Научившись видеть «контраст вокруг нас»,

вы быстро убедитесь, что именно контрастные отношения

лежат в основе производимого впечатления у подавляющего

большинства профессиональных работ.

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

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

О Д Н О М б р Н Ы И К О Н Т р а С Т . Ограничимся для начала одним визу-альным аспектом — скажем, размером — и посмотрим,как физически измеримая разница в величине объектовсоотносится с психологически воспринимаемой степеньюконтраста между ними.

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

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

IL8.2 контраст И161

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

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

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

Итак, мы видим, что при постепен- М Н О Г О М в р Н Ы Й К О Н Т р Э С Тном углублении различия между объектами по одному изаспектов можно найти некую промежуточную точку, в кото-рой степень субъективного контраста максимальна. Посмо-трим теперь, что происходит, когда несходство в одном изаспектов сопровождается различиями в других.

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

Рис. 41 Поиск максимумаодномерного контраста

Многомерный контраст

1 6 2 • >i д и з а й н а И 8.2

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

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

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

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

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

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

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

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

Одно из лучших упражнений для начинающего дизайне-ра — поаспектный анализ отношений контраста в профес-сиональных работах. Я приведу здесь лишь один пример.В логотипе сайта www«highfive*com (рис. 43 на цвет-ной вкладке) контраст между «Н» и «5» выражен в цвете(как я уже писал на стр. 112, черный образует прочнуюконтрастную связь практически с любым другим цветом)и текстуре (плоский цвет «Н» противопоставлен фотогра-фической, размытой текстуре «5», стр. 119). В то же времямежду этими объектами немало общих черт, делающих зву-чание контраста особенно выразительным, — шрифт, кегль,выравненное расположение.

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

Давайте теперь разберемся, как ведет себя А С П б К Т Ы К О Н Т р Э С Т Эпри контрастировании каждый из визуальных аспектовв отдельности. Большая часть нужных для этого сведенийуже приводилась в разделах, посвященных самим этимаспектам, — даже если там не говорилось о контрасте кактаковом, знание свойств и привычек цвета, шрифта, тексту-ры и т. д. позволит вам без труда догадаться о наилучших

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

Аспекты контраста

1 6 4 • о с н о в ы д и з а й н а и„в.з

способах контрастирования этих материалов. Здесь (каки при поаспектном анализе принципа единства на стр. 154)я буду поэтому сколь возможно краток.

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

Некоторое исключение составляют аморфные и при этомразмытые, нечеткие объекты, — которые, вводя одно-временно и новую форму, и новую (фотографическую)текстуру, образуют с плоскоцветными четкими и пря-молинейными фигурами многомерный и потому вполнеприемлемый контраст.

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

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

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

и.8.3 к о н т р а с т • 1 6 5

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

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

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

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

1 6 6 • О С Ш П Ш Ы д и з а й н а и . э

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

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

Динамика.Многообразные проявления движения в ком-

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

ностью единству и балансу, началом разрушительным или,

во всяком случае, расшатывающим. До известной степени

это так. Но с другой стороны, лишенная какой бы то

ни было динамики вещь покажется скучной и безжизнен-

ной.

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

n,» д и н а м и к а • 1 6 7

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

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

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

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

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

Рис. 44 Примерная кар-та движений восприятия настранице сайта www«bda~web*€om (пример 13j

Динамика явная

1 6 8 • о с н о в ы д и з а й н а IL9.1

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

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

Так, на сайте www.chess.ibm.coni (пример 17) яркодинамичная фигура спортсмена в прыжке задает наклонноенаправление, поддержанное и зафиксированное наклоннойлинией горизонта земного шара (то есть все-таки дугой,хотя и большого радиуса, — вспомните, что я писал настр. 94 о нежелательности наклонных прямых). Наклон-ность эта поставлена в резкий контраст с горизонтальностьюзаголовка «the technology» и логотипа «Kasparov vs. DeepBlue», буквально зажавших атлета в тиски и дополнительноусиленных текстурой из горизонтальных полос, наложеннойна фотографию.

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

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

и.9.1 д и н а м и к а • 1 6 9

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

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

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

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

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

1 7 0 • о с н о в ы д и з а й н а II.9.2

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

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

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

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

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

Динамика неявная.

Рис. 45 Развитие движе-ния вдоль горизонтальной пря-мой

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

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

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

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

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

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

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

Нюансировка

1 7 2 • о с н о в ы д и э а м н а нло

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

пусть даже любителя талантливого.

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

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

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

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

н ю а н с и р о в к а • 1 7 3

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

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

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

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

174 • о с н о в ы д и з а й н а и.«

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

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

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

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

• Щ0 ГЛ. I» И175

Дизайнвеб-сайтов.По-

знакомившись с теоретическими основами дизайна, мы

можем теперь перейти к вопросам более практическим.

В этой главе я приглашаю вас применить свежеприобретен-

ные знания к анализу современного веб-сайта как единицы

информационного дизайна, к исследованию ролей и взаи-

мозависимостей его элементов, традиций их использования

и оформления.

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

1 7 6 • д и з а й н в е б с а й т о в ш

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

Глава эта — более узкая по охвату, чем предыдущая,но одновременно и более практическая и даже болеетехническая. Здесь вам придется вспомнить многое изтого, о чем шла речь в гл. I; говоря, например, оборганизации материала на веб-странице и ссылаясь приэтом на раздел «Размещение» гл. IS, я сразу же перечисляюсредства позиционирования материала, предусмотренныев HTML и CSS (стр. 233). Это значит, что вы должныбыть уже хорошо знакомы с применяемыми в веб-дизайнетехнологиями и иметь опыт практической работы с ними.

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

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

Ill д и з а й н в а б - с а й т о в • 1 7 7

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

Второй род ограничений — ограничения канала связи —сводится, собственно говоря, к единственному неоспори-мому факту: девять из десяти пользователей Интернетаспособны получать данные из сети со скоростью, не пре-вышающей одного-двух килобайт в секунду. Эта «мироваяконстанта» не только ограничивает суммарный объем всехфайлов, относящихся к одной странице (сейчас допусти-мый максимум этой величины лежит в районе 100 Кб),но и сильнейшим образом влияет на динамику восприя-тия (стр. t o e ) . Веб-страница никогда не возникает передчитателем вся сразу — она способна лишь томительно«проявляться», и очень часто пользователь уходит по ссыл-ке дальше или возвращается назад, так и не дождавшисьдогрузки всех картинок. В результате «всемирная паутина»,которая потенциально могла бы быть не менее динамичной,чем телевидение или по крайней мере мультимедийныекомпьютерные программы, вынуждена подражать гораздо НОВЫЙ г У тенбе Р гболее древним и консервативным средствам распростране-ния информации.Собственно говоря, этот пока что принципиально неустранимый недоста-ток вряд ли вообще является недостатком. Мельтешения кадров и задыхаю-щихся, едва поспевающих за событиями голосов дикторов нам вполне хва-тает и в телевизоре, а невозможность посмотреть через Интернет, скажем,полноценные отрывки из фильмов — беда не настолько серьезная, чтобысчитать ее преодоление первоочередной задачей развития сети. Потенциалсвободной, всепланетной информационной среды, пусть и ограниченнойтекстом и почти статическими изображениями, не раскрыт еще и на сотуюдолю, и перед всеми, кто работает в этой области, — включая дизайнеров —расстилается необозримое поле неисследованных возможностей.

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

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

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

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

iii.1 т и п ы с а й т о в • 1 7 9

Наше знакомство с веб-дизайном ло- Irl ! Ы ^rfd Irl Г АЛ*

гичнее всего начать с классификации веб-сайтов. Я проведу

эту классификацию по самому естественному принципу —

по принципу принадлежности владельца сайта к той или

иной категории, пользуясь тем, что эта классификация

хорошо коррелирует с распределением сайтов по стилю,

а главное — по качеству дизайна.

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

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

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

ТИПЫ СаЙТОВ И179

Типы сайтов

I S O • д и з а й н в е б - с а й т

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

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

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

В м и р е .org. He столь многочисленная, но куда бо-лее интересная разновидность веб-сайтов — сайты неком-мерческие, принадлежащие всевозможным добровольнымобъединениям, временным проектам, международным илиблаготворительным организациям. К этой же категорииможно отнести и многочисленные страницы учебных за-ведений, университетов и научных центров, официальныесайты некоммерческих программных проектов (например,wwwJynx.browser .org) , а также организаций вроде ISO(www.is0.ch) или Консорциума W3 (www«w3«org).

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

условна. Стоит автору чем-нибудь серьезно увлечься и захотеть увлечь этим

своих посетителей, как страница его приобретает явственные черты неком-

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

легко отличить такие сайты от сайтов коммерческого толка: каждая стра-

ница некоммерческого сайта знает, что она хочет сказать своим читателям,

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

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

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

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

1 8 2 • д и з а й н в е б - с а й т о в и м

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

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

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

IH.1 т и п ы с а й т о в • 1 8 3

бескорыстным энтузиастам (их, увы, становится все мень-ше), либо фирмам, зарабатывающим на баннерной рекламе(стр. 2TS).

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

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

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

В последнее время рекламный бизнес становится в Интер-нете все более прибыльным, и живущие за счет рекламыконтент-сайты растут и множатся на глазах. Свойствен-ная ранней стадии развития любого рынка тенденцияк концентрации заставляет их стягиваться в настоя-щие «империи» (www»cnet*€0rti, wwwJnteriiet .com).По-видимому, вскоре самостоятельные контент-сайты ста-нут редкостью — большинство их будет принадлежатьлибо контент-империям с централизованным управлениеми распределением рекламы, либо фирмам-спонсорам, поль-зующимся бесплатным контентом для завоевания престижа

1 8 4 • д и з а й н в е б - с а й т о в ш.аи

и привлечения посетителей на свои собственные корпора-тивные сайты.

# C l Р О И С Т В О С а И I C I H Слово сайт (англ. site)утвердилось в русской интернетовской терминологии срав-

нительно недавно. Раньше, в 1995—1996 годах, в том же или

примерно том же значении применялись сочетания «стра-

ница WWW», «узел WWW» или «WWW-сервер».

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

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

НеуПОрЯДОЧеННЫЙ КОНТИНУУМ. Таким образом, содержимое сайта — так же как текст журнала и, в меньшей степени,книги — выходит из плоскости отдельной страницы в новое,третье измерение. В этой «объемной» композиции объектымогут образовывать друг с другом контрастные или под-держивающие связи не только на плоскости страницы, нои «поперек сайта», взаимодействуя с элементами, располо-женными в той же позиции на соседних страницах.

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

Устройство сайта,

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

ш.2.2 у с т р о й с т в © с а й т а штё"

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

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

В то же время основные, магистральные связи Т О П О Л О Г И Я С Э И Т Эмежду страницами, существующие на любом сайте, все-гда складываются в некоторую структуру, отражающуювнутренние связи содержимого. Два основных типа та-ких структур — древовидные (иерархические) и линейные(последовательные).

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

И наоборот, если материал выстраивается в логическуюцепочку — как, к примеру, главы одной книги или

Топология сайта

IIL2.3

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

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

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

Возможность генерации страниц «на лету» в ответ назапросы пользователя и применение динамического HTML(стр. 65) для создания «живых», изменяющихся по мерепрочтения и взаимодействия с ними страниц размываютстройную картину структуры сайта, где, как на рис. 47,каждая страница символизируется своим прямоугольникомс определенным количеством стрелок-связей. На многихсовременных сайтах просто невозможно точно сказать, изСКОЛЬКИХ Страниц ОНИ СОСТОЯТ И СКОЛЬКО СВЯЗеЙ Содержат.

Однако и при создании своего сайта, и при исследованиич ^ о г о в ы Должны четко представлять себе, в какойСИСТеме КООрДИНат — декарТОВОЙ ЛИНеЙНОЙ ИЛИ ПОЛЯрНОЙ

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

ми £ с л и ТОлько весь ваш сайт не посвящен таким ссылкам (т.е. не явля-

е т с я каталогом ресурсов или чем-то подобным), внешние ссылки имеетсмысл оформить так, чтобы был очевиден их особый статус (например, наw w w * m i c r o s o f t * c o m для этого ставят особые маленькие иконки сразу

ПОсле внешних ссылок). Сайты с фреймами не должны забывать перена-правлять свои внешние ссылки на верхний уровень иерархии фреймов.

М Э Т в р И Э Л Э ш Чем же следует руководство-ваться, разделяя содержимое будущего сайта на отдельныестраницы? На первый взгляд ответ очевиден: деление долж-но быть прежде всего логичным, так чтобы каждая страницабыла посвящена одной теме и чтобы всякая тема занимала

1 8 6 • д и з а й н в е б - с а й т о в

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

HL2/3 £ т в о с а й т а • 1 8 7

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

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

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

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

1 8 8 • д и з а й н в е б - с а й т о в ш.2.з

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

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

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

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

ш.2,3 у с т р о й с т в о с а й т а • 1 8 9

от размеров окна) и указывает URL-адреса документов дляпервоначальной загрузки в каждый из фреймов.

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

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

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

1 9 0 • д и з а й н в е б - с а й т о в UL2A

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

Еще один, более простой (и исторически появившийсяпервым) способ вывода на экран компьютера несколькихдокументов одновременно — создание новых окон броузера.Атрибут t a r g e t тега А позволяет открывать для документа,к которому ведет эта ссылка, новое окно или же загружатьэтот документ в любое из уже открытых окон. По умолча-нию вновь созданные окна имеют все атрибуты броузера(строку адреса, кнопки, меню) и ни по внешнему виду,ни по поведению не отличаются от окна-«родителя». С по-мощью JavaScript можно управлять размерами нового окнаи даже создавать «голые» окна без каких-либо элементовинтерфейса броузера (пример 4). Иногда окна фиксирован-ного размера открываются не для самостоятельных страниц,а для небольших «довесков» информации, которые авторхочет сунуть посетителю прямо под нос, — таких как ре-кламный баннер, подробный адрес фирмы или увеличеннаякопия изображения, чей «ноготок» (стр. 2SB) виден настранице.Есть подводный камень, который надо обязательно учитывать при раз-множении броузерных окон: если исходное окно было распахнуто на весьэкран (обычная ситуация для многих пользователей с низким разрешениемдисплея), то новое окно также создается максимизированным, полностьюзаслоняя предыдущее. Пользователь может запросто не заметить подменыи будет долго пытаться понять, почему он не может вернуться по послед-ней ссылке кнопкой Back — список пройденных в данном сеансе адресовновосозданные окна не наследуют.

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

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

ш.2.4 у с т р о й с т в о с а й т а • 1 9 1

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

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

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

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

192: • :заин веб-сайтов ш.зВ с п л е с к и вскрик. Нередко пустота на дизайнерскихсайтах столь обильна (опять каламбур), что она не толькорастекается по всей первой странице сайта, но и выплес-кивается с нее в третье измерение, образуя сялэш-страницу(англ. splash page) — своего рода заставку, прихожую, су-перобложку сайта. Расположенная первой сплэш-страница,как правило, не содержит ничего, кроме логотипа фирмыили визуала (часто анимированного), и единственной сво-ей ссылкой, привязанной к этому изображению, ведет наглавную (хотя теперь уже не «первую») страницу сайта. Наслучай, если посетитель не догадается щелкнуть по этойединственной ссылке, тег МЕТА (стр. 40) автоматически пе-ренесет его туда спустя какое-то время.

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

Ф о р м а т с т р а н и ц ы , предыдущую™Byяначал с рассмотрения размера как важнейшего визуального

аспекта объектов в дизайне. Раздел, посвященный дизайну

веб-страниц, логично поэтому начать с обзора размерных

отношений и ограничений формата в веб-дизайне.

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

Формат страницы, Предыдущую главу я

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

Все это означает, что понятие разрешения как количествапикселов, приходящихся на единицу физического расстоя-ния (сантиметр или дюйм), в веб-графике можно полностьюигнорировать. Работая с изображениями в Photoshop'e илидругом растровом редакторе, вы можете не обращать ника-кого внимания на цифры разрешения («resolution») — васмогут интересовать только ширина и высота картинки в пик-селах. Берегитесь сантиметров, дюймов и прочих единицреального мира — они способны вас только запутать.И все-таки — каково физическое разрешение компьютерного экрана? Хо-

тя величина эта меняется из-за множества почти случайных обстоятельств

(она зависит не только от паспортного размера экрана дисплея и количества

пикселов по вертикали и горизонтали, но и от модели дисплея, положе-

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

экране), традиционно принято считать, что среднее значение разрешения

экрана составляет 96 dpi на компьютерах с Windows (в режиме 800x600 на

15-дюймовом мониторе) и 72 dpi на Макинтошах.

ф о р м а т с т р а н и ц ы • 1 3 3

Как вы наверняка знаете из собствен-

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

1 9 4 • д и з а й н к е б - с а й т о в

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

Общее число пикселов по горизонтали и вертикали обыч-но называют «разрешением» компьютерного экрана, хотяправильнее называть эту величину размером (ведь она из-меряется в пикселах, а не в пикселах на дюйм). Величинаэта может различаться в разы — от 1600 на 1200 пикселови выше в самых дорогих графических рабочих станциях до640 на 480 у графического адаптера VGA, самого старогоиз все еще применяемых в IBM-совместимых компьютерах.Однако и это значение — 640 пикселов по горизонтали —еще нельзя принимать за искомый минимум: нужно учесть,что любое окно на экране компьютера имеет рамку и (почтивсегда) вертикальную полосу прокрутки, а веб-страницав окне броузера окружена определенной величины полями.С учетом всех этих наслоений ширина страницы не должнапревышать 600—610 пикселов, а если рассчитывать на поль-зователей со старыми моделями Макинтошей — то и ещеменьше, около 580.Заметки о полях. Упомянутые только что поля — это не поля, которыеустанавливает вокруг содержимого страницы дизайнер, а те небольшие про-светы вдоль левой и верхней границ окна, которые оставляет сам броузер.Пользователь не может ни поместить что-либо в эту мертвую зону, ниповлиять на размеры полей средствами стандартного HTML. Еще хуже то,что величина этих полей непостоянна — она зависит от марки и версииброузера и от установленного в данный момент базового кегля шриф-та (стр. 21 в). Из-за этого возникают трудности с точным совмещениемфонового изображения (стр. 2S9) и материала переднего плана — ведьброузер настилает фоновую картинку по всему пространству окна вплотьдо рамки, вне зависимости от того, насколько отодвинуты от этой рамкитекст и изображения переднего плана.

Оговорка относительно «стандартного HTML» не случайна — очевидно,поля эти были введены именно для того, чтобы размеченные в минима-листском, академическом (стр. 150) стиле тексты можно было читать, нестукаясь взглядом о вплотную прижатую к тексту рамку окна. Предоста-вляя со временем все больше оформительской свободы автору страницы,броузеры не могли обойти своим вниманием и этот аспект. Так, MSIEподдерживает атрибуты le f tmargin и topmargin тега BODY, позволяющие

IH.3,1

устанавливать любую (в том числе нулевую и отрицательную) величинуполей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игно-рируют эти «MSIE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML под-ход — использование CSS-свойств (стр. 40) margin-left и margin-topдля тега BODY. К сожалению, упоминавшаяся уже незрелость реализацийCSS (стр. 23) не позволяет воспользоваться даже таким невинным трюком:дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимаетза отправную точку то «поле по умолчанию», которое имеет место в отсут-ствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к ле-вой рамке окна, в MSIE достаточно сказать <B0DY style="margin-lef t :0рх">, тогда как в NC вместо Орх придется подбирать некую отрицатель-ную величину (около -7рх).

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

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

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

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

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

Какова же высота той части страницы, которая виднав окне броузера? Эта величина задана менее жестко,чем допустимая ширина, так как высота рабочей частиокна зависит не только от размера экрана, но и отлегко изменяемого оформления панелей управления вверхуокна броузера (как вы знаете, вариантов здесь оченьмного: кнопки могут быть текстовые или с картинками,располагаться в один ряд с полем адреса или сверху от негои т. п.). Принято считать, что страница будет видна целикомлюбому пользователю, только если ее высота не превышает350 пикселов.У голубого экрана. Получившиеся минимальные габариты видимой ча-сти страницы — 580 на 350 пикселов — определяются разрешением экранамассовых персональных компьютеров PC и Макинтош. Однако недавнопоявилось еще одно устройство для доступа к сети — гибрид компьютераи телевизора под названием WebTV ( w w w . w e b t v . n e t ) . Коробочка с мо-демом, процессором и зашитым в нестираемую память броузером, ценойоколо 200 долларов, позволяет путешествовать по сети, читая веб-страницыс экрана своего телевизора и выбирая ссылки при помощи пульта дистанци-онного управления (для ввода текста в поля бланков можно присоединитьотдельно продающуюся клавиатуру).

Для дизайнера WebTV прежде всего интересен более жесткими ограничени-ями на формат страницы. Размер рабочей части экрана на всех устройствахэтого типа один и тот же — 544 на 376 пикселов, и изменить его пользова-тель не может. А хуже всего то, что при более узком, чем у компьютерныхброузеров, экране это устройство не позволяет прокручивать страницу погоризонтали — если что-то вылезет за правую границу экрана, оно таки останется недоступным. Очевидно, ограничения WebTV нет смысла учи-тывать в дизайне русскоязычных сайтов, так как в России эти устройствапока — экзотика. Среди западной аудитории, однако, пользователи WebTVсоставляют уже заметный и постоянно увеличивающийся процент.

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

111,3,2 ф о р м а т с т р а н и ц ы • 1 9 7

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

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

Интересно проследить, как меняется С т у П б Н Ь К И РИГИДНОСТИотношение страницы к описанным ограничениям форматав зависимости от назначения сайта и стиля дизайна.

Для страниц, оформленных в строгом академическом стиле(с использованием только тегов HTML 2.0, стр. 1SO),размеры окна вообще не имеют значения, так как HTML 2.0просто не позволяет задавать размеры или расположениечего бы то ни было в пикселах (в нем нет даже атрибутовhe ight и width для указания размеров изображений).В отсутствие таблиц и других приемов позиционированияматериала колонка текста верстается враспор от левого полядо правого (и, естественно, перевёрстывается при измененииширины окна). Иными словами, академический HTMLлегко приспосабливается к любому разрешению экрана —причем без малейших усилий со стороны автора.

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

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

1 9 8 • д и з а й н в е б - с а й т о в lli.3.2

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

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

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

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

111.4.1 ^ •

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

пере З а г л а в и я и з а гходя от общих вопросов устройства сайта и формата

веб-страницы к отдельным элементам дизайна, мы должны

прежде всего разбить эти элементы на два примерно равных

по важности класса: текстовые блоки и графические вставки

(этим словосочетанием я попытался перевести английское

inline images).

Конечно, не так уж редко на веб-страницах встречаютсяи более экзотические объекты — поля бланков, Java-апплеты. Однако именно текст и графика остаются и всегдабудут оставаться основными носителями информации в Ин-тернете. Все, что нужно знать веб-дизайнеру об оформлениитекстовых блоков, собрано в одном из разделов этой главы(стр. 21S). Создание веб-графики — тема более обшир-ная, и ей целиком посвящена гл. IV (стр. 243). Здесь жемне хотелось бы отметить, что противопоставление текстаи графики, как частное проявление дуализма содержанияи представления в дизайне, особенно наглядно проявляетсяименно в дизайне заголовков.

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

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

Заглавия и заголовкиПере-

Заглавие

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

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

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

З Э Г О Л О В К И ! Л О Г И К Э н После стоящего несколько особняком заглавия(title) логично перейти к иерархии заголовков (headings) насамой странице. Вообще говоря, у большинства страницникакой «иерархии» нет — после основного заголовкавверху страницы редко когда можно встретить заголовкивторого и тем более третьего уровня. Отчасти поэтому стан-дартные в HTML заголовки шести уровней (теги HI—H6)редко используются за пределами академического стиля.(Верно и обратное: если вам требуется больше двух-трехуровней заголовков, это следует считать аргументом в поль-зу перехода к академическому стилю.) Однако в первуюочередь непопулярность тегов Н* объясняется параметрамиих оформления, принятыми по умолчанию в визуальныхброузерах, — параметрами, чаще всего неприемлемымидля страниц с минимальными художественными запроса-ми (к примеру, HI оформляется полужирным начертаниемповышенного кегля).

гоо • дизайн веб-сайтое

Заголовки: логика.

IH.4.3 за i • 2 0 1

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

Стандарт HTML не возбраняет помещать между <Н1>и </Н1> не строки текста, а графические изображениязаголовков со всеми требуемыми причудами оформления,alt-тексты которых (стр. 35) будут играть роль заголовковв неграфических броузерах. Такое решение — казалосьбы, удовлетворительное и с логической, и с визуальнойточек зрения — не всегда выполнимо из-за нежелательныхвертикальных отступов, которые оба графических броузераоставляют вокруг элементов Н* (из чего бы они ни состоя-ли — из текста или изображений). Единственный законныйспособ изменять параметры оформления стандартных тегов,включая теги заголовков, — использование CSS; к сожале-нию, из-за несовершенств реализации подавить эти отступыс помощью CSS удается только в одном из броузеров(в MSIE).

Надо сказать, что стандартные заголовки HTML не удо-влетворяют многим требованиям, важным именно для ака-демического типа документов, — так, броузер не можетсамостоятельно нумеровать их, из них невозможно собратьавтоматически обновляемое оглавление документа. Все этивозможности доступны для XML-документов со стилевымиспецификациями на XSL (стр. S3).

Рассмотрим теперь самый распространенный З Э Г О Л О В К И ! Д И З Э И Ни дающий максимум творческой свободы вариант — гра-фическую вставку в роли заголовка. Обычно каждый такойзаголовок распадается на две части: собственно текст, укра-шенный подбором шрифтов, цветов, текстур и графическихэффектов, и околозаголовочная графика (этот компонентможет отсутствовать) — фотография или рисунок, а дляглавного заголовка страницы нередко и логотип сайта илифирмы. Хотя популярные в современном дизайне графиче-ские темы — предмет рассмотрения следующей главы, здесьвсе же стоит отметить основные тенденции, существующие

Заголовки: дизайн

заглавия т заголовки и201

2 0 2 • i шм в е б - с а й т о в Ш.4.3

в этой области. Заголовки могут также заимствовать кое-какие приемы и подходы дизайна логотипов (стр. 264).

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

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

Рассмотрим пару примеров. На странице сайта www.ixfa-w e b . c o m (пример 13) единственным заголовком является,собственно говоря, слово «membership», хотя догадатьсяоб этом непросто — настолько не по-заголовочному онооформлено (мелкий шрифт, только строчные буквы). В тоже время нельзя сказать, что эта строка текста отступаетна второй план, — жесткая привязка с помощью гори-зонтальной линии к яркому, доминирующему на страницелоготипу и наложение на привлекающую своей загадочнойзатемненностью фотографию делают этот заголовок однимиз узловых элементов композиции.

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

111,4,4 заглавия и

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

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

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

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

Разделители

Р и с - 48 Псевдотрехмер-ность под микроскопом: концылинеек HR в NC (слева) и MS/E(справа)

2 0 4 • д и з а й н в е б - с а й т е » ш.4.5

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

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

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

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

Баннеры.

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

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

Если нелинейность содержимого — главное Навигацияотличие веб-сайта от более традиционных видов публика-

ций, то навигационная система есть необходимое каждому

сайту средство ориентировки и перемещения в этом не-

линейном пространстве. Каждая страница сайта должна,

помимо всех прочих предъявляемых к ней требований,

отвечать посетителю на два неизбежно возникающих у не-

го вопроса — «где я нахожусь?» и «куда мне отсюда

идти?»

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

и кто виноват

2 0 6 • д и з а й н т е б - с а й т о е ni.s.i

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

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

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

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

Общий обзор.

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

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

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

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

Семантика

201 • - з з й к в е б - с а й т о в тял

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

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

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

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

Дизайн.

Hl.5.3 t*

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

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

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

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

н а в и г а ц и я • 2 0 9

Р и с . 49 Приемы выравни-вания навигационных кнопок снадписями неодинаковой длины

2 1 0 • д и з а й н в е б - с а й т о в 111,5.3

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

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

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

И наоборот, если страница и без того насыщена фотогра-фическими текстурами и криволинейными формами, имеетсмысл вспомнить о популярной в современном дизайне темепрямых линий (стр. §3), часто применяемой для объедине-ния кнопок панели навигации в единое целое. На рис. 50показаны фрагменты трех последовательных страниц, на-чиная с заглавной, сайта vifww^rev».coffi. Мотив прямыхлиний с засечками на концах, ограничивающих навигаци-онную панель и выделяющих ее на фоне доминирующих настранице плавных дуг и градиентов, вводится уже на первойстранице (а). Сайт этот содержит двухуровневую иерархиюстраниц, и на подчиненных страницах дизайнер из тех жепрямых линий строит элегантную и интуитивно прозрачнуюдвухэтажную навигационную панель (б, в).

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

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

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

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

(о)

Р и с . 50 Тема прямых ли-ний с засечками в двухуров-невой навигации на сайтеwww.rcnro.com

2 1 2 •/ • •* ' * в е б - с а й т о в ш.5„з

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

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

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

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

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

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

Восприятие навигационной па- Д и Н Э М И Ч е С К а Я НЭВИГаЦИЯнели можно сделать более комфортным, п р и м е н и в простей-ший а н и м а ц и о н н ы й эффект, и з м е н я ю щ и й изображениекаждой к н о п к и , когда над ней проходит курсор мы-ш и . Встроенный в страницу JavaScript-сценарий (стр. 6 5 )может заменять при приближении м ы ш и одно изображе-н и е к н о п к и на другое, — переключая, скажем, ее цветили яркость, добавляя тень или подсветку, заставляя еевыступать или, наоборот, утапливаться в плоскость стра-н и ц ы (по-английски этот эффект называется rollover, т. е.«перекатывание»). Возможность самому поуправлять пре-вращениями графики на странице, хоть и не дает н и к а к о йпрактической выгоды, как правило, повышает субъектив- слабым манием 0Укиную оценку дизайна пользователем: когда страница, затаивдыхание, следит за малейшими движениями вашей м ы ш и ,соблазн щелкнуть-таки в конце концов по ссылке значи-тельно возрастает. Даже если нигде больше на страницеа н и м а ц и я не применяется, для особой по своей интерактив-ной роли области — панели навигации — вполне уместноприменить и несколько особые методы оформления.

Динамическая навигация

214 • дизайн веб-сайтов пшлКроме классической навигационной панели с графическимикнопками, иногда применяется простейшая разновидностьHTML-бланка (стр. 3d), состоящая из выпадающего спискас перечислением ссылок и расположенной рядом кнопки«Go» (или «Перейти»). Такой прием хорош своей компакт-ностью: в сложенном виде список занимает гораздо меньшеместа, чем панель с кнопками. Однако для основных, крити-ческих по важности или же неоднородных по охвату ссылоксайта пользоваться им не стоит. Разумнее всего вынестив такого рода меню достаточно длинный и притом частоменяющийся список одноуровневых и близких по тематикеразделов (например, список «зеркал» или версий сайта наразных языках). Пара выпадающих списков в комбинациис JavaScript-сценарием позволяет компактно представитьдвухуровневую иерархию, сделав так, чтобы набор пунк-тов во втором меню зависел от того, какой пункт выбранв первом (пример см. на www.weforeference.cotti).

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

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

Р и с . 51 Выпадающие ме-ню на первой странице сай-та www*ibm.com реализо-ваны с помощью динамическогоHTML

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

Пожалуй, фрагменты обычного тек-

ста в HTML —- главный источник головной боли для веб-

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

за стремление как можно большую часть текста оформить

в виде графических вставок. Источник неприятностей оче-

виден: слишком много контроля над HTML-текстом имеет

пользователь броузера (а зачастую и сам броузер) и слишком

мало — автор страницы. Кодировка, шрифт, кегль и даже

цвет текста на компьютере пользователя могут быть совсем

не теми, на которые рассчитывал дизайнер.

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

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

Блоки текста

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

Открытость текста в HTML дает слишком много преиму-ществ, чтобы от нее можно было отказаться ради милойсердцу дизайнера неизменности внешнего вида документа.С появлением XML принцип открытости и разделения ло-гической и оформительской информации распространяетсяс текста и на структуру документа. Я уже достаточнописал в гл. 1 о важности структурной разметки, поэтомуздесь нам достаточно рассмотреть лишь чисто практическиеследствия, которые для дизайнеров имеет работа с тек-стом — этим «островком структурности» в довольно-такинепоследовательном и идеологически невыдержанном языкеHTML.

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

К в Г Л Ь . Физический размер букв на странице зависит от двухфакторов: базового кегля, устанавливаемого в настройкахброузера, и относительного размера, выставляемого в HTMLс помощью тегов SMALL, BIG и тега FONT с атрибутом size(который может принимать значения от I до 7, причембазовому кеглю соответствует size=3). В отсутствие любогоиз этих тегов текст набирается базовым кеглем; средствамиHTML вы можете только отклоняться от этой нулевойотметки в ту или иную сторону.

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

Кегль.

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

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

Лучше всего страница должна выглядеть при том базовомкегле, который ставится по умолчанию (многие пользо-ватели вообще не заглядывают в настройки и не знают,что базовый кегль можно изменить) в броузере, толькочто установленном на самой распространенной платформе(Windows 95/98) с самым распространенным экранным раз-решением (сейчас в России эта величина составляет 800 на600 пикселов). При этом страница должна безболезненновыдерживать увеличение базового кегля минимум в двараза.Особо следует остановиться на видимом отличии размеров букв в разныхшрифтах. Пользуясь тегом FONT с атрибутом face (а иногда и строго логи-ческими тегами вроде CODE или SAMP, устанавливающими моноширинныйшрифт), вы можете столкнуться с тем, что буквы «чужого» шрифта вы-глядят заметно больше или заметно меньше расположенных рядом буквосновного шрифта. В таких случаях нужно удержаться от соблазна вы-ровнять кегли атрибутом size, так как, во-первых, на другом компьютересоотношение размеров может быть прямо противоположным (оно сильнозависит от версий броузеров и установленных на компьютере шрифтов),а во-вторых, в случае логических тегов параметры оформления вообщене должны вас заботить — так, тег CODE нужен, чтобы пометить иденти-фикатор или фрагмент программы, а не для того, чтобы переключитьсяв моноширинный шрифт.

2 1 8 • д и з а й н в е б н с а й т т е ш.в.2

CSS (стр. 40) поддерживает как принятый в HTML ме-ханизм ступенчатого увеличения и уменьшения шрифтаотносительно базового кегля, так и задание кегля в абсо-лютных единицах длины (пикселах, пунктах и т. п.) с помо-щью свойства font-size. CSS уровня 2 добавляет свойствоfont-size-adjust, с помощью которого можно автомати-чески выравнивать разные шрифты не по «паспортной»величине кегля, а по высоте строчных букв, обеспечиваягораздо лучшее визуальное соответствие размеров разныхшрифтов.

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

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

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

Шрифт.

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

CSS уровня I пользуется той же схемой: свойству font-family также можно присвоить в качестве значения строку,состоящую из имен шрифтов, — за тем исключением, чтокроме названий конкретных гарнитур можно как одиниз вариантов (обычно на последнем месте в списке)указать родовой признак нужного шрифта — serif, sans-serif, monospace и т. п. Не найдя конкретных заказанныхшрифтов, броузер будет по крайней мере знать, какойиз имеющихся в системе шрифтов следует использоватьв данном случае — например, Times (т.е. seri f), Arial (sans-ser i f) или же Courier (monospace).В CSS уровня 2 этому механизму при неизменном синтаксисе приданорасширительное толкование: броузер обязан не просто найти первый жедоступный из перечисленных шрифтов и переключиться в него, но и сле-дить за соответствием набора символов текста репертуару глифов шрифта.Как только в тексте встретится отсутствующий в текущем шрифте сим-вол, броузер обязан снова обратиться к списку рекомендованных шрифтови посмотреть, нет ли там шрифта в нужной кодировке, подходящего дляотображения этого символа. Таким образом, свойство font-family можетсодержать не только перечисление сходных по внешнему виду шрифтовв порядке убывания их пригодности и повышения вероятности их обнару-жения, но и имена шрифтов с разными наборами символов, между кото-рыми броузер будет переключаться в зависимости от того, какие символывстречаются в тексте.

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

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

2 2 0 • д и з а й н в е б - с а й т о в шла

<FONT face= l fArial,Geneva,Helvetica f f>

и в CSS:

font-family: Arial,Geneva,Helvetica,sans-serif

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

К о р е н н ы е ш р и ф т ы . Фирма Microsoft решила начатьс малого и опубликовала небольшой набор бесплатныхшрифтов, оптимизированных для низкого экранного раз-решения и предназначенных специально для использова-ния на веб-страницах, без ложной скромности назвав их«Core Fonts for the Web». Поставляемые только в форматеTrueType (т. е. пригодные для использования в Windowsи на Macintosh), шрифты эти распространяются вместес броузером MSIE; их можно также скачать и с сервераMicrosoft.

Шрифты Microsoft достаточно распространены среди интер-нетовской аудитории для того, чтобы имело смысл указыватьих в качестве первого выбора в FONT face и font-family.Особенно популярен рубленый шрифт Verdana, который, наслучай его отсутствия, можно подстраховать приведеннымвыше стандартным списком рубленых шрифтов. В за-головках «газетного» стиля неплохо смотрится суженныйрубленый шрифт Impact.

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

111.6.2 б Л О К И Т ; 1 • 2 2 1

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

В с е шрифты ношу С с о б о й . Официальная специ-фикация технологии встраивания шрифтов (font embedding),разработанная Консорциумом W3, является частью специ-фикации CSS уровня 2 (стр. 40). CSS не задается вопросомо том, как технология встраивания будет реализована в бро-узерах; спецификация лишь определяет синтаксис, позво-ляющий автору страницы описывать (или просто ссылатьсяна) нужный шрифт с помощью богатого набора свойстви шрифтовых дескрипторов. Эта информация (включеннаялибо в сам документ, либо в относящийся к нему стилевойфайл) позволит броузеру выбрать, в зависимости от условий,один из следующих вариантов поведения:

• выбор заказанного шрифта (exact matching), если он ужеприсутствует на данном компьютере;

• выбор близкого по характеру шрифта (intelligentmatching) на основе информации шрифтовых дескрипто-ров — высоты строчных и заглавных, характера засечек,наклона букв и т. п.;

• синтез нужного шрифта (font synthesis), для чего кромеперечисленных выше общих свойств шрифта нужна так-же метрическая информация о габаритах каждой буквы.Броузер может, к примеру, воспользоваться технологи-ей Multiple Masters фирмы Adobe, позволяющей плавноменять ширину, насыщенность и другие параметрышрифта, и подогнать более-менее подходящий исходныйшрифт под метрику требуемого;

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

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

2 2 2 • д и з а й н в е б - с а й т о в

В то же время оба главных визуальных броузера — MSIEи NC — начиная с четвертых версий также поддержива-ют встраивание шрифтов. Технологии, используемые дляэтого извечными конкурентами, если можно так выра-зиться, гармонически дополняют недостатки друг друга.Броузер Microsoft использует синтаксис CSS2 для связыва-ния шрифтов с HTML-документом, однако может работатьтолько со шрифтами в специально созданном для этогоформате «шрифтовых объектов» (основанный на TrueType,этот формат позволяет, в частности, вырезать для отправ-ки только используемые в документе символы, содержитсредства сжатия шрифтовых данных и предотвращения не-легального копирования распространяемых шрифтов). При-вязка к «фирменному» формату не только закрывает этутехнологию от посягательств конкурентов, но и ограничи-вает ее применимость операционными системами Windowsи Macintosh.

Ненамного лучше обстоят дела с открытостью и у техно-логии встраивания шрифтов, разработанной Netscape. Такназываемые «динамические шрифты», почему-то реклами-руемые этой компанией как часть ее версии «динамиче-ского HTML», не привязаны к какой-то операционнойсистеме, однако накрепко привязаны к броузеру NetscapeCommunicator, который один только может использоватьдля вывода на экран шрифты в формате TrueDoc (лицензи-рованном Netscape у фирмы Bitstream). Более того, привязкашрифта к HTML-документу у Netscape производится со-вершенно ни с чем не совместимым способом — черезрасширение тега LINK. Если бы броузеры-конкуренты былисовместимы друг с другом хотя бы по синтаксису вызовашрифтов, различия в шрифтовых форматах были бы нестоль существенны.

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

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

lli.6.3 б л о к и т е к с т а • 2 2 3

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

Сейчас на русскоязычных сайтах изредка применяется лишьсамое простое из всех шрифтовых решений — переключе-ние в рубленый шрифт, для чего можно написать FONTf a c e = " a r i a l cyr ,ar ia l f f . Однако даже этот простейшийвариант почти наверняка доставит неприятности многимвашим пользователям, так что лучше всего не искушатьсудьбу и обойтись для русского текста шрифтом по умолча-нию.

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

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

Цвет

224 • дизайн веб-сайтов ШЛАцветов в тот момент, когда фон внезапно подстилается подуже видимые элементы переднего плана.

Цвета, указываемые в атрибуте color тега FONT, перекры-вают как цвет из атрибута t e x t тега BODY, так и цветовыеустановки броузера. Можно даже менять цвет ссылок, вста-вив тег FONT с атрибутом color внутрь тега A. CSS, в своюочередь, позволяет менять не только цвет букв, но и фо-новый цвет любого элемента, в том числе и фоновый цветотдельных символов и фрагментов текста. Если часть текстазакрашена одним цветом, а часть другим (что обычно бы-вает, когда фон состоит из сильно различающихся по цветуобластей — например, светлой центральной части и темнойполосы вдоль границы экрана), фоновый цвет в теге BODYдолжен быть таким, чтобы на нем были легко различимыоба цвета текста.Как и цвета в графических вставках, указываемые в HTML цвета текста,фона страницы и фона ячеек таблиц подвергаются искажениям на 256-цветных мониторах. Однако ничего похожего на «безопасную палитру»(стр. 246) для этих HTML-цветов, к сожалению, не предусмотрено: броузерпросто сводит эти цвета к ближайшим цветам текущей палитры экрана,что может давать самые непредсказуемые результаты (например, указанныйв теге BODY фоновый цвет может далеко разойтись с тем же самым цветом,использованным в изображении).

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

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

Ссылки

flf.6.5 блоки текста • 225С другой стороны, разумеется, добавление ссылки не можетпройти бесследно для звучания, интонации и, в каком-тоотношении, даже для смысла фразы. Если считать ссылкуразновидностью текстового выделения, то можно сформу-лировать несколько практических советов. Прежде всего,точно так же как курсивом не стоит выделять целое пред-ложение, длину ссылки нужно ограничивать необходимымминимумом — например, ссылкой на архив с программойдостаточно сделать ее название или слово «download», а невсю фразу целиком. Ссылочным лучше всего делать тослово или словосочетание, которое допускает, с учетомсмысла всего предложения, произнесение с логическимударением (эмфазисом), пусть и не сильно выраженным.И наконец, следует избегать разметки ссылок поверх курси-ва, полужирного и других традиционных средств текстовоговыделения. Кстати, довольно-таки странно выглядит ссылкаво внутритекстовом заголовке (если только вы не решитеснабжать ссылками — например, на список разделов вверхустраницы — все заголовки подряд).Общепринятые визуальные атрибуты ссылки — измененный по отношениюк основному тексту цвет (о принципах выбора которого мы говорили настр. 113) и подчеркивание — явно дублируют друг друга. И хотя такоедвойное акцентирование помогает ориентироваться в текстовых ссылкахбыстро и почти подсознательно, подчеркивание все же не стало в массо-вом сознании обязательным признаком гипертекстовой ссылки. Косвеннымподтверждением этому может служить тот факт, что в графических ссылках(например, на кнопках навигации) текст почти никогда не снабжается под-черкиванием. Поэтому в последнее время появляется все больше сайтов,отключающих с помощью CSS подчеркивание и для текстовых ссылок (дляэтого в стилевой спецификации достаточно написать A { text-decorat ion:none}).

Почти все остальные параметры набора текста Д р у Г И бпока что поддаются регулировке только с помощью CSS(со всеми оговорками о применимости этой технологии,стр. 40). HTML не позволяет ни изменять межстроч-ные, межбуквенные и межсловные расстояния, ни как-либовлиять на переносы текста, ни поворачивать или масшта-бировать текстовые объекты. (Можно, правда, изменятьвыравнивание текста по левому краю на противополож-ное, — однако выключка текста по ширине возможна,опять-таки, только с помощью CSS.) Судя по всему, ещеочень далек тот день, когда визуальные броузеры смогутобеспечить такой же контроль над текстовыми блоками, какдаже самый примитивный из графических редакторов.

Другие параметры

2 2 6 • я ш з а й н е е б - с а й т о е

Стоит сказать пару слов об оформлении абзацев. По тради-ции броузеры не делают отступов красной строки, отделяяабзацы друг от друга вертикальными отступами (как в этойкниге). Не прибегая к помощи CSS, можно имитироватьболее традиционное (с точки зрения книжной верстки)оформление, заменив тег Р между абзацами на BR со сле-дующей за ним горизонтальной распоркой — невидимойграфической вставкой или несколькими подряд неразрыва-емыми пробелами &nbsp; (стр. 238). Если, однако, учесть,что того же видимого результата можно добиться с по-мощью CSS (обнулив значение margin и указав отступкрасной строки t e x t - i n d e n t для тега Р) уже в четвер-тых версиях обоих броузеров, от подобных искусственныхприемов лучше воздержаться: членение на абзацы оченьважно для информационной целостности текста, и неразум-но жертвовать структурной разметкой этого аспекта радисиюминутных визуальных выгод.

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

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

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

ш.6.6 блоки текста • 227изображение (если оно есть). Заливкой фона можно вы-делять заголовки и боковики в таблицах; популярен такжеприем подсветки через одну строк с основными данными(такие полосатые таблицы, например, используются длясписков книг на сайте fooolcs.ru, пример 15). Кроме того,с помощью изменения цвета фона можно имитировать и ча-стичную разлиновку — например, вставив после боковикаузкую ячейку, простирающуюся по всей высоте таблицы,и закрасив ее каким-то цветом, мы получим вертикальнуюлинейку, избавленную от обоих упомянутых выше недостат-ков стандартной разлиновки.Спецификация HTML 4.0, принятая в начале 1998 года, значительно рас-ширила, по сравнению с предыдущими версиями, набор средств для раз-метки таблиц. Большинство новых тегов и атрибутов предназначены дляболее адекватной структурной разметки таблиц и для более гибкого пред-ставления табличной информации в невизуальных броузерах. Есть, однако,и усовершенствования в средствах визуального форматирования — в част-ности, атрибуты frame и r u l e s позволяют выборочно проводить линейкимежду ячейками и вокруг таблицы.

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

Многие дизайнеры относятся с недоверием (вполне, надопризнать, обоснованным) ко всем технологиям, выходящимза пределы HTML и GIF, не желая подвергать свое хрупкоетворение «капризам погоды» на компьютере пользователяи пользуясь графикой для передачи любого текста, чьеоформление небезразлично для производимого страницейхудожественного впечатления. С точки зрения таких авто-ров, идеальным форматом для распространения информа-ции в Интернете является не HTML (с этим, впрочем, врядли кто-то будет спорить) и не XML, a PDF (стр. 58), у кото-рого нет нескольких конкурирующих программ просмотра,

228 • диззй« веб-сайтов тмлно зато есть полная свобода в использовании шрифтови оформлении текстовых элементов.

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

Перенос текста в графику откровенно противоречит идеоло-гии открытости информации, принятой в HTML и особеннов XML. Тем не менее нельзя сказать, что такой «окаменев-ший» текст навсегда потерян для неграфических броузерови автоматических сборщиков информации: специально длятекстового эквивалента графического изображения пред-назначен атрибут a l t тега IMG, в котором вы обязаныдословно воспроизвести весь зашитый в графику текст(стр. 35).

• Р Э В И Л Э Н Э О О р Э TGKCTOB. Кроме ограничений технологическихи дизайнерских, при оформлении текста на веб-страниценужно учитывать многочисленные типографские традиции,сложившиеся задолго до появления компьютеров. Нижея перечислю те из правил текстового набора, которыевполне выполнимы даже с простейшей и самой массовойиз использующихся сейчас технологий — языком HTML(т. е. те, которые не требуют смены шрифтов или точнойподгонки отступов).Р а с с т а н о в к а п р о б е л о в . Я заранее прошу прощения у тех, кто всегдасоблюдал приведенные ниже правила, особо над ними не задумываясь, —опыт подсказывает мне, что внятно сформулировать эти правила будетвсе же не лишне. Итак, в русскоязычном наборе пробел обязательно ста-вится:

• после, а не до запятой, точки, точки с запятой, двоеточия, вопро-сительного или восклицательного знака (и их сочетаний), многоточия

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

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

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

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

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

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

• между двумя инициалами и между инициалами и фами-лией: fl.&nbsp;B.&nbsp;KHpcaHOB;

• между сокращенными обращениями и фамилией:r-H&nbsp;KnpcaHOB, а также после географических со-кращений типа г.&пЪэр;Москва или o-B&nbsp;KpbiM;

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

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

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

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

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

• между классами многозначных чисел, начиная с пяти-значных: l&nbsp;302&nbsp;569;

• перед номерами версий программных продуктови частями их названий, состоящими из цифрили сокращений: Windows&nbsp;3.1, Windows&nbsp;95,Windows&nbsp;NT;

2 3 0 • д и з а й н в е б - с а й т о в

• после однобуквенных предлогов и союзов, особеннов начале предложения или в заголовке.

В других языках существуют свои специфические правила.Так, во французском неразрываемыми пробелами отбивают-ся от предшествующего текста двоеточие, точка с запятой,вопросительный и восклицательный знаки; кавычки «елоч-кой» также отделяются от заключенного в них текста.В английском и немецком можно ставить &nbsp; нарядус обычным пробелом в конце предложения, чтобы визуаль-но удвоить отбивку между предложениями, хотя сейчас этатипографская традиция многими считается устаревшей.

Т е к с т о в ы е в ы д е л е н и я . Пользуясь курсивом или по-лужирным для выделений в тексте, соблюдайте следующиеправила:

• кавычки должны быть того же начертания, что и за-ключенный в них текст; окружающие выделенный фраг-мент скобки, наоборот, должны соответствовать начерта-нию основного текста, а в месте стыка прямого и курсиваскобки всегда остаются прямыми;

• знаки препинания, следующие за выделенным фрагмен-том, должны быть набраны основным начертанием.

С п е ц с и м в о л ы . Отсутствующие непосредственно наклавиатуре символы — постоянный источник неприят-ностей для веб-дизайнеров. В стандартной для HTMLкодировке Latin-1 (стр. 17) просто нет некоторых позарезнужных для набора даже английского текста символов, а доуниверсальной поддержки Unicode во всех документах, бро-узерах, шрифтах и операционных системах пока еще оченьдалеко. И уж конечно, ничуть не лучше дела обстоят в мирекириллицы с ее многочисленными несовместимыми другс другом кодировками.

Первым приходящий в голову способ вызвать нужный в тек-сте, но отсутствующий на клавиатуре символ -— посмотретьего номер в каком-нибудь шрифте и сослаться на него изHTML с помощью числовой подстановки (например, напи-сав &//169; для вызова символа копирайта, стр. 29). Однакоэтот метод очень ненадежен — он полагается, во-первых,на то, что у всех шрифтов на всех платформах этот символрасположен в одной и той же позиции (что далеко не всегдасоответствует действительности), а во-вторых, на то, чтоброузер будет интерпретировать код именно как номер сим-вола в текущем шрифте (что, вообще говоря, противоречит

in.6.7 б л о к и т е к с т а • 2 3 1

стандарту). Поэтому гораздо предпочтительней пользоватьсямнемоническими подстановками (например, &сору; для тогоже символа копирайта). Однако несовершенство броузерови сложившаяся (так и хочется сказать «порочная») практи-ка русификации 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;).

2 3 2 • д и з а й н в е б - с а й т о в

Кавычки — тема, заслуживающая отдельной книги. Всегосуществует четыре типа кавычек: «французские» (иначеназываемые «елочки»), „немецкие" („лапки"), "англий-ские обычные, или двойные," и 'английские одинарные.'В русском языке традиционно применяются француз-ские «елочки», а для «кавычек „внутри" кавычек» —немецкие „лапки". В английском языке пользуются"английскими двойными" для кавычек первого уровняи 'английскими одинарными' для "кавычек 'внутри' ка-вычек." Соответственно, английские кавычки в русскомтексте, так же как и обозначение дюйма " вместо по-лагающихся кавычек в английском тексте, — следствиелибо каких-то технических ограничений при наборе,либо (увы, чаще) необразованности того, кто этот текстоформлял.

К сожалению, в 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 можно пользоваться

символьными кодами &сору; и &sect; соответственно.Напротив, символ торговой марки (™), также присут-ствующий в большинстве шрифтов, в Latin-1 отсут-ствует, так что вместо &trade; предпочтительнее писать<SUP><SMALL>tm</SMALL></SUP>.

• Знак номера (№) был заимствован в русский язык изфранцузского, так что в ^русифицированных шрифтах(чей набор символов ориентирован больше на англо-язычную типографию) он отсутствует. (В Unicode онесть, но символьного кода в HTML 4 для него непредусмотрено.) Тем не менее символ этот присутствуетво всех кодировках русского языка, и если вы ориенти-руетесь только на русскоязычную аудиторию и при этомвполне уверены в способности автоматического переко-дировщика на вашем сервере правильно обрабатыватьэтот символ, им можно пользоваться просто как буквой(т. е. вставлять его в текст напрямую, без каких бы то нибыло конструкций языка HTML).

Позиционированиераздел этой главы, в сравнении с предыдущими, посвя-

щен вопросу более общему по охвату и в то же время более

техническому по характеру. Рассмотрев основные типы эле-

ментов, составляющих веб-страницу, мы должны теперь

разобраться с теми средствами, которые предлагают совре-

менные веб-технологии для размещения этих элементов на

плоскости страницы.

Эстетические принципы построения композиции, показы-вающие зависимость восприятия элемента и его отношенийс другими элементами от положения на странице, — инымисловами, ответы на вопрос «почему» — были предметомгл. 11. Здесь нам остается ответить на вопрос «как», поль-зуясь техническими сведениями, которые вы почерпнулииз гл. I (и, вероятно, из вашего личного опыта). Сле-дующая же глава будет целиком посвящена внутреннемуустройству графических элементов, имеющих множествосвоих собственных технических «как» и эстетических «по-чему».

Последний

п о з и ц и о н и ? mme • 2 3 3

234 • дизайн веб-сайтов тллВообще говоря, точное позиционирование материала подвум (и даже, как мы увидим ниже, по трем) измере-ниям есть второе по важности из условий творческойсвободы дизайнера (первое — возможность пользовать-ся графикой). Характерно, что дизайнер Дэвид Сигель(www*cfsiegeLc0!in) — вероятно, самый известный изпопуляризаторов визуального подхода к веб-дизайну —прославился в первую очередь изобретением невидимойраспорки из однопиксельного GIF'a (стр. 237).

I Э О Л И Ц Ы И р Э С П О р К И ш Простейший механизм размещения мате-риала, доступный в обоих визуальных броузерах (в Netscapeначиная с версии 2 и в MSIE с версии 3), — это ис-пользование таблиц, чаще всего не имеющих разлиновкии фоновой заливки ячеек и потому невидимых (видимотолько их содержание, единственно ради позиционирова-ния которого и вводится таблица). Прием этот позволяетрегулировать расстояния между элементами с точностью допиксела, что является важнейшим — хотя и практическиединственным — достоинством этой технологии.

Если абстрагироваться от семантики, таблица для дизай-нера — не более чем инструмент, позволяющий размерамодних элементов влиять на размеры и положение дру-гих. Изменяя высоту или ширину некоей ячейки, мы темсамым меняем высоту соответствующей строки и шири-ну соответствующей колонки, влияя на размеры текстовыхблоков и выравнивание изображений по всей таблице. Ины-ми словами, таблица служит своеобразной «средой передачиинформации» о размерах и расположении элементов.

Для текстовой части документа таблицы — единственный(если не считать CSS) инструмент, позволяющий устана-вливать произвольную величину полей, ширину колонкитекста, а также верстать текст в несколько колонок. С гра-фическими вставками таблицы используются чаще всего длясоставления сложных композиций из многих изображений,перемежаемых текстом и ссылками, с гарантированнымвзаимным расположением. Такой подход, в сравнениис «целиковой отливкой» больших графических блоков, вы-годен и с точки зрения доступности информации, и с точкизрения экономии объема файлов (стр. 176).В некоторых случаях при размещении графики можно вообще обойтись без

таблиц или, по крайней мере, упростить их, уменьшив в них количество

ячеек. Горизонтальный ряд вплотную прилегающих друг к другу графи-

ческих вставок, выровненных по нижнему краю, можно получить, просто

Таблицы и распорки.

111.7,1 ПОЗИЦГ Э • 2 3 5

поставив подряд соответствующие теги IMG. Прервав этот ряд тегом BR, выначнете следующую «строку», прилегающую верхним краем самой высокойиз картинок к нижнему краю предыдущей «строки». Собственно говоря,поведение графических вставок при этом ничем не отличается от поведениябукв в абзаце за тем исключением, что броузер может сам перенести такую«строку» после любой «буквы» (если она грозит вылезти по ширине за крайокна или за границу отведенной для нее ячейки); предотвратить переносможно, заключив строку картинок внутрь <NOBR> ... </NOBR>.

Дурная наследственность. Как уже упоминалось,главным достоинством таблиц является возможность упра-влять положением элементов с точностью до пиксела.Недостатки же этой технологии более разнообразны. Пре-жде всего, хотя содержимое ячеек можно позиционироватьотносительно друг друга и относительно точки привязкивсей таблицы, положение этой последней относительнограниц окна броузера, к сожалению, непостоянно и может«плавать» с заметной амплитудой в зависимости от теку-щего размера окна, базового кегля текста, величины полей(стр. 194) и проч.

Если сравнивать табличную верстку с возможностями, пре-доставляемыми CSS, то ближайшим аналогом таблицы будетотносительное (relative), а не абсолютное позиционирова-ние. Если не учитывать тот факт, что таблица (как блочныйэлемент, стр. 240) всегда начинает собой новый абзац,то координаты размещенного в таблице элемента отсчиты-ваются именно от той позиции, которую он занимал быв отсутствие таблицы и в которой теперь расположена точкапривязки этой таблицы.

Конечно, чаще всего с помощью таблиц моделируетсяименно абсолютное позиционирование относительно гра-ниц окна: чтобы свести на нет влияние нетабличногоматериала, в таблицу заключается вся страница, так чтомириться приходится только с неодинаковостью ее внеш-них полей (как я уже писал, величина этих полей точномуконтролю не поддается). При этом, однако, ощутимым ста-новится другой недостаток этой технологии: броузер можетвыводить на экран таблицу только тогда, когда ему известныгабариты всех ячеек, — т. е. не раньше, чем из сети догру-зятся все изображения, тексты и HTML-код, составляющиетаблицу. Результатом может стать раздражающая задержкас выводом информации на экран.

Сообщив броузеру заранее ширину и высоту всех размеща-емых в таблице изображений с помощью атрибутов he ightи width тега IMG, эту задержку можно сильно сократить —

236 • дк -i шеб-саттош Ш.7Л

но только в том случае, если размеры указаны, опять-таки,для всех без исключения изображений. Даже одна графи-ческая вставка неизвестных броузеру размеров задержитвывод всей страницы до тех пор, пока не придет из сетиначало соответствующего графического файла, по которомуброузер сможет определить его габариты. Поэтому атрибу-ты he ight и width абсолютно обязательны для жесткоготабличного дизайна. В академическом же стиле, наоборот,их следует избегать — как потому, что атрибуты эти невходят в стандарт HTML 2.0, так и потому, что жесткоеуказание размеров графики иногда не позволяет прочестьalt-тексты графических вставок тем пользователям, ко-торые отключили в своих визуальных броузерах загрузкуграфики.

Тот факт, что в таблице положение любого элемента зависит от размещениявсего остального материала, делает этот прием позиционирования весьмачувствительным к ошибкам разметки, так же как и к различиям (увы, су-ществующим) между алгоритмами верстки таблиц в визуальных броузерах.Конечно, в этой области совместимости гораздо больше, чем, к приме-ру, в CSS, — вполне естественно, что производители броузеров обращаютособое внимание на механизм, ответственный за форматирование подавля-ющего большинства страниц в Интернете. И все же нужно отдавать себеотчет в том, что этот прием (по-английски его бы стоило назвать «trick»или даже «hack») по своей логической обоснованности очень напоминаетстроительство дома из пакетов из-под сока.

Д в о й н о е д н о . Еще один недостаток табличного позици-онирования — невозможность наложения элементов друг надруга (иными словами, расстояние между двумя объектамине может быть отрицательным). Изобретательные дизайне-ры и здесь нашли выход из положения: неповторяющиесяфоновые изображения (стр. 263) становятся в их компози-циях самостоятельным слоем, содержимое которого так илииначе соотносится с элементами переднего плана. К сожа-лению (стр. 194), совмещения с точностью до пиксела приэтом достигнуть не удается; однако и то, что есть, позволяетдобиться интересных результатов (пример 1).

Прием этот вполне допустим в тех случаях, когда он пре-следует чисто художественные цели. Иногда, однако, в фонвыносится часть значимой информации страницы, в неко-торых случаях — текст и даже ссылки, реализуемые с по-мощью прозрачных графических вставок, залинкованныхи наложенных на нужные области фона. Такое трюкачествоодобрить уже нельзя — «выпавшая на дно» информациябезвозвратно теряется для невизуальных броузеров и ав-томатических сборщиков информации: ведь даже если быу фонового изображения был свой alt-текст, его место

lti.7.1 ПОЗ! ; Ж 0

в линейном текстовом эквиваленте страницы определитьбыло бы невозможно.

Б е л о е м е с т о . Возможности табличной верстки былибы сильно ограничены, если бы дизайнер не мог упра-влять расстоянием между содержимым ячеек. Интервалывокруг всех ячеек одновременно можно менять с помощьюатрибутов cel l spacing и cel lpadding тега TABLE (чащевсего оба эти атрибута обнуляются). Но чтобы раздвинутьна некое заранее заданное расстояние отдельно взятуюпару объектов, между ними нужно поставить какую-тораспорку.

Общепринятый способ изготовления распорок (тот самый,изобретенный Сигелем) основан на том, что, если указан-ные в атрибутах width и he ight размеры изображения несовпадают с его естественными размерами (записаннымив самом GIF- или JPEG-файле), броузер обязан масштаби-ровать это изображение до размеров, указанных в HTML.Достаточно, таким образом, взять полностью прозрачныйGIF-файл минимальных размеров — I на I пиксел — и при-писать ему требуемую ширину (не забыв указать height=l,чтобы подавить пропорциональное увеличение высоты) или,соответственно, высоту (не забыв width=l) — и мы полу-чим невидимую графическую вставку требуемых размеров,вполне годящуюся на роль распорки.

Достаточно иметь единственную копию такого однопик-сельного GIF'a на весь сайт; HTML-файлы могут содержатьсколько угодно не мешающих друг другу ссылок на этукопию с указанием разных размеров. Важно также не забы-вать указывать a l t = ! ! t f при всех таких распорках (как и прилюбой другой служебной графике), чтобы не раздражать«исподним» визуального форматирования тех, кому нуженлишь текстовый образ вашей страницы.

Простейший и дающий наиболее предсказуемые результатывариант использования графической распорки — вставка еев выделенную специально для этого случая ячейку таблицы,которая передаст свою ширину или высоту соответствующе-му столбцу или строке. Можно, однако, ставить распоркии в те ячейки, в которых уже есть текст или изображе-ния. Как и любые другие графические вставки, распоркиведут себя при этом подобно буквам текста: горизонтальныевставки раздвигают материал, а вертикальные отодвига-ют текущую строку от предыдущей (чтобы этот эффектбыл заметен, высота распорки должна превышать высоту

23В • д и з а й « веб-са? шлмсамого высокого элемента текущей строки; гарантирован-ную вертикальную раздвижку можно получить, вставивмежду элементами вертикальную распорку, с обеих сторонотбитую тегами BR). В частности, в абзацах текста гра-фическими распорками можно пользоваться для имитацииабзацных отступов и даже для увеличения интерлиньяжа(в последнем случае по вертикальной, одинаковой высо-ты распорке нужно поставить вплотную к каждому словутекста); сейчас, к счастью, ничто не мешает пользовать-ся CSS для достижения тех же результатов без всякихраспорок.Если вы никак не можете разобраться в странностях поведения невиди-мых распорок на ваших страницах, для отладки можно порекомендоватьтакой прием: заведите еще один однопиксельный GIF-файл, но не про-зрачный, а какого-нибудь яркого цвета, и временно подставьте его вместопрозрачного пиксела в тот каталог, где у вас хранятся изображения. Все не-видимые распорки при этом станут видимыми, и расставить их по местамбудет намного легче.

Для горизонтальной раздвижки символов текста лучшепользоваться не графическими распорками, а неразрывае-мым пробелом. Последовательность символов &nbsp; в любомместе документа (в том числе, кстати, и в заглавии, стр. 199)воспроизводится броузером как одиночный текстовый про-бел, который, в отличие от обычных пробелов, не сливаетсяс соседними пробелами, не исчезает в конце строки и в на-чале абзаца, а главное — не позволяет броузеру вставитьперенос строки между символами, вплотную к которым онстоит (отсюда и его название — «неразрываемый пробел» непозволяет разорвать строку).

Неразрываемыми пробелами особенно удобно пользоватьсядля увеличения межсловных пробелов, имитации разрядки иабзацных отступов, так как ширина их (как и ширина обыч-ных пробелов) пропорциональна текущему кеглю шрифта.На стр. 229 перечислены также обязательные, предписы-ваемые типографскими традициями случаи употреблениянеразрываемого пробела для предотвращения переносови увеличения интервалов в некоторых особых случаях.

Ф э й с о м об т э й б л . Каждый из броузеров имеет свойдовольно сложный алгоритм выбора размеров ячеек и раз-мещения материала в них в зависимости от натуральныхразмеров материала в ячейках, «рекомендованных» размеровячеек (атрибуты he ight и width тега TD) и наличия неко-торых особых случаев вроде групп ячеек, объединенных погоризонтали или вертикали (атрибуты colspan и rowspanтого же тега). Расследование нюансов, странностей и просто

Ml.7,1 п о з ! мтроваттв И23§ошибок в этих алгоритмах — занятие необычайно увлека-тельное (я сам, надо признаться, отдал ему должное в своевремя), но малопродуктивное. Лучше примите к сведениюнебольшой набор советов, следование которым защитит васот большинства неприятных неожиданностей:

• Не полагайтесь на «рекомендательные» размеры для от-дельных ячеек; если вам нужно, чтобы ячейка имелаопределенную ширину и высоту, вставьте в нее соот-ветствующих размеров распорку. Без атрибута widthв теге TD нельзя обойтись только тогда, когда нужноограничить ширину ячейки, содержащей текст (причемрезультат будет соответствовать ожиданиям, только еслитекста этого хватает при данной ширине хотя бы на однуполную строку).

Имеет смысл зафиксировать также общую ширину са-мой внешней таблицы, определяющей габариты всейстраницы: атрибуту width соответствующего тега TABLEобычно присваивается значение 100% для «резинового»и около 580 пикселов для жесткого табличного дизайна(стр. 193). Более того, без жесткого (в пикселах) зада-ния ширины в теге TABLE таблица, содержащая слитыепо горизонтали ячейки, иногда совершенно необъясни-мым образом «распухает», так что ее ширина превосходитсумму ширин распорок во всех ячейках.

• При необходимости можно сращивать несколько ячеекпо горизонтали (атрибут colspan тега TD), но тольков том случае, если ширины участвующих в операциистолбцов жестко заданы распорками в других ячейках;если же, наоборот, жестко задана только ширина объ-единенной ячейки, на правильное распределение этойширины между столбцами рассчитывать не приходится.По этой же причине объединять ячейки по вертикали нерекомендуется вообще — лучше пользоваться вложенны-ми таблицами (рис. 52).

• В сложных случаях, когда таблица упорно не хочет вестисебя как задумано, можно подсветить границы ячеек,заменив в заголовке border=0 на border=l, — удоб-ное средство отладки, аналогичное временной замененевидимых распорок на видимые (см. выше). Учтите,что появляющаяся рамка добавляет по одному пикселуширины и высоты на каждую ячейку, так что общиегабариты таблицы изменяются.

Р и с . 52 Условия задачи:ячейка А должна иметь пе-ременную высоту, так как со-держит текст; ячейка В со-держит графическую вставкуи должна точно соответство-вать ей по размерам; высотаячейки С, следовательно, долж-на быть равна разности высотячеек А и В. Попытка решитьзадачу с помощью rowspan=2в ячейке А к успеху не при-водит; как ни старайся, ячей-ка В выходит выше, чем надо,а С упорно не дотягивает донужной высоты Жесткая рас-порка в С делу не поможет,так как искомая высота С за-висит от А и, следовательно,есть величина непостоянная; непомогает и установка фикси-рованной величины h e i g h t дляячейки В. Можно попробоватьвообще отказаться от разделе-ния ячеек В и С, слив их в однуи отогнав изображение наверхс помощью v a l i g n = t o p ; если,однако, вам нужна разлиновкаили же другой фоновый цвет вВ, не обойтись без вложеннойодноячеечной таблицы вокругизображения. (Те же проблемывстают, хотя и реже, и при го-ризонтальном расположении —ячейки чаще имеют переменнуювысоту, чем ширину.)

была типичным «пожарным» решением, спешной попыткойзалатать самые зияющие дыры HTML. Кроме возможностиустанавливать поля вокруг объектов, никаких усовершен-ствований на тему позиционирования в этой версии ещене было. В CSS2, однако, разработчики стандарта подошлик делу гораздо серьезнее и реализовали логичный и все-объемлющий набор инструментов, позволяющий свободноразмещать материал на плоскости страницы, сняв всякуюнеобходимость пользоваться с этой целью таблицами.

Для начала давайте рассмотрим, чем вообще определяетсяположение на странице того или иного элемента документа(стр. 27). Язык CSS унаследовал от HTML идею разделениявсех элементов, чье содержимое подлежит в той или инойформе выводу на экран, на строчные {inline) и блочные {block).Разница между ними состоит в том, что идущие подрядстрочные элементы выстраиваются по горизонтали, переходяна новую строку, только если исчерпано горизонтальноепространство, тогда как блочные элементы располагаютсявертикально друг под другом (можно сказать, что каждыйблочный элемент начинает собой новый абзац).

Понятно, что и для строчных, и для блочных элементовположение на странице будет зависеть от количества и раз-меров всех предшествующих объектов того же класса. Кромеобразования цепочек, объекты обычно выстраиваются ещеи в иерархические структуры — так, цепочка строчных эле-ментов может находиться внутри блочного элемента (абзацаили таблицы). Таким образом, «в обычной жизни» коорди-наты элемента определяются двумя факторами: положениемэлемента-«родителя» и наличием «старших братьев», т. е.элементов, предшествующих данному и имеющих с нимобщего родителя.

Теперь вам будет легко понять разницу между двумя основ-ными режимами позиционирования, введенными в CSS2:относительным {relative) и абсолютным {absolute). Относи-тельное позиционирование позволяет смещать объект от тойточки, которую он занимал бы по умолчанию с учетом обоихупомянутых только что факторов. Относительное позици-онирование отдельных букв в абзаце позволяет, например,воспроизвести логотип системы Т£Х, в котором буква «Е»смещена вниз не относительно какой-то точки на странице,а относительно своих соседей. Такой логотип ведет себякак единый строчный элемент (в частности, он свободно

« зайн веб-сайтовПозиционирование в CSS.

№•7.2

Спецификация CSS1 (стр. 40)

п о з ш жирование ш 241перемещается при переверстке абзаца). Относительное сме-щение объекта не влияет на следующие объекты в цепочке;они ведут себя так, как если бы тот стоял на своем законномместе, — что может приводить, в частности, к наложениюобъектов друг на друга.

Разновидностью относительного является плавающее (float)позиционирование, при котором объект смещается относи-тельно исходного положения до упора вправо или влево,отодвигая в этом месте текст (а не накладываясь на него).В HTML того же эффекта для изображений можно достичьс помощью атрибута a l i g n тега IMG.

При абсолютном позиционировании элемента снимаетсяодин из двух указанных факторов: положение объектавычисляется относительно его «родителя», но без учета«братьев». Иначе говоря, абсолютное позиционирование насамом деле вполне относительно, но отличается тем, чтоимеет одну и ту же точку отсчета для всех «детей» данногоэлемента-«родителя». Именно с помощью абсолютного по-зиционирования обычно реализуется наложение элементовдруг на друга, а также всевозможные анимационные эффек-ты (для которых нужна также поддержка языка сценариев,стр. 64).

Разновидностью абсолютного является фиксированное (fixed)позиционирование, при котором элементом-«родителем»считается окно броузера. Это позволяет реализовать в CSSнекоторое подобие фреймов (в том числе и с автоматическипоявляющимися полосами прокрутки), а также фоновые«водяные знаки», остающиеся неподвижными при прокрут-ке содержимого переднего плана.

Как относительное, так и абсолютное позиционированиемогут приводить к наложению элементов друг на друга.По умолчанию видимым остается тот элемент, которыйвыводится последним, т. е. стоит дальше всего от началав исходном тексте HTML-документа. Однако автор можетуправлять видимостью элементов и иначе. Для этого нужноприсвоить каждому элементу целое число, обозначающееего координату по «оси Z», направленной перпендикулярноплоскости экрана, — или, иными словами, указать порядко-вый номер «слоя», в котором находится этот элемент. Приналожении видимым будет тот элемент, у которого большезначение свойства z-order, — т. е. тот, который находится«ближе к зрителю».

2 4 2 • д и з а й н в е б - с а й т о в

Оба визуальных броузера поддерживают абсолютное позиционирование на-чиная с четвертых версий. К сожалению, как и в других компонентах CSS,в реализации этой технологии пока что много ошибок и несовместимо-стей. Причем вместо того, чтобы бросить все силы на доводку своегосырого продукта, создатели Netscape Communicator сочли более важнымзастолбить новый участок очередным нестандартным тегом. Тег LAYER,хотя и предоставляет ровно те же возможности, что и абсолютное пози-ционирование средствами CSS, рекламируется фирмой намного активнее(так, вместо термина «absolute positioning» в документации Netscape гораздочаще употребляется «layers» или «layer technology»). Хотя до сих пор смелоетеготворчество давало Netscape известное преимущество в конкурентнойборьбе, я сильно сомневаюсь, что кто-то станет пользоваться тегом LAYERпри наличии полноценной альтернативы, освященной авторитетом Кон-сорциума W3.

1 I V

граика.Противопоставле-

ние текста и графики в объектах информационного дизайна

возникло задолго до появления Интернета и веб-дизайна

как отдельного жанра. Вполне естественно, что большин-

ство дизайнеров склонны уделять основное внимание имен-

но графической составляющей своих работ, к сожалению,

часто в ущерб не только тексту, но и тому, что связы-

вает текст и графику воедино, — структуре содержимого

(стр. 19).

С другой стороны, веб-графика (как и графическая со-ставляющая в любом другом виде дизайна) действительноимеет много специфических черт, невыводимых напрямуюиз фундаментальных принципов дизайна (которым былапосвящена гл. II) и даже из особенностей веб-сайта какединицы информационного дизайна (о которых мы говори-ли в гл. ill). Вот почему материал двух предыдущих глав

2 4 4 • в е б - г р а ф и к а

нужно дополнить рассказом о творческих и технологическихособенностях графических вставок для веб-страниц.

Пожалуй, для тех, кого больше интересует практическая сто-рона веб-дизайна, эта глава может показаться даже важнеедвух предыдущих, так как совершенствование графическихнавыков — самый прямой путь к успеху у заказчикови собратьев-дизайнеров. Я должен признаться, что обычнодержу загрузку изображений в своем броузере выключен-ной — не потому, что меня так уж сильно ограничиваетпропускная способность канала связи, а просто чтобызащитить свое сознание от мутного потока третьесорт-ной графики, затопляющей даже вполне содержательныеи с любовью, хотя и не профессионально сделанные сайты.В то же время я не устану повторять, что главное длядизайнера — целостное видение сайта во всех его информа-ционных, художественных и технологических аспектах и чтовеб-страница может выглядеть более чем профессиональнос минимумом графики (и даже вообще без оной).

Первая часть главы содержит обзор графических техноло-гий — применяющихся в Интернете графических форматов,методов оптимизации графики и некоторых других понятийиз этой области. В сочетании с соответствующим материа-лом гл. I этот раздел даст вам достаточно сведений для того,чтобы разобраться с любой из множества программ подго-товки веб-графики, появляющихся сейчас как грибы последождя. Вторая часть главы представляет собой коллекциюпочти не связанных друг с другом эссе о некоторых вполнесамостоятельных и характерных именно для веб-дизайнажанрах графики — фонах, логотипах, баннерах и визуалах.Наконец, в третьей части (стр. 290) мы познакомим-ся с характерными именно для компьютерной графикиприемами, из которых я выбрал самые популярные в со-временном дизайне — имитации трехмерности и растровыеэффекты.

Техника. В этом разделе нам предстоит изучить некоторые тех-

нологические аспекты подготовки графики для веб-страниц.

Вы должны уже хорошо разбираться в общекомпьютерных

принципах хранения и обработки графики, включая фор-

маты и пиксельную структуру растровых изображений, их

iv.1.1 техника И245

отличие от векторных форм представления, глубину цвета

и ее влияние на размер изображения и т. п. Все эти понятия

мы рассматривали в одном из разделов гл. 1 (стр. 55).

Большинство технических особенностей веб-графики выра-стают из ограничений интернетовских технологий и прин-ципа «общего знаменателя», о котором мы говорили настр. 177. Так, диффузия и «безопасная палитра» GIF-файлов, равно как и необходимость анти-алиасинга, свя-заны с ограниченным разрешением и цветовым охватомустройства вывода — компьютерного экрана. Оптимизацияже графики, поиск баланса между ее качеством и объемом —мера, вызванная в первую очередь низкой пропускной спо-собностью канала связи. В мире веб-графики есть местои ограничениям третьего рода — ограничениям несовер-шенных, устаревших и несовместимых стандартов (хотя,конечно, здесь они проявляются в гораздо меньшей степе-ни, чем в технологиях текстовой разметки).

Как вы уже знаете, большинство графи- П Э Л И Т р Э Ических вставок на веб-страницах используют формат GIFс его ограниченной максимум 256 цветами палитрой. Огра-ничению палитры, однако, можно придать двоякий смысл:оно может распространяться либо только на количество ис-пользуемых цветов, либо и на количество, и на конкретныйих набор. И хотя сам формат накладывает ограничения толь-ко первого рода (стр. 61), принцип «общего знаменателя»заставляет иногда прибегать к некоторой «общепринятой»GIF-палитре с фиксированными цветами.

Зачем это нужно? Дело в том, что перевод изображенияв ограниченную палитру часто сопровождается диффузией(dithering). При этом области, которые в оригинале былизалиты однородным цветом, после преобразования заполня-ются смесью беспорядочно разбросанных пикселов разныхцветов. Как правило, каждый отсутствующий в редуциро-ванной палитре цвет передается смесью в нужной пропор-ции пикселов двух самых близких к нему цветов новойпалитры. В результате изображение приобретает характер-ную зернистую, шершавую фактуру. Очень часто диффу-зия является единственным способом хоть сколько-нибудьадекватно передать исходные цвета с помощью палитры, накоторой этих цветов уже нет (рис. 54).

Палитра и диффузия

Р и с . 54 Диффузия под ми-кроскопом: так Adobe Photo-shop распределяет пикселы припопытке передать черно-белыйградиент восъмицветной пали-трой

2 4 6 • в е б - г р а ф и к а

В случаях, когда исходное изображение имеет значительнобольше цветов, чем можно (или нужно) оставить в форматеGIF, без диффузии не обойтись, и вводит ее тогда сам ди-зайнер (точнее, программа, которой он пользуется) на этапеперевода изображения в формат GIF (подробнее об этомчуть ниже). Но, к сожалению, иногда цветовыми преобра-зованиями начинает заниматься и броузер на компьютерепользователя. На мониторах, неспособных отобразить од-новременно больше 256 цветов (а такие мониторы все ещесоставляют заметный процент), оба визуальных броузеравынуждены при выводе графических файлов -— даже в фор-мате GIF с уже редуцированной палитрой — изменять ихцвета.

Причин для этого две. Во-первых, броузеру приходитсяприводить к общему знаменателю палитру всех графическихвставок на веб-странице. Во-вторых, чаще всего не обойтисьтакже без приспособления палитры графики к полностьюили частично фиксированной системной палитре — в любомслучае из 256 доступных цветов несколько будут занятыпод рамку окна и логотип броузера в правом верхнемуглу. Чтобы эти неизбежные преобразования не приводилик совсем уж неприемлемым результатам, все современныеброузеры пользуются при замещении палитры диффузией.Это значит, что даже если ваше изображение состоит изидеально гладких цветовых плоскостей, но палитра его неможет быть отображена напрямую, в броузере оно станетшероховатым.

Проблема эта действительно серьезна, так как для мно-гих изображений, составляющих нередко основу дизайнастраницы, диффузия крайне нежелательна. Что же делать?Оказывается, существует набор из 216 цветов, которые с га-рантией никогда не подвергаются диффузии ни в одном изброузеров и ни на одной из платформ. Если ваше изобра-жение будет содержать только цвета из этого набора (или,по крайней мере, к этому набору будут относиться цвета,занимающие наибольшую площадь), на 256-цветном экранеоно будет выглядеть намного чище и привлекательнее. Этупалитру часто называют «безопасной» (англ. browser-safepalette) или «интернетовской».

Для изображений с преимущественно фотографическимитекстурами, которые подвергаются диффузии еще при со-хранении в формате GIF (напомню, однако, что дляних разумнее пользоваться форматом JPEG) и для которых

iv.1.2 техниса И247

поэтому дополнительная диффузия в броузере уже не страш-на, пользоваться этой безопасной палитрой нет никакогосмысла. Однако сколько-нибудь значительные по размерузаливки плоским цветом очень желательно защитить отдиффузии. Отсюда, кстати, следует, что комбинированнуюграфику, объединяющую фотографические и плоскоцветныеэлементы, лучше по возможности разделять на части, чтобыдиффузия одной составляющей не затрагивала другой.

Очевидно, что серьезно относящийся к цветовому решениюсвоих работ дизайнер должен позаботиться о цветовойбезопасности на самых ранних стадиях проекта. Встроеннаяили загружаемая «интернет-палитра» есть сейчас во многихвекторных и растровых графических программах. Ничто немешает вам выбирать ее цветовые значения и вручную,пользуясь таким несложным правилом: 216 цветов этойпалитры получаются комбинированием красной, зеленойи синей составляющих, каждая из которых может приниматьтолько шестнадцатеричные значения 00, 33, 66, 99, СС и FF(или десятичные 0, 51, 102, 153, 204 и 255). Таким образом,три составляющих, каждая из которых может приниматьшесть разных значений, дают б3 == 216 возможных цветов.Диффузия в броузере и безопасная палитра, еще недавно бывшие источ-

ником головной боли для веб-дизайнеров, постепенно теряют актуальность

по мере того, как устаревают и вымываются из общей массы персональных

компьютеров 256-цветные дисплеи. Эту тенденцию нельзя не приветство-

вать хотя бы потому, что она открывает перед автором настоящий океан

цвета, позволяет выбирать неочевидные, неприевшиеся оттенки. С другой

стороны, если какие-то цвета в вашей композиции не несут большой смы-

словой или эстетической нагрузки, надежнее округлить их до ближайших

значений безопасной палитры.

Те же, кто желает обеспечить одинаковое воспроизведение цветов как навосьмибитных, так и на 24-битных устройствах вывода и при этом неудовлетворен бедностью безопасной палитры, могут воспользоваться по-явившимися недавно утилитами-смесителями (color blenders). Смесителиэти производят «гибридные цвета» — заливки, состоящие из расположен-ных в шахматном порядке пикселов двух цветов безопасной палитры. Еслине считать некоторой текстурной шероховатости, такой «гибридный» цветвоспринимается как новый, выходящий за безопасные рамки плоский цвет;с другой стороны, будучи составлен из безопасных пикселов, он не изме-няется при отображении на 256-цветных устройствах вывода.

Производимое графикой впечатление сильно Ц В 6 Т О В Ы О Г р Э Н И Ц Ызависит от того, как в растровом изображении оформле-ны границы областей, закрашенных разными цветами, —или, иными словами, как сложные криволинейные конту-ры изображаемых объектов соотносятся с прямоугольнойрешеткой пикселов. Особенное значение этот аспект имеет

Цветовые границы

• ЖШ

для экранной графики и ее подмножества — графическихэлементов веб-дизайна: ведь физические размеры пикселана экране во много раз больше, чем на бумаге.

Очевидно, что случай, когда граница цветов идет стро-го горизонтально или вертикально и при этом совпадаетс границей рядов или столбцов пикселов, может быть лишьисключением. В большинстве картинок не обойтись безпикселов, рассеченных «идеальной», векторной цветовойграницей на части. Если, к примеру, граница разделяетчерную и белую области, то простейший подход будетзаключаться в том, чтобы закрашивать такие граничныепикселы черным или белым в зависимости от того, какогоцвета на них приходится больше. Этот алгоритм применя-ется тогда, когда невозможно закрасить пиксел каким-либопромежуточным (в данном случае серым) цветом, а самипикселы малы по размеру — что имеет место, например,при печати на лазерном принтере.

На экране же все обстоит ровно наоборот: пикселы на-столько крупны, что заметны невооруженным глазом, нопри этом гораздо лучше приспособлены к воспроизведениюполутонов. В этой ситуации разумнее закрашивать каждыйграничный пиксел промежуточным цветом так, чтобы соот-ношение смешиваемых цветов соответствовало пропорции,в которой данный пиксел делится границей этих цветов.Например, чем больше приходится черного на пиксел награнице черной и белой областей, тем темнее должен бытьего цвет (рис. 55).

Этот метод, называемый сглаживанием контуров, или анти-алиасингом (anti-aliasing), позволяет получить визуально го-раздо более гладкие (но при этом не кажущиеся размыты-ми) цветовые границы, успешно прячущие от восприятияпиксельную структуру экрана. Можно сказать, что анти-алиасинг компенсирует низкую разрешающую способностьэкрана за счет его более богатой цветопередачи. Так, текстс анти-алиасингом может не только оставаться читабель-ным вплоть до очень мелких размеров (когда каждая буквазанимает по десятку пикселов в высоту), но и сохранятьв таких размерах характерные графические особенностишрифта (рис. 56).В то же время в самых мелких кеглях (меньше 5—6 пикселов на высо-ту буквы) от анти-алиасинга лучше все же отказаться, взяв вместо этогоособый шрифт, оптимизированный для подобных экстремальных условий(к таким шрифтам относятся, например, большинство системных шрифтовWindows). Лучшие результаты дают шрифты без засечек; конечно, вряд

Р и с . 55 Как воспроизвестицветовую границу сложнойформы в пиксельной решеткерастрового изображения (а) ?Без сглаживания каждый гра-ничный пиксел закрашиваетсяодним или другим цветом в за-висимости от того, по какуюсторону границы лежит боль-шая часть его площади (б).Анти-алиасинг вводит для гра-ничных пикселов промежуточ-ные тона, в которых пропор-ция смешения определяется со-отношением площадей цветов,приходящихся на соответству-ющий пиксел (в)

iv.1.2 темнима И249

ли при этом стоит рассчитывать на узнаваемость шрифта, но надпись покрайней мере можно будет прочесть.

В веб-графике анти-алиасинг — не роскошь, а средство вы-живания, абсолютно обязательное для хоть сколько-нибудьпрофессиональных работ уже потому, что размер графикии текста на веб-страницах, как я уже упоминал (стр. 194),в пиксельном измерении обычно весьма мал. Отказы-ваться от смягчения контуров следует только для строгогоризонтальных или вертикальных цветовых границ, когда «Лучше СОВрать На ПОЛПИКСела В ПОЛОЖеНИИ ЭТОЙ Грани- р И С ш 56 Анти-алиасинг в

ЦЫ, Чем ВВОДИТЬ ОДНОПИКСеЛЬНую КрОМКу П р о м е ж у т о ч н о г о действии: сглаживание конту-

ЦВета. Ров позволяет не только со-хранить разборчивость текста

К р о м е ТОГО, анТИ-аЛИаСИНГ МОЖет Навредить В ИЗОбражеНИ- в мелком кегле, но и передать

ЯХ, ЧаСТИ КОТОРЫХ ( н а п р и м е р , ЛИНИИ р е г у л я р н о й р е ш е т к и ) с помощью буквально несколь-

сопоставимы по размеру с единичными пикселами: такие ких ткселов наклон и харак-объекты лучше рисовать уже непосредственно «в растре» ^ ^ * и ч е с к и е °С°беНН°'инструментами без анти-алиасинга (в Adobe Photoshop,например, для этого подходит инструмент Pencil), а неэкспортировать их из векторного оригинала. Это относится,в частности, к пиксельным текстурам (стр. 119) и тонкимгоризонтальным и вертикальным линиям (стр. 93).Экранный анти-алиасинг. Единственная загвоздка с широким при-менением анти-алиасинга была до последнего времени в том, что аппа-ратные средства массовых компьютеров позволяли отображать на экранелишь ограниченную палитру цветов, что делает практически невозможнымсглаживание контуров «на лету». В последнее время, однако, когда режимhigh color (стр. 61) становится общепринятым минимумом, анти-алиасингвстраивается во все большее количество программ. В частности, его мож-но задействовать для всех текстов, выводимых на экран в операционнойсистеме Windows 95/98.

Подавляющее большинство графических программ давно уже умеют поль-зоваться анти-алиасингом при создании и трансформации изображений(растровые программы) или при экспорте векторного изображения в ра-стровый формат (векторные программы). В то же время поддержка экранно-го анти-алиасинга, значительно повышающего комфортность работы с гра-фикой, реализована пока лишь в некоторых векторных редакторах (напри-мер, CorelXARA).

И з - п о д пятницы с у б б о т а . Сглаженные контуры объ-ектов могут вступать в конфликт с прозрачными обла-стями изображения в формате GIF, которые никакомусглаживанию не поддаются: пиксел в GIF может бытьлибо прозрачным, либо нет, полутона здесь невозможныв принципе. Конечно, вытравливая фон вокруг объекта,правильнее всего было бы сплавить его контур не с фо-новым цветом, а с прозрачностью, так чтобы в граничныхпикселах смешивались не два цвета, а цвет объекта с неким

Р и с . 56 Лнти-алиасинг вдействии: сглаживание конту-ров позволяет не только со-хранить разборчивость текстав мелком кегле, но и передатьс помощью буквально несколь-ких пикселов наклон и харак-терные графические особенно-сти шрифта

2 5 0 • в е б - г р а ф и к а ШАЛ

промежуточным уровнем прозрачности, — такой объектсохранял бы анти-алиасинг своего контура над любым,в том числе и многоцветным, фоном. К сожалению, покачто подобное возможно только в формате PNG, до сих порне поддерживаемом напрямую графическими броузерами.

В GIF же, к сожалению, любое изображение, пользующеесяпрозрачностью и анти-алиасингом одновременно, вынужде-но нести в себе информацию о цвете фона в каждой точкеконтура в виде тонкого ореола, который становится заметен,когда цвет фона под изображением почему-либо отличаетсяот задуманного. Например, если в изображении на рис. 5S,в объявить прозрачными все белые пикселы, результат будетсмотреться хорошо только на странице с белым фоном. Еслиже фон будет иметь какой-то другой цвет, то вокруг черногообъекта будет видна неряшливая белая каемка.

Практических рекомендаций из этого можно вывести две.Во-первых, следует отказаться от анти-алиасинга внешнегоконтура для тех изображений, фон под которыми заранеене известен. А во-вторых, любую графику с прозрачностьюнужно подготавливать (рисовать в растре или импортироватьиз векторного формата) с тем фоном, который будет подэтим изображением в готовой композиции. Это относитсяи к тем случаям, когда изображение должно размещатьсянад цветовой границей, — как, например, помещенный надграницей синего и белого логотип сайта в примере 15.Такую графику приходится готовить в два этапа: сначалаобъект создается с анти-алиасингом поверх фона нужногоцвета и рисунка, а затем этот фон (за исключением ореолаанти-алиасинга вокруг объекта) закрашивается одним цве-том и цвет этот объявляется прозрачным. Из-за колебанийвеличины полей веб-страницы (стр. 194) перемена цветаореола может на несколько пикселов не совпадать с цвето-вой границей фонового изображения, но с этим небольшимдефектом вполне можно примириться.Казалось бы, с одноцветным бестекстурным фоном страницы прозрачностьдля элементов переднего плана вообще не нужна. Однако из-за почти неиз-бежной диффузии в броузере к прозрачности приходится прибегать и в этомслучае: если вы заполните фоновые части изображения тем же самым цве-том, что и фон страницы, но не сделаете их прозрачными, на 256-цветныхмониторах граница между шершавым фоном рисунка и гладким фономстраницы в броузере будет слишком хорошо заметна. Отсюда же следу-ет, что в изображениях с прозрачностью нельзя пользоваться редукциейпалитры с диффузией — ведь прозрачным может быть объявлен толькоодин цвет, и если фон изображения будет состоять из смеси разноцветныхпикселов, полностью прозрачным его сделать уже не удастся.

Кроме анти-алиасинга, существует еще 1 И К С 6 Л Ь Н 1несколько достойных упоминания эффектов, проявляющих-ся на уровне отдельных пикселов изображения. Так же какмногие законы физики макромира отказывают при переходена уровень элементарных частиц, мир микроскопическойграфики имеет свои собственные правила и запреты.

Прежде всего, все цвета в малоразмерных графическихэлементах обязаны быть значительно ярче, контрастнее поотношению к своему окружению, в каком-то смысле даже«примитивнее». Я уже писал об особенностях восприятияцвета в малых по площади объектах (стр. 109); особенно-сти эти не ограничиваются едва заметными оптическимииллюзиями, но зачастую требуют весьма значительной кор-ректировки цвета. В экранной графике «потере индивиду-альности» цвета способствует анти-алиасинг, разбавляющийцвет краевых пикселов цветом фона: чем меньше объекти чем сложнее его форма (хороший пример — текст мелкимкеглем), тем большая доля составляющих его пикселов кра-евые и, следовательно, тем дальше воспринимаемый цветобъекта от задуманного.

Например, если в композиции присутствует залитая деся-типроцентным серым плашка на белом фоне, а под ней —некий текст мелким кеглем, который по замыслу дизайнерадолжен соответствовать плашке по цвету, может оказатьсянеобходимым значительно затемнить серый цвет надпи-си, иногда до 20 процентов серого и выше. И наоборот,яркость серого текста на черном фоне может понадобить-ся повысить для компенсации влияния малого размераи анти-алиасинга.

В малых размерах отказываются работать многие графиче-ские эффекты, связанные с изменением текстуры, такие какразмывки, тени, трехмерность и т. п., — все эти украшенияпри уменьшении за некоторый минимум превращаютсяв нечленораздельную грязь. В малоразмерной графике под-час не хватает места даже для плоского цвета, вытесняемогоанти-алиасингом (который, кстати говоря, в таких размерахначинает проявлять свое родство с фотографическими тек-стурами); любые другие текстуры не могут даже возникнутьна площади размером в считанные пикселы — так же какневозможно сделать осмысленные статистические выводыпо выборке в десяток наблюдений.Здесь же уместно напомнить о правиле выравнивания пропорций приуменьшении (стр. S4), о пиксельных текстурах (стр. 119) и о том, что

т е х м & н с а • 2 5 1

Пиксельные эффекты

2 5 2 • в е б - г р а ф и к а iv.1.4

объекты масштаба отдельных пикселов должны создаваться уже на стадиирастрового изображения, а не в векторном оригинале.

О П Т И М И З Э Ц И Я ш Технологическая цепочка производства графики для веб-страниц обычно включает три этапа: создание графическихэлементов в векторном редакторе, экспорт в полноцветныйрастровый формат и, наконец, оптимизацию полученнойграфики с одновременным переводом ее в формат с огра-ниченной цветностью (GIF) или в формат, реализующийсжатие с потерями (JPEG). Иногда между вторым и третьимэтапами на изображение накладываются какие-то специфи-чески растровые эффекты (например, тени или размывки);в других случаях, наоборот, второй этап может отсутствоватьвообще, если векторная программа способна экспортироватьграфику сразу в GIF или JPEG и предоставляет при этомдостаточные для профессионала возможности настройкиэтого процесса.Когда проект завершен, в архиве безусловно должны остаться векторныеоригиналы и конечный результат работы — оптимизированная графикав GIF или JPEG. Промежуточные же растровые файлы (для которых чащевсего используется формат TIFF) вполне можно стереть, если только к нимне применялось никакой специфической пост-векторной обработки.

Итак, оптимизация графики — т. е. поиск компромиссамежду ее качеством и объемом файла — сводится к вы-бору, во-первых, одного из двух форматов, а во-вторых,параметров сжатия в выбранном формате. Кроме практи-ческого опыта, большую помощь при этом может оказатьзнание свойств основных видов текстур и умение опозна-вать их в изображениях: как я уже упоминал (стр. 61),граница между владениями GIF и JPEG почти совпадаетс разделительной линией между плоскоцветными и фото-графическими текстурами.

J P E G . Сжатие графики в формате JPEG определяет-ся одним-единственным параметром, называемым уровнемкачества (quality) и измеряемым в относительных едини-цах — чаще всего от 0 (максимальное сжатие) до 100(максимальное качество). Большинство JPEG-файлов со-храняются с уровнем качества в диапазоне от 50 до 100.Как правило, чем плавнее и размытее цветовые переходыв изображении, тем меньшим может быть этот параметри тем большего сжатия удается достичь. Наоборот, чет-кие и контрастные цветовые границы требуют повышенияуровня качества, иначе возле них появляется неряшливая«рябь».

Оптимизация.

IV.1.4 Т в Х Н И К Э • 2 5 3

Простота настройки этого формата (и относительная ред-кость в дизайне фотографических текстур по сравнениюс плоским цветом) позволяют сформулировать первый шагалгоритма оптимизации так: если принадлежность изобра-жения к владениям одного из форматов не очевидна длявас с первого взгляда, попробуйте сначала сохранить егов формате JPEG, повышая степень сжатия до тех пор,пока качество не перестанет вас удовлетворять. Даже еслиполучившийся файл будет несоразмерно велик и вы решитепереехать в GIF, у вас, во всяком случае, будет цифра,с которой можно будет сравнить результаты. В большинствепрактических случаев, однако, можно сразу же выбратьлибо JPEG (для настоящих фотографий и композиций,в которых они доминируют), либо GIF (для плоскоцвет-ных логотипов, надписей, заголовков и т. п.). СродствоJPEG'a с фотографическими текстурами столь велико, чторазмер файла в этом формате (при заданном уровне каче-ства) вполне можно использовать как объективную «меруфотографичности» изображения.Возвращаясь к теме малоразмерной графики, нужно отметить, что дляизображений, размер которых меньше приблизительно ста пикселов поодному из измерений, единственным разумным выбором остается форматGIF. Как я только что писал, сложные текстуры на таких маленьких пло-щадях чувствуют себя неуютно, — а если даже вам и нужен крохотныйфрагмент фотографии, GIF справится с его воспроизведением ничуть нехуже, чем JPEG. Последний формат попросту не приспособлен для мало-размерной графики — достаточно сравнить объемы изображения размеромв один пиксел (стр. 237): 43 байта в GIF и свыше полутора килобайтв JPEG.

GIF. Взамен единственного и довольно-таки абстрактного«уровня качества» степень сжатия в GIF регулируетсярядом параметров, самым важным из которых являетсяколичество цветов, или размер палитры. Другие форматы,как правило, имеют лишь стандартные градации цветовойглубины: 2 цвета, 16 цветов, а потом сразу 256, 2 1 5 (highcolor) и 2 2 4 (true color, стр. 61). GIF же может иметьлюбое количество цветов от 2 до 256, и если в изображениииспользуется, скажем, 64 цвета (26), то для хранениякаждого пиксела будет взято ровно по шесть бит и ни битомбольше. (Втиснув то же изображение в 60 или 40 цветов,вы получите лишь незначительный выигрыш в размере;следующий скачок оптимизации произойдет только припереходе через 32 цвета, когда размер каждого пикселасократится еще на один бит.)Если не применяется безопасная палитра, графическая программа са-ма решает, какие именно цвета останутся при редукции полноцветного

изображения в ограниченную палитру. Общее правило таково: чем большекакого-то цвета в оригинале, тем выше вероятность того, что он в неиз-менном виде войдет в редуцированную палитру; менее популярные цвета,наоборот, будут «округлены» к ближайшим цветам палитры либо переданысмесью пикселов близких цветов (если включена диффузия). Как видите,принцип этот сформулирован достаточно общо, так что конкретные алго-ритмы редуцирования палитры могут отличаться довольно сильно — чтои наблюдается в многочисленных программах-оптимизаторах, предназна-ченных единственно для сохранения графики в формате GIF.

Сколько же цветов нужно для вашего изображения? Хо-тя опыт определения цветовых потребностей графики «наглазок» приобретается довольно быстро, во многих случаяхприходится поэкспериментировать. Так, одноцветному тек-сту на одноцветном фоне должно хватить палитры из 8,а в небольших размерах даже и 4 цветов — два из них станут«основными», а остальные отойдут промежуточным тонамдля анти-алиасинга. С другой стороны, 256 (а иногда и 128)цветов с диффузией обычно вполне достаточно для полно-ценной передачи фотографического изображения среднихразмеров (хотя с этой задачей, скорее всего, лучше справит-ся JPEG). Основная часть веб-графики располагается где-тов промежутке между этими крайностями.

Сжатие без потерь и ограниченность палитры 256 цветами,собственно говоря, никак не связаны друг с другом, хотявеб-дизайнеры, пользующиеся форматом GIF, привыклик одновременному действию этих факторов. Разработан-ный сравнительно недавно формат PNG (Portable NetworkGraphics) реализует более эффективное, чем GIF, сжатиебез потерь, но при этом может хранить не только графикус фиксированной палитрой, но и полноцветные изобра-жения с тремя байтами на пиксел. Этот формат имеети множество других преимуществ, благодаря которым он,вероятно, вытеснит GIF сразу же, как только его поддержкапоявится в распространенных графических броузерах.

В з б о л т а т ь и н а с т о я т ь . На величину палитры сильновлияет наличие или отсутствие диффузии — метода, под-меняющего смешение цветов внутри пиксела смешениемпикселов разных цветов. Основанная на псевдослучайном(стр. 87) распределении пикселов, диффузия обнаруживаетсвое несомненное сродство с фотографическими текстура-ми: хотя на первый взгляд диффузная зернистость совсемне похожа на фотографическую плавность и размытость,для глаза сочетание этих двух аморфных (стр. НТО) текстургораздо естественнее, чем диффузия изображений с плоскимцветом и четкими границами объектов.

шля т е х н и к а • 2 5 5

Если «сыпь» пикселов на плоскоцветных участках можнов конце концов вылечить увеличением размера палитры(занимающие определенную площадь цвета рано или позд-но получат свои собственные клеточки в цветовой таблицеи тем самым избавятся от диффузии), то на резких цветовыхграницах с анти-алиасингом диффузия приводит к появле-нию принципиально неустранимых «зубчиков» (рис. 57).Человеческий взгляд все равно бы не смог заметить фальшьв отдельных граничных пикселах — но программа, увы, обэтом не подозревает и добросовестно старается «аппрок-симировать» края объектов диффузией, для которой тампопросту нет места.

Главный смысл использования диффузии — в том, чтоизображение при этом становится гораздо терпимее к раз-меру палитры. Например, если без применения диффузиикартинка не выдерживает редукции даже до 128 цветов,то с диффузией ее можно обкорнать до 64 или даже 32цветов без особой потери качества. С другой стороны,случайная диффузия, как и любая нерегулярность («шум»)в данных, резко ухудшает сжимаемость графики. Вот по-чему иногда, снизив цветность картинки, скажем, с 256до 128 цветов, из-за этого противоположно направленногоэффекта вы вместо уменьшения размера файла получитеувеличение.

К сожалению, даже диффузия подчас неспособна «вытя-нуть» такие сугубо фотографические элементы изображения,как размывки и градиенты. На рис. 54 хорошо заметно,как при воспроизведении в ограниченной палитре градиентраспадается на сильно портящие впечатление поперечныеполосы (впрочем, надо отдать справедливость диффузии, —без нее эти полосы были бы несоизмеримо заметнее). Мно-гочисленные программы-оптимизаторы с разной степеньюуспеха пытаются избавиться от этой «полосатости» (англ.banding), но до конца это не удается пока что никому.Как и у программ-архиваторов, степень сжатия графической информации

в GIF сильно зависит от уровня ее повторяемости и предсказуемости,

а иногда еще и от ориентации картинки. Поскольку GIF сканирует изо-

бражение по строкам, то, к примеру, градиент, направленный сверху вниз,

сожмется куда лучше, чем тех же размеров градиент, ориентированный

слева направо, а этот последний — лучше, чем градиент по диагонали.

Диффузия, хотя и сильно ослабляет эффект зависимости степени сжатия

от ориентации, все же не отменяет его.

Ч у д н о е м г н о в е н ь е . Особый жанр искусства оптими-зации — редукция палитры кадров анимированных GIF-файлов. Не только более жесткие требования к объему

Р и с . 57 «Зубчики», возни-кающие при редукции палитрыс диффузией, особенно замет-ны на вертикальных и гори-зонтальных цветовых грани-цах с анти-алиасингом; хотя,как я писал, в таких местахсглаживания контуров следуетизбегать, это не всегда воз-можно — очень часто в изо-бражениях вертикальные и го-ризонтальные участки контурасоседствуют с диагональными,в которых без анти-алиасингане обойтись

in a iv.1.5

файлов, но и физиологические особенности восприятиядвижущихся изображений позволяют обходиться для кадров«мультиков» гораздо более скромной палитрой и во многихслучаях отказываться от таких предметов роскоши, какдиффузия или анти-алиасинг.

Быстро мелькающие изображения не только не позво-ляют зрителю заметить безжалостность оптимизации, нои (если у следующих друг за другом кадров есть хотьчто-то общее) компенсируют недостатки друг друга, на-капливая визуальное впечатление предсказуемо движуще-гося или изменяющегося объекта и нейтрализуя случайнорасположенные дефекты. То же самое можно наблюдатьв кинематографе, где субъективное качество движущейсякартинки всегда заметно выше, чем качество любого отдель-ного кадра. Очевидно, что требования к качеству каждогоGIF-кадра должны быть тем выше, чем дольше он остаетсявидимым.

)• Напомню, что, вставляя подготовленное изображениев HTML-документ, нужно снабдить его двумя обязатель-ными вещами: alt-текстом (стр. 35) и явным указаниемширины и высоты атрибутами h e i g h t и width. К пред-мету этой главы имеет прямое отношение возможностьмасштабирования графики указанием в HTML габаритовизображения, отличных от реальных. Если уменьшать гра-фику таким манером никакого смысла нет (лучше сразусделать ее маленькой, сэкономив тем самым на объемефайла), то сильное растягивание картинки (в том числеи с нарушением пропорций ширины и высоты) — хотяи редко встречающийся, но достаточно интересный приемоформления.

Броузер не пытается как-то сгладить раздутую графику, пе-редавая каждый увеличенный пиксел прямоугольником —примерно так, как растровая решетка изображается с увели-чением на большинстве рисунков в этом разделе. Поэтомунезначительное, на проценты, растяжение картинки не дастничего, кроме неприятных ступенек в контурах объектови искажений букв текста. Самостоятельную художественнуюценность может иметь только картинка, растянутая в ра-зы, пикселы которой видны невооруженным глазом. Этотэффект особенно интересен, когда пониженная плотностьинформации на единицу площади в таком изображениикомпенсируется анимацией (анимированный GIF продол-жает крутиться как ни в чем не бывало и в раздутом

IV.2.1 ф у Н К Ц И И • 2 5 7

виде). Если же добавить к этому возможность привязатьразмеры графической вставки к размеру окна броузера (на-писав, например, height="100%" width="100%"), в суммевы получите несколько «попсовый», но без сомнения весьмавпечатляющий оформительский прием.Пожалуй, дичайший из встречавшихся мне примеров бессмыслицы в веб-дизайне — это залинкованные на большие графические файлы «ноготки»(стр. 258), на самом деле представляющие собой те же полноразмер-ные файлы, уменьшенные лишь масштабированием атрибутами h e i g h tи width.

ФункцииПереходя от технических аспектов веб-графики

к творческим, я начну с попытки классификации материала,

а если быть совсем точным — с обзора уже сложившихся

(несмотря на молодость этого вида творчества), характерных

категорий интернетовской графики.

Для некоторых элементов веб-страницы, чаще всего ре-ализуемых в виде графических вставок (а именно длязаголовков, стр. 201), и элементов навигации, стр. 205),выполняемая ими функция важнее, чем чисто дизайнер-ские особенности, так что я счел возможным вынести ихобсуждение в предыдущую, более техническую по тематикеглаву. Здесь же нам предстоит познакомиться с принципа-ми создания других, не менее характерных для веб-дизайнажанров графики: фонов, логотипов, баннеров и визуалов.

Графика — это та область, в которой специфика веб-дизайна и интернетовских технологий отходит на второйплан, сводясь к необходимости минимизировать размерфайла и учитывать габариты веб-страницы в пикселах(стр. 194). С точки зрения дизайнера, графической компо-зиции на веб-странице нет никакого резона сколько-нибудьзаметно отличаться по стилю от представителей того жежанра в рекламном или журнальном дизайне. Вот почемуотчасти эта глава представляет собой возвращение к темами подходам гл. II, посвященной «дизайну вообще» с мини-мумом интернетовской специфики.

Функциональный подход к классифи- В Ы С Т Э В О Ч Н Э Я Г р Э С р И К Экации веб-графики позволяет выделить одну ее разновид-ность, вообще лишенную какой бы то ни было прикладнойфункции, — «графику ради графики», графику как таковую.К этой категории принадлежат сканированные фотографии,

Выставочная графика

веб- iv,a.i

репродукции картин, факсимиле рукописей, снимки гото-вых страниц в портфолио веб-дизайнера и тому подобныеизображения, размещаемые на сайте не с какой-то слу-жебной или декоративной целью, а ради них же самих.Дизайнер здесь сталкивается с трудностями того же свой-ства, что и при попытках вписать в свою композициючужеродный рекламный баннер (стр. 204): внешний видзаранее заданного «выставочного» элемента менять нельзя,даже если с другими элементами страницы он совсем негармонирует.

Разумеется, в тех случаях, когда единственная цель страницыили всего сайта — служить рамкой для такой выставочнойграфики, дизайн с самого начала должен быть максимальнонейтральным, не лезущим на передний план. Однако этоне всегда возможно — тот же сайт веб-дизайнера, к при-меру, вряд ли обойдется слишком скромным оформлением,и задача естественно обставить уход «фирменного стиля»сайта за кулисы при переходе к разделу портфолио можетоказаться совсем не простой.

Ограничения на объем пересылаемых по сети файлов сдела-ли популярной следующую схему. На входной странице «га-лереи» собираются уменьшенные копии хранящихся на сай-те изображений — так называемые «ноготки» (thumbnails),обычно снабженные описаниями и другой сопроводитель-ной информацией. Каждый из таких «ноготков» залинкованили прямо на полноразмерную копию изображения, илина почти пустую HTML-страницу с полноразмерной кар-тинкой. Практический смысл этого приема очевиден: про-смотрев уменьшенные копии, пользователь сможет быстрополучить общее . представление о выставленной на сайтеграфике, а при желании и посмотреть заинтересовавшее егоизображение в увеличении.

Эта двухступенчатая схема позволяет иногда решить и про-блему визуальной несовместимости выставочной графикис дизайном самого сайта. Страница с «ноготками», осо-бенно если их собрано несколько, определенно выигрываетот строгого дизайна, объединяющего как выставленныеобразцы друг с другом, так и данную страницу с другимичастями сайта. На странице же с полноразмерной графикой(разумеется, в любом случае содержащей только одно изо-бражение) дизайн как таковой может отсутствовать вообще,а роль HTML обычно сводится к установке фонового цвета(лучше всего нейтрального по тону — черного, белого или

IV.2.2 фуНКЦИИ

серого), прописыванию заглавия и центровке изображенияотносительно границ окна.

Если дизайн двадцатого столетия отличается от стиля Ф О Н Ыпредшествующих эпох в первую очередь приверженностьюк абстрактной геометричности (о которой речь впереди,стр. 268), то характернейшими чертами дизайна послед-него десятилетия нужно признать две темы: частичнойпрозрачности и наложения элементов. Основная масса ди-зайнерской продукции создается сейчас в стиле, которыйможно было бы условно назвать «стилем Photoshop»: буквызаголовков, либо просвечивающие, либо снабженные полу-прозрачными тенями, располагаются поверх фотографиче-ских фрагментов с размытыми краями, плавно переходящихдруг в друга или растворяющихся в фоновом цвете. Этотнабор клише стал почти универсальным и для бумажнойпродукции, и для (и в особенности для) мультимедийногои веб-дизайна.

Сейчас нас в основном интересует тема наложения гра-фических объектов друг на друга, имеющая прямое отно-шение к такому специфическому жанру веб-графики, какфон. Изображение, URL-адрес которого указан в атрибутеbackground тега BODY, будет размножено броузером по всейплощади окна под (и без всякой координации с) содержи-мым «переднего плана». По всей видимости, программистыфирмы Netscape, добавившие эту возможность в версии 2.0своего броузера, не подозревали о том, сколько изобрета-тельности будет проявлено дизайнерами в реализации этойпростой схемы.

Как не н а д о д е л а т ь ф о н . Первой в голову прихо-дит идея взять средних размеров изображение с близкимик квадрату пропорциями (100—200 пикселов по ширинеи высоте) и позволить броузеру действительно размножитьэту картинку по горизонтали и вертикали. Еще совсемнедавно большинство любительских страниц пестрели таки-ми простейшими фонами, тематика которых, несмотря навидимое разнообразие, чаще всего ограничивалась матери-альными текстурами: небо с облаками, мраморные разводыили мятая бумага. Главным объединяющим мотивом такогорода фонов выступает даже не материальность, а нерегу-лярность, подчеркнуто природная аморфность (стр. 100),и именно она лишает эту разновидность фонов какой-либохудожественной ценности.

2 6 0 • в е б - г р а ф и к а

Почему это происходит? Вообще говоря, как мы уже не развидели, контраст аморфности и геометричности, разбро-санности и регулярности — один из самых сильных видовконтраста, и именно в современном дизайне он играет оченьзаметную роль. Что же мешает нам восторгаться ровнымирядами букв и строк поверх случайно разбросанных пятенфона?

Основных причин две. Прежде всего, хотя каждая отдельнаяплитка фона может быть сколь угодно нерегулярной, пря-моугольная решетка таких плиток, наоборот, вводит оченьсильную, подавляющую своей непререкаемостью регуляр-ность, которую практически невозможно замаскировать.Эти две противоположности, проявляющиеся еще в самомфоне (т. е. даже без учета элементов переднего плана), необразуют сколько-нибудь осмысленную контрастирующуюпару — восприятие зрителя ни на секунду не сомневаетсяв том, что регулярность эта «не от хорошей жизни», что онаникак не связана с иррегулярностью текстуры, противостоитей сугубо формально и что, наконец, возникла она как по-бочный эффект технологии, а не как часть художественногозамысла.

С другой стороны, ни регулярный, ни нерегулярный аспектыфона никак не соотносятся с передним планом страницы.Полнейшая и очевиднейшая случайность взаимного рас-положения элементов фона и переднего плана бросаетсяв глаза: как навязчивая музыка с жестким механическимритмом, фон заглушает звучание переднего плана вместотого, чтобы тактично уйти в тень, ослабнуть на тех участках,где он мешает восприятию текста или графики. Конечныйитог всего этого — с трудом переносимое ощущение хаоса,неопрятности и полнейшего отсутствия «хозяйской руки».Беспорядочность может нести художественный заряд, нотолько в том случае, когда он вложен в нее дизайнером;беспорядочность же дикая, необработанная — да к то-му же сочетающаяся со столь же бездушной компьютернойупорядоченностью — вызывает только раздражение.

Раздражение это настолько универсально, что рекоменда-ция вообще воздерживаться от использования фонов навеб-страницах стала одним из общих мест всевозможныхсборников советов по созданию веб-страниц для начина-ющих. Авторы подобных сочинений обычно упирают нанечитабельность текста со слишком ярким и пестрым фо-ном, хотя, как мы видим, у психологического отторжения

IV.2.2 фу i ! mm 261

материальных фонов есть и более глубоко лежащие при-чины.Прогладить с изнанки. Оставив на время в стороне вопросы эстетикифоновых изображений, давайте обсудим одну сугубо техническую пробле-му: как сделать бесшовный фон, у которого были бы незаметны стыки междусоседними копиями «изразца». Сколь бы долго и мучительно вы ни пере-крашивали расположенные у края картинки пикселы вручную, добиваясь ихсоответствия пикселам противоположного края, — в окне броузера линиистыка все равно будут бросаться в глаза. Человеческое восприятие натре-нировано вылавливать признаки порядка в кажущемся хаосе, и какими бынезначительными ни были дефекты «сварки», их повторение в регулярнойпрямоугольной сетке делает их издевательски заметными.Но представьте себе, что у вас вдруг появилась возможность редактироватьфоновый изразец прямо на плоскости, где он находится в окружениисвоих копий, причем так, что любые вносимые изменения отображаютсяодновременно во всех копиях размноженного изображения. Если при этомвы сможете свободно пересекать границы изразцов и сразу же будете видетьконечный результат своих действий — залитую этим фоном плоскость, —то ручное сглаживание и шпаклевка стыков становятся вполне реальнымделом даже без использования каких-то нестандартных инструментов.Чтобы добиться описанного эффекта, достаточно разделить прямоугольниквашего изображения на четыре четверти (рис. 58 , о) и поменять их ме-стами (рис. f£8, б). После этого измененное изображение будет, по сути,представлять собой фрагмент плоскости, заполненной исходным изображе-нием — причем фрагмент этот выбран так, что на нем видны углы четырехсоседних копий изразца. Разумеется, повторение этого изображения в окнеброузера даст совершенно тот же результат, что и повторение исходного(с точностью до сдвига на половину его горизонтального и вертикальногоразмера). Однако теперь края изразца уже не требуют никакой доводки, таккак они только что были созданы заново разрезанием «по живому», — а всестыки, которые нужно замазать, теперь, наоборот, находятся внутри.Из всех методов производства бесшовных фонов этот — самый гибкийи удобный, так как он позволяет пользоваться для уничтожения следовстыка любыми инструментами рисования, размывкой, растушевкой и т. п.Единственное, о чем следует помнить, — это то, что вы должны рабо-тать очень аккуратно в тех областях, где обрабатываемые стыки подходятк новым (после перестановки четвертей) границам изображения (например,на левом конце границы между четвертями 4 и 2 или на верхнем концеграницы между четвертями 4 и 3 на рис. SS, б). Дело в том, что здесьвы можете по неосторожности ввести новые дефекты, которые, опять-таки,станут заметны только после размножения фона на плоскости.Существует и еще один подход к созданию бесшовных фонов — на сей разс помощью несложной (и во многих программах автоматической) проце-дуры, сплавляющей вместе противоположные края готового изображения.Как и в других случаях, когда нечто можно сделать либо автоматически,либо вручную, автоматизация позволяет быстрее и с меньшими затратамитруда получать более устойчивые, хотя в целом менее удовлетворительные(но во многих случаях все же вполне приемлемые) результаты.Чтобы сделать аккуратный шов, этому методу нужен «запас материала» покраям прямоугольной «заплаты». Представьте, что вдоль внешних сторонвыделения, которое надлежит превратить в бесшовный фоновый изразец,вырезаны четыре полоски определенной ширины (рис. 59, а). Затем ка-ждая из этих полосок перенесена к внутреннему краю противоположной

Р и с . 58 Создание бесшов-ного фона перестановкой чет-вертей. Обратите внимание,как заметны стали в (б) не-стыковки деталей фона междучетвертями 4 и 2, 4 и 3

IV.2.2

Р и с . 59 Создание бесшов-ного фона «клапанами» с гради-ентами прозрачности. «Попе-речное сечение» фоновой плитки(в) показывает, как в получен-ном этим методом фоне сосед-ние изразцы частично накла-дываются друг на друга, такчто на линии шва видимостькаждого из них составляет по

стороны и там наложена поверх старого изображения (рис. 59, б). Приэтом прозрачность перенесенной полоски равна 50% на самом краю и по-степенно увеличивается вплоть до полной невидимости по направлениюк центру прямоугольника. Прозрачность же того фрагмента изображения,который оказался под полоской, наоборот, уменьшается на этом отрезке от50% до нуля (рис. 69, в). Если вы мысленно покроете плоскость копиямитакого изображения, то увидите, как соседние прямоугольники склеивают-ся друг с другом с помощью этих «клапанов».

Очевидно, что для применимости этого метода нужно, чтобы по краям вы-деленной области, которую вы хотите превратить в элемент фона, остава-лось достаточно места для выкраивания клапанов (как правило, их ширинасоставляет около 20% от размера выделения). Этот метод дает хорошиерезультаты для нечетких, размытых текстур, не содержащих отчетливых де-талей и контрастных переходов. Однако если изображение содержит текстили псевдотрехмерный рельеф, результаты будут, скорее всего, неудовле-творительными, так как в этом случае наложение одной копии изображенияна другую слишком заметно для глаза.

О д н о м е р н ы е ф о н ы . Как же превратить фон извернейшего признака любительского, «побрякушечного»оформления в инструмент профессионального веб-дизайна?Одновременно избавляясь от назойливой повторяемостиэлементов фона и координируя фоновую графику с содер-жимым переднего плана, мы приходим к нескольким типич-ным схемам построения фонового слоя веб-страницы.

Самый распространенный в настоящее время тип фоно-вых изображений — это фоны, размножаемые только поодному измерению. Если взять в качестве фона изображение,ширина которого с гарантией превосходит любую возмож-ную ширину окна броузера (двух тысяч пикселов хватитс лихвой), то о горизонтальной повторяемости можно бу-дет забыть, и броузеру останется лишь складывать копииэтого изображения в вертикальную стопку (рис. 60, б).Обеспечив однородность горизонтальной фоновой полоскив вертикальном направлении, мы сможем раскрашивать фонпроизвольно расположенными, лишенными какой бы то нибыло повторяемости вертикальными полосами с произволь-ной текстурой (эти полосы могут быть плоскоцветнымис резкими краями, а могут и пользоваться любыми гори-зонтальными градиентами или пиксельными текстурами).Классический вариант — сравнительно узкая (150—200 пик-селов) полоса более темного цвета вдоль левого края окна,служащая для размещения навигационной панели, логоти-па, минибаннеров (стр. 287) и тому подобных элементов,повторяющихся на всех страницах сайта. Такой фон выпол-няет практически ту же функцию, что и деление окна нафреймы.

IV.2.2

Варьирование ширин составляющих страницу полос и прин-ципов их информационного наполнения открывает широ-кий простор для творчества. Единственное, что объединяетвсе решения с вертикальными фоновыми полосами, —их сонаправленность вектору информационного развития:в отличие от ширины, высота веб-страницы ничем неограничена, поэтому информационная иерархия ее эле-ментов выстраивается в основном по вертикали. Вводяперпендикулярное этому вектору членение, полосатый фонвеликолепно держит композицию страницы небольшогоразмера, однако на сколько-нибудь протяженных страницахпараллельность визуальной и информационной вертикалейраздражает своей тавтологией, и композиции начинает нехватать подчеркнуто поперечного начала и концовки.

Как недостатков, так и, к сожалению, достоинств вертикаль-но-полосатых фонов лишены фоны, размножаемые толькопо горизонтали (и, соответственно, по вертикали гарантиро-ванно превышающие высоту страницы — рис. 60, в). Такойфон, обычно ограничивающийся горизонтальной полосойвдоль верхнего края окна, в отличие от «вертикального»работает больше на эстетическом, чем на информационномплане восприятия и не становится фактором, действующимна всем протяжении страницы. Размещаемые на горизон-тальной полосе навигационная панель или заголовочнаяграфика, собственно говоря, могли бы сами позаботитьсяо фоновом цвете в своих окрестностях; роль фона страницызаключается лишь в том, чтобы дотянуть цветовую заливкудо рамки окна, придав этой части композиции аккуратностьи завершенность.

О д н и м к у с к о м . Последний и, видимо, самый интерес-ный тип фоновых изображений — неповторяющиеся фоны,настолько большие, что броузеру не нужно размножать ихни по горизонтали, ни по вертикали (рис. 60, г). Здесь и ре-чи уже нет о каких бы то ни было полосах: фоновый слойстраницы может содержать любое изображение, как угодносоотносящееся с передним планом. Как я уже упоминал(стр. 236), такой неповторяющийся фон не может служитьносителем информации и обязан ограничиваться чисто де-коративными функциями. Но и одно лишь избавление отбессмысленного повторения «изразца» делает возможнымина удивление интересные эффекты.

Единственное, хотя и довольно досадное техническоеограничение — невозможность обеспечить совмещение

(а)

(б)

(г)

Р и с . 60 Типология фонов:(а) — обычный фон, размно-жаемый по обоим измерениям;(б) и (в) — полосатые фоны,размножаемые только по вер-тикали и горизонтали соот-ветственно; (г) — полностра-ничный фон

элементов фона и переднего плана с точностью до одногопиксела — определяет и самый популярный мотив неповто-ряющихся фонов: бледные (чтобы не мешать чтению), сво-бодных очертаний формы, эффектно пользующиеся именнотой аморфностью, противостоящей регулярности передне-го плана, которая отказывалась работать для «изразцовых»фонов с материальными текстурами. Дополнительное пре-имущество такого фона — то, что он не боится слишкомдлинных страниц: в отличие от фона с горизонтальной по-лосой вверху окна, повторение фонового «водяного знака»через каждые несколько экранов текста вполне допустимо,а иногда даже желательно.

Характерен с этой точки зрения пример 1 1 . Здесь фоновоеизображение «дымка от чашки с кофе» (кстати, клиширо-ванный образ для всего, что связано с языком Java) преждевсего визуализирует динамику восприятия информации, посути, делая видимыми «силовые линии» (стр. 1ST), ведущиеот заголовка к визуалу (изображение упаковки программы,которой посвящена страница) и от него снова к тексту.Что особенно важно, фон этот сшивает в единое целое всеактуальное содержимое страницы (т. е. все, за исключениемнавигационной панели и других элементов, повторяющихсяна каждой странице сайта). Заметьте, что такой же по форме(хотя иной по текстуре) «дымок» украшает и саму упаковкус программой.Этот пример дает повод обсудить еще один технический аспект полностра-ничных фонов: чтобы общий вес страницы с таким фоном не выходилза рамки приличия, все фоновое изображение размерами в сотни и дажетысячи (по высоте) пикселов должно уложиться не более чем в 20—30 Кб.Достичь этого можно двумя путями: либо сжатием в JPEG с большимипотерями, которые будут незаметны только для «очень фотографических»,размытых и к тому же темных по цвету изображений, либо сжатием плоско-цветных изображений в GIF до 2—4-цветной гаммы (естественно, при этомпридется отказаться от анти-алиасинга, что опять-таки допустимо толькопри низком уровне контраста). Если же в формате GIF нужно сохранитьизображение с чуть более сложной текстурой, можно «аппроксимировать»ее плоским цветом с помощью, например, имитации типографского растра,как сделано в примере 1 1 .

Л О Г О Т И П Ы ш Термин «логотип» в этой книге применяется к любымграфическим и/или шрифтовым знакам, символам и эмбле-мам, которые могут принадлежать фирмам, организациям,проектам и событиям, отдельным людям, товарам и услугам.Важность этого, казалось бы, узкоспециального дизайнер-ского жанра именно для веб-дизайна объясняется просто:большинство страниц и сайтов в современном Интернете

Логотипы.

iv.2,3 ф у н к ц и и • 2 6 5

совсем не нуждаются в обильной, «агрессивной», рекламно-го типа графике, а многие некоммерческие сайты просто немогут позволить себе иметь такого рода оформление (хотякачество дизайна, строго говоря, от плотности графики наединицу площади не зависит, стоимость и трудоемкостьего определяются не в последнюю очередь именно этимпараметром). Поэтому не что иное как логотип очень частослужит основой, лейтмотивом, главным (а на страницах,оформленных в академическом стиле, нередко и единствен-ным) графическим элементом веб-страницы. В масштабахсайта логотип, повторяющийся на каждой странице, можетк тому же служить осью, скрепляющей воедино дизайнсайта.

Это, однако, лишь относительно прикладной аспект ис-кусства логотипа. Для начинающего дизайнера важнее то,что работа над логотипом — великолепное упражнение,прекрасно развивающее вкус, позволяющее набить рукув практической работе с материалом (в первую очередьс формой и шрифтом) и нащупать свой собственныйавторский стиль. Можно даже сказать, что дизайн логоти-пов — квинтэссенция дизайна как такового, так как жанрэтот почти не позволяет пользоваться хоть сколько-нибудь«живописными», полифоническими приемами (которые ди-зайн по большей части заимствует из других визуальныхискусств) и заставляет ограничиваться геометричной, сти-лизованной, абстрактной графикой, почти не зависящейот размера, цвета и текстуры. Один и тот же логотипдолжен хорошо смотреться и на экране компьютера, и нафирменном бланке, и на черно-белой странице факса,и на корпусе авторучки. Собственно говоря, только необ-ходимость концентрироваться на дизайне сайтов заставляетменя рассматривать логотипы наравне с другими видамиспециализированной веб-графики; в общей теории ди-зайна логотипы заслуживали бы как минимум отдельнойглавы.Слегка преувеличивая, можно сказать, что логотип — это чистая формав роли носителя информации. Все остальные аспекты композиции еслии имеют значение для восприятия, то не более чем в роли украшений.Например, если вам не удается сделать знак полностью независимым отцветового аспекта (т. е. обеспечить его узнаваемость в строго черно-беломварианте), нужно по крайней мере освободиться от цветовых составляющихтона и насыщенности, оставив только яркость — т. е. сделав так, чтобылоготип выглядел прилично в серой (или иной монохромной) шкале.С другой стороны, если еще лет десять назад подавляющее большинствологотипов были изначально монохромными и лишь потом, если необходи-мо, раскрашивались (не больше чем в два цвета), у современного дизайнера

2 6 6 • в е б - г р а ф и к а iv.2.3

цветовой свободы значительно больше. Отчасти это — результат удешевле-ния качественной цветной печати и возрастания удельного веса Интерне-та в рекламной стратегии современной фирмы, отчасти же, очевидно, —следствие все сильнее ощущающегося дефицита оригинальных и узнавае-мых силуэтных форм. На современный взгляд достаточно абстрактной дляроли логотипа может выглядеть и композиция из двух или трех цветов, несводимая напрямую к монохромному изображению. Однако большинствозапретных для этого жанра приемов, таких как любые неплоскоцветныетекстуры или «фотографическая» трехмерность, и сейчас остаются «табу»в профессиональном дизайне (хотя нередки в логотипах любителей, — что,кстати, говорит о размывании в массовом сознании понятия о логотипекак отдельном жанре со своими требованиями и ограничениями).

Д и а л е к т и к а ф о р м ы . Два основных требования к лю-бому логотипу, определяющие его маркетинговый потен-циал, а в конечном счете и художественную ценность, —это узнаваемость (точнее, легкость запоминания и по-следующего узнавания) и оригинальность. Как и положе-но основополагающим принципам, узнаваемость (котораяв первую очередь определяется простотой и внутреннейлогикой композиции) и оригинальность (т. е. необычностьи даже «неправильность») кажутся на первый взгляд трудносовместимыми. Только противоречие между ними, однако,и способно стать животворящим началом, диалектическим«двигателем» композиции.

Логотип останавливает взгляд только тогда, когда заключен-ная в нем скрытая информация, доступная лишь дума-ющему, осмысленному взгляду, контрастирует с видимойпростотой графики. Как смех (если верить психологам)возникает в тот момент, когда объем получаемой сознаниеминформации резко превышает ожидаемый, так и логотиппроизводит впечатление только тогда, когда в нем естьформа «с секретом», носитель пусть небольшого, но пара-докса — геометрического, топологического, семантического.Роль скрытого смысла может играть, например, контраст,многоаспектность которого (стр. 161) распознается не сра-зу, а также имитация трехмерности или подразумеваемоедвижение — свойства и в самом деле парадоксальные для поопределению плоской и статической фигуры.Важное понятие «скрытого смысла» стоит пояснить на паре примеров.

Логотип на рис. 6 1 , а пользуется очень распространенным приемом «до-

казательства от противного»: форма пустот и вырезов в главной фигуре

подразумевает наличие некоей другой фигуры — «пуансона», по форме

которого были проделаны эти вырезы и в котором к тому же угадывается

намек на очертания буквы «Q» (заглавной буквы названия компании). Фи-

гура эта задает нам задачку, пусть и очень несложную, и интеллектуальное

удовлетворение от ее решения составляет значительную часть эстетическо-

го удовлетворения от самого логотипа. На рис. 8 1 , б скрытый смысл также

Р и с . 61 «Скрытый смысл»логотипа: фигура, которой нет(а), и борьба симметричныхпротивоположностей (б)

многоаспектен; он заключается прежде всего в симметрии равноправныхэлементов (отношения «право-лево»), контрастирующей с иерархией нало-жения их друг на друга (отношения «ближе-дальше»), в не сразу замечаемойправильности формы обоих полукружий (прямолинейные участки контурав каждом из них лежат на одной прямой), а также в цветовой координациидвух частей фигуры с двумя частями текста.Вообще же, классификация многочисленных разновидностей «скрытогосмысла» и построение на этой основе общей теории логотипа — отдельнаябольшая тема, ждущая еще своих исследователей...

На е д и н и ц у п л о щ а д и . Требование внешней просто-ты имеет еще одно проявление, специфическое именнодля дизайна логотипов: знак обязан быть сколь возмож-но компактным, цельным, переносимым и вписываемымв любой контекст. Отсюда пристрастие авторов логотиповк расположению текста по окружности (вспомним, чтоокружность имеет минимальный периметр при заданнойплощади, стр. 79), общей симметрии и достаточной плотно-сти композиции. Современные работы этого жанра нередкоотступают от перечисленных канонов, однако и сейчаспочти все хорошие логотипы выглядят чуть старомодно нафоне доминирующей в дизайне моды на расплывчатость,дырявость и асимметрию. Впрочем, во многих случаях этотпривкус старомодности совсем не является недостатком —логотипы призваны отражать лучшие качества своих вла-дельцев, а кому же не хочется выглядеть солидной фирмойс многолетними традициями?

П р о что к а р т и н к а ? Не забыли ли мы еще одно важноепрактическое требование к логотипу — иллюстративность,необходимость соотносить смысловую нагрузку знака с темобъектом (или субъектом) реального мира, которому этотзнак принадлежит? Если понимать эту иллюстративностьбуквально, то в большинстве случаев она оборачиваетсяполнейшей противоположностью оригинальности — и в са-мом деле, логотип в виде книги (пусть и стилизованной)для издательства или изображение автомобиля в качествелоготипа автомобилестроительной компании вряд ли удо-влетворят даже самых наивных заказчиков (исключения,такие как «яблочко» фирмы Apple, редки и только подтвер-ждают правило). Выбор темы логотипа по иллюстративномупринципу может послужить лишь отправной точкой твор-ческого процесса; большинство же логотипов, в том числеи самые известные, прекрасно обходятся совершенно аб-страктными формами без малейшего намека на что быто ни было материальное. Неким компромиссом, в доста-точной мере абстрактным и в то же время не лишенным

268 • веб-г JV.2.3

Р и с . 62 Чаще всего встре-чающиеся варианты компози-ции логотипа

иллюстративности, может служить первая буква или аббре-виатура названия фирмы в качестве основы графическойчасти знака.

С другой стороны, не столь прямолинейно подражательныеформы, нередко отсылающие сразу к нескольким объектамили явлениям и обычно непонятные без некоторых раз-мышлений или без знания сферы деятельности владельцазнака, вполне могут служить носителем того самого «скры-того смысла», без которого не бывает хорошего логотипа.Подобный же контраст между беспредметной геометрич-ностью формы и реальностью ее информационного на-полнения придает определенную художественную ценность,например, дорожным знакам или указателям в аэропор-ту. Вообще, абстрактная символика, пронизывающая всюокружающую нас визуальную среду, — одно из важней-ших дизайнерских открытий двадцатого века, для многихиз нас определяющее, пусть подсознательно, само понятие«современности».

С и м в о л и с л о в о . Композиционно большинство лого-типов состоят из двух частей: графического знака и подписи(обычно названия компании). Психологическая модель вос-приятия информации человеком, прямо противоположнаязнаменитому «в начале было слово», требует размещениятекста справа или снизу от графики — так, чтобы текст этотвоспринимался именно как подпись, на которую обращаютвнимание уже после изображения. Из двух стандартныхвариантов расположения — текст под графикой (рис. 62, а)и текст справа от графики (б) — сейчас популярнеевторой, подчеркнуто асимметричный, более контрастныйи динамичный. У этих двух основных схем есть множе-ство вариаций, в которых текст так или иначе «прорастает»в графику, образуя с ней единое целое.Расположение текста по окружности вокруг графики именно благодаря сво-ей симметрии, наоборот, выглядит весьма уравновешенно, солидно и старо-модно; этот прием часто используется для логотипов конференций и меро-приятий, названия которых обычно достаточно длинны для того, чтобы ихможно было свернуть в кольцо (при этом в центре располагается не толькографическая часть знака, но и сокращенное наименование, а иногда и годпроведения конференции).

Многие логотипы, созданные десятилетия назад, обходятсявообще без текста (точнее говоря, они могут сопрово-ждаться названием компании, но оно не является ихнеотъемлемой частью). В те времена окружающая чело-века дизайн-среда не была еще заселена столь плотно,

IV.2.3 ф у Н К Ц И И • 2 6 S

как сейчас, и в повседневной жизни логотипы встреча-лись значительно реже. Поэтому, скажем, фирма MercedesBenz могла рассчитывать, что ее простейшая, с минимумом«скрытого смысла» трехлучевая звездочка, вписанная в круг(рис. S3, а), будет эффективно работать на образ компаниибез лишних напоминаний о том, кому именно принадлежитэтот знак. К сожалению, запас простых геометрическихформ и их комбинаций, пригодных на роль символа, небесконечен. Поэтому в последнее время ощутимой сталапротивоположная тенденция — текстовые логотипы без ка-кой бы то ни было графики. Так, логотип Microsoft (рис. S3,б) состоит лишь из названия, набранного специально при-способленным для этой цели шрифтом с единственнымукрашением — маленьким треугольным вырезом в букве «о»(в малых кеглях этот вырез незаметен и логотип опознаетсяисключительно по шрифту).

Можно сказать, что чисто графический знак идеальноподходит для Mercedes Benz по той же причине, по ко-торой текстовый логотип работает для компании Microsoft.В первом случае действует примерно такая мотивация: «Мынастолько знамениты, что любой узнает наш знак даже безподписи», а во втором: «Уровень нашей компании обще-известен, так что незачем пытаться поразить потребителякакой-то небывалой графикой». Для обычных же, сред-ней руки компаний оптимальным остается традиционныйподход, комбинирующий в едином логотипе графическуюи текстовую части.

А с п е к т ы л о г о т и п а . Нам остается рассмотреть осо-бенности применения в логотипах основных дизайнерскихматериалов (стр. 77). Положительные рекомендации, кото-рые можно дать желающему попробовать себя в созданиилоготипов, немногочисленны и весьма общи. С другой сто-роны, жанр этот налагает на дизайнера немало конкретныхи довольно жестких ограничений, которые удобнее всегоклассифицировать по перечисленным в гл. 11 аспектамдизайн-композиции.

Форма. Как я уже говорил, форма в логотипе — глав-ный носитель информации как в художественном, таки в смысловом ее аспектах. Форма графики в логотипе,как правило, должна быть заметно проще очертанийрасположенных в том же знаке букв текста; «скрытыйсмысл» знака, хотя и не должен сразу же бросатьсяв глаза, не может прятаться в тех особенностях формы,

Р и с . 63 Чисто графические(а) и чисто текстовые (б) ло-готипы, как правило, не бо-гаты «скрытым смыслом», нонекоторые из них становятсяважной частью окружающегонас дизайн-ландшафта благо-даря неутомимой деятельностиих владельиев

(а)

IV.2.3

Р и с . 64 «Красное колесо»фирмы Lucent призвано сим-волизировать ̂ оригинальностьи новаторский дух ее разра-боток

которые обнаруживаются только с помощью линейкиили транспортира. Важно также помнить о принципеограничения пропорций сверху (стр. 83) — принципе,особенно актуальном именно для логотипов, которымприходится работать в разных, в том числе и оченьмелких, размерах.

Это не значит, конечно, что в логотипе не должнобыть нюансировки (стр. 171), — наоборот, нюансы,компенсирующие всевозможные иллюзии восприятия,необычайно важны именно для логотипов, которые обя-заны оставаться безупречно правильными и при бегломвзгляде, и при сколь угодно долгом рассматривании.Более того, в особо ответственных случаях приходитсяделать версии одного логотипа с разными набораминюансов, предназначенные для разных размеров илиразных цветовых решений. Так, логотип AT&T (рис. 67на стр. 275) существует в нескольких вариантах для раз-ных размеров и для позитивного (темным по светлому)и негативного (светлым по темному) начертаний; этиварианты отличаются количеством и формой горизон-тальных полосок, из которых складывается изображениешара.

По адресу www*att»C0m/ideiit ity/$tandard§/9ra§»hic^ сама фир-ма AT&T дает всем заинтересованным дизайнерам очень детальныеи поучительные инструкции: как выбрать один из вариантов логоти-па, какие схемы его раскраски допустимы, как правильно разместитьзнак на странице, и даже — какие ошибки типичны для дизайнеров,работающих с этим логотипом...

Хотя абстрактность (в достаточно широком понимании)для логотипа обязательна, она не ведет к ограниченно-сти репертуаром фигур школьной геометрии. Посколькунабор таких фигур и их комбинаций невелик и по-чти исчерпан, приметой современности стали логотипы,смело отбрасывающие каноны прямолинейности и гео-метрической простоты и стремящиеся вместо этогок простоте психологической, которая прекрасно ужива-ется с аморфностью (стр. 100). Так, логотип фирмыLucent Technologies (рис. 64) представляет собой, несмо-тря на всю натуралистическую экспрессию и далекуюот идеального круга форму «мазка кистью», не менееабстрактную реализацию идеи круга, чем самый что нина есть математически правильный круг.

Конечно, далеко не любая аморфность способна бытьносителем абстрактного начала. Более того, не случайно

sv.2.3 функции И271именно бесформенность в сознании непрофессиона-ла выступает как прямая противоположность традици-онно понимаемой геометрической символике. Рискнупредположить, что единственное свойство, позволяю-щее подчеркнуто антигеометричной аморфной фигуревыполнять функцию абстрактного символа, — это руко-творность, безошибочно опознаваемая искусственность,«след руки» художника. Рукотворная аморфность все-гда несет привкус небрежности, торопливости, особойгрубоватой эстетики. Но до тех пор, пока в харак-тере формы рукотворная экспрессия доминирует надбезлично-натуральными проявлениями расплывчатости,размытости или разбрызгивания, простота этой формыопределенно работает на общее ощущение символизма.Можно сказать, что искусство логотипа, повторяя в об-щих чертах эволюцию других изобразительных искусств,прошло за последние десятилетия путь от барокко вен-зелей и виньеток, через аскетизм раннего авангарда(«Черный квадрат» Малевича), к свободе и нарочитойнебрежности абстрактного экспрессионизма (полотнаПоллока и Ротко).

Пожалуй, единственная форма, удовлетворяющая требо-ванию рукотворности и притом достаточно интереснаявизуально, — это имитация мазка грубой кистью, образецкоторой мы и видим в логотипе Lucent. Менее удачныйпример — лепестки цветка на официальной эмблемеОлимпиады в Нагано (рис. 65), несущие явственныйэлемент аморфности и хаотичности, но именно из-заотсутствия рукотворного начала едва вытягивающие нароль логотипа. Формы эти не есть абстракция цветка,а лишь в какой-то мере стилизованное его изображение.Обратите также внимание, что аморфность формы нив коем случае не должна распространяться на текстур-ный аспект графики: если геометрически более простыеформы допускают использование двух и более цветов, тоаморфные объекты обязаны компенсировать сложностьочертаний строгой одноцветностью, а нелинейность ихконтура не должна сочетаться с какой бы то ни былоразмытостью или неоднородностями внутри поверхно-сти. С этой точки зрения серые тени под разноцветнымилепестками в эмблеме Нагано хотя и не пользуютсяразмытостью, как подобало бы падающим теням, тем неменее ведут к еще большему «дребезжанию» композиции,делая ее едва ли пригодной на роль знака.

Р и с . 65 Эмблемы олимпий-ских игр всегда были характер-ными представителями дизай-на своего времени

2 7 2 • ta iv.2.3

Шрифт. Требование цельности и простоты делает практи-чески невозможным создание логотипа с участием двухи более разных шрифтов. Единственное исключение —чисто текстовый логотип, в котором отсутствие графикипозволяет сконцентрироваться на сложных отношенияхпары контрастирующих шрифтов (как в заголовке жур-нала «Internet», см. рис. 36, а на стр. 137). В то же времяразные части текста знака могут противопоставляться поцвету или начертанию одного и того же шрифта; обычноотношения между элементами текста как-то координи-руются с отношениями внутри графической части знака.Как вы уже знаете, самая естественная вариация начер-тания — изменение насыщенности рубленых (стр. 125),и именно пара начертаний обычной и повышенной на-сыщенности одного рубленого шрифта — одно из самыхупотребительных шрифтовых решений в современныхлоготипах.

Хотя у рубленых шрифтов есть важное преимуществочитабельности в малых кеглях и хорошей сочетаемо-сти с любой графикой, вполне приемлемы в логотипахи простые по рисунку и прозрачные для восприятия(стр. 12S) шрифты с засечками. Нужно лишь учитывать,что эти последние налагают более суровые ограниченияна графическую часть знака: чтобы контраст между тек-стом и графикой звучал достаточно отчетливо, формане должна содержать сложных криволинейных контурови мелких деталей (рис. 66). С рублеными же шриф-тами требование это не столь категорично, и нередкоможно видеть даже примеры «перевернутого» контраста,когда формы графической части кажутся явно сложнееочертаний рубленых букв (как в логотипе Lucent нарис. В4, в котором из-за насыщенности графики мел-кими деталями никакой шрифт с засечками не смог быужиться).

Что же касается декоративных шрифтов (стр. 125), ко-торые, казалось бы, просто созданы для логотипов, теже самые законы единства заставляют пользоваться имис большой осторожностью — и, скорее всего, толькодля чисто текстовых логотипов, в которых особенностиначертаний букв могут стать единственным графиче-ским мотивом, отчасти заменяющим отсутствующуюграфику. Если же необычный шрифт сопровождаетсяграфическими формами, эти последние не должны быть

Р и с . 66 Использование влоготипе шрифта с засечкамитребует от графической частиособой лаконичности

iv.2,3 функции • 273ни сложными, ни простыми, а должны в точностисоответствовать по характеру рисунка самому шриф-ту, буквально «вырастать» из него. Удачные примерылоготипов с декоративными шрифтами крайне немного-численны — даже при тщательном соблюдении единствастиля графики и текста результат, скорее всего, на со-временный взгляд будет казаться несколько вычурными нарочитым.

В употреблении строчных и заглавных логотипы следуютобщей тенденции — стиль «все строчные» в большин-стве случаев выглядит более современно, чем выделениезаглавной первой буквы названия и тем более первойбуквы каждого слова. Стиль «все заглавные» выглядитна этом фоне привлекательной золотой серединой, осо-бенно если учесть, что благодаря отсутствию выносныхэлементов надпись заглавными буквами легче стыкуетсяс графикой. Из других параметров набора текста изред-ка применяются вариации кернинга, чаще всего тесноесближение и даже частичное наложение букв друг надруга. Все сказанное на стр. 139 о недопустимостиизменений пропорций текстовых строк в полной мереотносится и к логотипам. Помните, что в этом жанреу вас есть шанс создать нечто гораздо более долговечное,чем обычная дизайн-композиция, — так что стоит лисоблазняться дешевыми приемами?

Цвет. Я уже упоминал, что хороший логотип не долженсущественно зависеть от цветового аспекта. Нельзя, ко-нечно, требовать, чтобы знак хорошо смотрелся прилюбой взятой с потолка раскраске, но во всяком слу-чае он должен сохранять узнаваемость и художествен-ные достоинства не только с подобранным дизайнеромцветовым решением, но и в серой шкале, а в идеалеи в двухцветном черно-белом варианте.

Большинство логотипов используют только один цветна все элементы или же два цвета, один из которых —черный или белый. Существенно реже встречаютсякомпозиции с двумя контрастирующими или поддержи-вающими друг друга «цветными» цветами (стр. 110).В логотипах нельзя пользоваться неочевидными оттенка-ми — слишком темными, слишком светлыми или слабонасыщенными, так как их характерные особенностивряд ли выживут при многочисленных трансформаци-ях, через которые придется пройти вашему логотипу.

2 7 4 • в е © - г р а ф и к а iv.a.3

Наконец, нужно также учитывать цветовой охват моделиCMYK (стр. S3) — даже если вы делаете логотип длявеб-сайта, вполне вероятно, что заказчик захочет потомраспечатать его, безнадежно испортив слишком яркийи насыщенный цвет, принципиально невоспроизводи-мый на бумаге.

Но и это не все. Еще одно цветовое ограничение носит,пожалуй, субъективный характер, однако не становитсяот этого менее серьезным. Логотип, который долженбыть по возможности замкнутым и самодостаточнымобъектом, отторгает многие тона цветового спектра из-за их открытости, обращенности к зрителю, явственноощущаемого потенциала развития и, следовательно, не-устойчивости. Это относится в первую очередь к теплымтонам, которые у большинства зрителей ассоциируютсяс объектами живыми, органическими и потому проти-востоящими тому абстрактному началу, которое лежитв основе любого логотипа. Собственно говоря, при строготрадиционном подходе к выбору цвета допустимым ока-зывается лишь один-единственный цвет — синий и егоближайшие соседи по цветовому кругу.Конечно, никто не мешает вам попробовать для вашего логотипакакой-нибудь необычный, подчеркнуто «несиний» цвет. Однако пред-лагать этот цвет в качестве окончательного можно лишь в том случае,если вы знаете, что вы сами будете работать с этим логотипом настраницах сайта и, следовательно, сможете позаботиться об активнойподдержке цвета знака в цветовой гамме всей композиции. Кроме того,приготовьтесь к возражениям со стороны заказчика, которые почти на-верняка вызовет у него любой цвет, кроме синего. Я бы рекомендовалпоэтому отложить цветовое решение до окончательного согласованияформы знака, а для первоначального представления заказчику вашихвариантов пользоваться только шкалой серых и синими тонами.

Текстура. В логотипах безусловно недопустимы ни фо-тографика, ни какие бы то ни было материальныетекстуры, ни «скульптурная» трехмерность (стр. 293):композиция, использующая эти виды текстур, можетбыть визуалом или заголовком, но не логотипом в соб-ственном смысле этого слова. Дело здесь не тольков том, что сложные текстуры с трудом воспроизводимына бумаге и не выдерживают цветовой редукции; главнаяпричина — в отсутствии в них элемента благороднойрукотворности, обработанности, обдуманности, которыйтолько и способен создать в логотипе «скрытый смысл»,доступный опять-таки только разумному взгляду. «Небос облаками» может служить фоном, не несущим никакойсмысловой нагрузки (или же наполняемым смыслом по

iv.2.4 ф у н к ц и и шШ5произволу зрителя), но абсолютно немыслимо в такомконцентрированном сгустке смысла, как логотип.

Репертуар текстур логотипа ограничен, таким образом,плоским цветом и геометрическими текстурами с неслишком мелкими деталями (не забывайте о принципеограничения пропорций сверху). Как мы только чтовидели, требование простоты формы относится скореек простоте ее восприятия, а не к объективной сложно-сти фигуры, и «психологически простая» форма вполнеможет оказаться геометрически очень сложной, ирре-гулярной, несводимой к элементарным составляющим.Простота текстуры, наоборот, — требование скорее фор-мальное, и плоский цвет вполне может служить длявыражения совсем не плоских свойств и отношений фи-гур. Так, в логотипе фирмы AT&T (рис. 87) с помощьюплоскоцветных полосок передано ощущение выпукло-сти шара — иными словами, типично фотографическаятекстура реализована совсем не фотографическими ме-тодами.Хотя фотографические текстуры не могут быть частью логотипа кактакового, их контраст с его принципиальной плоскоцветностью де-лает их эффектным украшением того же самого логотипа в составедизайн-композиции. Неяркая размытая тень, подстеленная под ло-готип, именно благодаря текстурному контрасту является одним изсамых популярных приемов оформления заголовков и логотипов в веб-графике.

Мы уже затрагивали тему рекламных баннеров в гл. ill,обсуждая их «заголовочный» аспект и возможность без-болезненного вписывания чужеродной рекламной вставкив композицию веб-страницы (стр. 204). Здесь нам пред-стоит ближе познакомиться с рекламными баннерами какспецифическим жанром веб-графики, в котором привычныедизайнеру законы эстетического восприятия почти вытесня-ются особыми, свойственными только рекламному дизайнупринципами подачи информации — информации по необ-ходимости поверхностной, апеллирующей к чувствам чаще,чем к разуму, намеренно несерьезной и даже слегка про-вокационной. К сожалению, красивый баннер совсем необязательно эффективен как рекламный инструмент, а эф-фективный не обязательно красив.

С к о л ь к о н а т и к а л о ? Прежде чем говорить о тонкостяхбаннерного дизайна, давайте вспомним, как вообще рабо-тает реклама в Интернете. Баннер — графическая вставкастандартного размера — вывешивается на странице, группе

Р и с . 67 Логотип AT&Tбыл создан в 1982 г., в самомначале повальной моды на ими-тацию трешерности, и именноэтот прием лежит в основе его«скрытого смысла»

Баннеры

т жт . iv.2.4

страниц или на целом сайте по договоренности между авто-ром или публикатором этой страницы и рекламодателем, насайт которого ведет гипертекстовая ссылка с этого баннера.Конечная цель рекламодателя, ради которой он готов пла-тить за размещение баннера деньгами или ответной рекла-мой, — привлечь посетителей на свой сайт. На баннернойрекламе кормится несметное количество контент-сайтов,рекламных агентств, посредников, служб обмена баннерамии производителей программных продуктов для автомати-зации всего, что только можно автоматизировать в этойнесложной схеме.В качестве упражнения на разбор интернетовских технологий интерес-но рассмотреть механизм автоматической смены баннеров на страницес рекламой. Возьмем самый распространенный сценарий: владелец однойстраницы или небольшого сайта подписывается на услуги службы обменабаннерами, обязуясь вывешивать у себя чужую и заранее ему неизвестную(но, как правило, подобранную по тематике) рекламу. В обмен на это онполучает несколько меньшее количество показов его собственных банне-ров на других, также подобранных по тематике сайтах. Служба обменапри этом живет за счет «маржи» между объемами полученной и предоста-вленной рекламы, которую она может продавать другим рекламодателям заденьги.

Статистика показывает, что ротация баннеров (подстановка новой кар-тинки при каждом запросе страницы с сервера) повышает эффективностьрекламы по сравнению со статическими баннерами, висящими на одноми том же месте страницы в течение дней и недель. В то же время владелецсайта не имеет возможности динамически менять HTML-код своей стра-ницы, так чтобы при каждой загрузке страницы на ней появлялся новый,случайно выбранный из общего репертуара баннер, — тем более что самифайлы баннеров хранятся на сервере службы обмена. И хотя атрибут s rcтега IMG может указывать на любой URL, в том числе расположенный и надругом сервере сети, адреса всех входящих в ротацию баннеров известнытолько службе обмена (собственно говоря, каждый входящий в систему сайтможет в любой момент изменить набор своих баннеров).Для ротации рекламы на баннерном сервере устанавливается специальнаяCGI-программа (стр. 71), работающая с текущими базами данных банне-ров, рекламодателей и участвующих в системе сайтов. Владельцу страницыдостаточно прописать в соответствующем теге IMG особый URL, комби-нирующий адрес сервера баннерной службы, обращение к CGI-программена этом сервере и код сайта-участника, по которому программа узнает, изкакой тематической группы выбирать (по случайному алгоритму) баннери чей счетчик показов увеличивать. Это значит, в частности, что загруз-ка страницы с рекламой может замедляться из-за перегрузки баннерногосервера. Поэтому все сколько-нибудь крупные контент-сайты предпочи-тают устанавливать на своих серверах собственные системы управлениярекламой, позволяющие минимизировать задержки, полностью контроли-ровать всю показываемую на сайте рекламу, прописывать свой alt-текстдля каждого баннера и включать в ротацию составные HTML-баннеры(стр. 285).

Главным мерилом эффективности баннера считается отно-шение числа посетителей, щелкнувших по нему, к общему

i¥«2,4 функции ш 277

числу видевших страницу с этим баннером. Эта величи-на, обозначаемая по-английски аббревиатурой CTR (click-through ratio, что можно было бы перевести на русскийсловом «проклик»), поддается объективному измерению: постатистике сервера нетрудно подсчитать, сколько копийбаннера было перекачано пользователям и сколько разпроизошел переход по соответствующей ссылке. Оплата ре-кламы, тем не менее, рассчитывается обычно в зависимостиот общего количества показов баннера (цены сейчас лежатв диапазоне от 3 до 50 долларов за тысячу показов в за- rock around the снсквисимости от степени адресности рекламы). Лишь изредкацена привязывается не к количеству показов, а к количествупереходов по баннерной ссылке или даже к количеству техлюдей, которые, попав через баннер на сайт рекламодателя,заказали там его продукт или услугу.

Очевидно, что при таком сугубо коммерческом подходек делу главное и едва ли не единственное требованиек баннеру со стороны заказчика — его эффективность,которую естественно измерять в терминах CTR. На самомделе, конечно же, на CTR свет клином не сошелся —нередко баннер с довольно скромным «прокликом», нос качественным и релевантным текстом способен привестина сайт рекламодателя куда более ценных посетителей, чембьющий на инстинкт баннер с рекордным CTR.

Кроме рекламы, ориентированной на завлечение посети-телей, не менее важна реклама имиджевая, — которая,хоть и не приносит немедленной выгоды, занимается оченьважным делом: «впечатывает» образ фирмы в память по-требителя, засеивает его подсознание зернами информации,которые должны прорасти в момент принятия решения.Хотя в баннерной рекламе имиджевый компонент не менееважен, чем в любой другой, чисто имиджевые баннерывсе же встречаются редко, и для большинства рекламнойпродукции в Интернете CTR по прежнему остается самымважным мерилом эффективности.Форматы. Самый распространенный из стандартных форматов банне-ров — 468x60 пикселов. Кроме того, встречаются «половинные» баннеры234x60, баннеры форматов 400x40, 200x40, 120x90, минибаннеры 88x31и квадратные баннеры 125x125 (к последним, кстати, слово «баннер» неочень-то подходит, так как исходное его значение — «транспарант, заголо-вок»).

В нужное время и в нужном месте. От чего жезависит CTR баннера? Прежде всего, огромное влияниена этот показатель оказывают внешние по отношению

2 7 8 • в е 6 ~ г р а *

к самому баннеру обстоятельства — то, на каком сай-те, на какой странице сайта и в каком месте страницыон вывешен. Понятно, что реклама таблеток от кашляна сайте, посвященном программированию на языке Perl,имеет мало шансов на успех. Поэтому первое, что делаетпотенциальный рекламодатель, — ищет для размещениябаннеров тематически близкие ему сайты или категориисайтов (в поисковых системах или службах обмена бан-нерами). Отсюда же, кстати, следует, что CTR баннера,полученный на одной странице или даже на одном сайте,не является статистически достоверной величиной — объ-ективный интерес представляет лишь средний CTR баннерав охватывающей как минимум несколько сайтов рекламнойкампании.

Эффективность баннера зависит также от характеристикстраницы, на которой он вывешен. Веб-страницу мож-но сравнить с комнатой, имеющей одну дверь на входи множество дверей-ссылок на выход. Очевидно, что чемменьше у страницы таких выходов, одним из которыхявляется и рекламный баннер, тем большая доля посети-телей пройдет через каждую из дверей. Можно, однако,заметить и противоположный эффект: как правило, чембольше текста и ссылок на странице, тем дольше наней задерживается посетитель и, следовательно, тем вы-ше вероятность того, что его внимание будет привлеченобаннером.

Против последнего аргумента можно тем не менее возра-зить, что при чтении текста хоть сколько-нибудь значи-тельного объема баннер обычно вообще не виден из-запромотки содержимого окна. Учет еще и этого обсто-ятельства позволяет прийти к выводу, что идеальнымидля размещения баннеров будут насыщенные информаци-ей, преимущественно текстовые, с небольшим количествомссылок страницы не больше двух-трех экранов текста в дли-ну. Именно к этому идеалу и стремится большинствоконтент-сайтов.В то же время, если кроме баннера страница не содержит никакой зна-чимой, необходимой для понимания смысла графики, эффективность ре-кламы несколько снижается. Дело в том, что немалая доля пользователейИнтернета (по некоторым оценкам, до 20%) отключают загрузку изобра-жений в своих броузерах, — и если они решат, что на этой странице нетникакого смысла нажимать кнопку Load Images, они так никогда не увидяти баннера (правда, если изображение баннера снабжено alt-текстом, этогоможет оказаться достаточно для срабатывания рекламы).

SV.2,4 \MИ • 27«

И наконец, еще одно второстепенное обстоятельство. Проклик баннеровна первой странице всегда чуть выше, чем на внутренних страницах сайта:большинство посетителей еще не успевают как следует заинтересоватьсясайтом, на который они только что попали, и потому их легко отвлечьпосторонней рекламой.

С л е в а при в х о д е . Стандартное размещение баннерав самом верху страницы (справа от фоновой полосы, если таприсутствует, стр. 262) привлекает своей ненавязчивостью.Такая схема построения страницы настолько привычна, чтореклама, хоть и получает свою долю внимания зрителя (темболее что из всей графики она появляется на страницесамой первой), стоит подчеркнуто в стороне от основногосодержимого страницы и потому почти не раздражает. За-метно увеличить эффективность при этом можно, повторивтот же баннер в самом низу страницы. Вставлять баннерыв разрыв текста могут позволить себе только очень жадныесайты, заботящиеся о проклике больше, чем о душевномравновесии своих посетителей.Как разновидность этой схемы, на первых страницах некоторых сайтовприменяются небольшие (обычно 125x125 пикселов) квадратные банне-ры, размещаемые в правой колонке страницы. Такие баннеры, оставаясьв известной мере на периферии восприятия, тем не менее дают очень хоро-ший CTR — как утверждают, из-за своей близости к вертикальной полосепрокрутки окна броузера, над которой большую часть времени находитсякурсор мыши пользователя.

Особняком стоят дизайнерские решения, отходящие оттрадиционного краевого расположения баннера, в которыхв то же время баннеры не становятся помехой восприя-тию материала. Так, зачастую можно перенести баннер поднеизменяемую навигационную панель; на сайте books* г м(пример 15) широкая верхняя полоса с логотипом и ссылка-ми, хотя и доминирует на странице визуально, практическойинформации несет мало, так что читателю очень редко при-ходится запинаться взглядом о расположенный под нейбаннер (пересечение этой чужеродной вставки к тому жедополнительно облегчено «трамплином» — еще одной гори-зонтальной полосой под баннером, повторяющей текстуруверхней полосы).

Б о л ь ш е ж и з н и . Давайте теперь познакомимся с вы-работанными практикой подходами к дизайну баннерови с теми из (уже известных нам) принципов и ма-териалов дизайна, которые особенно сильно влияют наэффективность рекламы. При выборе приоритетов длякаждого конкретного проекта нужно учитывать множествообстоятельств — предметную область рекламной кампании,

2 8 0 • в е б - г р а ф и к а

предполагаемую аудиторию, традиционный дизайнерскийстиль фирмы-заказчика.

Главное, ради чего существует на свете баннер, — щелчокпо нему мышью пользователя — есть действие в пер-вую очередь динамическое. Вполне естественно поэтому,что выражаемая дизайнерскими средствами динамика, какявная, так и подразумеваемая (стр. 166), играет в дизай-не баннера главную роль, а начала единства и балансазачастую приносятся ей в жертву. Направленность этойдинамики в большинстве случаев особого значения не име-ет; важно расшевелить восприятие пользователя, придатьнеожиданный импульс его взгляду, лениво скользящему постранице, а еще лучше — курсору его мыши. Даже еслинаправление этого импульса будет не совсем предсказуемо,вероятность желанного щелчка мышью напрямую зависитот его силы.

Именно по этой причине анимация стала в последнее времяобязательным атрибутом большинства рекламных баннеров,a GIF, соответственно, — почти единственным приме-няющимся для баннеров форматом. Даже незначительноешевеление, вращение или подмигивание привлекает взгляди заметно повышает CTR; современные же баннеры не-редко представляют собой целые мультфильмы, не толькос движущимися персонажами, но и со сменяющимися понескольку раз за цикл декорациями.

П ь е с а в т р е х д е й с т в и я х . 6 сюжете любого баннера,даже если анимация как таковая в нем не используется,можно выделить три главных этапа, схожие с частямиклассической драмы: завязка, экспозиция (развитие) и раз-вязка. Цель первого этапа — привлечь внимание зрителя,выбить его из колеи, заставить ожидать дальнейшего; навтором этапе зрителю сообщается соль рекламы, основнаяинформация баннера, объясняется причина, по которой ондолжен соблазниться именно этим продуктом или услугой;наконец, третий этап снова делает упор на чувства, а не наразум и, как кода музыкального произведения, разряжаетнакопившееся напряжение либо раскрытием тайны лично-сти рекламодателя (которая до сих пор оставалась скрытой),либо торжественным объявлением его адреса, либо про-сто призывом «click here» (а иногда даже анимированнымизображением курсора мыши, который якобы и делает набаннере этот самый вожделенный click).

** ,4s 2 8 1

В анимированных баннерах — более сложных и, как прави-ло, более дорогих — эти три этапа разделены во времени(рис. 8В). В менее притязательных образцах рекламнойпродукции, анимацией не пользующихся, этапы эти могутбыть разнесены только в пространстве; при этом обычноенаправление восприятия информации — слева направо —диктует расположение «развязки сюжета» на правом концебаннерной полоски. Это вполне согласуется и с требова-ниями эргономики — как я уже упоминал, курсор мыши,чей выход на сцену предполагается именно в третьем дей-ствии, обычно находится ближе к правому краю экрана(и, следовательно, баннера).

В анимационных баннерах максимум динамики приходит-ся на первый этап, на котором почти всегда что-нибудьдвижется, взрывается или прокручивается по всей площадибаннера. Второй, информационный этап обычно пред-ставлен сменяющими друг друга статическими текстами.Наконец, на третьем этапе снова возникает динамика, нонесколько иного рода — вместо движения по всей площадибаннера применяются достаточно локальные мигания, пе-реливы и тому подобные эффекты, как бы закрепляющиеобщий эффект и приглашающие тех, кто насладился пред-ставлением, сделать щелчок и продолжить таким образомзнакомство с рекламодателем.

Эта смена тональности в конце мультика — очень важныймомент. Исследования показывают, что при всей своейнаивности призыв «click here» увеличивает CTR баннера на10—15% — очевидно, не потому, что без него пользовательне догадался бы, где нужно щелкать, а просто потому, чтопривычная и ожидаемая формула ставит точку в развитиисюжета и подталкивает зрителя к переходу от созерцанияк действию. Не меньшей завершенностью баннер долженобладать и в других своих аспектах; даже если он непользуется «широкоэкранной» анимацией, а динамика еговыражена статическими средствами, движение не должно«идти вразнос» или теряться в бесконечности, а обязательнодолжно концентрироваться в некоторой точке схода, фо-кусе силовых линий, финальном аккорде, после которогозрителю не останется ничего, кроме как вознаградить авторааплодисментами — щелкнуть мышью.

Таковы основы баннерной драматургии. Разумеется, какв театре, так и в рекламном дизайне немало заслужива-ющих внимания работ нарушают общепринятые каноны.

Р и с . 68 Типичный трех-частный анимированный бан-нер. Кадры с 1 по 7 — завязка,привлечение внимания: трудноудержаться и не проследитьс сочувствием за страданиямисимпатичного персонажа. Вто-рой этап (кадр 8) — заявлениеосновной темы: оказывается,речь идет о некоем продукте,который поможет вам следитьза многочисленными конферен-циями и выставками, чтобыони не заставали вас врас-плох. Наконец, финал баннера(кадр 9) решен в традиционномстиле: мы видим полное назва-ние продукта, имя разработ-чика (компания IBM) и, самособой, неизбежное «click here»...

282 • ШВй-трвфшшш i¥»2*4

Некоторые баннеры ограничиваются только первой изтрех частей, бросив все силы на привлечение вниманияи рассчитывая на любопытство зрителей, которым все-такизахочется узнать, кому принадлежит столь яркий и интерес-ный, хотя и не слишком информативный баннер. Другиебаннеры опускают информативную середину и от возбужда-ющей части непосредственно переходят к побуждающей.Противоположность такому подходу — «скучный» баннер,сразу открывающий все свои карты, состоящий преимуще-ственно из текста и делающий упор на привлекательностьсвоей информации. Апелляция такого баннера к чувствамзрителя ограничивается в лучшем случае изображениемлоготипа и цитированием рекламного лозунга компании-рекламодателя.

В н а ч а л е б ы л о что-то. Обычную веб-страницу можносравнить с тем, что называлось когда-то «литературно-музыкальной композицией», в которой прозаический текстперемежается музыкальными (т. е. графическими) вставка-ми. Баннер же с этой точки зрения правильнее уподобитьпесне, в которой текст и музыка сливаются в неделимое це-лое. Поэтому даже в тех случаях, когда общая идея баннерапринадлежит заказчику, дизайнеру приходится быть «по-этом» в не меньшей степени, чем «музыкантом». Сочинениерекламных текстов — особая наука со своими принципами,правилами и запретами.

Стремление к компактности и эффективности сообщенияпозволяет отказаться от многих ограничений формальнойграмматики. Большинство предложений относятся к ка-тегории назывных, перечисления главных ключевых слов(того, что по-английски называется «buzzwords») могут несопровождаться никакими глаголами; сконцентрированныесписки глаголов, наоборот, лишены подлежащих. Важнаяроль принадлежит «словам действия», в основном глаголамв повелительном наклонении, вроде «click», «win», «go»,«try», «жми», «давай», «пошли». Разумеется, как и в любойрекламе, не обходится без превосходных степеней и востор-женных цитат из журнальных обзоров.

Менее известно, что CTR можно повысить формулировкойтой же самой фразы в виде вопросительного, а не повест-вовательного предложения (например, «хотите ли вы, чтобываш сайт получил награду на конкурсе дизайна?» вместо«сайты нашей студии получают награды на конкурсах ди-зайна»). Объяснить этот эффект просто: вместо безличного,

i\ s функции И283

неизвестно к кому относящегося высказывания читательвидит конкретный, именно ему адресованный вопрос, кото-рый инстинкт вежливости заставляет как минимум дочитатьдо конца. Поэтому особенно эффективны вопросы, включа-ющие обращение к читателю, типа «знаете ли вы...», «хотители вы...», «есть ли у вас...» и т.п.Согласно правилам русского языка, написание местоимения «Вы» с за-главной буквы допустимо только при уважительном обращении к одномулицу, которое известно автору текста если не лично, то по крайней мере поимени. Рекламное же «вы», обращенное ко всем потребителям рекламы безразбора и использующее «переход на личности» только в качестве приема,условность которого очевидна для всех, под это определение явно не под-ходит. Поэтому написание «Вы», все еще встречающееся в русскоязычнойрекламе, выглядит очень претенциозно и, пожалуй, даже безграмотно.

Особенно важен вопрос как средство привлечения внима-ния на первом из трех этапов сценария баннера (рис. 69,70). У большинства баннеров первая часть вопросительная,вторая — повествовательная, а третья — восклицательная(реже восклицательный акцент переносится с третьей частина вторую). Эффект повышения CTR при использованиивопросительных предложений имеет место даже тогда, ко-гда вопрос уменьшает, по сравнению с повествовательнымбаннером, общее количество полезной информации. Бью-щие на любопытство баннеры, содержащие неотвеченныевопросы и зачастую даже не раскрывающие тайну личностирекламодателя, дают стабильно высокие результаты — хотяо качестве контингента, привлеченного такими баннерами,конечно, можно спорить: вполне вероятно, что повышениеCTR сводится на нет уменьшением доли действительнозаинтересованных посетителей среди всех «купившихся» назагадочный баннер.При всех несомненных различиях в менталитете западных и российскихсоздателей и потребителей рекламы (об этих различиях мы еще будемговорить чуть ниже) самое сильное и эффективно действующее слово бан-нерного текста во всем мире одно и то же — это «FREE» по-английскии «БЕСПЛАТНО» по-русски. Даже если вы раздаете даром нечто такое, чтоподавляющее большинство по зрелом размышлении не согласится взятьи с доплатой, перспектива получить хоть что-то «на халяву» способнаотвлечь от важных дел и затащить на ваш сайт даже самых серьезных и за-нятых людей, В отличие от лукавых, загадочных или недоговаривающихчего-то баннеров, обещание «бесплатного сыра» повышает не только про-клик как таковой, но и общую эффективность рекламы: если уж вамудалось соблазнить посетителя скачать бесплатную программу или под-писаться на бесплатную услугу, вероятность того, что он станет вашимклиентом или, во всяком случае, запомнит название вашей фирмы, резкоувеличивается.

Собственная гордость. Как я уже упоминал, важ-нейшим мерилом эффективности баннера повсеместно

Р и с . 6 9 Вопросительныепредложения, обращенные непо-средственно к зрителю, — хо-роший способ привлечь внима-ние на первом этапе сцена-рия баннера. (Кстати, анализс точки зрения «трех частейдрамы» позволяет выявитьи главный недостаток данно-го баннера — незавершенность,отсутствие финальной «точ-ки» и подписи рекламодателя.)

Р и с . 70 Еще один баннер,пользующийся вопросом дляпривлечения внимания в самомначале сюжета. Особенностьэтого экземпляра — в том,что главная тема сообщения(«graduate schools») заявленав первом же кадре, а необыч-но бедный информацией этапэкспозиции (кадры 2—4) наме-ренно задерживает действие,своей монотонной анимацией(поворачивающийся из стороныв сторону «аспирант» с би-ноклем) нагнетает напряже-ние перед финальной развязкой(кадр 5)

184 • ' - г р а ф и к а !V,2.4

Р и с . 71 Баннер (а) доволь-но типичен для русского Ин-тернета; он комбинирует двасамых распространенных «му-ляжа» элементов интерфей-са — поле ввода с кнопкой по-иска и полосу прокрутки вдольправого края. Баннер (б), наобо-рот, без обмана и подвоха пред-лагает вам раскрыть самый на-стоящий выпадающий список,элементы которого разъясняюти конкретизируют основное со-держание баннера

считается величина CTR. Однако представления о при-оритетах в создании рекламы и о роли ее в деятельностифирмы сильно отличаются на Западе и в России. Еслизападные фирмы — как те, что у всех на слуху, так и малокому известные — на одном уровне важности с CTR ставятимиджевый компонент, впечатывание (то, что по-английскиназывается «branding») дизайн-образа и названия фирмыв сознание даже тех, кто не собирается щелкать мышью набаннере, то в русскоязычной рекламе пока что преобладаетчисто спортивный интерес повышения проклика любымисредствами.

Этому неявно способствуют и особенности русскоязычнойаудитории. Средний пользователь Интернета в нашей странечаще выходит в сеть, чтобы развлечься, почитать что-нибудьинтересное или пообщаться с друзьями по IRC или ICQ, чемс какой-то конкретной деловой целью. Поэтому и увлечьего в сторону интересным баннером намного проще, чемпользователя западного. Имеет значение также то, что кругпроизводителей и потребителей интернетовской рекламыв нашей стране пока еще очень узок — в русском Интернете,как в большой деревне, все знают всех, и очень часто щелчокпо баннеру означает не заинтересованность потенциальногоклиента, а ревнивый интерес конкурента. Поэтому нетничего удивительного в том, что средняя величина CTR,на Западе составляющая 2—3%, в русском Интернетеближе к 4%, — и не редкость баннеры, проклик которыху варящейся в собственном соку русскоязычной аудиториизашкаливает за десять и даже двадцать процентов.

Удар н и ж е п о я с а . К сожалению, столь впечатляю-щие результаты нередко достигаются ухищрениями, ужене имеющими отношения ни к сюжету, ни к дизайнубаннера. В частности, за последние год-полтора повальноймодой стало использование в баннернои графике «муляжей»элементов интерфейса операционной системы — кнопок,полос прокрутки, флажков и т. п. Баннеры вроде пока-занного на рис. 7 1 , а эксплуатируют подсознательныйимпульс тянуться мышкой ко всему, что может означатькакое бы то ни было движение вперед, переход от экранак экрану, смену впечатлений, — в том числе и к любымстандартным (и потому мгновенно узнаваемым) элементамкомпьютерного интерфейса.

Первыми появились баннеры с изображениями полей вво-да, кнопок «Искать», «Перейти», «Показать» и списков

функции ш 285с прокруткой; популярным приемом был какой-нибудьпровокационный вопрос, два варианта ответа на которыйпредставлены парой интерфейсных кнопок («Да» и «Нет»,а иногда и что-нибудь позаковыристее, вроде «Конечно,хочу» и «За кого вы меня принимаете?»). Затем кому-топришла в голову идея добавить к соблазну нажатия накнопку — хоть и очень сильному, но все же не дающе-му стопроцентного эффекта — совершенно непреодолимыйсоблазн промотать, чтобы посмотреть, «что там дальше».Было время, когда чуть ли не большинство баннеров в рус-ском Интернете украшались изображениями вертикальнойполосы прокрутки вдоль правого края. К счастью, довольноскоро аудитория выработала иммунитет к этому патенто-ванному снадобью, и сейчас его эффект, видимо, близокк нулю. Пожалуй, история этого изобретения — самаянаглядная иллюстрация того, как последние крупицы эсте-тики могут приноситься в жертву всемогущему прокликуи как всегда свойственная рекламе провокационность можетзашкаливать за допустимые пределы.

Характерно, что в англоязычном рекламном дизайне такогоповального увлечения «нечестными» приемами не было,и вполне невинные намеки вроде интерфейсных кнопокс надписью «click here» встречаются только как исключе-ние. Вместо этого весьма популярны составные баннеры,размещающие на баннерном прямоугольнике стандартногоразмера одну-две графические вставки и несколько насто-ящих кнопок, списков или полей ввода. Пользователь приэтом может свободно разворачивать списки, устанавливатьи сбрасывать флажки, писать в полях ввода и, разумеется,нажимать кнопки, получая от этого определенное удоволь-ствие. Даже если завершающая кнопка в такой мини-формеведет на одну и ту же статическую страницу вне зависимо-сти от положения остальных переключателей или списков(а так оно чаще всего и бывает), пользователь чувствуетсебя при этом обманутым гораздо меньше, чем когда емуподсовывают откровенную бутафорию с «муляжами».Очевидно, что, если только такой интерактивный баннер не вписан жестко

и навсегда в исходный код страницы, программа, управляющая размеще-

нием рекламы, должна иметь возможность вставлять в страницу целые

HTML-фрагменты, а не просто подставлять разные изображения по фик-

сированному URL. Пока что это возможно только с помощью SSI (стр. 71)

или других технологий генерации страниц «на лету», поэтому программа

управления баннерами должна обязательно стоять прямо на сервере, раз-

мещающем эту рекламу. Поскольку иметь собственный сервер могут по-

зволить себе только достаточно крупные контент-сайты, рядовым сайтам

2 8 6 • в е в « г р а ф и к а г о . 2 . 4

и страницам приходится покупать интерактивные составные баннеры по-штучно и развешивать их вручную.

С м е н а п о к о л е н и й . Даже самый пробивной баннер современем неумолимо стареет, «намозоливает глаза» аудито-рии, и CTR его снижается. Разумеется, для англоязычнойрекламы этот эффект «выгорания» выражен довольно сла-бо из-за большого объема аудитории и, соответственно,большого количества потенциальных заинтересовавшихся.Однако и там срок жизни баннера ограничен — подсчитано,что после приблизительно двухсот тысяч показов CTR бан-нера снижается вдвое. Понятно, что узость русскоязычнойаудитории заставляет русские баннеры стариться гораздобыстрее — парадоксальным образом работа для сравнитель-но узкого круга требует здесь от создателей рекламы более(а не менее) интенсивного потока свежей продукции.

На килограмм живого веса. Последний в списке,но далеко не последний по важности фактор, оказывающийвлияние на CTR баннера, — это объем графического файлав байтах: чем дольше загружается баннер, тем большая долячитателей страницы не дождется его полного проявления и,следовательно, будет навсегда потеряна для рекламодателя.На западных сайтах верхней границей размера для баннераформата 468x60 считается 15 Кб, а на некоторых живущихза счет рекламы и потому стремящихся к максимальнойэффективности контент-сайтах — даже и 10 Кб. В Рос-сии, где пропускная способность интернетовских каналовзаметно ниже, баннеру лучше не выходить за пределы7—8 Кб. Для этого приходится прибегать к значительноболее агрессивной, чем обычно, оптимизации графическихфайлов (стр. 252), в особенности для баннеров анимиро-ванных.

Совместить несовместимое — богатую анимацию и мини-мальный размер файла — в одном баннере очень сложно.Проще сделать это в серии баннеров, образующих спла-нированную рекламную кампанию. Если цель оправдываетзатраченные средства, даже не очень крупные фирмы впол-не могут добиться того, чтобы средний посетитель сайтовопределенной тематики видел их баннеры не реже разав день. В таких случаях выгодно выпустить одновременносерию близких по стилю и содержанию баннеров, разли-чия между которыми позволили бы охватить максимальноширокую аудиторию.

IV.2.4 ФУНКЦИИ В287

Очевидно, в первую очередь баннеры должны различатьсяначальными кадрами представления: если одного обязатель-но привлечет «мультик», то другого с большей вероятностьюзаинтересует текстовый вопрос на близкую ему тему. Кро-ме того, принадлежность баннеров к одной серии лучшераскрывать только в самом конце, чтобы не ослаблятьвнимание тех, кто, возможно, уже видел другие баннеры нату же тему. Не менее важно варьировать баннеры серии пообъему файлов, так чтобы самые легковесные экземплярымогли «зацепить» пользователей с медленной связью за счетбыстрой загрузки, а «тяжеловесы» поражали бы качествен-ной анимацией воображение тех, для кого время загрузкистраницы значения не имеет.

Пример такой сбалансированной рекламной кампании —баннеры на рис. 72 и рис. 73, вместе с рис. 68 составляю-щие серию, одновременно «выпущенную в обращение» фир-мой IBM для рекламы продукта под названием «ConferenceTracker». Если баннер на рис. 88 весит без малого 15 Кб, тобаннеру с рис. 72 хватает десяти, а объем рис. 73 — всеготри с половиной килобайта. Очевидно, последний баннеримеет смысл только в контексте всей серии, так как сам посебе он не слишком интересен.A c k n o w l e d g e m e n t s . Кроме полноразмерных, часто сменяющихся ре-кламных баннеров, на первых страницах сайтов можно встретить особые«минибаннеры» (или попросту «кнопки»), обычный размер которых —88x31 пикселов. Большинство из них предназначено для несменяемыхссылок на сайты, которые автор, обычно на вполне добровольной осно-ве, хотел бы порекомендовать своим посетителям. Нередко минибаннерыссылаются на страницы тех программных продуктов, с помощью которыхданный сайт был создан или (с точки зрения его автора) должен просматри-ваться, — бесчисленные «Powered by», «Created in» и «Best viewed with».Конечно, нет ничего плохого в том, чтобы поддержать бесплатной ссыл-кой производителей понравившейся вам программы. Однако по непонят-ной лично мне причине многие дизайнеры предпочитают вывешивать насвоих сайтах кнопки именно тех двух фирм, которые вряд ли нуждаютсяв их рекламе, — Netscape и Microsoft. Утверждение, что данную страни-цу «лучше всего» смотреть в таком-то из броузеров, если и соответствуетдействительности, должно звучать скорее как признание автора в непро-фессионализме — ведь, как я уже показывал, в большинстве случаев ничтоне мешает сделать информацию сайта доступной для всех мыслимых бро-узеров и устройств воспроизведения. А какой именно из броузеров будетсамым удобным для вашего пользователя — решать во всяком случае невам. В тех же редких ситуациях, когда основное содержание сайта визу-ально по своей природе, корректнее ограничиться как можно более об-щей формулировкой (например, «A browser with image display capability isrecommended»), не пытаясь угнаться за быстро меняющейся броузерноймодой.

Р и с . 72 Менее «агрессив-ный» вариант баннера нарис. в в , использующий иныесредства для начального при-влечения внимания

Р и с . 73 Самый простой инезамысловатый баннер из тойже серии (см. рис. 6 8 , 72)

IV.2.5

• Нечто среднее между «декоративным пятном», тематиче-ской иллюстрацией и эмблемой, визуал (англ. visual) — глав-ное оружие дизайнера в борьбе за внимание пресыщенногоинформацией посетителя. У фирм поменьше и победнее ви-зуал на первой странице месяцами остается одним и тем же;в этом случае он обычно иллюстрирует постоянную основудеятельности фирмы, метафорически отражает ее название(пример 10) или рекламный лозунг. Более богатые и вли-ятельные фирмы, стремясь к тематическому разнообразиюпри сохранении общего стиля оформления, могут позво-лить себе регулярно менять визуал первой страницы вместес относящимся к нему текстом — последними новостями,пресс-релизами, обзорами и т. п.

На внутренних страницах сайта визуал обычно сводитсяна роль призаголовочной графики (пример 9). Иногдаиспользуется сквозной визуал, повторяющийся на всехстраницах сайта и обычно входящий в состав другогопостоянного элемента — блока логотипа или навигационнойпанели. Такие визуалы уже не могут меняться чаще, чемвесь дизайн сайта, и «визуальная» функция в них почтиуступает свое место «фоновой» (см. пример на стр. 319).Тем не менее довольно часто, особенно в призаголовочнойграфике, определяющими для выбора картинки являютсяее сюжет и тема — что, по-видимому, и следует считатьосновным признаком визуала в отличие от других жанроввеб-графики.

С другой стороны, в отличие от иллюстраций в науч-ных и деловых документах, однозначно соотносящихся сосмыслом текста, темы визуалов могут быть практическилюбыми. Уместной будет аналогия с логотипами: как и там,здесь противопоказана прямая иллюстративность, а лучшиерезультаты дает вольное толкование, творческое переосмы-сление темы страницы. Нужно, чтобы зрителю пришлосьзатратить определенные усилия, чтобы сообразить, «причем тут это», — получаемое от этого интеллектуальное удо-влетворение есть необходимая приправа к удовлетворениючисто эстетическому.

Р ы н о к в и з у а л о в . Из эстетических же требований к ви-зуалу стоит отметить в первую очередь достаточный тек-стурный контраст между изображением и его окружением.Поскольку на типичной веб-странице преобладающимитекстурами являются плоский цвет фона и почти что гео-метрическая текстура рядов букв, нет ничего удивительного

Визуал.

ФУНКЦИИ И289

в том, что самым популярным источником для визуаловслужат фотографии, часто сопровождаемые градиентамипрозрачности или аморфными, размытыми облакообразны-ми краями (пример 17). Не будет преувеличением сказать,что большинство производимой в мире на продажу фото-продукции употребляется для визуалов веб-страниц и иханалогов в других жанрах дизайна. (Отчасти по этой жепричине на любительских страницах, авторы которых немогут или не умеют пользоваться настоящей фотографикой,столь популярны псевдотрехмерные, часто анимированныезаголовки и логотипы, стр. 293).

Есть и другие источники графики для визуалов. Именноздесь уместно будет сказать несколько слов о рисованнойграфике — теме, безусловно заслуживающей гораздо болееподробного рассмотрения. Как я уже упоминал, умениерисовать — талант совершенно отдельный от таланта дизай-нера, и к тому же в гораздо большей степени врожденныйи слабо поддающийся воспитанию (и уж разумеется, нив коей мере не ставит целью научить вас рисовать этакнига). Рисованию научиться гораздо труднее, чем дизайну(хотя это совсем не означает, что дизайну научиться лег-ко). Однако любой дизайнер должен понимать совершенноособую ценность рисованной графики и уметь с выгодойпользоваться ею в своих работах.

Очевидно, что то, ради чего дизайнер заказывает худож-нику тематическую композицию для своей работы, — этоне поддающийся какой-либо «поверке алгеброй» элементиндивидуальности, «рука художника», недоступное фото-графии парадоксальное сочетание начал обобщения и де-тализации (рис. 74). Особенно поразительно текстурноеразнообразие индивидуальных манер и стилей рисованнойграфики. Привлекательность текстур этого класса объяс-няется не только очарованием индивидуальной манерыхудожника, но и своеволием материала — неизбежнойнеточностью мазков, аморфностью пятен краски, брызг,подтеков и тому подобных признаков материальности (в по-следнее время, впрочем, все успешнее подделываемых ком-пьютерными программами, — см. рис. 18 на стр. 102).Здесь бесконечность рисованных текстур смыкается с дру-гой бесконечностью — текстур материальных. Но лишьбудучи облагороженной прикосновением человеческой руки(вспомним требование рукотворности в антигеометрических

Рис. 74 Рисованная графи-ка в дизайне ценна смелостьюобобщения, отсутствием стольчастой у фотографий перегру-женности деталями, а глав-ное — индивидуальным, узнава-емым стилем художника, ко-торый почти всегда подчиня-ет себе стиль окружающейдизайн-композиции

2 9 0 • в е б - г р а ф и к а iv.3.i

логотипах, стр. 270), дикая природа натуральных текстуробнаруживает свою подлинную красоту.

Приемы. Если попытаться проанализировать те элементарные

операции, из которых складывается повседневная работа

дизайнера, то мы увидим, что единственное, о чем до сих

пор еще ничего не говорилось, — это компьютерные транс-

формации растровой графики и создание новых растровых

изображений «с нуля».

Речь не идет о рисовании в традиционном смысле этого сло-ва — как я уже говорил, эту тему моя книга не затрагивает.Но, как известно, существует множество программ, кото-рые позволяют до неузнаваемости видоизменять растровыеизображения и (в каких-то пределах) даже создавать новые,не требуя от пользователя ничего, кроме манипулирова-ния несколькими движками и переключателями на панелиуправления. Восторг от результата настолько несоизмеримс усилиями, затраченными на его получение, что для многихэтот аспект компьютерной графики полностью заслоняетнеобходимость овладения другими, намного более фунда-ментальными, традиционными и неизбежно трудоемкиминавыками и приемами. Я же, хоть и не разделяю увлеченияграфическими «конфетками» (одна из этих программ, кста-ти, так и называется — «Eye Candy», «конфетка для глаз»),все-таки не могу проигнорировать целый огромный пласткомпьютерной культуры (я говорю это без всякой иронии),для многих синонимичный самому понятию «компьютер-ный дизайн».

Г р б Х М С р Н О С Т Ь ш Если ограничиться только графикой, не беря в расчетвсевозможные программные и мультимедийные интерне-товские технологии, то первое место по популярностив широких народных массах дизайнеров-любителей и ихэнтузиастической аудитории (по большей части молодойи воспитанной на компьютерных играх и фантастическихфильмах с обилием трехмерной графики) уверенно займутприемы создания объемных изображений и соответствую-щих светотеневых эффектов. Профессиональные дизайнерыесли и пользуются трехмерной компьютерной графикой, тоочень сдержанно, так что изобилие выпуклых заголовков,

Трехмерность.

iv.3.i п р и е м ы Н291логотипов и кнопок (нередко анимированных, монотонновращающихся и посверкивающих на ярком цифровом солн-це) есть один из характернейших признаков любительскоговеб-дизайна.

Почему же прием этот так привлекает одних и отвращаетдругих? Само противоречие такого рода нельзя считать па-радоксом — для многих областей так называемой «массовойкультуры» определяющим является именно презрительноеигнорирование со стороны профессионалов в сочетаниис широкой популярностью «в народе». Нельзя, однако, непризнать, что притягательность трехмерной графики опре-деляется не только модой, но и достаточно глубокимипсихологическими причинами.

И м п е р а т о р и л л ю з и й . Подделка под реальность, обла-дающая немыслимой в докомпьютерную эпоху достоверно-стью и способная к совершенно невероятным — и в тоже время пугающе реальным — движениям и трансфор-мациям, действует безотказно, на подсознательном уровне,завораживая зрителей, как удав кроликов. Облучая мощным«стереозвуком» глубинные слои визуального восприятия,ответственные за распознавание формы и пространствен-ного расположения объектов, трехмерная графика держитзрителя в постоянном напряжении примерно так же, какзатягивают слушателей ритм и драйв рок-музыки, послекоторой музыка симфоническая очень многим кажетсяпресной и «одномерной».

Значительная часть интернетовской аудитории к тому жеимеет представление об относительной технической легко-сти получения такой графики. Все мы знаем, что автору непришлось рисовать вручную многочисленные тени и бликина трехмерной картинке и что достаточно было описать ком-пьютеру форму объекта и задать условия освещения, как всевдруг нарисовалось «само». Точно такой же, лишь отчастиэстетический восторг вызывает любое свежее изобретение,автоматизирующее некий (пусть и не особо нужный нам)процесс, раньше выполнявшийся только вручную, — намхочется запускать «эту штуку» снова и снова, только чтобыполюбоваться на то, как ловко она справляется с раз-ными наборами исходных данных. Вот почему отношениечисла создателей к числу зрителей в трехмерной графикегораздо выше, чем в дизайне или компьютерной графикев целом, а полностью равнодушные к технической сторонежанра зрители почти отсутствуют — так же как в первые

2 9 2 • в е б - т р а ф и к а iv.3.i

годы после появления автомобилей отсутствовали автовла-дельцы, не являющиеся по совместительству механикамии не знающие досконально внутренности своего авто-мобиля.Непобедимое очарование компьютерной трехмерности автор этих строкможет засвидетельствовать на своем собственном примере. В 1987 году,учась в 8 классе средней школы и зная о компьютерах лишь по статьямв научно-популярных журналах, я настолько увлекся носящейся в воздухеидеей трехмерной, генерируемой компьютером графики, что самостоятель-но разработал простейший «трехмерный» алгоритм и написал программкудля единственного доступного мне вычислительного устройства — програм-мируемого микрокалькулятора МК-54. Программа эта вычисляла проекциюточки на двумерном экране, исходя из трехмерных координат этой точкии координат наблюдателя в пространстве. Калькулятор, с его мизернойпамятью и быстродействием, был в состоянии просчитать только одну точ-ку за один прогон программы; вводя поочередно данные из небольшогомассива, описывающего фрагмент трехмерного рельефа, я отмечал на ли-сте миллиметровки рассчитанные изображения точек, с замиранием сердцаследя, как они складываются в «холмы» и «долины» моего виртуальногомира...

П л а с т м а с с о в ы й п р и з р а к . Как и фотографика, гене-рируемые компьютером изображения трехмерных объектовслужат дешевым и неисчерпаемым источником особой раз-новидности текстур. «Трехмерные» текстуры родственныфотографическим, но из двух характерных признаков по-следних — изобилия плавных переходов цветов и размытыхцветовых границ — трехмерная графика заимствует толькопервый. В типичном трехмерном изображении нет недо-статка в светотеневых градиентах, но столь характернаядля фотографии «глубина резкости» (расфокусированностьна слишком близких и слишком далеких от наблюдателяобъектах) отсутствует напрочь. В сочетании с характер-ной гладкостью и «пластмассовостью» самих виртуальныхобъектов эта особенность трехмерной графики становитсяее основным недостатком с точки зрения как професси-ональных дизайнеров, так и просто людей, не лишенныххудожественного вкуса.

Отсутствие фотографической «мягкости» и трудоемкость мо-делирования аморфных, органических по форме объектовсильно ограничивают творческий потенциал этого графиче-ского жанра. Разумеется, недостатки эти не непреодолимы,и очевидно, что сейчас трехмерные графические программыразвиваются прежде всего в направлении моделированиявсе более сложных органических форм. Пока же мы с ва-ми являемся свидетелями подзатянувшейся паузы, когдапервоначальное увлечение трехмерностью как технологиче-ским феноменом прошло, а принципиально новых средств

iv.3.1 -1 • 2 9 3

выражения, которые бы позволили придать этому жанрупривкус творческой, а не только технической новизны, ещене появилось. Более того, современный дизайн, похоже,движется в совершенно противоположном направлении, всебольше входя во вкус плоскоцветных форм, выразительнойрукотворной аморфности (стр. 270) и живописных текстур(стр. 289).

Помимо всего прочего, трехмерные изображения в ролидекораций плохо сочетаются с насыщенными информаци-ей элементами дизайна. Осмысленного противопоставлениятрехмерной графики и двумерного текста не получается —глаз отказывается воспринимать обычную плоскую графикукак нечто «лишенное» одного измерения и потому противо-стоящее расположенной рядом объемной графике. Вместоконтраста мы получаем разнобой, только усиливающийсяиз-за того, что источником большинства трехмерных кно-пок, иконок и прочих украшений на любительских страни-цах служат бесплатные коллекции веб-графики (стр. 153),нещадно эксплуатирующие трехмерную моду и вносящиев нее неизбежный компонент эклектики и безвкусицы.

Скульптура или б а р е л ь е ф . Кроме «настоящей»трехмерной графики, генерируемой специальными про-граммами по описанию формы объекта и условий егоосвещения, на многих страницах можно встретить гораздоболее скромную по запросам и простую по исполнению«подделку» под трехмерность в виде бликов и падающихтеней у букв, заголовков, кнопок, навигационных панелейи т. п. При определенном навыке все эти красоты безтруда создаются в любом растровом редакторе (чаще всегов Photoshop), и премудростям этого ремесла посвященоогромное количество книг, статей и сайтов (например,www.eoai type .com).

Интересно сравнить такого рода «барельефную» трехмер-ность с висящей в воздухе трехмерностью «скульптурной»(пожалуй, правильнее даже называть ее «архитектурной», таккак законы перспективы для нее куда важнее, чем натураль-ность форм). Оба вида трехмерности с выгодой пользуютсяширотой цветового диапазона компьютерного экрана — набумаге невозможно получить такие ослепительные блики(вспомним, что поверхность экрана сама излучает свет)и такую глубокую, бархатную черноту, благодаря которымэкранная картинка выглядит намного «стереоскопичнее» посравнению даже с самой высококачественной печатью на

Р и с . 75 «Скульптурная»(а) и «барельефная» (б) разно-видности трехмерных изобра-жений

2 9 4 • в е б - г р а ф и к а

бумаге. Однако с точки зрения информационного дизайнаскульптурная и барельефная разновидности трехмернойграфики демонстрируют весьма различные диапазоны при-менимости.

В защиту барельефа нужно сказать прежде всего то, что онне игнорирует плоскость страницы — тени всех объектовпадают обычно именно на эту плоскость, и все выпуклостии вогнутости отсчитываются от «нулевого уровня», на кото-ром расположен основной текст и графика. Благодаря этомустраница с барельефной трехмерностью может иметь впол-не приемлемый уровень цельности и единства — выпуклаяграфика и плоский текст составляют осмысленно кон-трастирующую пару. Если «скульптуру» выгодно подаватьв движении, с применением анимации (в целом проти-вопоказанной информационному дизайну, см. стр. 76),то «барельеф» по определению статичен и потому хоро-шо работает именно в декоративных, второстепенных поинформационной важности элементах.

Как я уже упоминал, в наши дни любая трехмерная графи-ка пользуется необычайной популярностью у дизайнеров-любителей и многочисленных энтузиастов компьютернойграфики. Однако если вращающийся «архитектурный» за-головок редко увидишь на хоть сколько-нибудь приличнооформленной странице, «барельефные» эффекты доволь-но часто встречаются и на страницах профессиональныхдизайнеров. К сожалению, даже у очень талантливых ху-дожников увлечение бликами и тенями иногда заслоняетдругие аспекты дизайна, — ослепленный игрой светотени,автор перестает замечать, сколь бедны и неинтересны цветаи формы в его работах (именно это я имел в виду, говоряо «текстурщине» на стр. 122).

Совет здесь можно дать только один: даже если соблазн«вспучить и подсветить» хоть что-нибудь на страниценепреодолим, отложите все эти (растровые по сути) эффектына самый последний этап работы и не переходите к ним,пока не убедитесь, что страница выглядит безупречнов строго плоскоцветном, векторном варианте. Потративдостаточно времени и сил на поиск и уравновешиваниеформ, цветов и шрифтов, в конце концов вы, вполневероятно, придете к выводу, что ваше творение толькопроиграет от введения каких бы то ни было «барельефов».Не стоит также забывать, что любые сложные текстуры,к которым относится и трехмерная графика, неизбежно

iv.3.2 приемы • 295

раздувают объем графических файлов и, следовательно,увеличивают время загрузки страницы.

Бывают, однако, композиции, в кото- И С К У С С Т В О И С К Э Ж 6 Н И Ирых не обойтись без теней, размывок, растушевок и прочихчисто растровых эффектов. Давайте рассмотрим основныеразновидности таких эффектов и выясним, как и для чегоими можно пользоваться в дизайне. Поскольку в приме-нении к плоскоцветным изображениям эти эффекты редкодают интересный результат (за исключением барельефнойтрехмерности, о которой мы говорили выше), основноевнимание здесь будет уделено трансформациям фотографи-ческих и рисованных изображений.Что упало, то пропало. Интересно, что если для плоскоцветной (т. е.«векторной») графики растровые эффекты (включая даже такой простойи почти незаметный, как анти-алиасинг, стр. 24В) неизбежно приводятк увеличению объема файла, то для растровых по самой своей природеизображений со сложными фотографическими текстурами те же самыеэффекты обычно дают обратный результат: не только размытые фотографиигораздо лучше сжимаются алгоритмом JPEG (стр. 252), но и почти любоеизменение фотоизображения по сравнению с оригиналом делает глаз болеетерпимым к дополнительным искажениям, вносимым при оптимизациии сжатии графики.

Обобщая, можно сказать, что принципиально растровый характер всевоз-можных размывок и растушевок, подсветок и затенений, «линз» и «кривыхзеркал» проявляется в сопутствующей им необратимой потере информа-ции. Растровая картинка обладает информацией только о составляющихее пикселах, а все те объекты, которые видит на ней человек, — резуль-тат обобщения, происходящего только в его мозгу. Точно так же эффект,к примеру, размывки существует как определенный, подчиненный общейцели алгоритм только в момент выполнения; после этого в памяти про-граммы вновь остается лишь решетка пикселов, догадаться по которой обисходном состоянии изображения человек может лишь приблизительно,а компьютер не может вообще.

По своей популярности в современном дизайне растровыеэффекты уступят разве что трехмерной графике, — но,в отличие от нее, без эффектов не обходятся не тольколюбители, но и профессионалы. Если не по тиражам, тоуж во всяком случае по разнообразию продуктов индустриярастровых эффектов — определенно самый быстрорастущийсегмент рынка графических программ. Оформленные, какправило, в виде подключаемых модулей для Adobe Photoshopи других программ, поддерживающих соответствующийинтерфейс, фильтры эти россыпью и в наборах (вродеKai's Power Tools или Alien Skin Black Box) необычайнопопулярны у дизайнеров-любителей, по работам которыхобычно нетрудно определить, какие фильтры и в какомпорядке применялись к исходному изображению.

Искусство искажений

296 • веб-гр ^ кт iv,3.2Пожалуй, только этим «любительские любители» растровыхэффектов и отличаются от любителей профессиональных,композиции которых уже не так легко поддаются расши-фровке. Модный в современном дизайне «декадентский»,«урбанистический» стиль (стр. 122) предполагает интенсив-ное использование разнообразных фильтров для натурали-стического текстурирования, имитации размыва, осыпанияи прочих проявлений деградации (пример S).

Нетекстурирующие эффекты. Как мы уже не разубеждались, текстурный анализ — один из самых плодотвор-ных подходов к классификации различных явлений дизайна.С этой точки зрения растровые фильтры распадаются надве основные категории: те, которые изменяют текстуруисходного изображения (текстурирующие), и те, которыеэтого не делают (нетекстурирующие). Последней категорииможно дать более формальное определение: нетекстуриру-ющий фильтр — это такой фильтр, который изменяет цветкаждого пиксела только на основании общих параметровизображения и исходного цвета этого же пиксела (т. е. непозволяет пикселам влиять друг на друга).

К категории нетекстурирующих фильтров относятся всеинструменты работы с цветом (осветление, затемнение, из-менение насыщенности и сдвиг цветового баланса), а такжеобрезка и обтравка фона за объектом. Если в качествеисточника берется не одно изображение, а два или более,в этот класс попадают всевозможные режимы наложенияих друг на друга (список «Blending» в Photoshop), включаясамый простой и самый популярный вариант — коллаж изнескольких частично прозрачных изображений (стр. 259).Как правило, текстура изображения при всех этих пре-образованиях не меняется (если не рассматривать крайнийслучай, когда какая-то часть изображения заливается плос-ким цветом). Большинство эффектов этого класса доступныне только в растровых, но и в векторных графическихпрограммах.

Конечно, применение нетекстурирующих эффектов не огра-ничивается имитацией прозрачности. В большинстве ком-позиций все необходимые типы текстур (обычно плоскийцвет и фотографика) вводятся самими носителями ин-формации, и от выходящих на сцену в последнем актерастровых эффектов поэтому не требуется какой-либо тек-стурной самодеятельности. Вместо этого дизайнеру нуженспособ, позволяющий свободно и в широких пределах

IV-3.2 -1Ы H 2 9 7

варьировать ранг элемента в композиции, степень его за-метности и психологической «яркости», выстраивая такимобразом иерархическую лесенку восприятия и подавляяконфликты между элементами. Именно для этой цели луч-ше всего подходят нетекстурирующие эффекты. Вводимыйв композицию элемент нельзя оставлять без регулиров-ки его цветовых и яркостных параметров точно так же,как не обойтись без тщательной подгонки его размераи размещения.

Изменение яркости или насыщенности — один из самыхэффективных методов повышения или понижения рангаизображения в иерархии композиции: понятно, что чемнасыщеннее картинка и чем контрастнее она по отноше-нию к фону (т. е. темнее для светлых фонов и светлеедля темных), тем больше вероятность того, что вниманиезрителя будет в первую очередь привлечено именно к ней.Как правило, свежее, необработанное изображение кажет-ся слишком ярким и контрастным в окружении другихэлементов, поэтому задача понижения ранга встречаетсяна практике гораздо чаще, чем противоположная. Вот трисамых употребимых способа (перечисленные в порядке отсамого сильного к самому слабому) понизить психоло-гическую заметность изображения, варьируя его цветовойсостав:

• полная десатурация, приведение цветного изображенияк серой шкале;

• приведение к монохромной шкале с константной насы-щенностью и тоном (т.е. не к черно-белой, а, к примеру,к черно-красной или черно-голубой палитре);

• сохранение насыщенности со сдвигом цветового балансаили прямой заменой некоторых цветов, чтобы лучшеприспособить новый элемент к сложившейся цветовойгамме композиции (таким способом можно и повышать,и понижать видимость этого элемента, выбирая длянего контрастные или поддерживающие по отношениюк окружению цвета).

Эти методы регулировки видимости можно комбинироватьдруг с другом. Так, на сплэш-странице сайта ш а д т с а р -stonestuciio.com (пример 14) прямоугольная фотографияразделена на центральную и периферийную части, и в пол-ном соответствии с классическими законами композициицентр (в монохромной синей гамме) сделан более яркими заметным, чем периферия (в серой шкале). Контраста

2 9 8 • IV.3,2

между частями одного изображения в сочетании с паройлиний и заголовком вполне достаточно для создания пустьи несложной, но аккуратной, устойчивой и достаточноинтересной композиции.

С меньшим успехом цветовые эффекты применены на сай-те www.vividj.coin (пример 20). Левая часть страницыс логотипом студии представляет собой один из редкихпримеров удачного вписывания скульптурной трехмерности(стр. 293) в плоскую композицию: узкий вертикальныйпросвет похож на щель, через которую мы видим частьтрехмерного шарика логотипа, явно расположенного позадиплоскости страницы и, таким образом, однозначно скоорди-нированного с ней в третьем измерении. Цветовое решениеэтого элемента — монохромная, но притом достаточно яр-кая сине-фиолетовая шкала — также выгодно отличается оттипичных трехмерных изображений.Обратите внимание, что этот логотип реализует в трех измерениях идею«доказательства от противного», о которой мы говорили на стр. 2 8 6 , — бу-ква «v» как самостоятельный элемент отсутствует, но ее форма угадываетсяпо очертаниям прорези в шаре. На этой же странице интересно обратитьвнимание на уравновешивание жирного шрифта «vivid» светлым, но с уве-личенным межбуквенным расстоянием начертанием «studios» (вверху).

В правой части страницы, однако, дизайнеру не удалосьразвить свой успех. Ему пришла в голову идея поддер-жать контраст белого и черного фоновых полей контрастомдвух половин фотографии руки, искусственно раскрашен-ных в прямо противоположные друг другу (негативные)цвета — зеленый и фиолетовый. «Притянутость за уши»этого приема становится очевидна хотя бы из того, что фи-олетовый правой половины руки раздражающе отличаетсяпо тону от фиолетового логотипа. Намного хуже, однако,то, что контраст прямо противоположных тонов по самойсвоей природе не только намного сильнее даже максималь-ного контраста по яркости (между черным и белым), нои в большинстве случаев просто перестает быть осмыслен-ным контрастом и превращается в диссонанс.

Очевидно, что в данном случае автор хотел создать яр-кий, выступающий на первый план центр композиции,и сильный внутренний контраст служит здесь средствомпривлечения внимания. Но беда в том, что рассеченнаяна две половины рука служит в то же самое время фономдля висящего между пальцев глаза, и неумолимые законыдизайна требуют, чтобы этот глаз был еще более ярким изаметным, чем рука позади него. Поверх этого кричаще

§¥«з,2 ПРШВШЫ И299

яркого, пусть и монохромного фона даже полноцветное,с натуральными цветами изображение глаза казалось быслишком бледным, и дизайнеру пришлось пойти в обрат-ном направлении, искусственно повышая насыщенностьцвета. Возникающий при этом эффект «перепроявления»,если оставить в стороне его роль в данной композиции, необладает сколько-нибудь заметной художественной ценно-стью за пределами «декадентского» стиля — изображениепри этом почти теряет фотографичность текстуры и ста-новится неопрятно пестрым. Таким образом, хотя в целомдизайнеру удалось выстроить иерархию восприятия, оче-видная искусственность использованных для этого приемовсильно портит впечатление.

Значительно чаще, чем вариации насыщенности, применя-ются вариации яркости изображения, обычно реализуемыечерез изменение его прозрачности и, соответственно, види-мости фона под изображением. Очевидно, что чем «призра-чнее» полупрозрачная картинка, тем менее она привлекаетвнимание и тем периферийнее ее положение в компози-ции страницы. Простой, но достаточно типичный пример:в баннере на рис. 76 одно и то же изображение автомобиляповторено дважды — в фоне крупно и бледно, а поверх не-го — мелко и насыщенно. Противоположно направленныеаспекты контраста — по размеру и по яркости — держаткомпозицию визуально, а «скрытый смысл» одинаковостидвух изображений, открывающийся только при вниматель-ном разглядывании, придает ей интерес.Не менее часто регулировка цвета и насыщенности применяется не дляподгонки готовых фотофрагментов в дизайн-композиции, а для коррекциидефектов съемки или сканирования фотографий. Искусство «поднятия»компьютерными средствами некачественных изображений требует большо-го опыта и верного глаза; для тех, кому приходится заниматься этим лишьэпизодически, существуют алгоритмы автоматической цветокоррекции (на-пример, фильтр Intellihance).

Текстурирующие э ф ф е к т ы . Если нетекстурирую-щие эффекты заслуживают внимания прежде всего из-засвоей важности для координации элементов в композиции,то их противоположность — эффекты текстурирующие —примечательны в первую очередь своим обилием и (покрайней мере, на первый взгляд) разнообразием. Дажев свежеустановленной копии Adobe Photoshop меню Filtersпревосходит по величине и многоуровневости все осталь-ные меню вместе взятые, а у многих активно пользующихсяэтой программой и пополняющих ее все новыми фильтрамии «примочками» оно становится просто необозримым.

Рис. 76 «Большой, но запять или маленький, но за три»

- • mm IV.3.2

Попытка классификации текстурирующих фильтров позво-ляет прежде всего выделить в отдельную группу разнообраз-ные размывки — самых, по-видимому, часто употребляемыхи потому4 самых важных представителей этого класса.Важность размывок объясняется, очевидно, их соприродно-стью текстурам изображений, к которым они чаще всегоприменяются, — размывка делает фотографию еще фотогра-фичнее, а сильная размывка способна создать изображение,неотличимое от расфокусированной фотографии, даже изплоскоцветной в оригинале картинки.

Роль размывок в дизайне становится понятнее, если вспо-мнить о тех физических явлениях, которые моделируютсякомпьютерными алгоритмами размывки. Самое очевидноеи уже упоминавшееся явление такого рода — это глубинарезкости в фотографии, расплывчатость объектов, распо-ложенных ближе или дальше того расстояния, на котороенастроен объектив. Возникающая из-за этого размытостьфона, противопоставленная на большинстве фотографийчеткости объектов переднего плана, подсказывает, как ис-кусственную компьютерную размывку можно применять(наряду с нетекстурирующими эффектами) для построенияиерархии видимости, психологической яркости, «передне-плановости» элементов. Размывка по Гауссу превращаетлюбое изображение в фон (пример 4), отдаляет его отзрителя; с другой стороны, использование в качестве фо-на пусть и фотографического, но при этом совершеннолишенного естественной или искусственной размытостиизображения есть серьезная и, к сожалению, часто встре-чающаяся ошибка дизайна (самый яркий пример — фониз «мятой бумаги», делающий чтение теста настоящиммучением).

Другой источник оптической размытости — быстро дви-жущиеся объекты, представляющиеся человеческому глазу(и объективу фотоаппарата) размытыми вдоль направлениядвижения. Соответственно, фильтры направленной раз-мывки, такие как Motion Blur и Wind в Photoshop, частоприменяются для придания динамики статическим объектами для подчеркивания движения того, что само по себе ужедвижется (например, элементов анимированных рекламныхбаннеров). Так, в примере 16 горизонтальное строениестраницы подчеркивается горизонтальной же размывкойзаголовка «IDEO» вверху, — подразумеваемое движениекоторого превращается в реальное в момент прокруткистраницы (см. также стр. 168).

IV.3.2 Щ: Ы • 3 0 1

Наконец, третий источник размытости в окружающем насмире — это тени, которые никогда не имеют абсолютночетких очертаний из-за того, что источники света не могутбыть безразмерными точками. Поэтому без той же самойгауссовской размывки не обойтись при создании любого ро-да падающих теней и барельефной трехмерности (стр. 293).Любой объект, отбрасывающий позади себя тень, немедлен-но вводит в графику третье измерение и подразумеваемуюна некотором расстоянии от этого объекта фоновую плос-кость, на которую и падает тень. По закону контрастасам объект при этом начинает казаться более близким,ярким и отчетливым. В отличие от двух других примененийразмывки, обсуждавшихся выше, этот прием лучше все-го смотрится с плоскоцветными объектами и текстовымизаголовками.

Эффекту размывки родственны разнообразные искажения,отражающие изображение в кривом зеркале или волную-щейся поверхности воды (в Photoshop к этой категорииотносятся Ripple, Smear, Spherize, Pinch и др.). Иногда этивиды искажений применяются для создания трехмерныхэффектов (например, развевающегося флага), а некоторыеиз них подразумевают и определенную размывку частейизображения. Чаще всего, однако, эти фильтры дают откро-венно юмористический эффект в применении к легко узна-ваемым объектам (например, к человеческому лицу) и недают вообще никакого осмысленного эффекта в остальныхслучаях (если закрутить спиралью и без того бесформенноеоблако, ничего особенно интересного не получится).

Противоположный эффект дают фильтры, сводящие фо-тографические текстуры к плоским. Одни из них (филь-тры Cutout, Fresco) аппроксимируют исходное изображениеобластями плоского цвета (похожий эффект дает сохра-нение картинки в формате GIF с малым количествомцветов без диффузии), другие пытаются найти в изображе-нии и сделать видимыми контуры, т. е. достаточно резкиеграницы между объектами (фильтры Find Edges, TraceContour). Дизайнерская ценность этого рода преобразова-ний заключается именно в контрасте очевидно фотогра-фического происхождения изображений с их абстрактным,почти геометрическим представлением. По этой же причи-не интересно бывает поэкспериментировать с трассировкойфотографий в векторном редакторе (стр. 100).

3 0 2 • в е б - г р а с iv.3,2

Все перечисленные выше эффекты независимы от разре-шения в том смысле, что при сохранении одного и тогоже соотношения между размером изображения в пикселахи масштабом применяемого к нему эффекта (например, ра-диусом гауссовской размывки или размером «вспучивания»)результат будет выглядеть одинаково. Существуют, однако,эффекты, завязанные на размер единичного пиксела. Так,фильтр Diffuse на изображениях с высоким разрешением(т. е. с мелкими пикселами) почти неотличим от обычнойразмывки, тогда как при меньшем разрешении становят-ся видны отдельные пикселы, которые перемешиваютсяэтим фильтром без какого-либо усреднения и придаютизображению характерную зернистую текстуру. Сюда жеотносятся эффект «шума» (фильтр Add Noise) и диф-фузия, возникающая как побочный эффект оптимизацииGIF-файлов.Среди прочих, не охваченных этой классификацией растровых фильтровнайти что-нибудь по-настоящему интересное значительно труднее. Боль-шинство из них либо применяют к изображению жестко заданную, чащевсего материальную текстуру, либо делают что-то, чего можно с тем жеуспехом достичь комбинацией стандартных средств редактирования (на-пример, сдвиг или поворот друг относительно друга цветовых каналов илиразрезка изображения на куски и случайное их перемешивание). Особеннойпопулярностью пользуются фильтры для «мгновенного» создания выпуклыхкнопок, фасок, бликов, падающих теней и прочих атрибутов барельефнойтрехмерности (стр. 203) .

При-ме-ры.

глава v•

Завершающая глава книги состоит из трех

частей. После описаний двух реальных дизайнерских проек-

тов автора книги идет раздел «Галерея», в котором собраны

полноразмерные репродукции всех упоминавшихся в пре-

дыдущих главах страниц и сайтов.

Мои собственные работы представлены здесь не как образ-цы для подражания с точки зрения дизайна, а как «повто-рение пройденного», пособие для закрепления материалапредыдущих теоретических глав. Рассказывая о работе надсвоими проектами, я активно пользуюсь всем багажомпонятий и принципов, обсуждавшихся в книге, — тем са-мым демонстрируя, как теоретические положения работаютна практике, и одновременно в какой-то мере объясняя,как я сам пришел к именно такому пониманию основдизайна.

Далеко не все, что я делал и о чем собираюсь рассказать,укладывалось в готовые схемы и получало немедленноетеоретическое обоснование. Очень часто причины моихже дизайнерских решений становились ясны мне только

3 0 4 • v.1.1

спустя какое-то время — иногда не раньше, чем я начиналсознательно анализировать и описывать весь проект отначала до конца. Поэтому еще одна из целей данной гла-вы — привить вам вкус к самостоятельному анализу своихи чужих работ. Не обязательно писать статью о каждомсозданном вами сайте, — однако даже простое перечи-сление сильных и слабых сторон каждой работы, анализзадействованных в ней принципов и материалов даст вамочень много.

w w w . k i r s a n o v . c o m .

в нашей программе идет сайт-студия автора этих строк.

С момента своего запуска в июне 1998 года сайт

www*kirsan0¥*c0rri остается не только маркетинговым

инструментом, но и предметом обсуждения для моих заказ-

чиков, читателей и друзей.

В создании большинства коммерческих и контент-сайтовучаствуют два взаимодействующих начала, олицетворяемыехозяином сайта (заказчиком) и его непосредственным созда-телем (чаще всего дизайнером). Разница их представленийо том, каким должно быть содержание и оформление сайта,может быть очень значительной, и как бы хорошо ни бы-ло налажено взаимодействие и разграничение полномочиймежду ними, границу сфер влияния и следы борьбы разныхподходов можно без труда обнаружить на любом готовомсайте.

Самым заметным исключением из этого правила являютсясайты дизайнерских студий, о которых я уже упоминална стр. 182. Вот почему рассматриваемый здесь примерособенно поучителен: при создании этого сайта боролисьмежду собой не дизайнер с заказчиком, а разные стороныдизайнерского «я», — и дизайнер может, таким образом,от первого лица рассказать о том, что определяло каждыйего шаг.

Л О Г О Т И П * Простая и наглядная система отношений делает логотипидеальным пособием для изучения закономерностей дизай-на. Однако начну я свой рассказ о www.ki r sanov.comс создания логотипа не только по этой причине (и дажене потому, что логотип — первое, что посетитель видит на

Логотип.

Первым номером

v.i.i w w w . k i r s a n o v . c o n i • з о ь

этом сайте). Дело в том, что, как и многие другие, сайтэтот почти целиком вырос, как из зародыша, из своегологотипа.

Из не относящихся впрямую к дизайну исходных данных,с которыми я приступал к этой работе, стоит отметитьжелание иметь максимально общий по смыслу логотип,не отсылающий к какой бы то ни было конкретнойобласти деятельности. Коротко говоря, мне нужен быллоготип самого Дмитрия Кирсанова, а не его дизайн-студии. Тот факт, что владелец этого знака имеет какое-то отношение к дизайну, должен быть заметен толькоблагодаря качеству логотипа как объекта дизайна, а непо какому-то специфически дизайнерскому символу илиметафоре.

Такому условию, очевидно, лучше всего удовлетворяютчисто текстовые логотипы, позволяющие автору проявитьпрофессионализм в, пожалуй, самой благодарной для это-го области — в шрифте. Из всех возможных вариантовнаписания своего имени я остановился на паре инициа-лов, в которых текстовая основа сочетается с достаточным(благодаря краткости надписи) простором для графическихи шрифтовых поисков. Несмотря на внешнюю простотузнака (рис. 77), создание его было совсем не простымделом.

Основная визуальная идея логотипа, его «скрытый смысл»был найден очень быстро. После того как в векторномредакторе напечатана строка текста, первое побуждение ди-зайнера обычно состоит в том, чтобы сдвинуть буквы теснее,сменив установленные по умолчанию расстояния между бу-квами текстового набора на значительно более плотныйзаголовочный набор (операция трекинга, стр. 141). Стре-мясь сблизить буквы «d» и «к» насколько это возможно, ясразу же заехал засечками этих букв друг на друга и сообра-зил, что это можно обыграть, раскрасив буквы в разныйцвет и сплетя их засечки.

По-видимому, этот несложный эффект является в даннойкомпозиции если не единственно возможным, то, по край-ней мере, самым приемлемым украшением. Непрофессио-нальные текстовые логотипы часто грешат претенциознымиискажениями форм букв, для которых к тому же в большин-стве случаев берутся сверхдекоративные шрифты. Именнопоэтому простота найденного эффекта, элегантный, но

3 0 6 • п р и м е р ы V.1.1

не вычурный шрифт и отсутствие искажений однозначнозасчитываются этому знаку в плюс.

Даже неискушенный в тонкостях дизайна зритель, веро-ятно, почувствует, что что-то более замысловатое, чемпереплетение засечек (бывшее, кстати, стандартным при-емом в популярных в прошлые века вензелях), вряд липодошло бы этой паре букв. В данном случае есть и ещеодно обстоятельство: несвойственная старинным вензелямгеометричность и даже парадоксальность сопряжения букв(чем-то напоминающая работы художника Эшера) кон-трастирует с теплым гуманистическим очерком шрифта —курсива классической антиквы (стр. 127).Именно подбор и обработка букв и заняли большую часть времени этогопроекта, — хотя результаты этой кропотливой работы, возможно, совсемне бросаются в глаза. Моей целью было не украсить или расцветить бу-квы логотипа, а наоборот, сделать их по возможности прозрачными длявосприятия, убрать малейшие следы вычурности или нарочитости. Иначеговоря, я хотел приблизиться к идеалу очертаний гуманистического кур-сива, — но так, чтобы идеальность его была заметна только вдумчивомувзгляду.

За основу я взял шрифт Monotype Garamond Italic — одиниз лучших образцов поздней классической антиквы. Буква«d» из этого шрифта не потребовала почти никаких изме-нений; я лишь увеличил ее наклон и немного растянул погоризонтали. Кроме того, я удлинил и изменил форму ее за-сечек, чтобы лучше приспособить ее к эффекту «сплетенныхбукв».

Гораздо сложнее было подобрать подходящую букву «к».В Monotype Garamond эта буква, с петлей и кокетливымзавитком, совершенно выбивалась из того стиля, к которомуя стремился (рис. 77, а), не говоря уж о ее гораздо большем,чем у «d», наклоне (в готовом логотипе обе буквы накло-нены на среднее арифметическое углов «d» и «к» в этомшрифте). После ряда безуспешных попыток я вынужденбыл срезать боковые штрихи у буквы «к» из шрифта TimesRoman Italic (на рисунке справа) и пересадить их на стволтой же буквы в Monotype Garamond. Разумеется, прививкаэлементов переходного шрифта (стр. 129) на гуманистиче-скую основу потребовала значительной гуманизации этихзаимствований. Как видно на рис. 77, острые углы подвер-глись сглаживанию, прямые линии расслабились и немногообвисли, — так что контур буквы стал достаточно мягким,обтекаемым и живым.

Рис. 77 Генезис логотипаw w w* к I rs a no v« с din

¥.1,2 w w w . k i r s a n o v . c o m • 3 0 7

В реальных дизайнерских композициях граница между ло-готипом и его окружением зачастую бывает размытой. Так,на сплэш-странице моего сайта (рис. 78 на цветной вклад-ке) надпись «Dmitry Kirsanov Studio», хотя и не относитсяв полном смысле слова к логотипу, образует с ним единоецелое. Помимо своей основной информативной функции(сообщить посетителю, как называется сайт, на который онпопал), надпись эта играет и важную эстетическую роль.Прямой рубленый шрифт, заглавные буквы, а также нахо-дящиеся на границе читаемости мелкий размер и слабыйконтраст правой части этой надписи с фоном (использо-ван популярный прием визуального принижения важногопо смыслу заголовка, стр. 2п2) составляют сильный кон-траст с очертаниями логотипа, который в таком соседственачинает казаться значительно крупнее, четче, «строчнее»и «курсивнее», чем он есть на самом деле.

Следующей задачей был поиск цветового решения Ц В б Т О В Э Я С Х 6 М Элоготипа, которому, очевидно, предстояло стать основойцветовой схемы всего сайта. Моей целью было найти со-четание мощных, мгновенно привлекающих взгляд цветов,в то же время лишенное малейших следов дисгармонии,пестроты или неопрятности.

В х о д н ы е цвета . Мой выбор в пользу зеленых тонов,возможно, станет вам более понятным, если вы пере-читаете раздел о цветах в этой книге (стр. 101). Этотпроект еще раз убедил меня в том, что из всех обитате-лей цветового круга именно зеленый, равноудаленный оттеплых и холодных тонов, лучше всего подходит на рольцвета как такового, воплощения цветовой насыщенностив чистом виде с минимумом посторонних аллюзий и психо-логических неоднозначностей. Сила зеленого столь велика,что он способен подчинить себе и облагородить своегоближайшего соседа — зону желто-зеленых тонов, кото-рые, наоборот, обладают очень сильными «нечистотными»коннотациями.

Приняв решение начать поиск с ярких и насыщенныхцветов, я тем самым получил возможность выбирать ихдостаточно округленно, так как в зоне повышенной на-сыщенности глаз гораздо менее чувствителен к небольшимвариациям параметров цвета, чем в слабонасыщенных,«почти серых» цветах. По этой причине я решил ограни-чить свой выбор цветами «безопасной броузерной палитры»(стр. ?ЛЩ, которая, хоть и не является в современном

Цветовая схема

т V.1.2

веб-дизайне категорическим императивом, при прочих рав-ных все же дает определенные преимущества. После рядапроб я остановился на паре, состоящей из яркого желтовато-зеленого (#99ссЗЗ) для «к» и темного насыщенного зеленого(#003300) для «d» (см. стр. 335).

Нетренированному взгляду, возможно, трудно будет заме-тить, что цвета эти различаются по тоновому компоненту.Поскольку в темных цветах компонент тона менее очевидендля глаза, для темного цвета я выбрал «более зеленый» тон(у этого цвета Н= 120, ровно в середине зеленой областиспектра). Для яркого же цвета можно было поискать менееочевидный тон, находящийся примерно посередине междузеленым и желтым ( # = 80). Интересно также отметить, чтотемный цвет имеет максимальную насыщенность (S = 255),тогда как ярко-зеленый, хотя и кажется необычайно «цвет-ным», на самом деле далек от полной насыщенности(S= 191).

Если яркий цвет способен выразительно звучать почтив любых условиях, темному цвету для этого нужна зна-чительная площадь и достаточно темный общий колоритстраницы, на фоне которого этот цвет не будет казаться по-просту черным. А поскольку принцип экономии запрещаетвведение новых цветов без необходимости, первым моимдействием после раскраски логотипа была заливка фонавсей страницы тем же самым темно-зеленым цветом, чтои у буквы «d». Чтобы буква эта тем не менее не сливаласьс фоном, вполне естественно было подстелить под неефоновую плашку ярко-зеленого цвета «к». В такой компози-ции слабая различимость одного из цветов компенсируетсябольшой занимаемой им площадью и наоборот.

Гораздо труднее оказалось выбрать форму плашки под «d».Очевидно, что, чтобы ни одна часть логотипа не потерялавидимости, граница между темным и светлым фоном должнапроходить между основными штрихами букв «d» и «к». В тоже время эти два наклонных штриха уже вводят концен-трированный пучок линий, и добавление к ним еще однойпараллельной цветовой границы приведет к недопустимойпестроте в этой области. Чтобы избежать этого, я заменилрезкую границу на плавный градиент, выдерживающий тре-буемое наклонное направление, но не подчеркивающий егокакой-либо резкой линией. Это решение также оказалосьважным для дизайна всего сайта, так как на других страни-цах градиентные переходы стали одним из доминирующих

i '% • 3 0 9

мотивов (как вы помните, градиенты вводят принципиальноновый тип текстур, стр. 120).Остальные границы светлой фоновой области найти было значительнопроще. Верх и низ естественно сделать горизонтальными хотя бы для то-го, чтобы было с чем взаимодействовать наклонному мотиву в логотипе.Слева же, перебрав несколько вариантов, я отказался от какой-либо ли-нии контура вообще, просто дотянув светлую горизонтальную полосу докрая окна.

Информационные цвета. Если не считать черный(в названии компании), сплэш-страница ограничена двумяцветами — что, очевидно, является абсолютным минимумомдля любой страницы. Поскольку к этому моменту уже былоясно, что белый цвет на сайте использоваться не будет,передо мной встала задача поиска третьего нейтральногоцвета, на который бы пришлась основная нагрузка наинформационно насыщенных страницах.

Оливковый цвет (#666633), которым залит фон на всемсайте за исключением сплэш-страницы, представляет собойдальнейший сдвиг в область желтого (Я — 60) и дальнейшееснижение насыщенности (S = 128). Хотя соблазн поискатьдля фона почти нейтральный, едва зеленоватый серый былвелик, я все же решил не разбивать общую цветовую гаммусайта, своей насыщенностью компенсирующую темноватыйколорит и узость тонового диапазона.

Однако на первой же странице сайта (www,kirsa-nov.com/mairbhtml, рис. 79 на цветной вкладке) выясни-лось, что цвета логотипа слишком активны и слишком проч-но связаны друг с другом, чтобы играть сколько-нибудь за-метную роль в композиции. За пределами сплэш-страницыэта цветовая пара годится разве что на роль акцента, укра-шения, второстепенного декоративного элемента.

Для информационной части страницы нужны как минимумтри цвета, считая фоновый и черный. Поэтому одновремен-но с оливковым мне пришлось искать еще один цвет, длякоторого я в конце концов выбрал просто более светлыйоттенок фонового цвета (#979774). Этот цвет используетсядля ссылок, горизонтальных линеек, заголовков и прочихвспомогательных элементов.

Таким образом, четыре зеленых цвета распадаются на двегруппы: насыщенную контрастирующую пару цветов в лого-типе и пару совпадающих по тону, не слишком контрастныхи насыщенных «информационных» цветов. Каждый цветв этой системе знает свое место и свою роль, знает,как ему относиться к ближайшим и более отдаленным

3 1 0 • п р и м е р ы

соседям. Задача построения логичной и уравновешеннойцветовой системы была, как мне кажется, решена удовле-творительно.Цветовая схема сайта была тем его аспектом, который вызвал наиболь-ший интерес у его посетителей, — чьи комментарии, надо признаться, небыли единодушными. Большинству откликнувшихся цвета понравились,и некоторые даже называли цветовое решение главным достоинством мо-его дизайна. Другие, однако, жаловались на трудность чтения текста надовольно-таки темном фоне (особенно это относится к названию сайтана сплэш-странице) и общий «тусклый и однообразный» колорит. В своюзащиту я могу сказать, что в первую очередь мною двигало стремлениекак можно дальше уйти от доминирующей в любительском веб-дизайнецветовой пестроты и безвкусицы, — и, даже если я зашел в этом слиш-ком далеко, сайт, надеюсь, все же может быть поучителен своей цветовойбескомпромиссностью.

С Т р Э Н И Ц Э - Возвращаясь к обсуждавшимся на стр. 182 про-блемам стиля и отношения к пользователю, я прежде всегодолжен признаться, что известное противоречие между при-кладной функцией сайта (привлечение заказчиков) и эсте-тическими представлениями его автора не стало в данномслучае поводом к каким бы то ни было конфликтам. Мнене приходилось как-либо сдерживать «творческие порывы»или бояться опасаясь отпугнуть посетителей художествен-ной «заумью». Если с эстетической точки зрения сайт этот(как и любой другой) можно критиковать, то по крайнеймере своим отношением к зрителю и читателю я старался неподавать повода к малейшему недовольству.

Как это ни странно, но именно тот факт, что это мой соб-ственный проект, за который мне ни перед кем не нужноотчитываться, заставлял меня быть особенно осторожнымв выборе художественных средств и нетерпимым ко всему,что может быть воспринято как дешевая «загадочность» илипретенциозность. Интересен в этом отношении текстовыйаспект сайта. Большинство сайтов, имеющих хоть какое-тоотношение к дизайну, отличаются чрезвычайным немно-гословием и нарочитой недоговоренностью формулировок.Навигация на таких сайтах, как правило, и без того за-трудненная нестандартным дизайном, превращается иногдав утомительную головоломку из-за невозможности понять,на какой странице вы находитесь и что хочет сказать еюавтор сайта. Психология «хэппенинга», уместная в объектахчистого искусства, превращается в позу в том случае, когдаработа дизайнера должна выполнять не только эстетическуюфункцию.

Первая страница.

V-1.3 ; o m 1 3 1 1

Карты на СТОЛ. Стремясь составить свои сайтом кон-траст этой моде на загадочность, я постарался исключитьмалейшую возможность непонимания, сжато и удобопо-нятно изложив основные сведения о своей студии напервой же странице сайта. С точки зрения дизайна задачаизбежать визуальной монотонности при таком необыч-но большом количестве текста была трудной, но вполнеразрешимой.

Противопоставление светло-оливковых надписей, набран-ных крупным жирным рубленым (Arial Black), блокамчерного мелкого курсива шрифта с засечками (MonotypeGaramond Italic, тот же самый, что и в логотипе), повторя-ясь четыре раза справа от основного визуала-фотографии,задает ритм чередования фрагментов текста и вводит дваосновных шрифта и два основных цвета, которые будутиспользоваться в заголовках и навигации по всему сайту.(Светлое начертание шрифта Frutiger, которым набрана над-пись «Dmitry Kirsanov Studio» на сплэш-странице, оказалосьнеустойчивым в отрыве от логотипа, поэтому на внутреннихстраницах сайта оно используется только в «колонтиту-ле» вверху каждой страницы и в строке копирайта справавнизу — т. е. в непосредственной близости от элементов,построенных на основе логотипа и с его цветами.)

«Все это хорошо, — скажете вы, — но не стал ли сайт отэтого слишком уж откровенным и потому скучным?» Дей-ствительно, даже чисто рекламные, но все же рассчитанныена неторопливое и неоднократное прочтение материалы(буклеты, веб-сайты) обязаны иметь хоть что-то под сво-ей блестящей поверхностью — какой-то сюжет, интригу,«скрытый смысл», требующий для своего обнаружения не-которого усилия мысли. Разумеется, эти глубинные слоидолжны работать на содержимое верхнего информацион-ного слоя, делать более явной его структуру, облегчатьего восприятие и делать его более интересным, а вовсе необязательно «загадочным».

Есть такая «подкорка» и в дизайне моего сайта. Я поста-рался, однако, ограничить «пир подсознания» графическойсоставляющей дизайна, оставив текст страницы оплотомоднозначности. Фотографические визуалы, занимающиев композиции ключевое положение слева от описания ком-пании и сменяющие друг друга в зависимости от положениямыши (рис. 80), были подобраны таким образом, чтобыпротянуть смысловые связи между четырьмя фрагментами

(г)

Рис. 80 Четырехчленнаяструктура страницы иллю-стрируется четырьмя фото-графическими визуалами, сме-няющими друг друга «перека-тыванием» (стр. 213)

31.« • V.1.4

описательного текста справа и четырьмя разделами навига-ционной панели внизу.

Итак, вот авторская интерпретация (лишь одна из возмож-ных) главных смысловых связей страницы:

• Глаз — «we are» — «portfolio»: «Смотрите, кто мы такиеи что мы можем делать».

• Часы — «offering» —- «interested?»: «Если вы заинтересо-ваны, не тратьте время, напишите нам, чтобы обсудитьнаши предложения».

• Инструменты — «specializing» — «classes»: «Учитесь поль-зоваться дизайнерскими инструментами».

• Игрушечный самолет — «integrating» — «dmitry»: «По-знакомьтесь с автором и с его творчеством в разныхжанрах».

Возвращаясь к дизайну, перечислим основные отношениябаланса и поддержки, визуально скрепляющие страницу:

• Одна сплошная светлая горизонтальная полоса вверхустраницы (под «Dmitry Kirsanov Studio») уравновеши-вается тремя пунктирными параллельными полосамив навигационной панели внизу.

• Зона вытянутых по вертикали градиентов вверху страни-цы сменяется доминированием горизонтальных градиен-тов в центре и внизу.

• Широкая виньетка в самом верху, составленная изэлементов логотипа, начинает собой диагональ, сходя-щую к выполняющей роль «подписи» копии логотипав правом нижнему углу. Эта «зеленая» диагональ пе-

один зеленые другой направо ресекается с «текстовой» диагональю, протянутой от

описания компании в правой половине центральной ча-сти к навигационной панели и далее к левому нижнемууглу (в котором расположен перевешивающий все дру-гие по информационной насыщенности раздел portfolioи список latest additions).

Н Э В И Г Э Ц И Я н Все внутренние страницы сайта www.kirsai iov.camследуют в своем дизайне общему плану, заданному наmaifi.html. Возьмем для примера страницу с текстовымсодержимым (рис. 81). Ее центральная часть разделенапо вертикали на два неравной ширины столбца: пустойлевый, отмеченный лишь уменьшенной копией фотогра-фии с первой страницы (а именно — изображением часов,

Навигация.

¥«1*4 kin n И313

так как страница эта принадлежит к разделу «interested?»),и содержащий заголовок и основной текст правый стол-бец. Заметьте, что текст плотно прижат снизу к заголовку,а заголовок частично надвинут на фотографию — все точнотак же, как было на первой странице. В разделе портфолиостраницы устроены аналогично за тем исключением, что ме-сто визуала-фотографии там занимает «ноготок» (стр. 258)одной из дизайнерских работ.

Двенадцать ссылок на первой странице сайта (рис. 79 нацветной вкладке) разделены на четыре тематических группы(это именно группы, а не ветви древовидной системы,так как у этих групп нет «корневых» страниц). Однакоинформационная важность этих четырех групп неодинакова.По сути, только две левые группы имеют прямое отношениек дизайн-студии; остальные ссылки ведут к разнородным,хотя и связанным с темой сайта материалам, по большейчасти расположенным вне домена k i r s a n o v x o r n .

Поэтому на всех страницах, кроме самой первой, я оставилтолько две первые группы ссылок, сохранив их положениев левом нижнем углу страницы. Кроме того, только однаиз этих двух групп — та, к которой принадлежит текущаястраница, — «раскрыта» наподобие выпадающего меню,вторая же представлена только своим заголовком (залинко-ванным на первую страницу соответствующей группы). Этоусиливает асимметрию и делает более выраженной инфор-мационную диагональ, ведущую от текста в правом столбцек «сгустку навигации» слева внизу.

Пространство, высвобожденное в правой части навигаци-онной панели, не остается пустым. На текстовых страницах(рис. 81) оно позволяет подтянуть вверх блок подписи с ло-готипом и копирайтом. На страницах портфолио (рис. 82)этот элемент сдвинут еще и влево, а правый конец па-нели занят линейной (стр. 207) навигационной системойдля перемещения по цепочке страниц в данном разделепортфолио. Как известно, минимум навигации в таких слу-чаях — пара ссылок, ведущих на следующую и предыдущуюстраницы цепочки. Однако существенно удобнее системанумерованных ссылок, количество которых равно количе-ству страниц, что позволяет перейти с любой страницыцепочки на любую другую.

Линейная навигация встречается в Интернете реже, чем дре-вовидная; кроме того, в данном случае она является «ино-родным телом», неожиданностью для посетителя сайта, уже

3 1 4 m v.a

успевшего привыкнуть к иерархически-групповой системе.По этой причине я постарался не только сделать линейнуюнавигацию как можно более простой и интуитивно понят-ной, но и подчеркнуть ее особое положение на сайте:

• элементы линейной навигации используют яркие и кон-трастные цвета логотипа, в отличие от уже привычногосветло-оливкового в остальных навигационных ссыл-ках;

• сдвинутый влево логотип-«подпись» выровнен по право-му краю светлой горизонтальной полосы, — тем самымподчеркивая, что в этой точке кончается привычнаяструктура страницы и начинается принципиально новыйэлемент;

• для перемещения взад и вперед по цепочке предусмо-трены как текстовые кнопки «next»/«prev», так и яркиеграфические стрелки. Это дублирование информацииделает ее более доступной для людей с разными типамивосприятия;

• каждая кнопка с номером снабжена alt-текстом, в ко-тором не только повторяется сам номер, но и добавленоназвание того проекта, которому посвящена страницапод этим номером. Конечно, вряд ли кому-то придетв голову заходить на дизайнерский сайт в текстовом илиречевом броузере, — однако от такого расширенноготекстового эквивалента есть прямая выгода и в графиче-ской среде: подведя курсор мыши к кнопке, вы сможетепрочитать ее alt-текст во «всплывающей подсказке».

Один из ранних про-

ектов моей студии — разработка логотипа и сайта для

американской корпорации Quiotix — может считаться ти-

пичным: небольшая фирма, небольшой статический сайт

и почти полное отсутствие у заказчика элементов фирмен-

ного стиля до того момента, когда он обратился к услугам

дизайнера.

На этом же примере я расскажу, как обычно протекает вза-имодействие с клиентом и как разрешаются возникающиепри этом разногласия. Эта сторона работы — очевидно,

жизненно важная для любого практикующего дизайнера —не стала одной из тем моей книги, так как я не считаюсебя специалистом по маркетингу и не хочу давать общихсоветов на тему того, как «привлечь и удержать» клиента.В то же время рассказ обо всех перипетиях одного реальногопроекта, возможно, покажется вам интересным и с этойточки зрения.

Как это часто бывает, первый запрос клиента касался Jсоздания сайта, и только после некоторого обсуждениявыяснилось, что у фирмы еще нет своего логотипа. Создатьприличный сайт, в который впоследствии можно было бы«вставить» любой логотип, вряд ли возможно; логотип — этооснова образа фирмы, и в его отсутствие просто нет смыслаговорить о каких-то элементах фирменного стиля. Поэтомузаказчик не стал возражать против того, чтобы начать нашесотрудничество с работы над логотипом.

Президент фирмы Quiotix не высказал никаких особыхпожеланий кроме того, что его логотип должен выглядетьпрофессионально и по возможности оригинально. Само на-звание компании, полученное перестановкой букв в имениQuixote (Дон Кихот), было чистой «заумью» и не обязанобыло что-то значить или с чем-то ассоциироваться; сферадеятельности компании — программирование — также неимела никаких устоявшихся визуальных ассоциаций. По-этому свобода поиска абстрактных форм для логотипа небыла ничем ограничена.

Работу над логотипом я всегда начинаю с посылки заказчи-ку одновременно нескольких (не менее трех) существенноразличных вариантов на выбор. Даже если ни один из нихне будет безоговорочно принят, комментарии по каждомуиз вариантов помогают мне лучше понять предпочтенияи ожидания клиента. Поэтому первые три варианта лого-типа Quiotix (рис. S3) отличались по степени асимметриикомпозиции, характеру цветового и шрифтового решения.

В данном случае первый же из трех представленных вариан-тов понравился заказчику своей подчеркнутой асимметриейи непохожестью на известные логотипы других фирм. Крометого, одобрение вызвало сходство формы графической частиэтого знака с контурами буквы «Q», начальной буквы именикомпании. В то же время вариант на рис. 83, а не былеще настолько хорош, чтобы стать окончательным; заказ-чик попросил сделать еще несколько набросков с разными

Логотип

шрифтами и вариациями формы, чтобы выбрать из нихнаилучший.

Окрыленный успехом, я начал с того, что заменил шрифтна более простой и вписал фигуру в квадрат вместо прямо-угольника (рис. 84, а). Я также изменил наклон фигуры, такчтобы горизонтальные «рукава» прорези (контур которыхбыл в этом варианте максимально сглажен) впадали точнов углы квадрата. Целью всех этих изменений было «пе-реписать логотип набело», сделать его более компактным,логичным и теснее интегрированным.

К моему удивлению, все эти изменения были встреченыбез энтузиазма. По мнению заказчика, в них потерялосьсвоеобразие логотипа, — он стал слишком причесанными слишком похожим на других если не по форме, топо общему стилю графики. С этим, конечно, можнобыло поспорить, — в том случае, если бы моей цельюбыл спор, а не удовлетворение потребностей конкретногозаказчика. Для меня как для коммерческого дизайнера этапривередливость была не помехой, а ценной подсказкой —оставшись при своем мнении, я стал лучше понимать,к чему мне следует стремиться, чтобы завершить проектк взаимному удовлетворению.

После интенсивных обсуждений и ряда попыток достичькомпромисса мы вернулись к варианту, очень мало от-личающемуся от исходного (рис. В4, б). Единственнымсущественным отличием рис. В4, б от рис. 8 3 , а являетсялучшая координация между текстом и графикой: заметьте,как буква «I» выровнена по центру устья верхнего рукава,а один из двух штрихов буквы «X» лежит на продолженииверхней правой стороны прямоугольника.

Шрифт Optima, выбранный для логотипа, интересен преждевсего тем, что, не являясь шрифтом с засечками, в то жевремя не похож и на классический рубленый — штрихив нем имеют разную толщину, а их расширенные концыукрашены едва заметными вогнутостями на торцах. Шрифтс засечками образовал бы две выраженные горизонталипо нижней и верхней кромке букв, раздражающие взглядсвоей близостью и параллельностью («тавтологией») с кра-ями рукава, в который вставлен текст. Классический жерубленый шрифт с одинаковой толщиной всех штрихов неочень хорошо сочетается со сложной формой графическойчасти, содержащей узкие перешейки и расширения. Такимобразом, шрифт Optima выявляет и поддерживает характер

¥*2*2 www.cjuiotix.Gom • 817

формы этого знака; сходная мотивация позднее привеламеня к использованию этого же шрифта в другом лого-типе (рис. 85), графика которого уже вполне сознательноподогнана под использованный шрифт.Отдельного абзаца заслуживает история буквы «Q». Очертания этой буквыв шрифте Optima (рис. ШШ, а) не годились для логотипа: хвостик вылезалслишком далеко вниз за нижнюю линию шрифта, что затрудняло вставкунадписи в паз фигуры. Моя первая попытка сделать высоту «Q» такой же,как у остальных букв (рис. 86, б), была вдохновлена формой этой буквыв шрифте Erika, который использовался на одном из этапов работы надлоготипом (см. рис. 84, а). Этот вариант имел еще и то преимущество, чтонапоминал своей формой очертания вырезов в графической части знака.К сожалению, в небольших размерах отросток буквы становится трудно-различимым, и «Q» превращается в «О», — а ведь «заумное» названиекомпании, не опирающееся ни на какие известные слова, прочесть и безтого непросто. Поэтому в конце концов нам пришлось выбрать не слишкомизящный, но стилистически нейтральный и читающийся в любых размерахвариант рис. 8 8 , в. Впоследствии это же начертание буквы «Q» использова-лось во всех графических заголовках веб-сайта, также набранных шрифтомOptima.

Закончив логотип, я приступил к наброскам пер- f l G p Eвой страницы сайта. Наброски эти, сделанные в векторномграфическом редакторе, я поначалу посылал заказчику в ви-де цельных GIF-файлов. Только после того как дизайнстраницы был окончательно согласован, я смог разрезатьграфические элементы на отдельные оптимизированныеGIF-файлы и сверстать их вместе с текстом в HTML.

Хотя во время всей работы над логотипом его цветовое ре-шение оставалось неизменным — синяя графика (стр. 274)и черный текст на белом фоне, — схему эта совсем необязательно было брать за основу цветового решения стра-ницы. Конечно, если логотип использует узнаваемые, «фир-менные» цвета компании, цвета эти желательно оставитьнеизменными и в дизайне сайта. Большинство логотипов,однако, терпимо относятся к перекрашиванию, что позволя-ет вписывать их в композицию с любыми доминирующимицветами. В данном же случае свежесозданный логотип и непредполагал окончательного цветового решения, так чтосвобода цветового творчества в дизайне сайта не быланичем ограничена.

Моя всегдашняя любовь к зелено-серым тонам проявиласьв первом наброске (рис. S7 на цветной вкладке), однообраз-ном по цвету и почти лишенном графической поддержкидля логотипа, который поэтому становится слишком яр-ко выраженным и, следовательно, неустойчивым центром

Первая страница1<ГТГЬП1ЛГ%\Л

3 1 8 • а р ы V.2,2

композиции. Однако уже в этом варианте я нашел ис-пользованные впоследствии приемы выделения логотипа:небольшая падающая тень, слабый блик, имитирующий ме-таллическую поверхность, а главное — круглое пятно светас размытыми краями в качестве фона, перекликающеесяс округлостью внутренних «рукавов» знака и контрастирую-щее с его прямоугольным внешним контуром.

Этот прием, очевидно, требует достаточно темного фонастраницы, чтобы светлому пятну было на чем выделяться.Соответственно, тексту в логотипе при этом приходитсяпереходить с белого фона на темный, что не тольконаносит ущерб узнаваемости знака в целом, но и влияетна читабельность текста в нем (тем более что, как яуже упоминал, название фирмы семантически никак немотивировано). Пытаясь исправить положение, я протянулот логотипа вправо горизонтальную белую полосу с четкимикраями, которая по высоте выравнена со сплошным белымядром фонового пятна. Теперь название фирмы лежитцеликом на белом и, более того, подчеркнуто снизу краембелой полосы.

Эту полосу, пересекающую всю страницу, логично былосделать местом расположения кнопок навигации, — при-двинув их, как и текст в логотипе, к нижнему краю.Основная же площадь белой полосы должна быть заполненачем-то другим. Нетрудно сообразить, что заполнитель этотдолжен использовать размытую фотографическую текстуру,перекликающуюся с размытым пятном слева и не меша-ющую восприятию текста на кнопках. Сначала, однако,вместо фотографии я взял искусственно размытые крупныебледные буквы названия компании (рис. 88 на цветнойвкладке).В этом варианте я уже отказался от желто-зеленых тонов в пользу нейтраль-ного серого в комбинации с ярким сине-фиолетовым. Благодаря общемудовольно однообразному холодному колориту страница напоминала пейзажзимней ночи с луной логотипа и сполохами северного сияния в навигаци-онной полосе. Таким образом, к этому моменту была уже определена общаяструктура страницы и найден основной мотив контраста между фотографи-ческими текстурами, бликами и тенями с одной стороны и геометрическипростыми четкими линиями — с другой. Интересно также отметить, чтоесли слева резкий контур логотипа окружен размытым пятном, то справа,наоборот, четко очерченный прямоугольник заключает в себе размытыеформы.

Теперь передо мной стояли две задачи: расширение и ожи-вление цветового репертуара и поиск более интерес-ных образцов фотографических текстур для заполнения

¥.2,2 www.quiotix.com • 319навигационной панели. Обе эти задачи были решены вве-дением интенсивно оранжевой фотографии закатного не-ба, заполняющей все пространство навигационной полосыв правой ее части и постепенно растворяющейся в белизнепри движении влево, чтобы избежать близкого контактас почти противоположным по цвету логотипом (рис. В9 нацветной вкладке). Комбинация текстур самой фотографиии наложенного на нее градиента прозрачности уравнове-шивает аналогичные текстуры в левой части, к тому жеконтрастируя своей облачной аморфностью (стр. 119) какс прямоугольностью подложки, так и с правильной окруж-ностью светового пятна под логотипом.Из незаметных на первый взгляд нюансов стоит отметить просвечиваю-щее кое-где между желтыми облаками темно-синее небо, чей цвет пере-кликается с цветом логотипа. В нижней, более узкой панели с адресоми копирайтом использован другой фрагмент этой же фотографии, почти несодержащий синего.

Как видите, выбранная фотография легко вписываетсяв композицию, связываясь с ней множеством прочныхсвязей. Ее достоинства с запасом перевешивают един-ственный недостаток — определенную клишированностьсамой «облачной» темы, очень часто встречающейся в со-временном компьютерном дизайне (достаточно вспомнить«сплэш-страницу» загрузки Windows). Во всяком случае,в моем дизайне нет и следа самой распространенной ошиб-ки — «недослучайности», назойливого повторения аморф-ного узора на большой площади (стр. 259).

Чтобы подчеркнуть переход от белого фона, на которыйпадает тень от логотипа и который поэтому кажется ле-жащим в плоскости страницы, к принципиально иной посвоей роли фотографии, я «приподнял» правую часть на-вигационной панели, подстелив под нее небольшую плавнорасширяющуюся слева направо тень. На этом же этапебыл окончательно выбран шрифт для кнопок навигациии остальных текстов в графических вставках — тот жесамый шрифт Optima, что и в логотипе, но набираемыйтолько строчными буквами. В текстовой части страницыоранжевый цвет неба естественным образом выделил ссыл-ки, маркеры элементов списка (маленькие прямоугольники)и заголовки.

В целом первая страница была уже почти закончена, хотянекоторые важные изменения были все же внесены в нее наэтапе работы над дизайном внутренних страниц.

3 2 0 • ¥.2,3

С Т р Э Н И Ц Ы в Сайт Quiotix невелик, большинство егостраниц строятся по простейшей из возможных схем — ло-готип, навигационные ссылки, заголовок и основной текст.Поэтому следующая моя задача заключалась в создании«болванки» заголовка страницы, скоординированной с ужеготовой навигационной панелью и блоком логотипа. Приболее внимательном изучении содержимого будущего сайтая понял, что идеальным решением было бы иметь на каждойстранице по два заголовка, один из которых отмечал быпринадлежность страницы к одному из шести основных раз-делов (соответствующих шести кнопкам на навигационнойпанели), а второй относился бы непосредственно к текстуданной страницы.

Таким образом, мы имеем три элемента — два заголовкаи строку навигационных ссылок, — которые нужно как-торасположить на «облачной» панели или в ее ближайшихокрестностях. Очевидно, что если располагать заголовкидруг под другом «в столбик», для всех трех элементов напанели уже не хватит места. После нескольких проб ярешил вынести кнопки навигации вниз, убрав их с панелии изменив их цвет с черного на золотой (рис. 911 на цветнойвкладке). Парадоксальным образом из элемента, отчетливопротивопоставленного облачной панели, кнопки при этомпревращаются в ее продолжение.

Вспомним наш анализ отношений контраста на стр. 161,Там мы пришли к выводу, что контрастная связь между эле-ментами тем сильнее, чем больше у них противопоставлен-ных друг другу (именно противопоставленных, а не простонесовпадающих) аспектов. Поэтому в данном случае выноскнопок с навигационной панели не разрушает композицию,а, наоборот, делает ее более устойчивой и уравновешенной:к контрасту текста кнопок и текста в логотипе добавляютсяаспекты цвета (черный — золотой) и расположения (внутрипанели — за ее пределами), а отношения между кнопкамии самой панелью выводятся из аспекта цвета в более свой-ственный этой паре элементов (из-за их резко контрастныхразмеров) аспект расположения.

Возьмем теперь воображаемый циркуль, между ножек кото-рого отложена только что найденная нами мера контрастатекстовых элементов. Чтобы понять, как нужно оформлятьдва оставшихся элемента — заголовки раздела и текущейстраницы, — достаточно отложить полученное «контраст-ное расстояние» от уже имеющегося элемента — кнопок

Внутренние страницы.

VJL4 w v v w . q u i o t i x . c o m • 3 2 1

навигации. Сделав это один раз, мы получаем аналог тексталоготипа — только заглавные буквы, мелкий кегль, черныйцвет (единственное отличие — набор вразрядку). Вторая«засечка» возвращает нас в исходную точку — к строчнымбуквам золотого цвета; правда, чтобы избежать тавтоло-гии, от найденного набора параметров придется немногоотступить, увеличив кегль шрифта (рис. 91 на цветнойвкладке).Согласно принципу асинхронности информационного и визуального эм-фазиса в заголовках (стр. 202) мелкий шрифт должен применяться длязаголовка текущей страницы, чья информационная актуальность вышеа более крупный — для «колонтитула» раздела, ибо последний, во-первыхповторяет текст одной из кнопок навигации, а во-вторых, сам повторяетсяна всех принадлежащих к этому разделу страницах и, следовательно, несетсущественно меньше информации. В данном случае этот парадоксальныйпринцип («подчеркивай неважное») подкрепляется еще и тем практиче-ским соображением, что длина заголовка страницы намного больше длиньзаголовка раздела и потому требует мелкого кегля.

Теперь нам остается решить последнюю задачу: как разгра-ничить два заголовка, занимающих одну и ту же прямо-угольную панель с фотографической подложкой? Обойтисьбез разграничения не получится, так как из-за контрастногоформатирования и близкого расположения этих заголовкоЕглаз все равно будет пытаться нащупать границу между ни-ми. Из двух компонентов, составляющих панель, — белойподложки и полупрозрачной фотографии — разумно вторукоставить общей (объединение), а первую сохранить в фонетолько одного из заголовков (противопоставление).

Сужение белой полосы влечет за собой уменьшение размерасвязанного с ней логотипа, чему также можно найти оправ-дание — на внутренних страницах сайта этому элемент)лучше слегка уйти в тень, высвободив пространство длянесущих информацию элементов (рис. 91). Такая конструк-ция панели хороша еще и тем, что разносит два сходных псоформлению текстовых элемента — название фирмы в лого-типе и заглавие текущей страницы — по разным «этажам»не позволяя им конфликтовать.

Мне осталось объяснить некоторые незначительные от-личия рассмотренного выше дизайна от того, который вкнайдете по адресу www«qyiotiK«com, и рассказать о неко-торых особенностях реализации сайта.

Заметных изменений в дизайне было два. По просьбе клиен-та, которому показалось, что верхняя панель на внутреннюстраницах перетяжелена, я отнес строку кнопок навигацик

4:ZA

в низ страницы, поместив ее над нижней «облачной» пане-лью (кстати, копирайт и адрес для связи еще на предыдущемэтапе были с этой панели убраны и помещены под нейв виде HTML-текста). Хотя отдельно взятая верхняя панельпри этом проиграла, отношения в треугольнике «логотип —пара заголовков — кнопки навигации» растянулись темсамым на всю площадь страницы, сделав ее конструкциюболее устойчивой.

Это, однако, повлекло за собой и изменение отношенийв паре заголовков раздела и страницы на верхней панели.Центровка каждого из этих заголовков по вертикали внутриотведенной им полосы начала казаться слишком прямоли-нейным, неустойчивым именно благодаря своей симметриирешением. Чтобы страница в этой позе не заваливаласьнабок, мне пришлось отвести чуть в сторону одну из ееподпорок — а именно, уменьшить размер заголовка разделаи прибить его к правому верхнему углу отведенной для негополосы (рис. §2 на цветной вкладке).

Не обошлось и без конфликта между соображениями еди-нообразия дизайна, требующими писать заголовки разделовтолько строчными буквами, и устоявшимся обозначени-ем одного из продуктов фирмы — Quiotix Embedded WebServer, сокращенно QEWS. В споре между заказчиком,отстаивавшим привычное написание заглавными в колон-титуле соответствующего раздела сервера, и дизайнером,ратовавшим за единообразие строчных букв, был достигнуткомпромисс: заглавные «Q» и «Е» были уменьшены доразмера строчных, а штрихи их пропорционально утолще-ны. Полученное в результате гибридное «QEWS» интересносравнить с набранным натуральными строчными буквамизаголовком «news» (рис. 93).Как можно видеть на рис. 02 на цветной вкладке, внутритекстовые заго-ловки оформлены изменением начертания и цвета (желтый полужирныйкурсив), — но без изменения кегля, так как любой крупный шрифт вступилбы в немедленный конфликт с мелким шрифтом графического заголовкастраницы. Узость колонки с текстом не позволяет использовать какие быто ни было приемы верстки с горизонтальными втяжками, поэтому длясписков с маркерами мне пришлось отказаться от использования тега UL,ограничившись добавлением в начало каждого абзаца списка маленькогожелтого графического прямоугольника. В конце 1997 года, когда создавалсясайт, полагаться на использование CSS было еще рискованно; теперь длятой же цели лучше было бы воспользоваться обычными тегами UL и LI,у которых с помощью CSS подавлены нежелательные отступы и маркерыпо умолчанию заменены на графические вставки.

Этот раздел — не каталог URL-адресов, а альбом

репродукций всех упоминавшихся ранее страниц, достойных

внимания читателя и как примеры образцового дизайна,

и как иллюстрации к обсуждавшимся в книге темам.

Изображение каждой страницы снабжено перечислениемсамых заметных особенностей ее дизайна со ссылками (но-мера страниц в скобках) на те разделы книги, где излагаетсясоответствующий теоретический материал. Обратные ссыл-ки вида «пример такой-то» ведут из основного текста книгина номер в Галерее.Автор, к сожалению, не может гарантировать, что по приведенным ни-же адресам вы найдете те самые страницы, чьи копии здесь приведены.За время, прошедшее с момента написания книги, дизайн этих страницмог измениться, они могли переехать по другому адресу или вообще ис-чезнуть.

www.avsi.com/avalanche/co

г а л е р е я • 3 2 3

Галерея

Дизайн на основе прямоугольни-ков, прямоугольники с закруг-лениями (93); тонкие рамкибез изменения фонового цветаи толстые рамки с заливкой(S8); линии-разделители (93);неповторяющееся фоновое изо-бражение (23S)

www.avsi.com/avalanche/company/index.html 1

Смэш-страница (192) дизай-нерского сайта (182) пригла-шает пользователя привестиокно броузера к определеннымразмерам (198), чтобы он могоценить необычную конструк-цию следующих страниц (см.ниже)

V.3

Первая страница того же сай-та с большим фотографиче-ским визуалом (288), обрезан-ным краем окна и тем самымподсказывающим зрителю глав-ную особенность сайта — рас-положение страницы «лежа»с горизонтальной прокруткойвместо привычной вертикаль-ной (197); на этой и сле-дующих страницах черно-белыефотографии противопоставле-ны ярким, насыщенным цветамфона

V«3 г а л е р е я • 3 2 5

www.finemagazine.com/fine1/music/torih.htm 4

Разноуровневые заголовки(202), скрепленные системойпрямых линий в роли «вспомо-гательных построений» (94);подчеркивание вплотную к бук-вам как прием оформления тек-ста (94); широкий капитель-ный (126) шрифт с малень-кими засечками в сочетаниис каллиграфическим курсивом(136); страница в открытомс помощью JavaScript окне фик-сированного размера без эле-ментов интерфейса броузера(193); фотографический фонс размывкой (300), выполняю-щий одновременно роль визуаластраницы (288)

«Декадентская» текстура,имитирующая осыпание и де-градацию материала (122);парадоксальное стремление за-труднить чтение, чтобы сде-лать его более интересным,сходное с применением отри-цательного эмфазиса в заго-ловках (202); сложная ком-бинация растровых искажений(296)

326 • примеры6. www.metadesign.comКонтраст тесноты и дажечастичного наложения в за-головке с разреженной ком-позицией страницы и обили-ем пустот (90); использован«новый гуманистический» ру-бленый шрифт Meta, разра-ботанный основателем этойдизайн-студии Эриком Шпи-керманном (133); размывка поГауссу (293) помогает переве-сти текст заголовка на второйплан восприятия

V.3

#• www.metadesign.com/metawho/index.htmГоризонтальная линия в ролиразделителя (93); локальныессылки, ведущие от разделовдлинного документа в его нача-ло (1S5); «выдернутая» цита-та (pull-out quote), сообщающаяосновную мысль раздела (228)

г а л е р е я • 3 2 7

aboutus.miningco.com 8Композиция с выраженным про-тивостоянием центра и пери-ферии стилизована под «диа-грамму»: наклонные (94) ли-нии «выносок», сознавая иро-нию приема (93), тактичноне доходят до назначенных имфигур в «толпе», составленнойиз купленных в специализиро-ванном агентстве фотографий(76)

Рисованная графика (289)в качестве визу ала ('Л' ),интегрированная в заголовоквнутренней страницы сайта(202) размывкой краев «на фо-тографический манер» (299)

Если логотип фирмы Splash(англ. «всплеск») страдаетизлишней иллюстративностьюв ущерб простоте и симво-лизму (267), то в визуалепервой страницы (288) таже самая идея, реализованнаяс фотографическим реализмом(119), парадоксальным обра-зом превращается во впечатля-ющий символ, вокруг котороговыстраиваются все остальныеэлементы

V.3

Неповторяющееся фоновое изо-бражение визуализирует «сило-вые линии» восприятия инфор-мации переднего плана (284);имитация типографского то-чечного растра позволяет фо-ну сохранить фотографическуюразмытость в GIF-файле сдвухцветной палитрой (264);в графических кнопках панелинавигации использован «гума-нистический» рубленый шрифт(133)

1 2 . www.wps.ruПрямоугольники с толстымконтуром (97); последователь-ное скругление всех углов (99);«старый» доконструктивист-ский рубленый шрифт Гермес(130) в кнопках навигации;комбинация растровых эффек-тов (29S) для имитации «под-порченной» черно-белой фото-графии

V.3 г а л е р е я • 3 2 9

www.bdaweb.com 1 3Серый и белый цвета тек-ста, контрастирующие с ярко-оранжевым в логотипе и слу-жебных элементах (116); на-ложение и цветовой кон-траст букв в логотипе (143);карта движений восприятия( ); принцип «отрицатель-ного эмфазиса» для заголовкастраницы (202); интеграцияфотографии размывкой краев( ); нюансы ( ): «I» в«international» выровнено по вер-тикальному краю «а» логоти-па, игнорируя «хвостик»; едвазаметная тень, отходящая оторанжевой плашки логотипа,поддерживает диагоналъноетъкомпозиции

w w w . c a p s t o n e s t u d i o . c o m 1 4

Простая по композиции сплэш-страница наглядно демонстри-рует принципы интеграции фо-тографики: монохромная, но стоновым компонентом середи-на противопоставлена черно-белой периферии ('2 ); темапрямых линий как вспомога-тельных построений ( )

V.3

Габариты стандартного банне-ра как основа организации про-странства страницы (21 );«вживление» баннера в те-ло страницы в попытке по-давить реакцию отторжениячужеродного материала (21 );логотип над цветовой грани-цей в фоновом изображении( ); темная полоса вдольлевого края уравновешиваетсяасимметричной, утяжеленнойсправа линейкой-разделителемв текстовом поле (158); «си-нее» равновесие выстроено во-круг вертикальной оси, совпа-дающей с фоновой границейсинего и белого, а «оранжевое»имеет своим центром масс чер-ный полумесяц в логотипе, при-чем яркий оранжевый флаг сле-ва от этого полумесяца уравно-вешивает разрозненные пятнассылок и других элементов то-го же цвета на всей странице( ); на страницах со спис-ками книг этого же сайта —строки таблицы с чередующим-ся фоновым цветом (22?)

• . ,.

14Ш 99

V.3 г а л е р е и • 3 3 1

w w w . i d e o . c o m / n e t 3 / i d e o . h t m 1 6

Регулярная решетка контрас-тирует с псевдослучайнойразбросанностью содержимогоклеток (87); почти монохром-ная гамма близких по то-ну синих во всех элементахдизайна, кроме нарочито яр-ких разноцветных фотографий( 1); «лежачее» расположе-ние страницы (см. также при-мер Ъ) подчеркнуто горизон-тальной размывкой заголовка«IDE0» вверху (300); навига-ционная панель слева построе-на на основе общего для всехкнопок размытого фотографи-ческого фона (210)

1 7

Сбалансированная цветоваягамма, построенная на кон-трасте мягко-оливкового и си-него (115); комбинация гео-метрической (горизонтальныеполоски) и фотографическойтекстур (118); композицияпрошита пунктирными соеди-нительными линиями, стилизо-ванными под чертеж или ра-диосхему ( ); фото земно-го шара из космоса (фонпод спортсменом) вводит ду-гу большого радиуса ( ), сво-ей наклонностью ( ) под-держивающей динамику визуа-ла (168); имитация фотогра-фической «глубины резкости»(299) придает выпуклость фи-гуре атлета; фотографическийвизуал интегрирован в компо-зицию размывкой краев (289)

3 3 2 • п р и м е р ы

• О. www.tlg.com

«Декадентская» материальнаятекстура фона имитируетпятна и потертости, «осыпа-ние» графического визуала слева(121); почти полное отсут-ствие выравниваний элементовпо вертикали (87); при всемпри том композиция страницыполностью уравновешена по лю-бому из своих аспектов (155);кегль шрифта в навигацион-ных кнопках внизу — на пре-деле видимости (138); увели-чение трекинга (141) и ис-пользование стиля «все заглав-ные» в надписях мелким кеглем(140); «гуманистический» ру-бленый шрифт (1 и )

V.3

и:

1 9 . www.verso.comСветлый, теплый, мягкий и не-насыщенный цвет текста натемном, холодном и насыщен-ном фоне (116); яркий фото-графический визуал (288) не-ясного содержания, состоящийпо большей части из труд-ноопределимых, но впечатляю-ще фотографических искаже-ний (299); «гуманистический»рубленый шрифт (133) в на-звании студии

V.3 галерея • зззwww.vivid.com 20Скульптурная трехмерность( ) и прием «доказатель-ства от противного» (298)в логотипе; координация ло-готипа в третьем измеренииотносительно плоскости стра-ницы (298); цветной негативи «перепроявленность» в ком-позиции из руки и глаза какпопытка выстроить иерархиювосприятия ( )

(в)

(Г»

(в)

Индекс

Символы.

и кавычки в английском языке 232правила расстановки пробелов 228

и кавычки в английском языке 232правила расстановки пробелов 228

..., правила расстановки пробелов 228

во французском языке 230правила расстановки пробелов 228

во французском языке 230правила расстановки пробелов 228

9в адресе ссылки в HTML 30в адресе ссылки в XML 53во французском языке 230правила расстановки пробелов 228

j

во французском языке 230правила расстановки пробелов 228

«» 232во французском языке 230, 232вокруг шрифтового выделения 230правила расстановки пробелов 229

", обозначение дюйма 2321 1", вокруг значений атрибутов 28, 51' ' , английские одинарные кавычки 232" ", английские двойные кавычки 232„", немецкие кавычки 232О

вокруг шрифтового выделения 230правила расстановки пробелов 229

[J, в alt-текстах 36—, длинное тире

в кодировках кириллицы 231правила расстановки пробелов 229

—, короткое тире 231#

в адресе ссылки в HTML 30, 187в адресе ссылки в XML 53в числовых подстановках 29

&, в подстановках 29§, знак параграфа 229, 232

©, знак авторского права 230, 232№, знак номера 229, 233

А (латиница).А, тег 30

адрес назначения см. адрес назначениягиперссылки

атрибут name 30атрибут t a r g e t 190

aboutus.miningco.com 93, 94, 327Acrobat Reader, программа 58ActiveX, технология 70Add Noise, растровый фильтр 302Adobe, фирма

Acrobat Reader, программа 58Garamond, гарнитура 137Illustrator, графический редактор 56Jenson, гарнитура 128Multiple Masters, технология 221PDF, формат 58Photoshop, графический редактор 101, 122, 249,

293, 295, 299PostScript, формат 12, 56, 60

Aladdin GhostScript, программа 12Alien Skin Black Box, набор фильтров 295alt-текст 35, 228, 256

баннеров 276, 278в виде всплывающей подсказки 37, 314заголовков 201кнопок навигационной панели 36, 314маркеров элементов списка 36при указании габаритов изображений 236пустой 36разделительных линий 36распорок 36, 237указание объема файлов 36

Alta Vista, поисковая система 39anti-aliacing см. анти-алиасингApple, фирма 16

логотип 267AREA, тег 37Aria!, гарнитура 132, 136, 219, 311ASCII, кодировка 15ASP, язык 72AT&T, логотип фирмы 270, 275Aurora, редактор 12

и • индексв.

banners см. баннерыBIG, тег 216Bitstream, фирма 222Blending, растровый фильтр 296Bodoni, гарнитура 81, 130, 136, 137BODY, тег 49, 223

атрибут background 259атрибуты le f tmarg in и topmargin 194

bold см. начертания шрифта, жирноеBookman, гарнитура 131books.ru см. www.books.ruBorjomi, гарнитура 138BR," тег 226, 238branding см. впечатывание образа фирмыbrowser-safe palette см. безопасная палитраbrowsers см. броузерыbullets см. маркеры элементов списка

С.CERN см. Европейский институт физики частицCGI, стандарт 71, 276class, атрибут 41«click here», влияние на CTR баннера 169, 281CMYK, система представления цвета 63, 105, 274CODE, тег 217color blenders см. смесители цветовcondensed fonts см. шрифты, сжатыеConference Tracker 287control characters см. управляющие символыCore Fonts for the Web см. шрифты, Microsoft для

веб-страницCorelDRAW, графический редактор 104CorelXARA, графический редактор 12, 104, 249Courier, гарнитура 137, 219

курсив 125СР1251, кодировка 16, 231СР866, кодировка 16, 231CSS 23, 40, 53

CSS1 41, 42, 240CSS2 42, 65, 140, 218, 221, 240встраивание шрифтов в документ 221выравнивание кегля 140, 218использование с XML 41, 53как альтернатива фреймам 241кегль шрифта 218отмена подчеркивания в гиперссылках 225отступ красной строки 226оформление заголовков 201оформление элементов списка 322позиционирование 43, 59, 66, 235, 240свойства margin-lef t и margin-top 195свойство font-family 219свойство font-size-adjust 218свойство font-size 218

синтезирование шрифтов 221установка величины полей 195фоновые изображения 241

CTR, параметр баннера 277влияние анимации 280влияние вопросительного предложения 282влияние надписи «click here» 169, 281влияние объема графического файла 286влияние предложения бесплатных услуг 283при расположении баннера у полосы

прокрутки 279снижение со временем 286

Cutout, растровый фильтр 301

D.DAIMAS'97, конференция

логотип 143, 266обложка сборника тезисов 81, 143, 145

demi-bold см. полужирное начертаниеDiffuse, растровый фильтр 302dithering см. диффузияDmitry's Design Lab 2, 73dmitry@kirsanov.com 75IDOCTYPE, тег 29, 49DOM, спецификация 66dpi 176drop caps см. буквицыDSSSL, язык 53DTD 29, 48, 151dvips, программа 12

E.ЕСМА, ассоциация 67ECMAScript, язык 66EM, тег 34, 45em dash см. длинное тиреemTeX, программа 12en dash см. короткое тиреencodings см. кодировкиEncynova, логотип фирмы 317entities см. подстановкиErika, гарнитура 317expandable outlines см. раскрываемые оглавлениexpanded fonts см. шрифты, растянутыеExpression, графический редактор 101, 104extra bold см. начертания шрифта, сверхжирноеEye Candy, программа 290

F.ficus-www.cs.ucla.edu 12Find Edges, растровый фильтр 301fixed width fonts см. моноширинные шрифтыfloating tips см. всплывающие подсказкиFONT, тег 151

атрибут color 224

ICC • 3 3 9

атрибут face 217, 218атрибут size 216, 217

font см. гарнитураfont embedding см. встраивание шрифтов

в документfont face см. начертания шрифтаfont family см. гарнитураfont size см. кегль шрифтаfont synthesis см. синтезирование шрифтов в CSSFORM, тег 31forms см. формы (бланки)Fractal Design, логотип фирмы 112FRAME, тег 195frameset document см. корневой документ набора

фреймовFreehand, графический редактор 104Freeset см. Frutiger, гарнитураFresco, растровый фильтр 301Fresh Eye, программа 12Frutiger, гарнитура 133, 137, 311Futura, гарнитура 131, 136

G.Garamond, гарнитура 128, 137

курсив 128, 306, 311generated content см. генерируемое содержимоеGeneva, гарнитура 219GIF, формат

анимированные файлы 169, 255, 256анти-алиасинг 249в баннерной рекламе 280диффузия 245, 250, 301количество цветов 61оптимизация 255, 302палитра 62, 245, 253прозрачность 249

GML, язык 19GOTO, оператор 204GSView, программа 12

Н.Н*, теги заголовков 200HEAD, тег 49headings см. заголовкиHelvetica, гарнитура 132, 135, 136, 219

курсив 125high color, режим монитора 61, 102, 118, 249HLS см. HSVhome pages см. личные страницыHomeSite, редактор 46HR, тег 36, 93, 203

атрибуты noshade, s ize и width 204HSB см. HSVHSV, система представления цвета 63, 103HTML, тег 49

HTML, язык 22HTML+ 23валидаторы 48версия 1.2 22версия 2.0 22, 32, 151, 197версия 3 23версия 3.2 26, 151версия 4.0 18, 27, 32, 49, 151, 195, 227, 231, 232динамический 65, 186, 214идеология 150, 152использование с XML 54история разработки 19минимальный документ 29модульный 44, 51, 54недостатки 27переход на XML 28, 47, 48, 51, 152разлиновка ячеек таблицы 95синтаксис 27стандартная кодировка 18, 32установка кегля шрифта 199, 216

HTTP-заголовок 33hue, в системе HSV 103hyphen см. дефис

I.I, тег 34, 49ICQ 284id, атрибут 41IIS, сервер 72image maps см. изображения-картыIMG, тег

атрибут a l i g n 241атрибут a l t см. alt-текстатрибут s rc 31, 276атрибуты h e i g h t и width 235, 237, 256в XML 51

Impact, гарнитура 220Initial Caps см. заглавные буквы, первые значимых

словinline images см. графические вставкиINPUT, тег 31Intellihance, растровый фильтр 299«Internet», логотип журнала 137, 147, 272Internet. Explorer, броузер

ActiveX, технология 70alt-текст как всплывающая подсказка 37, 314DOM, спецификация 66JScript, язык 65абсолютное позиционирование 242версия 2.0 25версия 3.0 26, 65, 234версия 4.0 37, 65, 71, 215, 222, 226, 231, 242,

314встраивание шрифтов 222динамическая навигация 215

340 • индексдинамический HTML 65несовместимость с броузером Netscape 27печать страниц 224поддержка CSS 41, 201, 226поля страницы 194таблицы 234тег HR 203тире 231трансляция XML в HTML 55шрифты Microsoft для веб-страниц 220

IRC 284ISO, организация 180ISO 10646, кодировка 18ISO 8859, серия кодировок 17ISO 8859-1 см. Latin-1, кодировкаIspell, программа 12italic см. курсивITC Garamond, гарнитура 137

J.Java, язык

апплеты 25, 69виртуальная машина 69кофейная чашка 264

JavaScript, язык 25, 43, 64взаимодействие с полями форм 64перекатывание (rollover) 213управление окном броузера 64, 190, 198, 325управление фреймами 64

Jenson, гарнитура 128JPEG, формат 120, 252, 295JScript, язык 65

К.Kai's Power Tools, набор фильтров 295kerning см. кернинг

L.IAT̂ X, система верстки 12Latin-1, кодировка 17, 33, 230

мнемонические подстановки 29LAYER, тег 242LI, тег 49, 322light см. начертания шрифта, светлоеLINK, тег 222Linux, операционная система 26Lucent Technologies, логотип фирмы 270, 272Lynx, броузер 36, 180

М.Macromedia, фирма

Director, программа 58Freehand, графический редактор 104Shockwave Flash, формат 58, 66, 70

MAP, тег 37

MathML, язык 48Mercedes Benz, логотип фирмы 269МЕТА, тег 33, 192

атрибут c o n t e n t 39атрибут name 39

MetaCreations, фирмаExpression, графический редактор 101, 104Painter, графический редактор 101, 104

Microsoft, фирма 23, 25, 30, 183, 287ActiveX, технология 70ASP, язык 72IIS, сервер 72Internet Explorer см. Internet Explorer, броузерлоготип 269сайт см. www.microsoft.comшрифты для веб-страниц 220

modern typefaces см. новая антикваMonotype Garamond, гарнитура 137

курсив 128, 306, 311Mosaic, броузер 22motion blur см. размывки, со смазываниемMotion Blur, растровый фильтр 168, 300MS DOS (операционная система), кодировка

кириллицы 16MSIE см. Internet Explorer, броузерMultiple Masters, технология 221

N.&nbsp;, неразрываемый пробел 226, 229, 238NCSA см. Национальный центр

суперкомпьютерных приложений СШАNetscape, фирма 23, 24, 287Netscape Communicator, броузер 24

alt-текст как всплывающая подсказка 37, 314абсолютное позиционирование 242встраивание шрифтов 222динамическая навигация 215динамический HTML 65открытость исходных текстов 26поддержка CSS 226поля страницы 195тире 231

Netscape Navigator, броузер 24JavaScript, язык 25, 43, 64, 190, 198, 325версия 2.0 24, 25, 64, 234, 259версия 3.0 65версия 4.0 см. Netscape Communicator, броузернесовместимость с броузером Internet Explorer

27печать страниц 224поддержка CSS 41таблицы 234тег HR 203

New Century Schoolbook, гарнитура 131NOBR, тег 235

и н д е к с • 3 4 1

о.OBJECT, тег 28, 31oblique см. начертания шрифта, перекошенноеOfficina Sans, гарнитура 1330L, тег 49Old Style см. гуманистическая антикваopen source software

Aladdin GhostScript, программа 12dvips, программа 12Fresh Eye, программа 12GSView, программа 12Ispell, программа 12Linux, операционная система 26Netscape Communicator, броузер 26Perl, язык 71Tj*X, система верстки 12

Optima, гарнитура 316, 319Opus, гарнитура 138OS/2 (операционная система), кодировка

кириллицы 16

Р.Р, тег 45, 226Painter, графический редактор 101, 104PDF, формат 58, 227Perl, язык 71Photoshop, графический редактор 101, 249, 293,

295меню Filters 299подключаемые модули 122

pixels см. пикселыplug-in modules см. подключаемые модулиPNG, формат 250, 254PostScript, формат 12, 56

конвертация в PDF 58совместимость с векторными редакторами 60

pull-out quotes см. «выдернутые» цитаты

Q.Quiotix, фирма

логотип 174, 266, 315сайт см. www.quiotix.com

R.regular expressions см. регулярные выраженияresolution см. разрешениеRGB, система представления цвета 62, 104, 105rollover см. перекатываниеroman см. начертания шрифта, прямое

S.SAMP, тег 217sans serifs см. рубленые шрифтыsaturation, в системе HSV 104SCRIPT, тег 64

scrollbars см. полосы прокруткиsectio aurea см. золотое сечениеserifs см. с засечками шрифтыSGML, язык 19

ортогональная разметка 44реализация идеологии в модульном HTML 43

Shockwave Flash, формат 58, 70сравнение с динамическим HTML 66

sites см. сайтыslanted см. начертания шрифта, перекошенноеSMALL, тег 216small caps см. начертания шрифта, малые

прописныеsplash page см. сплэш-страницаSplash, фирма

визуал 288, 327логотип 327

SSI, технология 32, 71, 285STRONG, тег 45

Т.TABLE, тег 25, 32

атрибут border 226атрибут width 239атрибуты ce l l spac ing и ce l lpadding 237атрибуты frame и r u l e s 227

tags см. тегиTD, тег

атрибуты colspan и rowspan 238атрибуты h e i g h t и width 32, 238

Т^Х, система верстки 12, 43логотип 240

thumbnails см. «ноготки»TIFF, формат 63, 252Times Roman, гарнитура 81, 129, 132, 134, 136, 219

курсив 125, 306TITLE, тег 29, 199title см. заглавие™ 233Toyota, фирма 60Trace Contour, растровый фильтр 301tracking см. трекингtransitional typefaces см. переходная антикваtrue color, режим монитора 61, 102, 118TrueDoc, формат 222TrueType, формат 220typeface см. шрифты

U.UL, тег 322Unicode, кодировка 17, 18

в числовых подстановках 29, 33спецсимволы 29, 230

UNIX (операционная система), кодировкакириллицы 16

342 • §€С

URL-адресбаннера 276в гиперссылке см. адрес назначения

гиперссылкиизменения 188сайта 190список посещенных адресов 190страницы документа со фреймами 32, 190

Usenet (телеконференции), кодировка кириллицы16

UTF-8, кодировка 19

V.valid documents см. валидные XML-документыvalue, в системе HSV 104Verdana, гарнитура 220VGA, графический адаптер 194visuals см. визуалыVML, язык 59VRML, язык 59

W.W3 Consortium, W3C см. Консорциум W3web rings см. «кольца» сайтовWebTV 196

отсутствие горизонтальной прокрутки 197формат экрана 196

weight см. насыщенность шрифтаwell-formed documents см. правильно

структурированные XML-документыwidth см. шрифты, ширинаWind, растровый фильтр 300Windows, операционная система

заставка во время загрузки 319кодировка кириллицы 16системные шрифты 136, 248экранный анти-алиасинг 249

Word, текстовый процессорименованные стили 44неортогональность разметки 21

www.allaire.com 46www.alphaworks.ibm.com 137www.att.com 270www.avsi.com 323

полностраничный фон 236разделительные линии 93

www.bdaweb.com 329заголовки 202логотип 143силовые линии восприятия 167цветовая схема 116

www.books.ru 330асимметричная линейка 94выделение строк в таблице 227интегрирование баннера 205, 279

левая фоновая полоса 158размещение логотипа 250

www.capstonestudio.com 297, 329www.chess.ibm.com 331

визуал 289дуга 98, 168изображение движущегося объекта 168полосатая текстура 118соединительные линии 94цвета 115

www.cnet.com 183www.coolarchive.com 153www.cooltype.com 293www.cs.wisc.edu/~ghost/ 12www.ctan.org 12www.dsiegel.com 91, 234www.elliottdickens.com 324

панорамные страницы 197указание размеров окна 198

www.finemagazine.com 325вспомогательные линии 202окна без элементов интерфейса 190, 199подчеркивание по базовой линии шрифта 94фон 300

www.highfive.com 163www.ibm.com

выпадающие меню 214навигационная панель 207

www.ideo.com 331горизонтальная размывка заголовка 300фон навигационной панели 210цвета 111, 154

www.internet.com 183www.iso.ch 180www.kirsanov.com 304

/fresheye/ 12/web.design/ 12внутренние страницы 312логотип 304навигационная система 312первая страница 309, 310сплэш-страница 307цвета 307, 309

www.latex-project.org 12www.lynx.browser.org 180www.macromedia.com 99www.metadesign.com 326

«выдернутые» цитаты 228гуманистический рубленый шрифт 133наложение объектов 90пустое пространство 90ссылки на оглавление страницы 195

www.microsoft.com 183, 327/license/opendrive/ 288внешние ссылки 186

и н д е к с • 3 4 3

www.mozilla.org 26www.naggum.no 152www.ntext.net 12www.oi.com 46www.olympic.org 58www.prophetcomm.com 122, 296, 325www.quiotix.com 314

внутренние страницы 320внутритекстовые заголовки 322заголовки 320логотип 315маркеры элементов списка 319, 322навигационная панель 318первая страница 317цвета 318

www.radicaleye.com 12www.revo.com 210www.splashtech.com 288, 327www.supercede.com 264, 328www.tlg.com 121, 332www.tug.org 12www.verso.com 332

гуманистический рубленый шрифт 133цвета 116

www.vivid.com 298, 333www.w3.org 180www.webreference.com

/dlab/ 2, 73навигационная панель 214«резиновый» дизайн 198

www.webtv.net 196www.wpdfd.com 119www.wps.ru 328

гротесковый рубленый шрифт 133прямоугольники с закругленными углами 99,

154прямоугольники с толстым контуром 97

www.xara.com 12www.yahoo.com 207, 211www.yandex.ru 94

X.XLL, язык 52XML, язык 47

адрес назначения гиперссылки 53валидные документы 50интернационализация 50использование CSS 41, 53использование с HTML 54переход с HTML 47, 48, 51правильно структурированные документы 50

XSL, язык 21, 53автоматическая нумерация заголовков 201

z.Zapf Chancery, гарнитура 128, 134

А (кириллица).абзацный отступ 145, 238абзацы 144, 145, 226, 238абсолютное позиционирование в CSS 43, 59, 66,

235, 241абстрактность

в искусстве 92в логотипах 265, 267, 270, 315мышления 21символики 268

абстрактный экспрессионизм 271Авангард, гарнитура 136автоматические сборщики информации 34, 38,

216, 223, 228«вес» заголовков 20заглавие страницы 200недоступность фреймов 32, 189

автоматическое перенаправление 40, 188, 192авторского права символ 230, 232аддитивная система представления цвета 63адрес назначения гиперссылки 30

в XML 53передача параметров вызова программы 30с # 187

Академическая, гарнитура 131академический стиль 29, 90, 151, 179, 181

иерархия заголовков 200линейки-разделители 203объем файлов 187поля страницы 194размеры окна 197указание ширины и высоты изображений 236

активность объектов в композиции 79, 81, 106,206, 297, 300, 329, 333

альтернативная кодировка 16аморфность 86, 100, 259, 264

в логотипах 270влияние на восприятие размера 79и плоскоцветные фигуры 164рукотворная 271, 289

амперсанд, в подстановках 29английский язык

выравнивание строк в абзаце 144заглавные первые буквы значимых слов 140кавычки 232пробел в конце предложения 230разрядка 142сокращения 229тире 229, 231численные интервалы 231

3 4 4 •

анимация 169, 241в баннерах 280в заголовках 202, 289, 291в иконках 153, 169в логотипах 289, 291в масштабированных GIF-файлах 256оптимизация GIF-файлов 255

аннотация сайта 39анти-алиасинг 118, 245, 248, 254, 295

в малоразмерной графике 251и диффузия 255и прозрачность 249экранный 249

античностьпропорции 82симметрия 98, 155шрифты 123, 128, 140

апплеты 25, 69аппроксимация плоским цветом 301Ариал, гарнитура 132, 136, 219, 311архиваторы 255Архимед 158асимметрия 2

в заголовках 140в композиции веб-страницы 157, 159, 313в логотипах 268, 315в современном дизайне 267в шрифтах гуманистической антиквы 128динамичность 166, 170левая фоновая полоса 158при размещении объектов 174треугольников 97

атрибуты тегов 28

Б.базовая линия шрифта 80, 94, 325базовый кегль текста в броузере 194, 216баланс 155баннеры 204, 275

alt-текст 276, 278CTR 277автоматическая смена 276англоязычные 284—286анимированные 280, 300динамика 280минибаннеры 262, 277, 287муляжи элементов интерфейса 284надпись «click here» 169, 281объем графического файла 286предложение бесплатных услуг 283проклик 277размещение 188, 195, 205, 279, 330русскоязычные 284, 286серии 286«скрытый смысл» 299

службы обмена 276составные 285«старение» 286сюжет 280текст 282форматы 277формулировка в виде вопросов 282

барельефная трехмерность 293, 301, 302Баскервилль, гарнитура 129безопасная палитра 177, 245, 246, 307

значения в системе RGB 247Безье, Пьер 99Безье кривые см. кривые Безьебелый цвет 108, НО, 112Бернштейн, Сергей 99бесплатная графика 8, 77, 153, 211, 293бесплатные услуги, влияние на CTR баннера 283беспроволочный телеграф 184бесформенность см. аморфностьБетина Скрипт, гарнитура 134бланки см. формыблок-схемы 93Блэк, Роджер 112

Бодони, гарнитура 81, 130, 136, 137браузеры см. броузерыо. Браун 40броузеры 5

alt-текст как всплывающая подсказка 37, 314Microsoft Internet Explorer см. Internet Explorer,

броузерNetscape Navigator см. Netscape Navigator,

броузеравтоматическая загрузка изображений 85, 278базовый кегль текста 194, 216вывод графики на 256-цветных мониторах 246вывод таблиц 235вывод текста 43, 136заголовок окна 200звуковые (речевые) 20, 34, 36, 42, 178, 216, 223,

228изменение палитры для 256-цветных

мониторов 246кэш 213масштабирование изображений 198, 237, 256оба броузера 5окна без элементов интерфейса 190открытие документа в новом окне 64, 190, 198панели управления 196переключение кодировок 33печать страниц 193, 197подключаемые модули 68размеры окна 159, 192, 193, 198, 324список посещенных адресов 190строка URL 32, 190табличная верстка страниц 234

и н д е к с • 3 4 5

текстовые 20, 34, 36, 178, 213, 228фоновое изображение 259фреймы 64цвета текста, фона и ссылок 115, 223

буквицы 146

В.валидаторы 48валидные XML-документы 50веб-дизайн

академический см. академический стильжесткий табличный 198, 236, 239изменения сайтов 3, 323изнашивание со временем 183ограничения 176«резиновый» 191, 197, 239

веб-сайты см. сайтывеб-страницы

верстка с помощью таблиц 25, 35, 197, 234высота 159, 196заглавие 199загрузка по мере поступления из сети 43, 90,

170, 177, 235левая фоновая полоса 171, 224, 262, 279, 330объем файлов 177, 187открытие в новом окне 190открытие в окне с заданными размерами 198,

325панорамные 196, 324первая на сайте 190подключение программных объектов 67пустое пространство 89, 138, 144, 191, 326связи в пределах сайта 184цвет текста и фона 113, 223ширина 193, 197, 198

векторная графика 56аморфные формы 100аналогия со звукозаписью 60независимость от разрешения устройства

вывода 57объекты 56объем файлов 57трассировка 56, 100, 301трехмерные форматы 59фильтры 57форматы 56

вензели 306видеопамять компьютера 61визуалы 191, 202, 288

иллюстративность 288, 327на внутренних страницах сайта 288, 327фотографические 212, 311, 324, 331, 332

визуальное форматирование 237в CSS 41в HTML 24, 27, 151

в XSL 54виньетки 92виртуальная машина Java 69висячая пунктуация 81Витгенштейн, Людвиг 49, 74возврата каретки символ 15Возрождения эпоха 128вопросительный знак

в адресе ссылки в HTML 30в адресе ссылки в XML 53во французском языке 230правила расстановки пробелов 228

восклицательный знакво французском языке 230правила расстановки пробелов 228

восьмибитные кодировки см. однобайтовыекодировки

впечатывание образа фирмы 181, 277, 284всплывающие подсказки 37, 314вспомогательные линии 94, 202, 325, 329встраивание шрифтов в документ 221«Вы», написание с заглавной буквы 283«выдернутые» цитаты 228, 326выключка по ширине 145выноски 94, 327выносные элементы букв 143, 273выпадающие меню в навигационной панели 66,

206, 214выравнивание

баннера с элементами композиции 205, 330влияние расстояния между объектами 85влияние формы объектов 80кеглей шрифтов 140, 217края текстовой строки 80надписей 209нюансировка 173объектов 85, 154, 164окружностей 98отцентрованных строк 144по прямой 85по точкам привязки 86строк в абзаце 144текста при помощи разрядки 142текстового блока по высоте 143

выставочная графика 257

Г.Гарамон, гарнитура 128, 137

курсив 128, 306, 311Гарамон, Клод 138гарнитура 124гауссовская размывка 120, 168, 300, 325, 326Гельветика, гарнитура 132, 135, 136, 219

курсив 125генерация страниц см. динамические страницы

3 4 6 • >.

генерируемое содержимое 43, 44, 53геометрические текстуры 82, 118геометрические формы 56, 92, 118

в дорожных знаках 268в логотипах 265, 269в шрифтах 131и размытые фотографии 120

Гермес, гарнитура 133, 328гиперссылки 185, 224

автоматическое перенаправление 40, 188, 192адрес назначения см. адрес назначения

гиперссылкив XML 52в фоне веб-страницы 236, 263за пределы сайта (внешние) 186, 187, 190на оглавление страницы 195, 326на первую страницу сайта 208на подразделы сайта 195на почтовый адрес 208с # 187тег А 30, 190текстовые и графические 206, 209, 225цвет 113, 115, 223, 224

глифы 218глубина резкости 300, 331голубой цвет 63, 105, 106, 111Гольдфарб, Чарльз 19горизонтальная прокрутка 193, 198, 324ГОСТ на чертежные линии 94готический шрифт 125, 127гравюры 119градиент 120, 308

в ограниченной палитре 245, 255влияние на степень сжатия в GIF 255линейный 120прозрачности 120, 262, 289

границы между цветами 110, 247графика

бесплатные коллекции 8, 77, 153, 211, 293в навигационной панели 209, 211векторная 56, 100, 301выставочная 257малоразмерная 251, 253призаголовочная 202, 288растровая 56, 59, 100, 295рисованная 211, 289, 327форматы 56, 252

графические вставкиalt-текст 35автоматическая загрузка в броузере 85, 278масштабирование броузером 198, 237, 256«ноготки» (thumbnails) 190, 257, 258, 313объем файлов 37, 138, 177, 213оптимизация 252, 255, 286, 295, 302

подключение к документу 31размещение на странице 234степень сжатия в GIF 255степень сжатия в JPEG 252, 295тег IMG 228, 235, 241, 256указание ширины и высоты 235фрагментирование 37, 170, 213, 247

графические рабочие станции 194графические редакторы

Adobe Illustrator 56Adobe Photoshop 101, 122, 249, 293, 295, 299CorelDRAW 104CorelXARA 12, 104, 249Macromedia Freehand 104MetaCreations Expression 101, 104MetaCreations Painter 101, 104векторные 94имитация натуральных инструментов 101растровые 100

гуманизм в шрифте 128, 131гуманистическая антиква 81, 128, 137, 306

д.даты 229движки см. полосы прокруткидвоеточие

во французском языке 230правила расстановки пробелов 228

двух щелчков правило 187двухбайтовые кодировки 18декадентский стиль 122, 296, 325, 328, 332декоративные шрифты 125, 134

в заголовках 202в логотипах 272, 305

декоративные элементы страницы 36, 309денежные знаки 119десатурация 103, 265, 273, 297дефис 231Дженсон, гарнитура 128дизайн 1

инструменты 2, 77информационный 76, 126, 170, 175, 294любительский см. любительский дизайнматериалы 2, 77, 154, 164, 173, 269обучение 75примеры 2, 4, 323профессиональный см. профессиональный

дизайнрекламный 169, 181, 206, 275, 277, 284современный 92, 259, 267, 268стоимость 9теория 6, 74философия 75

дизайнерские студиивыбор 8

«КС • 3 4 7

сайты 9, 122, 182, 191, 258, 304, 310, 323-326,329, 331-333

динамика 166анимация 169в баннерах 280в логотипах 268восприятия 93, 138, 155, 167, 328, 329изображение движущегося объекта 167, 331линии 170направленная размывка 168, 300, 331постепенное получение данных из сети 177

динамические страницы 30, 71, 186, 285недоступность для роботов 38

динамический HTML 65, 186, 214дисплеи см. мониторыдиффузия 245, 254

и прозрачность 250длинное тире 18

в кодировках кириллицы 231правила расстановки пробелов 229

документыаннотация 39доступность см. доступность информациизапрет индексации роботами 40ключевые слова 38, 39неанглоязычные 27структура 19текстовый эквивалент информации 34

Дон Кихот 315дорожные знаки 268доступность информации 24, 27, 34, 178, 189, 213,

215, 223, 228, 287для роботов 38, 39заголовки 201перенесенной в фон веб-страницы 236, 263при табличной верстке 234

древовидная структура сайта 185навигация 206при разбиении окна на фреймы 188

дуги 56, 92, 98, 168, 210, 331дюйма обозначение (") 232

Е.Евклид 92Европейский институт физики частиц 22единицы измерения 229единство 149

букв в шрифте 123текстур 155форм 154цветов ПО, 154шрифтов 134, 155

Ерофеев, Веничка 142ЕС ЭВМ 16

Ж .желтый цвет 63, 105, 107, 111, 319, 322жесткий табличный дизайн 198

указание ширины и высоты изображений 236ширина таблицы 239

3 .заглавие 199, 259заглавные буквы

в аббревиатурах при стиле «все строчные» 322в заголовках 140в логотипах 273в надписях мелким кеглем 140, 332межбуквенные интервалы 142местоимение «Вы» 283первые значимых слов 140

заголовки 200автоматическая нумерация 43анимированные 289, 291в форме риторических вопросов 139внутритекстовые 88, 203, 322графические 201, 325двухцветные 147заглавные буквы 140кегль шрифта 138межбуквенные интервалы 143, 305отрицательный эмфазис 88, 138, 202, 307, 321,

325, 329размещение 88, 171размывка со смазыванием 168, 300, 331со сдвигом влево 88строчные буквы 141теги Н* 200тени 301трехмерность 153, 289, 291центрирование 88, 144, 322шрифты 134, 166

заметность см. активность объектов в композициизападноевропейские языки 17запятая

и кавычки в английском языке 232правила расстановки пробелов 228

засечки 79, 133, 134, 316влияние на выравнивание 81переплетение 305

звуковые (речевые) броузеры 34, 178, 216, 223, 228CSS 42воспроизведение alt-текстов 36заголовки 20

зеленый цвет 62, 105, 107, 111, 298, 307, 317знаки препинания

в выделенных фрагментах 230расстановка пробелов 228

золотое сечение 82золотой цвет 107, 116, 320

3 4 8 • и н д е к с

и.иерархическая структура сайта см. древовидная

структура сайтаиерархические стилевые спецификации см. CSSиероглифы 18изменения дизайна сайтов 3, 323изображения-карты 37иконки анимированные 153, 169имитация

мазка грубой кистью 271, 289материальной поверхности 117, 120, 153, 259металлической поверхности 106, 318типографского растра 264, 328

инициалы 229инструменты дизайнера 2, 77интерлиньяж 143, 148

нулевой 143увеличение с помощью распорок 238

интернационализация 50Интернет 10

англоязычный 6, 7, 9, 196, 284-286программирование 63русскоязычный 6, 7, 9, 16, 196, 217, 222, 284стандарты 19, 177технологии 1, 13

интернет-палитра см. безопасная палитраинформационный дизайн 76, 175, 243, 294

анимация 170эргономика 113, 126

искажения растровые 168, 301, 332и моноширинные шрифты 137

использованной литературы список 187

К.кавычки 232

внутри кавычек 232во французском языке 230вокруг значений атрибутов 28, 51вокруг шрифтового выделения 230правила расстановки пробелов 229

канал связи 43, 177, 245, 286капитель см. начертания шрифта, малые

прописныеквадратные скобки в alt-текстах 36квадраты 95

компактность 80кегль шрифта 126, 139

базовый в броузере 194, 216в навигационной панели 210выравнивание 140, 210, 217графических вставок и обычного текста 228крупный 81, 138, 141, 174, 321мелкий 81, ИЗ, 133, 138, 140, 141, 148, 248,

251, 321, 332тег BIG 216

тег SMALL 216установка в CSS 218установка в HTML 199, 216

кернинг 142, 174в текстах, набранных курсивом 136

кириллица 16, 127, 132, 222, 230Кларендой, тип шрифтов 130классическая антиква см. гуманистическая

антикваключевые слова

в рекламных текстах 282документа 38, 39

«Книги России»логотип 158, 250, 330сайт см. www.books.ru

кнопки навигационной панели 209alt-текст 36в отдельных графических файлах 38, 213выравнивание 85, 209использование стилизованных рисунков 209,

211количество 207маркеры 86, 209, 210прикладная функция 208текст 141, 225текущая кнопка 212

кодировки 14ASCII 15СР1251 16, 231СР866 16, 231HTML-документа 18, 32ISO 10646 18ISO 8859 17Latin-1 17, 29, 33, 230Unicode 17, 18, 29, 33, 230UTF-8 19альтернативная 16выбор на сплэш-странице 192двухбайтовые 18западноевропейских языков 17кириллицы 16, 230КОИ8 16, 17, 231компьютеров Макинтош 16, 231однобайтовые 15переключение в броузере 33спецификация сервером 33указание в теге МЕТА 33четырехбайтовые 18шрифта 218

кодовые таблицы см. кодировкиКОИ8, кодировка 16, 17, 231коллаж 296«кольца» сайтов 207компактность 79

в логотипах 267

индекс И349влияние на плотность размещения 89

композиция 78активность объектов 79, 81, 106, 206, 297, 300,

329, 333асимметрия 158, 159, 166, 174, 268, 313динамика 166, 177, 268иерархия объектов 297плотность 89, 156пустое пространство 89, 138, 144размер общий 79размер объектов 83размещение объектов 84, 164расстояние между объектами 164связи по вертикали 159фокус 157

Консорциум W3 152CSS 23DOM, спецификация 66HTML 2.0 22HTML 3 23, 25HTML 3.2 26HTML 4.0 27VML, язык 59XLL, язык 52XML, язык 47XSL, язык 53сайт 180спецификация встраивания шрифтов 221стандартизация 58, 178

конструктивизм 131контент-сайты 182

баннерная реклама 183, 188, 204навигационная система 207объем страниц 187, 278первая страница 191, 206применение модульного HTML 46раскрываемые оглавления 214«резиновый» дизайн 198

контраст 159гладкого контура и аморфного заполнителя 101динамичных и статичных объектов 169по нескольким аспектам 161, 320противоположных тонов 333размеров 160, 164размещения 163, 164текста и фона 113текстур 163, 165форм 164фотографики и плоского цвета 120, 155, 164,

165, 275фотографики и регулярности 210, 319, 331фотографики и узких полос 118фотографики и четких линий 164, 318цветов ПО, 111, 161, 163, 165, 298шрифтов 134, 143, 163, 165, 298, 311

контурбукв текста 96выявление с помощью фильтров 301и аморфный заполнитель 101отображение на экране 247прямоугольника 96, 323, 328сглаживание см. анти-алиасингтекстура 117, 118

концертная звукозапись 60копирайта символ см. авторского права символкоричневый цвет 107корневой документ набора фреймов 188короткое тире 231корпоративные сайты 181

визуалы 191, 212объем страниц 187первая страница 191, 206

красной строки отступ 145, 238красный цвет 62, 105, 107, 111, 112кривые Безье 56, 99круги 95, 97

абстракция формы 270как маркеры элементов навигационной панели

209компактность 80

кубизм 92, 271кулинарные рецепты 48курсив 125, 136, 148

выделение знаков препинания 230гуманистической антиквы 128, 306заглавные буквы 140тег I 34, 49

Курьер, гарнитура 137, 219курсив 125

кэш броузера 213

Л.Лазурского, гарнитура 128, 129левая фоновая полоса 171, 224, 262, 279, 330лекальные кривые 99лингвистика 21линейки см. линии, разделительныелинейная структура сайта 185

навигация 207, 313линии 92

базовая шрифта 80, 94, 325в навигационной панели 209, 210восприятия 93, 138, 155, 167, 328, 329вспомогательные 94, 202, 325, 329выноски 94, 327динамика 170дуги 56, 92, 98, 168, 331и фотографические текстуры 318кривые Безье 56, 99лекальные кривые 99

Л50И - "':-КС

наклонные 94, 168, 308, 327, 331полосы 118, 168, 331прямые 56, 92разделительные 36, 93, 203, 323, 326размерные 94соединительные 93, 170, 249, 331строго горизонтальные и вертикальные 118, 255

литературно-музыкальная композиция 282личные страницы 6, 179логическая разметка см. структурная разметкалоготипы

Apple 267AT&T 270, 275DAIMAS'97 143, 266Encynova 317Fractal Design 112«Internet» 137, 147, 272Lucent Technologies 270, 272Mercedes Benz 269Microsoft 269Quiotix 174, 266, 315Splash 327TEX240

www.alphaworks.ibm.com 137www.bdaweb.com 143, 329www.highfive.com 163www.kirsanov.com 304абстрактность 265, 267, 270, 315анимированные 289, 291двухцветные 147иллюстративность 267, 327как основа композиции страницы 264как ссылка на первую страницу сайта 208«Книги России» 158, 250, 330нюансировка 174, 270, 317Олимпиады в Нагано 271прием «доказательства от противного» 266, 298,

315, 333приемы оформления в веб-графике 275размещение на странице 262размещение текста относительно графики 268«скрытый смысл» 266, 268, 269, 274текстуры 274трехмерность 266, 274, 289, 291увеличенный размер 139формы 269цвета 265, 273, 317шрифты 134, 155, 166, 272

лозунги рекламные 147, 228, 282, 288любительский дизайн 6, 149, 179

анимация 153, 289, 290декоративные шрифты 202заголовки 202использование «чужого творчества» 76крупный кегль 138

материальные текстуры 87, 120, 153, 259радужные цвета 112, 153, 310растровые эффекты 295текстовые логотипы 305«текстурщина» 122, 294трехмерность 153, 289, 290фоны 87, 259

М.магазины онлайновые 7, 8, 186, 208мазки кистью 101, 271, 289Макинтош, компьютер

кодировка кириллицы 16, 231разрешение монитора 176, 193

Малевич, Казимир 271малоразмерная графика 251

выбор формата 253маркеры элементов списка 86, 97, 319, 322

alt-текст 36Маркс, Карл 179масштабирование графики 198, 237, 256математические тексты 48материалы дизайнера 2, 77, 154, 164, 173, 269материальные текстуры 120, 155, 289

в логотипах 274в фонах 117, 153, 259, 332контрастирование 165

межбуквенные интервалы 141отрицательные 143, 273, 305, 329

межсловные пробелы 238межстрочные интервалы см. интерлиньяжМета, гарнитура 133, 137, 326метаинформация

о документе 39об изображении 35

металлической поверхности имитация 106, 318миниатюры 79минибаннеры 287

размещение 262формат 277

МК-54, микрокалькулятор 292мнемонические подстановки 29, 231многозначные числа 229многоточие, правила расстановки пробелов 228модерн, стиль 99, 127, 130модульный HTML 44, 51, 54мониторы

256-цветные 61, 62, 177, 224, 246, 247, 249, 250вывод цветовых границ 248количество цветов 61, 107, И 7, 176, 245размер пикселов 248разрешение 61, 117, 176, 190, 193, 245частота развертки 115, 119

монохромные изображения 62, 265, 273, 297

и н д е к • 3 5 1

моноширинные шрифты 125, 137выбор в CSS 219выбор в HTML 217стандартный в Windows 219

монументальная живопись 78«Москва—Петушки» 142муар 119муляжи элементов интерфейса 284

Н.наброски от руки 101навигационная панель 206

в виде выпадающего меню 66, 206, 214в отдельном фрейме 189на левом поле 171перекатывание (rollover) 65, 212-214, 311размещение 208, 262ускорение загрузки 38, 213элементы см. кнопки навигационной панели

навигация на сайте 205, 312Нагано, логотип Олимпиады 271Наггум, Эрик 152наклонные линии 94, 168, 308, 331наложение

букв 143, 273, 305, 329объектов 89, 236, 241, 326с помощью CSS 43текста на размытые фотографии 259частично прозрачных изображений 296

наплыв 80, 128насыщенность цвета 104, 112, 307

изменение с помощью фильтров 296контрастирование 113повышенная 299фона 114

насыщенность шрифта 125рубленых 97, 135, 136, 143, 166, 272, 298

Национальный центр суперкомпьютерныхприложений США 22

начертания шрифта 124жирное 125курсив 34, 49, 125, 128, 136, 140, 148, 230, 306малые прописные 126, 325перекошенное 125полужирное 125, 148, 230прямое 125сверхжирное 126светлое 125

некоммерческие сайты 180немецкий язык

кавычки 232пробел в конце предложения 230

неразрываемые пробелы 229, 238имитация отступов красной строки 226мнемоническая подстановка 29

новая антиква 81, 130, 136изменение пропорций 139

«ноготки» (thumbnails) 190, 257, 258на сайте www.kirsanov.com 313

номера символ 229, 233нюансировка 154, 171, 329

в логотипах 174, 270, 317

О.оба броузера 5общего знаменателя принцип 177, 245, 246объекты

в векторной графике 56контуры 96, 101, 117, 118, 247, 301, 323, 328наложение 43, 89, 236, 241, 259, 296, 326обрезка фона 296отступы вокруг 240повторение 171размещение 85размывка со смазыванием 168, 300расстояние между 85, 164степень заметности в композиции 79, 81, 206,

297, 300, 329, 333тени 301

объем файловбаннеров 286векторной графики 57влияние диффузии 255влияние мелкого кегля 138влияние растровых эффектов 295влияние трехмерности 295влияние фрагментирования графических

вставок 37, 213графических вставок 177, 252навигационной панели 38, 213одной страницы 177, 187при табличной верстке 234программ 68сайтов с фреймами 189сплэш-страницы 192указание в alt-тексте 36

Обыкновенная новая, гарнитура 130однобайтовые кодировки 15однопиксельный GIF 237, 253окружности 92, 97

выравнивание 144как основа композиции логотипа 267, 268компактность 80размещение объектов по окружности 87

оливковый цвет 309, 331Олимпиада в Нагано, логотип 271оптимизация графики 252, 295, 302

баннеров 286программы-оптимизаторы 254с диффузией 255

3 5 2 • и н д е к с

оптические иллюзии 80, 154, 174оптический центр прямоугольника 96оранжевый цвет 107, 116, 158, 319, 329, 330ортогональная разметка 20

в XML 48в модульном HTML 43

открытые программы см. open source softwareотносительное позиционирование в CSS 235, 240отступ красной строки 145, 226, 238Оффицина Сане, гарнитура 133

П.палитра 62

безопасная 177, 245, 247, 307влияние на объем графики 255системная 246уменьшение 253

панели прокрутки см. полосы прокруткипанорамные страницы 196, 300, 324панорамные форматы 60параграфа символ 229, 232первая страница сайта 190

ссылки на подчиненные страницы 206перевода строки символ 15переднеплановость см. активность объектов в

композицииперекатывание (rollover) 65, 212, 311

с помощью JavaScript 213с помощью динамического HTML 214

переносимость см. доступность информациипереносы 144

межсловные 229«перепроявленность» 299, 333переходная антиква 81, 129, 136, 306

изменение пропорций 139печать веб-страниц 193, 224, 274

панорамных 1977Г, число 147Пизанская башня 94пикселы 59, 192пиксельные текстуры 119, 249пиксельные эффекты 251Пинк Флойд 141плавающее позиционирование в CSS 241плавный переход цветов см. градиентПлатон 74плоский цвет 117

и фотографические текстуры 120, 155, 164, 165,275

плотность размещения 89, 156в логотипах 267текста 90

«пляшущие» буквы 146повторение объектов 171подключаемые модули 25, 68, 295

подстановкимнемонические 29, 231числовые 18, 29, 33, 230

подчеркивание 209в гиперссылках 225по базовой линии шрифта 94, 325

позиционирование в CSS 240абсолютное 43, 59, 66, 235, 241относительное 235, 240плавающее 241фиксированное 241

поиск по ключевым словам 38поисковые системы 38, 182

«вес» заглавия 200«вес» заголовков 20ссылки на страницах с результатами 207статистика словоупотреблений 5

Поллок, Джексон 271полосы 118, 168, 331полосы прокрутки 193, 279

горизонтальная 193, 198, 324на баннерах 285

полужирное начертание 125, 148выделение знаков препинания 230

полявокруг текста 90, 96оставляемые броузером 194, 250, 264установка в CSS 240установка с помощью таблиц 197, 234установка с помощью фреймов 189, 195

посещенных адресов список 190почтовый адрес автора сайта 208правильно структурированные XML-документы 50Престиж, гарнитура 137призаголовочная графика 202, 288принтеры

воспроизведение цветовых границ 248входной формат 56печать веб-страниц 193, 197, 224разрешение 176

пробелы 228в конце предложений 230межсловные 238неразрываемые 29, 226, 229, 238

программывстраивание в веб-страницу 67номера версий 229свободно распространяемые см. open source

softwareпрозрачность 299

для интеграции фотографии в композицию120, 259, 289

для создания бесшовного фона 262и анти-алиасинг 249

проклик см. CTR, параметр баннера

•прописные буквы см. заглавные буквыпропорции 82

букв 126, 139, 210, 273влияние размеров объектов 84золотое сечение 82кратные 83принцип ограничения «сверху» 83, 139, 270прямоугольников 95человеческого тела 84

пространственные отношения 78профессиональный дизайн 5

декадентский стиль 122, 296, 325, 328, 332жесткое позиционирование 91заголовки 202, 327, 329использование «чужого творчества» 76, 327контраст 160, 163контраст фотографики и плоского цвета 120,

275материальные текстуры 121, 332мелкий кегль 138плоский цвет 117примеры 2, 323-333прямоугольники 95радужные цвета 112«текстурщина» 122, 294толстый контур 97, 323, 328трехмерность 290, 294хаотическое размещение объектов 87, 146, 156,

260, 331, 332цвета 103, 108, 11.1, 331шрифты 127, 135

прямоугольники 92, 94как маркеры элементов списка 319, 322компактность 80контур 96, 323, 328оптический центр 96пропорции 95с закругленными углами 99, 154, 164, 323, 328

прямые линии см. линиипуансон 266пункты перечисления внутритекстовые 229пункты типографские 126пурпурный цвет 63пустое пространство 89, 138, 144, 191, 326Пушкин, А. С. 55

Р.радио 184радиосхемы 94, 331разделительные линии 93, 323, 326

alt-текст 36тег HR 93, 203трехмерные 203

размерв пропорции 84

влияние на восприятие цвета 109, 174, 251влияние формы объекта 79, 145воспринимаемый 78композиции 79контрастирование 160, 164координация с переднеплановостью 83сопоставимый с размером пиксела 251

размерные линии 94разметка

ортогональная 20, 43, 48структурная 19, 34, 44, 45, 47, 150, 201, 216, 226текстовая 29

размещениебаннеров 188, 195, 205, 262, 279, 330графических вставок 234динамических объектов 167заголовков 88, 171контрастирование 162-164линейное 85логотипов 262, 330навигационной панели 208, 262объектов в шахматном порядке 87одноуровневых элементов 85, 144плотность 89, 156по окружности 87разноуровневых элементов 88хаотическое 86, 87, 146, 156, 260, 331, 332элементов на веб-странице 91, 233

размывки 300, 329гауссовская 120, 168, 300, 325, 326краев 120, 289, 327, 331со смазыванием 168, 300, 331

разрешениелазерного принтера 176монитора 61, 117, 176, 193, 245растрового изображения 193

разрядка 141, 142, 148, 298, 321, 332имитация с помощью неразрываемых пробелов

238рамка см. контур, прямоугольникараскрываемые оглавления 214распорки 234

alt-текст 36имитация отступов красной строки 226, 238неразрываемые пробелы 229однопиксельный GIF 237, 253отладка 238увеличение интерлиньяжа 238

расстояние между объектами 85растровая графика 56, 59

аморфные формы 100аналогия со звукозаписью 60искажения 295форматы 60, 252

3 5 4 • .

растровые эффекты 295, 325нетекстурируюшие 296потеря информации 295текстурирующие 299

регистр буквв идентификаторах тегов HTML 28в идентификаторах тегов XML 51

регулярность 82, 118, 260регулярные выражения 46«резиновый» дизайн 191, 197

ширина таблицы 239реклама

анимация 169баннерная 183, 188, 195, 204, 275бесплатных услуг 283дизайн 275, 277, 284имиджевая 181, 277, 284лозунги 147, 228, 282, 288одинаковых по значимости объектов 206спам 180

Релком, компьютерная сеть 16речевые броузеры см. звуковые броузерырисованная графика 289, 327

в навигационной панели 211роботы поисковых систем см. автоматические

сборщики информациирозовый цвет 107рок-музыка 291Ротко, Марк 271рубленые шрифты 124, 134, 316

в логотипах 272выбор в CSS 219гротесковые 92, 130, 133, 328гуманистические 133, 326, 328, 332изменение пропорций 139кириллица 223конструктивистские 132повышенного кегля 139повышенной насыщенности 97, 135, 136, 143,

166, 272, 298стандартный в Windows 219

рукописные шрифты 125, 134, 136, 202, 325заглавные буквы 140

рукотворность 107, 271, 274, 289русский язык

выравнивание строк в абзаце 144заглавные первые буквы значимых слов 141знак номера 233кавычки 232названия цветов 106расстановка пробелов 228текстовые выделения 230терминология 4

рычага правило 157

С.с засечками шрифты 124, 134, 316

в логотипах 272выбор в CSS 219заглавные буквы 140переплетение засечек 306повышенного кегля 139размеры букв 79стандартный в Windows 219

сайты 184англоязычные 9, 196двухуровневая иерархия 210, 214дизайнерских студий 9, 122, 182, 191, 258, 304,

310, 323-326, 329, 331-333динамические 7, 8древовидная структура 185, 188, 206изменения дизайна 3, 323классификация 179контент-сайты 182, 187, 191, 198, 204, 206, 214корпоративные 181, 187, 191, 206, 212линейная структура 185, 207, 313личные 179навигация 205, 312некоммерческие 180разбиение содержимого на страницы 186русскоязычные 6, 7, 9, 16, 192, 196, 217, 222,

230статические 181тематические «кольца» 207траффик 40

сглаживание контуров см. анти-алиасингсерая шкала 103, 108, 265, 273 297сервер WWW 184сжатие фотографий 120Сигель, Дэвид 91, 234, 237силовые линии восприятия 93, 138, 155, 167, 328,

329силуэты 91, 266символы 14

авторского права 230, 232возврата каретки 15неразрываемого пробела 29номера 229, 233отсутствующие на клавиатуре 230параграфа 229, 232перевода строки 15торговой марки 233управляющие 15

символьные подстановки см. мнемоническиеподстановки

симметрия 2в геометрических текстурах 118в геометрических фигурах 96, 97в композиции веб-страницы 157, 159

• ICC • 3 5 5

в логотипах 267в современном дизайне 156влияние на восприятие размера 80при размещении объектов 87центрирование заголовков 144, 322

симфоническая музыка 291синий цвет 62, 105, 106, ПО, 111, 115, 158, 319,

330в логотипах 274, 317

синтезирование шрифтов в CSS 221системы представления цвета

CMYK 63, 105, 274HSV 63, 103RGB 63, 104, 105аддитивная и субтрактивная 63

скобкивокруг шрифтового выделения 230правила расстановки пробелов 229

скрытый смысл 173, 288, 311в баннерах 299в логотипах 266, 268, 269, 274

скульптурная трехмерность 293, 298, 333службы обмена баннерами 276случайность 87, 146, 148, 156, 260, 331, 332смесители цветов 247соединительные линии 93, 170, 249, 331сокращения 229составные баннеры 285спам 180спецсимволы 230сплэш-страница 192

выбор кодировки 192открытие документа в новом окне 198, 325указание размеров окна 192, 198, 324

средневековьебуквицы 146симметрия 98шрифты 123

ссылки см. гиперссылкистандарты Интернета и общепринятая практика

19, 177станковая живопись 78стилевые спецификации 20стрелки 97, 170

ачимированные 169строчные буквы

в аббревиатурах 322в заголовках 141в логотипах 273межбуквенные интервалы 142

структура документа 19структурная разметка 19, 34, 44, 47, 150, 216

заголовки 201с помощью модулей 45членение текста на абзацы 226

студийная звукозапись 60субтрактивная система представления цвета 63сценарии см. Javascript, язык

Т.таблицы 32

интерпретация броузерами 238использование для верстки страниц 25, 35, 86,

197, 234объединение ячеек 238, 239отладка 239положение относительно границ окна броузера

235разлиновка ячеек 87, 95, 226расстояние между содержимым ячеек 237тег TABLE 25, 32тег TD 32, 238фон ячеек 87, 95

табуляция 15Тайме, гарнитура 81, 129, 132, 134, 136, 219

курсив 125, 306теги

атрибуты 28в XML 51визуально-ориентированные 24, 27, 54непарные 28обязательные 29парные 28, 51регистр букв в HTML 28регистр букв в XML 51с игнорируемым содержимым 28, 31

текстабзацы на веб-страницах 226, 238баннера 282в броузере 217, 226, 238в виде графических вставок 227в фоне веб-страницы 236, 263верстка в несколько колонок 191, 197, 234выделение случайных слов 147выключка строк 144выравнивание кеглей шрифтов 140выравнивание края строки 80гиперссылки 209, 224заглавные буквы 140, 332изменение ширины надписи 126, 210интерлиньяж 143комфортное чтение 90, 215контур букв 96крупный кегль 81, 138, 141, 174, 321межбуквенные интервалы 273, 305мелкий кегль 81, 113, 133, 138, 140, 141, 148,

248, 251, 321, 332наложение букв 143, 305, 329опечатки 228«пляшущие» буквы 146

яподчеркивание 94, 209, 225, 325поля 90, 96правила набора 228разделение абзацев 145разметка в HTML 29разрядка 141, 142, 148, 298, 321, 332расположение по вертикали 145расположение по окружности 267, 268установка ширины колонки 234фон 113цвет 113, 147, 223шрифтовые выделения 148

текстовые броузеры 34, 178, 213, 228воспроизведение alt-текстов 36заголовки 20

текстовый эквивалент информации 34текстуры 116

в логотипах 266, 274в рисованной графике 289влияние на восприятие размера 81геометрические 82, 118декадентские 122, 325, 332контрастирование 163, 165контура 117, 118линии 93материальные см. материальные текстурыпиксельные 119, 249плоский цвет 117, 120, 155, 165, 275плотность 90полосатые 118, 168, 331принцип единства 155текста 148«текстурщина» 122, 294типографского растра имитация 264, 328трехмерные 292, 294фотографические см. фотографические

текстурытекущая кнопка 212тени

наклонность 94размытость 301

теория дизайна 74теплые цвета 81, 106, 116, 329, 332

в логотипах 274терминология 4, 184типографский растр 264, 328тон цвета 103, 111, 308

контрастирование 113торговой марки символ 18, 233точка

и кавычки в английском языке 232правила расстановки пробелов 228

точка с запятойво французском языке 230

правила расстановки пробелов 228точки привязки для выравнивания 86трассировка 56, 100, 301трекинг 142, 174, 305треугольники 97, 170

как маркеры элементов навигационной панели209, 212

трехмерность 59, 121, 290барельефная 293, 301, 302в заголовках 153, 202, 289, 291в логотипах 266, 274, 289, 291в шрифтах 125, 135линеек в таблице 95, 226разделительных линий 203скульптурная 293, 298, 333

тяжести сила 159

У.узел WWW 184уменьшенные копии изображений см. «ноготки»управляющие символы 15урбанистический стиль см. декадентский стильустав см. церковно-славянский шрифт

Ф.Фидо (компьютерная сеть), кодировка кириллицы

16фиксированное позиционирование в CSS 241филология 74философия

дизайна 75прикладная 21сравнение с теорией дизайна 74

фильтры см. растровые эффектыфиолетовый цвет 105, 107, 111, 115, 298, 318фирменный стиль 315фокус композиции 138, 155, 157фон 121, 259

бесшовный 261для текста 113, 119, 223для текста мелким кеглем 148звездное небо 87как носитель информации 236, 263координация с передним планом 194, 198, 264мрамор 117, 153, 259мятая бумага 87, 259, 300навигационной панели 210, 319, 331небо с облаками 259, 274, 319повторение узора 87, 259полностраничный 236, 263, 323, 328размер элементов 84размножаемый по вертикали 262размножаемый по горизонтали 263размытые надписи 139, 318

• • С С • 3 5 7

размытый фотографический 300, 325цвет 113, 147, 223ячеек таблицы 87, 95, 226, 330

формы 91в логотипах 269влияние на восприятие размера 79, 145геометрические 56, 92, 118, 120, 131, 265, 268,

269компактность 79контрастирование 164принцип единства 154симметричные 80фрактальные 91, 101ядро и оболочка 79

формы (бланки) 30посылка данных на сервер 31тег FORM 31тег INPUT 31

форточки см. фреймыфотографии 119

в визуалах 212, 289, 311, 324, 331, 332в кнопках навигационной панели 211в фоне навигационной панели 210, 319, 331глубина резкости 120, 300, 331глубина цвета 61сжатие 120черно-белые 324, 328

фотографические текстуры 119, 292, 327в логотипах 275и аморфность 100и диффузия 246, 254и моноширинные шрифты 137и плоский цвет 120, 155, 165, 275и соединительные линии 93и узкие полосы 118, 168, 331и четкие линии 318

фотонаборные автоматы 56фрагментирование графических вставок 37, 170,

213, 247фракталы 91, 101фрактура см. готический шрифтфранцузский язык

знак номера 233кавычки 232расстановка пробелов 230

фреймы 32, 188внешние ссылки 186, 190тег FRAME 195установка полей 195

фрески 79Фрисет см. Frutiger, гарнитураФурье ряды 120Футура, гарнитура 131, 136футуризм 131

X.хаки цвет 107хаос 155, 173, 261хаотическое размещение объектов 86, 87, 146, 156,

260, 331, 332холодные цвета 81, 105, 116, 318, 332художественные училища 73

ц.цвета

безопасная палитра 177, 245—247, 307белый 108, ПО, 112в линии 92в логотипах 265, 273, 317влияние занимаемой площади 93, 109, 174, 251,

308влияние на активность объекта 297влияние на восприятие размера 81восприятие 93, 101, 105, 109, 174, 251гибридные из цветов безопасной палитры 247гиперссылок 113, 115, 223, 224голубой 63, 105, 106, 111граница цветов 110, 247желтый 63, 105, 107, 111, 319, 322зеленый 62, 105, 107, 111, 298, 317золотой 107, 116, 320изменение с помощью фильтров 296количество отображаемых компьютером цветов

61количество цветов в композиции 111, 154, 165контрастирование ПО, 111, 161, 163, 165, 298коричневый 107красный 62, 105, 107, 111, 112насыщенность 104, 112-114, 296, 299, 307оливковый 309, 331оранжевый 107, 116, 158, 319, 329, 330плоские см. плоский цветпринцип единства НО, 154противоположные 111, 298пурпурный 63разложение на составляющие 62розовый 107самостоятельные и промежуточные в цветовом

круге 105серый 108синий 62, 105, 106, ПО, 111, 115, 158, 274, 317,

319, 330сочетаемость НОтекста 113, 147, 223теплые 81, 106, 116, 274, 329, 332тон 103, 111, 113, 308фиолетовый 105, 107, 111, 115, 298, 318фона страницы ИЗ, 147, 223фона ячеек таблицы 87, 95, 226, 330

3 5 8 •

хаки 107холодные 81, 105, 116, 318, 332человеческой кожи 107черный 63, 108, ПО, 112яркость 104, 112-114, 308

цветовой круг 104цветовой охват

модели CMYK 63, 274монитора 107, 117, 176, 245

цветокоррекция 299центр масс 156, 330центрирование 88

заголовков 88, 144, 322изображений 259страницы в окне броузера 198

церковно-славянский шрифт 125, 127церковные проповеди 48

Ч.человеческой кожи цвет 107черный цвет 63, 108, ПО, 112чертежи 93, 94четырехбайтовая кодировка 18числовые подстановки 18, 29, 33, 230Чихольд, Ян 133«чужое творчество» 76, 123, 327

Ш.шестнадцатибитные кодировки см. двухбайтовые

кодировкиширина страницы 193, 197, 198Школьная, гарнитура 131Шпикерманн, Эрик 133, 326шрифтовые дескрипторы в CSS2 221шрифты 122

базовая линия 80, 94, 325базовый кегль в броузере 194, 216в композиции 133, 155в логотипах 155, 272в навигационной панели 210встраивание в документ 221выбор в CSS 43, 219выбор в HTML 218выносные элементы букв 273гарнитура 124готический 125, 127гуманистическая антиква 81, 128, 137, 306декоративные 125, 134, 272, 305искажение пропорций 126, 139, 210, 273, 305кегль см. кегль шрифтакернинг 142, 174кириллица 127, 132, 222Кларендон 130контрастирование 134, 163, 165межбуквенные интервалы 141

Microsoft для веб-страниц 220моноширинные 125, 137, 217на компьютере типичного пользователя 219названия 137наплыв 80, 128насыщенность см. насыщенность шрифтаначертания см. начертания шрифтановая антиква 81, 130, 136, 139оптические иллюзии 80отношение высоты строчных к высоте

заглавных 139переходная антиква 81, 129, 136, 139, 306по умолчанию в броузере 219принцип единства 134, 155растянутые 126рубленые см. рубленые шрифтырукописные 125, 134, 136, 202, 325с засечками см. с засечками шрифтысжатые 126, 139синтезирование в CSS 221системные Windows 248тег FONT 151текстура 148трекинг 142, 174, 305трехмерные 125, 135церковно-славянский 125, 127ширина 126

Э.электронная почта

кодировка кириллицы 16текст заглавными буквами 140

элементы HTML-документа 28, 240эмблемы см. логотипыэмфазис 34, 225

отрицательный в заголовках 88, 138, 202, 307,321, 325, 329

эргономика 113, 126, 171Эшер, Мориц 306

Я.языки

английский 140, 142, 144, 229-232западноевропейские 17немецкий 230, 232первобытных племен 21русский 4, 106, 141, 144, 228, 230, 232, 233с иероглифической письменностью 18французский 230, 232, 233

яркость цвета 104, 112, 308изменение с помощью фильтров 297контрастирование 113фона 114