WWW.DISSERS.RU

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

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

Pages:     | 1 || 3 | 4 |   ...   | 6 |

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

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

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

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

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

МОДУЛЬНЫЕ ТЕХНОЛОГИИ.

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

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

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

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

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

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

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

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

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

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

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

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

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

И все же в целом Java-апплеты можно считать достаточно безопасной технологией.

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

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

• Одно время Java-апплетам пытались составить конкуренцию так называемые «компоненты ActiveX» — технология фирмы Microsoft, ограниченная только броузером Internet Explorer и только платформой Windows.

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

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

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

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

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

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

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

так или иначе, сервер отсылает броузеру только «сухой остаток» HTML после выполнения всех команд ASP. С практической точки зрения главным достоинством ASP являются развитые средства доступа к базам данных, многие из которых, как и веб-сервер Microsoft, работают на платформе Windows NT.

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

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

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

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

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

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

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

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

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

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

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

mailto:dmitry@kirsanow.com.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

РАЗМЕР.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

холодные цвета, наоборот, отдаляют и уменьшают объект.

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

Рис. 5 В (а) левый прямоугольник кажется уже, чем правый, хотя в (б), наоборот, левый квадрат выглядит шире правого. На самом деле ширина всех четырех фигур одинакова Рис. 6 Золотое сечение (sectio aureu): b так относится к а, как а к сумме а + b (при этом b = 0,618а). С древних времен золотое сечение считается самой совершенной, гар моничной, уравновешенной про порцией Простые, геометрические текстуры (стр. 118) обычно в более сильной степени обладают эффектом «раздувания» форм, что объясняется их большей регулярностью, предсказуемостью и оттого более высокой визуальной плотностью. Максимума этот эффект достигает у геометрических узоров с элементом некоторой средней величины, тогда как у слишком мелких или слишком крупных узоров он невелик.

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

5, б).

ПРОПОРЦИИ.

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

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

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

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

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

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

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

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

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

см. также стр. 160).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нам осталось рассмотреть, чем определяется соотношение заполненного и пустого пространства при различных видах размещения. Вспомним понятие компактности формы, введенное на стр. 79;

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

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

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

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

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

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

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

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

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

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

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

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

Понятие формы тесно связано с понятием размера;

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

Классифицировать бесконечное множество форм можно, понятно, бесконечным множеством способов;

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

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

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

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

ПРЯМЫЕ.

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

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

В дизайне прямые линии выполняют две противоположные функции: разделителей и соединителей.

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

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

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

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

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

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

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

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

Рис. 11 Вспомогательные построения из прямых и дуг как художественный прием Рис. 12 Стремление построить устойчивую композицию на основе наклонных линий завело дизайнера слишком далеко (http://www.yandex.ru/) Другой источник «линейной темы» в дизайне — вспомогательные прямые на чертежах и набросках (аналогичные им вспомогательные горизонтали и вертикали есть и в векторных графических редакторах). Желая стилизовать свою графику (чаще всего шрифтовой заголовок) под «набросок», дизайнер проводит несколько неярких горизонтальных, вертикальных линий или дуг окружности через узловые точки контура (рис. 11).

Разновидностью этого приема является визуализация базовой линии {baseline} текста — попросту говоря, горизонтальное подчеркивание, вплотную прижатое к буквам (пример 4), визуально родственное заголовкам с тесно прилегающими друг к другу строками (стр. 143).

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

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

ПРЯМОУГОЛЬНИКИ.

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

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

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

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

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

226).

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

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

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

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

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

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

КРУГИ И ЗАКРУГЛЕНИЯ.

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

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

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

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

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

«классическая» симметрия теперь воспринимается скорее как нечто ограничивающее, стесняющее.

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

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

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

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

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

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

круг в нем обнаруживает все таки присущее ему горизонтально-вертикальное начало, а прямоугольник избавляется от назойливой угловатости, цепляющей взгляд (рис. 14). Правда, прием этот достаточно требователен — стоит ввести в композицию один закругленный прямоугольник, как он почти наверняка потребует скругления всех остальных углов, что заметно изменит общий стиль композиции (пример 12). Хороший пример целостного корпоративного стиля, основанного на закруглениях по дугам окружностей, можно найти на сайте http://www.macromedia.com/.

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

открытием нашего века КРИВЫЕ БЕЗЬЕ Окружностям родственны (и геометрически, и визуально) другие математические объекты — кривые Безье третьего порядка (названные так в честь француза Пьера Безье, который в 60-е годы впервые стал применять их в дизайне;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Иными словами, профессионал почти всегда думает о цвете в терминах HSV.

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

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

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

Поэтому практика работы с системой HSV так важна для овладения компьютерным цветом.

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

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

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

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

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

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

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

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

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

например, желтый явно светлее синего, а голубой — красного.

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

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

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

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

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

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

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

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

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

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

Ну и что?

Разумеется, все эти сравнения (так же как и выбор цветов, на которых я останавливался) крайне субъективны.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как же выбрать хорошее сочетание контрастных цветов? Чем вообще определяется контраст между цветами?

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

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

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

Рис.20 см. вкладку, стр Рис. 21 вкладку, стр.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Необходимую долю разнообразия такому цветовому ландшафту может придать более насыщенный или контрастный по тону цвет ссылок. Вообще, для эффективного опознавания ссылки обязаны иметь более заметный цвет, чем основной текст, хотя достичь этой заметности можно разными способами — контрастом тона, увеличением насыщенности, повышением или понижением яркости. Посещенные (visited) ссылки должны сигнализировать о своей «отработанности» цветом менее насыщенным или просто более близким к цвету основного текста. Принятая в графических броузерах раскраска ссылок по умолчанию — синий цвет для «свежих» ссылок и фиолетовый для «использованных» — достигает нужного результата и без каких бы то ни было вариаций насыщенности, пользуясь тем, что фиолетовый цвет обычно производит впечатление смешанности, «нечистоты» и потому «неизначальности». Сайт www.chess.tbm.com (пример 17) являет собой великолепный образец сбалансированного цветового дизайна. Его светлый, но притом достаточно насыщенный фоновый цвет (#СССС99) выразителен сам по себе и не требует поддержки со стороны текста, для которого выбран слегка смягченный черный цвет (#333333). Для ссылок использован контрастный, но равным образом смягченный синий (#0033FF). Остальные графические элементы поддерживают эту разнообразную, но абсолютно лишенную пестроты цветовую гамму.

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

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

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

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

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

Текстуры.

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

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

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

Тем самым понятие текстуры смыкается с понятием формы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шрифт и текст.

Pages:     | 1 || 3 | 4 |   ...   | 6 |



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

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