WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     | 1 | 2 || 4 | 5 |   ...   | 6 |

«Веб-дизайн Автор: Дмитрий Кирсанов Техминимум. ...»

-- [ Страница 3 ] --

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

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

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

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

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

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

ЭЛЕМЕНТЫ ШРИФТОВ Сложность предмета этого раздела заставляя меня, прежде чем переходить к творческим, собственно дизайнерским аспектам работы со шрифтом, начать с небольшого введения, посвященного классификации шрифтов, и разновидностей и используемой при этом терминология. Если вы уже достаточно хорошо знакомы с технической стороной шрифтового дела, можете пропустить эта раздел.

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

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

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

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

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

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

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

Виды начертаний. Из начертаний внутри одной гарнитуры чаще всего используются прямое (англ. roman) и курсивное (italic). Последнее призвано имитировать наклоненный вправо, более округлый и беглый рукописный почерк, сохраняющий тем не менее графические особенности прямого начертания и хорошо сочетающийся с ним. Курсивная разновидность есть у всех текстовых шрифтов с засечками и у большинства рубленых шрифтов, хотя для последних создать близкий по стилю курсивный вариант значительно труднее, и некоторые из рубленых и моноширинных шрифтов употребляют вместо курсива просто слегка перекошенное вправо (англ. oblique) основное начертание (рис. 27). Большинство декоративных шрифтов не имеют курсива вообще.

Рис. 27 Принципы построения курсива у шрифтов с засечками (Таймс), рубленых (Гельветика) и моноширинных (Курьер) Рис. 28 Рубленые шрифты обычно имеют богатый набор вариации насыщенности Вторая важная ось, по которой варьируется начертание шрифта, — это насыщенность (англ. weight), определяемая толщиной штрихов и соотношением площади белого и черного в рисунке букв. Первую ступень увеличения насыщенности иногда называют «bold face» по-английски и «жирный шрифт» по-русски, хотя правильнее называть это начертание полужирным (demi-bold). Этот параметр, в отличие от курсива, наоборот, удобнее менять у рубленых шрифтов, — многие из которых, помимо обычного и полужирного, имеют также светлое (light), жирное и даже сверхжирное (extra bold) начертания (рис. 28). Шрифты с засечками, как правило, ограничиваются обычным и полужирным начертаниями. Декоративные шрифты редко имеют вариации насыщенности.

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

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

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

ШРИФТЫ И ВРЕМЯ Любой шрифт — так же как любая форма и любой цвет — имеет свою тональность, свое настроение, причудливейшим образом налагающееся на смысл набранного этим шрифтом текста, видоизменяющее его, добавляющее неповторимые обертоны. Для многих звучание стихов, впервые прочитанных в детстве, неразрывно связано с тем шрифтом, которым они были набраны;

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

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

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

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

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

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

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

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

для некоторых из них характерен разный наклон у строчных и прописных курсивных букв (например, в Monotype Garamond Italic).

Таймс (Times Roman)— самый известный и самый употребимый из шрифтов переходной антиквы Сейчас шрифты гуманистической антиквы — одни из самых популярных. Они способны передать широчайшую гамму настроений;

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

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

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

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

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

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

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

Рис 32 Гарнитура Бодони;

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

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

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

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

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

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

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

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

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

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

