Академический стиль. Подход, при котором оформ­ление документа полностью определяется его структурой, совсем не оригинален

Подход, при котором оформ­ление документа полностью определяется его структурой, совсем не оригинален. Точнее, он именно оригинален в смы­сле английского «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 брались все же не с потолка, и положиться на вкус того, кто их выбирал, во многих случаях проще и надежнее, чем пускаться во все тяжкие самому.

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

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

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

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

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

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

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

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

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

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

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

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

В полный рост

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

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

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

Форма

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

Размещение

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

Цвет

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

Шрифт

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

Текстура

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

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

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

Баланс

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

остаться в памяти поколений, должны были отличаться

совершенно особой строгостью, симметрией и сбалансиро­ванностью частей.

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

Центр масс системы

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 40

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

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

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

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

Контраст

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

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

Не нашли, что искали? Воспользуйтесь поиском: