Функции

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

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

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

Галерея

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

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

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

Гарнитура, начертание, шрифт

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

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

Геометрические текстуры

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

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

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

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

119

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

I. Техминимум

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

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

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

14

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

II. Основы дизай­на

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

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

74

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

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

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

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

III. Дизайн веб-сайтов

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

и оформления.

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

176

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

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

IV. Веб-графика

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

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

244

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

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

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

Главные цвета

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

109

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

Графика

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

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

56

HTML

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

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

HTML плюс

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

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

24

Идолы рынка

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

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

Император иллюзий

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

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

292

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

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

Информационные цвета

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

Оливковый цвет (#666633), которым залит фон на всем сайте за исключением сплэш-страницы, представляет собой дальнейший сдвиг в область желтого (Н = 60) и дальнейшее снижение насыщенности (S — 128). Хотя соблазн поискать для фона почти нейтральный, едва зеленоватый серый был велик, я все же решил не разбивать общую цветовую гамму сайта, своей насыщенностью компенсирующую темноватый колорит и узость тонового диапазона.

Однако на первой же странице сайта (www.kirsanov.com/main.html , рис. 79 на цветной вкладке) выясни­лось, что цвета логотипа слишком активны и слишком проч­но связаны друг с другом, чтобы играть сколько-нибудь за­метную роль в композиции. За пределами сплэш-страницы эта цветовая пара годится разве что на роль акцента, укра­шения, второстепенного декоративного элемента.

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

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

310

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

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

Интервалы

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

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

Где он стоял опершись на статую. С лицом перепол Где он стоял опершись на статую. С лицом

Где он стоял опершись на стат

Где он стоял

Где он стоял опершись на статую. С лицом

Где он стоял опершись на статую

Где он стоял

Рис. 37

Автоматическая регулировка межбуквенных, рас­стояний в зависимости от кегля: текст без трекинга (вверху) и с трекингом (внизу)

142

Где он стоял

Где он стоял

Рис. 38

Ручная регулировка межбуквенных расстояний — кернинг

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

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

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

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

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

143

заглушенная удовлетворением от аккуратной подгонки и ко­ординации частей (рис. 39).

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

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


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

сильно превосходит высоту строчных.

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

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

144

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

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

Искусство искажений

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

Что упало, то пропало. Интересно, что если для плоскоцветной (т. е. "векторной») графики растровые эффекты (включая даже такой простой и почти незаметный, как анти-алиасинг, стр. 248) неизбежно приводят к увеличению объема файла, то для растровых по самой своей природе изображений со сложными фотографическими текстурами те же самые эффекты обычно дают обратный результат: не только размытые фотографии гораздо лучше сжимаются алгоритмом JPEG (стр. 252), но и почти любое изменение фотоизображения по сравнению с оригиналом делает глаз более Терпимым к дополнительным искажениям, вносимым при оптимизации и сжатии графики.

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

По своей популярности в современном дизайне растровые эффекты уступят разве что трехмерной графике, — но, в отличие от нее, без эффектов не обходятся не только любители, но и профессионалы.
Если не по тиражам, то уж во всяком случае по разнообразию продуктов индустрия растровых эффектов — определенно самый быстрорастущий сегмент рынка графических программ. Оформленные, как правило, в виде подключаемых модулей для Adobe Photoshop и других программ, поддерживающих соответствующий интерфейс, фильтры эти россыпью и в наборах (вроде Kai's Power Tools или Alien Skin Black Box) необычайно популярны у дизайнеров-любителей, по работам которых обычно нетрудно определить, какие фильтры и в каком порядке применялись к исходному изображению.

296

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

Искусство выравнивания текста

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

81

(а)

(б)

Рис. 4

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

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

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

Предвидя неизбежное рано или поздно

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

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

19

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

История

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

Из-под пятницы суббота

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

250

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

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

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

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

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

Тег   IMG,    предназначенный   для

вставки изображений, относится к тегам, создающим но­вые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG (стр. 252); этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в дру­гом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атри­бутов этого тега управляют форматированием изображения, устанавливая его размеры (стр. 2,5В), поля, выравнивание и проч. Правила использования атрибута alt приведены на стр. 35.

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

32

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

JavaScript

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

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

65

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

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

Экранный анти-алиасинг

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

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

Элементы шрифта.

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

JPEG

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

253

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

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

GIF. Взамен единственного и довольно-таки абстрактного «уровня качества» степень сжатия в GIF регулируется рядом параметров, самым важным из которых является количество цветов, или размер палитры. Другие форматы, как правило, имеют лишь стандартные градации цветовой глубины: 2 цвета, 16 цветов, а потом сразу 256, 215 (high color) и 224 (true color, стр. 61). GIF же может иметь любое количество цветов от 2 до 256, и если в изображении используется, скажем, 64 цвета (26), то для хранения каждого пиксела будет взято ровно по шесть бит и ни битом больше. (Втиснув то же изображение в 60 или 40 цветов, вы получите лишь незначительный выигрыш в размере; следующий скачок оптимизации произойдет только при переходе через 32 цвета, когда размер каждого пиксела сократится еще на один бит.)

Если не применяется безопасная палитра, графическая программа са­ма решает, какие именно цвета останутся при редукции полноцветного

254

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

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

Сжатие без потерь и ограниченность палитры 256 цветами, собственно говоря, никак не связаны друг с другом, хотя веб-дизайнеры, пользующиеся форматом GIF, привыкли к одновременному действию этих факторов. Разработан­ный сравнительно недавно формат PNG (Portable Network Graphics) реализует более эффективное, чем GIF, сжатие без потерь, но при этом может хранить не только графику с фиксированной палитрой, но и полноцветные изобра­жения с тремя байтами на пиксел. Этот формат имеет и множество других преимуществ, благодаря которым он, вероятно, вытеснит GIF сразу же, как только его поддержка появится в распространенных графических броузерах.

Как не надо делать фон

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

260

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

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

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

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

261

материальных фонов есть и более глубоко лежащие при­чины.

Как писать alt-тексты

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

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

36

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

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

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

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

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

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

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

37

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

Как учиться дизайну

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

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

76

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

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

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

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

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

104

Рис. 19

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

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

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

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

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

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

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

105

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

Как выбрать дизайнера

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

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

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

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

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

9

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

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

Карты на стол

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

Противопоставление светло-оливковых надписей, набран­ных крупным жирным рубленым (Arial Black), блокам черного мелкого курсива шрифта с засечками (Monotype Garamond Italic, тот же самый, что и в логотипе), повторя­ясь четыре раза справа от основного визуала-фотографии, задает ритм чередования фрагментов текста и вводит два основных шрифта и два основных цвета, которые будут использоваться в заголовках и навигации по всему сайту. (Светлое начертание шрифта Frutiger, которым набрана над­пись «Dmitry Kirsanov Studio» на сплэш-странице, оказалось неустойчивым в отрыве от логотипа, поэтому на внутренних страницах сайта оно используется только в «колонтиту­ле» вверху каждой страницы и в строке копирайта справа внизу — т. е. в непосредственной близости от элементов, построенных на основе логотипа и с его цветами.)

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

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

312

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

• Глаз — «we are» — «portfolio»: «Смотрите, кто мы такие * и что мы можем делать».

• Часы — «offering» — «interested?»: «Если вы заинтересо­ваны, не тратьте время, напишите нам, чтобы обсудить наши предложения».

• Инструменты — «specializing» — «classes»: «Учитесь поль­зоваться дизайнерскими инструментами».

• Игрушечный самолет — «integrating» — «dmitry»: «По­знакомьтесь с автором и с его творчеством в разных жанрах».

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

• Одна сплошная светлая горизонтальная полоса вверху страницы (под «Dmitry Kirsanov Studio») уравновеши­вается тремя пунктирными параллельными полосами в навигационной панели внизу.

• Зона вытянутых по вертикали градиентов вверху страни­цы сменяется доминированием горизонтальных градиен­тов в центре и внизу.

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

Кегль

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

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

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

139

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

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

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

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

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

140

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

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

Кларендон

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

131

Самые известные шрифты этого типа — гарнитуры Школь­ная (рис. 33), Академическая, Bookman.

Кодировки текста

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

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

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

15

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

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

Контраст

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

160

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

Контраст — это продолжение единства дру­гими средствами

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

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

Конверсия

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

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

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

• все элементы должны  иметь открывающий  и  закры­вающий  тег.   Это  относится  не  только  к  элементам с факультативными тегами (такими как упоминавшийся выше элемент HTML), но и к пустым элементам, которые в HTML имеют только открывающий тег. Например, тег IMG придется записывать так: <IMG alt="" src="e.gif"></IMG> XML также допускает особую сокращенную запись для пустых элементов: <IMG alt="" src="e.gif"/>

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

52

Коренные шрифты

Фирма Microsoft решила начать с малого и опубликовала небольшой набор бесплатных шрифтов, оптимизированных для низкого экранного раз­решения и предназначенных специально для использова­ния на веб-страницах, без ложной скромности назвав их «Core Fonts for the Web». Поставляемые только в формате TrueType (т. е. пригодные для использования в Windows и на Macintosh), шрифты эти распространяются вместе с броузером MSIE; их можно также скачать и с сервера Microsoft.

Шрифты Microsoft достаточно распространены среди интер­нетовской аудитории для того, чтобы имело смысл указывать их в качестве первого выбора в FONT face и font-family. Особенно популярен рубленый шрифт Verdana, который, на случай его отсутствия, можно подстраховать приведенным выше стандартным списком рубленых шрифтов. В за­головках «газетного» стиля неплохо смотрится суженный рубленый шрифт Impact.

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

221

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

Кривые Безье

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

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

Рис. 15

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

100

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

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

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

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

98

Рис. 14

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

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

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

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

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

99

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

Логотип

Простая и наглядная система отношений делает логотип идеальным пособием для изучения закономерностей дизай­на. Однако начну я свой рассказ о www.kirsanov.com  с создания логотипа не только по этой причине (и даже не потому, что логотип — первое, что посетитель видит на

этом сайте). Дело в том, что, как и многие другие, сайт этот почти целиком вырос, как из зародыша, из своего логотипа.

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

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

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

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

306

не вычурный шрифт и отсутствие искажений однозначно засчитываются этому знаку в плюс.

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

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

За основу я взял шрифт Monotype Garamond Italic — один из лучших образцов поздней классической антиквы. Буква «d» из этого шрифта не потребовала почти никаких изме­нений; я лишь увеличил ее наклон и немного растянул по горизонтали. Кроме того, я удлинил и изменил форму ее за­сечек, чтобы лучше приспособить ее к эффекту «сплетенных букв».



(а)



(б)

DMITRY      KIRSANOV      STUDIO

Рис. 77 Генезис  логотипа

www.kirsanov.com

307



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

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



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

317



Рис. 85

Пример подгонки графики логотипа под харак­тер шрифта; в увеличении можно увидеть, что торцы де­талей графики вогнуты так же, как и концы штрихов букв

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

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

ЛОГОТИПЫ

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

265

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

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

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

266

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

Маятник гуманизма

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

Рис. 33

Гарнитура Школь­ная (New Century Schoolbook) — типичный шрифт типа Kлaрендон

Рис. 34

Шрифт Футура (Futura) оказал сильнейшее вли­яние на шрифтовое искусство XX века

132

Рис. 35

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

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

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

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

133

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

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

Стоит отметить, что создатель шрифта Мета Эрик Шпикерманн ставил перед собой не эстетическую, а прежде всего практическую цель — раз­работать экономичный рубленый шрифт, удобный для чтения больших по объему текстов, набранных мелким кеглем. Однако в отличие от автора Футуры Яна Чихольда, Шпикерманн стремился не к абстрактно пони­маемому геометрическому лаконизму, а к графической выразительности каждой отдельной буквы и к общей комфортности чтения, поддающейся объективному измерению методиками психологов.

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

Материальные текстуры

Пора, пожалуй, сказать несколько

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

121

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

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

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

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

122

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

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

Материалы и инструменты

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

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

78

Мертвая зона

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

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

39

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

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

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

<МЕТА name="keywords"

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

content="A description of web search engines,  spiders,

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

40

в разных грамматических формах. Аннотация (description) используется многими поисковыми системами при выводе результатов поиска; если она отсутствует, страница в спис­ке результатов обычно представлена первыми несколькими словами своего текста.

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

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


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

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

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

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

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

Микропропорции

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

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

Минимальный документ

 Интересно задаться вопросом — каково со­держимое минимального документа, который тем не менее отвечает с фор­мальной точки зрения стандарту HTML? Ответ на этот вопрос содержится в спецификации HTML 4, но он достаточно интересен, чтобы привести его и здесь. Оказывается, обязательными в HTML-документе являются только два тега: TITLE (стр. 199) и !DOCTYPE. Последний тег, о существовании которого очень многие не подозревают, согласно синтаксису SGML не­обходим, чтобы удостоверить, что данный файл — именно HTML (а не, скажем, XML), и указать притом его версию (точнее, тот DTD, которому он соответствует, — стр. 48). Например:

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

Miscellanea

Мне осталось объяснить некоторые незначительные от­личия рассмотренного выше дизайна от того, который вы найдете по адресу www.quiotix.com , и рассказать о неко­торых особенностях реализации сайта.

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

322

Рис. 92

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

(a)

(б)

Рис. 93

QEWS и пет, или Об относительности странных и заглавных

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

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

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

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

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

323

Многомерный контраст

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

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

 

 

Рис. 41

Поиск   максимума одномерного контраста

162

 

 

 

Рис. 42

Поиск   максимума многомерного контраста

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

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

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

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

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

163

Рис. 43

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

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

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



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

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

Модульные технологии

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

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

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

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

68

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

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

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

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

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

69

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


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

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

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

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

70

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


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

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

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

71

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

Модульный HTML

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

44

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

На единицу площади

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

На килограмм живого веса

Последний в списке, но далеко не последний по важности фактор, оказывающий влияние на CTR баннера, — это объем графического файла в байтах: чем дольше загружается баннер, тем большая доля читателей страницы не дождется его полного проявления и, следовательно, будет навсегда потеряна для рекламодателя. На западных сайтах верхней границей размера для баннера формата 468x60 считается 15 Кб, а на некоторых живущих за счет рекламы и потому стремящихся к максимальной эффективности контент-сайтах — даже и 10 Кб. В Рос­сии, где пропускная способность интернетовских каналов заметно ниже, баннеру лучше не выходить за пределы 7—8 Кб. Для этого приходится прибегать к значительно более агрессивной, чем обычно, оптимизации графических файлов (стр. 252), в особенности для баннеров анимированных.

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

287

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

Пример такой сбалансированной рекламной кампании — баннеры на рис. 72 и рис. 73, вместе с рис. 68 составляю­щие серию, одновременно «выпущенную в обращение» фир­мой IBM для рекламы продукта под названием «Conference Tracker». Если баннер на рис. 88 весит без малого 15 Кб, то баннеру с рис. 72 хватает десяти, а объем рис. 73 — всего три с половиной килобайта. Очевидно, последний баннер имеет смысл только в контексте всей серии, так как сам по себе он не слишком интересен.

---

---