С наибольшей полнотой тенденции гуманизации проявились в шрифте Мета, созданном в 1984 г. (что любопытно, тоже в Германии) и ныне необычайно популярном во всех сферах дизайна, не исключая и веб дизайн (примеры в, 19). Последовательный отказ от дуг окружности и замена их на линии переменной кривизны, суженные по сравнению с другими рублеными шрифтами буквы относительно постоянной ширины, закругленные углы и характерные отгибы вертикальных штрихов — все эти черты придают шрифту необычайно мягкий, ненавязчивый, почти женственный характер (рис. 35). В каком-то смысле Мета — удачный пример гибрида традиционных форм рубленых шрифтов с некоторыми чертами шрифтов с засечками (в частности, отгибы концов штрихов играют ту же роль, что и засечки, улучшая распознаваемость букв). Стоит отметить, что создатель шрифта Мета Эрик Шпикерманн ставил перед собой не эстетическую, а прежде всего практическую цель — разработать экономичный рубленый шрифт, удобный для чтения больших по объему текстов, набранных мелким кеглем. Однако в отличие от автора Футуры Яна Чихольда, Шпикерманн стремился не к абстрактно понимаемому геометрическому лаконизму, а к графической выразительности каждой отдельной буквы и к общей комфортности чтения, поддающейся объективному измерению методиками психологов. Интересно, что благодаря обшей тенденции к гуманизации шрифтового дизайна в последние годы неожиданно современно зазвучали «старые» рубленые, созданные в прошлом веке задолго до эпохи футуризма и потому выглядящие вполне гуманистически (характерный пример — шрифт Гермес, пример 12).

ПОДБОР ШРИФТОВ Разобравшись с типографской терминологией и рассмотрев основные типы шрифтов в исторической пер спективе, самое время познакомиться с принципами подбора и сочетания шрифтов в дизайне. Так же как при поиске цветового решения (стр. 110), главная роль при этом принадлежит началам единства и контраста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В результате на рынке появляется множество шрифтов почти одинаковых по виду, но различающихся названиями. Солидные фирмы обычно ограничиваются приписыванием к «родовому» имени своего названия — так, существуют шрифты ITC Garamond, Adobe Garamond и Monotype Garamond (которые, кстати, различаются довольно сильно, потому что фирмы эти не копировали буквы друг у друга, а самостоятельно рисовали их по образцам французского типографа XVI века Клода Гарамона). Другие фирмы нередко выдумывают для своих шрифтов имена новые, но все же чем-то схожие с оригинальными — так возникают Opus вместо Optima, Freeset вместо Frutiger и даже Borjomi вместо Bodoni.

ПАРАМЕТРЫ НАБОРОВ Итак, шрифты для композиции выбраны. Оставшаяся часть работы не менее ответственна — нужно подобрать кегль шрифта, расстояния между буквами и между строками так, чтобы текст звучал максимально выразительно и лучше всего сочетался с остальными элементами. Основные принципы, определяющие размещение материала на плоскости страницы, мы рассмотрели в другом месте (стр. 84);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвет. О принципах выбора цветов основного текста и фона страницы мы достаточно подробно говорили на стр. 113;

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

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

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

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

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

ТЕКСТ КАК ТЕКСТУРА Сходство этих двух слов не случайно. Текстура, определенная как форма, сложность которой превышает возможности одномоментного восприятия, находит в тексте свое самое яркое воплощение. Если не углубляться сразу же в чтение, а окинуть страницу беглым, «расфокусированным» взглядом, блоки текста предстанут перед вами как формы (стр. 91), заполненные специфической текстурой (стр. 116) серого цвета определенной яркости (стр. 101). (Разумеется, серым этот цвет будет только для черного текста на белом фоне или наоборот.) Понятно, что параметры цвета и текстуры текстовых блоков зависят от выбора шрифта, начертания и всех тех параметров набора, о которых мы только что говорили. Каждый шрифт имеет свою текстуру, свой характерный узор со своим собственным соотношением крупного и мелкого, с доминирующим направлением (вертикальным, горизонтальным, наклонным). Свойства эти обязательно должны учитываться при анализе текстурного решения страницы. Так, текстуру с мелкими четкими деталями не только нельзя использовать как фон для текста мелким кеглем (это очень затруднит чтение), но и лучше не помещать рядом с текстом — маловероятно, чтобы отчетливо различные, но близкие по активности текстуры гармонировали друг с другом (см. также стр. 120).

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

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

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

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

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

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

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

Content is king. Хорошо, скажете вы, но если ничего нельзя, то что же тогда можно? Чем пользоваться для оформления заголовков, иллюстрации, кнопок навигации? Нельзя же просто взять и покидать весь материал на страницу, не задумываясь о красоте?

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

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

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

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

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

Правда, достаточно строго этот принцип соблюдался только в первые годы жизни языка. Впоследствии в HTML было введено множество визуально-ориентированных средств, не имеющих никакого структурного значения и употребляемых исключительно для управления внешним видом документа в графической среде (тег FONT — самый известный пример). Граница между «логической» и «визуальной» эпохами в истории HTML проходит приблизительно между версиями HTML 2.0 и 3.2 (о том, почему не 3.0 и не 3.1, см. стр. 23). В последней на момент написания книги версии 4.0 выделено самодостаточное подмножество структурных тегов (так называемый Strict DTD, стр. 49).

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

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

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

Посмотрите, сколько важных достоинств у академического стиля:

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

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

• «Академические» страницы находятся в наилучшем согласии с духом и буквой официальной спецификация языка HTML. Это позволит вам, не краснея, иметь дело с весьма многочисленной и влиятельной прослойкой HTML-пуристов (стр. 24), а самое главное -обеспечит легкую и безболезненную стыковку с другими технологиями, поддерживаемыми Консорциумом W3 (CSS, XML).

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

Зайдем, к примеру, на сайт норвежского программиста Эрика Наггума (www.naggum.no). Забудем на минуту, что автор не ставил перед собой абсолютно никаких эстетических задач (его приверженность HTML 2. объясняется причинами скорее идеологическими), и попробуем посмотреть на этот сайт именно как на образец дизайна. Мы видим единый, логичный, очень строго выдержанный стиль, в котором положение и оформление каждого элемента легко предсказуемы. Ничто не раздражает, не «цепляет взгляд», информация подается опрятными небольшими порциями, текст звучит негромко и выразительно. Право же, страницы этого сайта производят впечатление чистоты и свежести на человека со вкусом, привыкшего к «среднему уровню» современного веб-дизайна.

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

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

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

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

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

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

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

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

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

