Пространственные отношения. Пожалуй, самый рас­пространенный вид нюансов — нюансные выравнивания (см

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

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

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

Цвет

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

Шрифт

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

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

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

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

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

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

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

Преграды и препоны

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

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

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

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

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

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

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

От общего к частному

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

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

Типы сайтов

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

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

Первый шаг

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

Рис. 46

Примерное распре­деление четырех основных ти­пов сайтов на диаграмме «ди­зайн—содержание». Обратите внимание, что по горизонтали и вертикали отложена слож­ность, а никак не качество ди­зайна и содержания соответ­ственно. В противном случае пришлось бы поменять места­ми \ и 1 по горизонтали, а 2 и 3 — по вертикали

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

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

В мире .org

He столь многочисленная, но куда бо­лее интересная разновидность веб-сайтов — сайты неком­мерческие, принадлежащие всевозможным добровольным объединениям, временным проектам, международным или благотворительным организациям. К этой же категории можно отнести и многочисленные страницы учебных за­ведений, университетов и научных центров, официальные сайты некоммерческих программных проектов (например, www.lynx.browser.org),а также организаций вроде ISO (www.iso.ch ) или Консорциума W3 (www.w3.org ).

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

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

Скорей любите нас

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

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

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

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

Как разновидность коммерческих сайтов особенно интерес­ны сайты самих дизайнерских компаний — оплоты стиля, бастионы «высокой моды», creme de la сremе современ­ного веба. Работая над представительством собственной студии, дизайнер решает труднейшую двойную задачу: сайт обязан не только мгновенно завораживать потенциальных заказчиков, но и нравиться собратьям-дизайнерам, отвечать весьма жестким критериям, выработанным современной дизайн-культурой. Вкусы массовой и элитарной аудиторий, их понятия о хорошем и плохом в дизайне различаются весьма значительно; дизайнерам приходится делать не­простой выбор между «попсой» и «высоким искусством», и далеко не всем удается гармонизировать эти два начала. Так или иначе, лучшие сайты профессиональных веб-дизайнеров — бесспорный образец для подражания, и не случайно большинство примеров, собранных в конце моей книги, принадлежат именно к этой категории.

Бесплатный сыр

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

бескорыстным энтузиастам (их, увы, становится все мень­ше), либо фирмам, зарабатывающим на баннерной рекламе (стр. 275).

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

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

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

и привлечения посетителей на свои собственные корпора­тивные сайты.

Устройство сайта

Слово сайт (англ. site) утвердилось в русской интернетовской терминологии срав­нительно недавно. Раньше, в 1995—1996 годах, в том же или примерно том же значении применялись сочетания «стра­ница WWW», «узел WWW» или «WWW-сервер».

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

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

Поиск по сайту: