Текстурирующие эффекты

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

Рис. 76«Большой, но за пять или маленький, но за три»

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

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

Другой источник оптической размытости — быстро дви­жущиеся объекты, представляющиеся человеческому глазу (и объективу фотоаппарата) размытыми вдоль направления движения. Соответственно, фильтры направленной раз­мывки, такие как Motion Blur и Wind в Photoshop, часто применяются для придания динамики статическим объектам и для подчеркивания движения того, что само по себе уже движется (например, элементов анимированных рекламных баннеров). Так, в примере 16 горизонтальное строение страницы подчеркивается горизонтальной же размывкой заголовка «IDEO» вверху, — подразумеваемое движение которого превращается в реальное в момент прокрутки страницы (см. также стр. 168).

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

Эффекту размывки родственны разнообразные искажения, отражающие изображение в кривом зеркале или волную­щейся поверхности воды (в Photoshop к этой категории относятся Ripple, Smear, Spherize, Pinch и др.). Иногда эти виды искажений применяются для создания трехмерных эффектов (например, развевающегося флага), а некоторые из них подразумевают и определенную размывку частей изображения. Чаще всего, однако, эти фильтры дают откро­венно юмористический эффект в применении к легко узна­ваемым объектам (например, к человеческому лицу) и не дают вообще никакого осмысленного эффекта в остальных случаях (если закрутить спиралью и без того бесформенное облако, ничего особенно интересного не получится).

Противоположный эффект дают фильтры, сводящие фо­тографические текстуры к плоским. Одни из них (филь­тры Cutout, Fresco) аппроксимируют исходное изображение областями плоского цвета (похожий эффект дает сохра­нение картинки в формате GIF с малым количеством цветов без диффузии), другие пытаются найти в изображе­нии и сделать видимыми контуры, т. е. достаточно резкие границы между объектами (фильтры Find Edges, Trace Contour). Дизайнерская ценность этого рода преобразова­ний заключается именно в контрасте очевидно фотогра­фического происхождения изображений с их абстрактным, почти геометрическим представлением. По этой же причи­не интересно бывает поэкспериментировать с трассировкой фотографий в векторном редакторе (стр. 100).

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

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

При­ме­ры

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

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

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

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

Www.kirsanov.com

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

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

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

Логотип

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

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

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

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

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

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

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

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

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

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

(а)

(б)

DMITRY KIRSANOV STUDIO

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

www.kirsanov.com

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

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

Цветовая схема

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

Входные цвета

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

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

веб-дизайне категорическим императивом, при прочих рав­ных все же дает определенные преимущества. После ряда проб я остановился на паре, состоящей из яркого желтовато-зеленого (#99ссЗЗ) для «k» и темного насыщенного зеленого (#003300) для «d» (см. стр. 33S).

Нетренированному взгляду, возможно, трудно будет заме­тить, что цвета эти различаются по тоновому компоненту. Поскольку в темных цветах компонент тона менее очевиден для глаза, для темного цвета я выбрал «более зеленый» тон (у этого цвета H = 120, ровно в середине зеленой области спектра). Для яркого же цвета можно было поискать менее очевидный тон, находящийся примерно посередине между зеленым и желтым (Н = 80). Интересно также отметить, что темный цвет имеет максимальную насыщенность (S = 255), тогда как ярко-зеленый, хотя и кажется необычайно «цвет­ным», на самом деле далек от полной насыщенности (S = 191).

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

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

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

мотивов (как вы помните, градиенты вводят принципиально новый тип текстур, стр. 120).

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

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

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

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

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

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

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

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

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

Первая страница

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

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

Рис. 80

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

Карты на стол

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

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

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

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

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

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

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

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

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

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

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

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

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

Навигация

Все внутренние страницы сайта www.kirsanv.com следуют в своем дизайне общему плану, заданному на main.htmi.Возьмем для примера страницу с текстовым содержимым (рис. 81). Ее центральная часть разделена по вертикали на два неравной ширины столбца: пустой левый, отмеченный лишь уменьшенной копией фотогра­фии с первой страницы (а именно — изображением часов,

Рис. 81

Текстовая стра­ница

Рис. 82

Страница раздела портфолио

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

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

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

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

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

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

• элементы линейной навигации используют яркие и кон­трастные цвета логотипа, в отличие от уже привычного светло-оливкового в остальных навигационных ссыл­ках;

• сдвинутый влево логотип-«подпись» выровнен по право­му краю светлой горизонтальной полосы, — тем самым подчеркивая, что в этой точке кончается привычная структура страницы и начинается принципиально новый элемент;

• для перемещения взад и вперед по цепочке предусмо­трены как текстовые кнопки «next»/«prev», так и яркие графические стрелки. Это дублирование информации делает ее более доступной для людей с разными типами восприятия;

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

Www.quiotix.com

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

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

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

Логотип

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

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

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

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

(a) (б) (в)

Рис. 83

Первые три вари­анта — «прощупывание почвы» и выяснение предпочтений за­казчика

(a) (б)

Рис. 84

Попытка укло­ниться в сторону (а) заказ­чиком пресечена, и окончатель­ный вариант (б) почти ничем не отличается от первого на­броска

шрифтами и вариациями формы, чтобы выбрать из них наилучший.

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

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

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

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

Рис. 85

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

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

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

Первая страница

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

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

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

Рис. 86Эволюция буквы «Q»

Рис. 87(см. Цветную вкладку, стр. 336)

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

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

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

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

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

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

Рис. 89

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

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

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

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

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

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

Внутренние страницы

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

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

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

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

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

Рис. 91

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

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

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

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

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

Miscellanea

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

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

Рис. 92

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

(a)

(б)

Рис. 93

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

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

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

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

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

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

Галерея

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

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

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

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