Размещение. В размещении элементов принцип единства сводится по преимуществу к выравниванию (стр.

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

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

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

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

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

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

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

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

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

С веками понятие баланса становилось все расплывчатое и неопределеннее;

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

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

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

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

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

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

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

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

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

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

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

Рассмотрим небольшой пример. На сайте books.ru (стр. 330) темно-синяя вертикальная полоса слева вводит сильную асимметрию и нуждается в противовесе. Однако поскольку эта полоса занимает лишь около четверти ширины всей страницы, противовесу этому совсем не обязательно быть таким же тяжелым, как и сама полоса.

Открытое еще Архимедом правило рычага позволяет ограничиться легким горизонтальным разделителем, смещенным к правому краю страницы (рис. 40). Центр равновесия здесь вычисляется совсем не по законам физики;

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

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

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

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

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

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

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

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

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

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

ОДНОМЕРНЫИ КОНТРАСТ Ограничимся для начала одним визуальным аспектом — скажем, размером — и посмотрим, как физически измеримая разница в величине объекте! соотносится с психологически воспринимаемой степенью контраста между ними.

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

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

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

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

МНОГОМЕРНЫЙ КОНТРАСТ Итак, мы видим, что при постепенном углублении различия между объектами по одному из аспектов можно найти некую промежуточную точку, в которой степень субъективного контраста максимальна. Посмотрим теперь, что происходит, когда несходство в одном из аспектов сопровождается различиями в других.

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

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

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

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

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

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

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

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

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

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

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

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

АСПЕКТЫ КОНТРАСТА Давайте теперь разберемся, как ведет себя при контрастировании каждый из визуальных аспектов в отдельности. Большая часть нужных для этого сведений уже приводилась в разделах, посвященных самим этим аспектам, — даже если там не говорилось о контрасте как таковом, знание свойств и привычек цвета, шрифта, текстуры и т. д. позволит вам без труда догадаться о наилучших способах контрастирования этих материалов.

Здесь (как и при поаспектном анализе принципа единства на стр. 154) я буду поэтому сколь возможно краток.

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

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

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

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

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

Цвет. Принципы подбора и контрастирования цветов рассматриваются на стр. 110;

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

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

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

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

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

Динамика.

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

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

Рис. 44 Примерная карта движений восприятия ни странице сайта www.bdaweb.com (пример 13) Хотя законченная композиция не изменяется во времени физическом, она живет сложной жизнью, постепенно проявляется и развивается в психологическом времени воспринимающего. Дизайнер, конечно, не может гарантировать, что взгляды всех, кто будет смотреть на его творение, пройдут по одной и той же траектории, задерживаясь на строго определенное время в строго определенных точках. Но он, во всяком случае, должен учитывать динамику восприятия, должен уметь смотреть на свою работу глазами зрителя — не как на застывшее и неизменное целое, а как на развертывающийся фильм, пусть и длящийся буквально доли секунды, но имеющий свой сюжет, героев и развязку.

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

Дизайнеру полезно составлять для каждой из своих работ «карту течений» наподобие той, что показана на рис.

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

ДИНАМИКА ЯВНАЯ Простейший способ добавить в композицию немного динамичности — воспользоваться изображением какого то реального объекта, которому свойственно движение: автомобиля, бегущего человека, летящего мяча.

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

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

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

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

Так, на сайте www.chess.ibm.com (пример 17) ярко динамичная фигура спортсмена в прыжке задает наклонное направление, поддержанное и зафиксированное наклонной линией горизонта земного шара (то есть все-таки дугой, хотя и большого радиуса, — вспомните, что я писал на стр. 94 о нежелательности наклонных прямых).

Наклонность эта поставлена в резкий контраст с горизонтальностью заголовка «the technology» и логотипа «Kasparov vs. Deep Blue», буквально зажавших атлета в тиски и дополнительно усиленных текстурой из горизонтальных полос, наложенной на фотографию.

Ветер по Гауссу. Так же как простая гауссовская размывка обнаруживает свое внутреннее родство с фотографией как классом текстур (стр. 119), размывка со смазыванием (англ. motion blur) великолепно имитирует фотографии движущихся объектов. Этот эффект можно наводить не только на фотографические изображения, но и, что особенно ценно, на более абстрактные объекты, в обычном состоянии почти никакой динамики не имеющие, — текстовые заголовки, простые геометрические фигуры.

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

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

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

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

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

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

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

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

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

Если у линии свободен только один конец, а второй привязан к какому-то статичному, устойчивому объекту (будь то текстовая надпись, прямоугольник или что-то другое), возникшая асимметрия концов еще сильнее разгоняет восприятие.

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

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

Рис. 45 Развитие движения вдоль горизонтальной прямой Почти все сказанное здесь о линиях справедливо и для любого ряда повторяющихся объектов. Всякое повторение вводит явную или неявную линию расположения своих элементов;

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

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

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

Слово «нюанс» означает «едва заметный оттенок, тонкое различие». Нюансировка не вводит никаких новых принципов или материалов;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ДИЗАЙН ВЕБ-САЙТОВ Познакомившись с теоретическими основами дизайна, мы можем теперь перейти к вопросам более практическим. В этой главе я приглашаю вас применить свежеприобретенные знания к анализу современного веб-сайта как единицы информационного дизайна, к исследованию ролей и взаимозависимостей его элементов, традиций их использования и оформления.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первый шаг. Самая массовая и самая непритязательная категория веб-сайтов — личные страницы (англ.

home pages), по традиции называемые «страницами», хотя многие из них представляют собой полноразмерные сайты.

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

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

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

Pages:     | 1 | 2 || 4 | 5 |   ...   | 6 |



© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.