Веб-дизайн - Дмитрий Кирсанов

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

Гораздо сложнее было подобрать подходящую букву «k». В Monotype Garamond эта буква, с петлей и кокетливым завитком, совершенно выбивалась из того стиля, к которому я стремился (рис. 77, я), не говоря уж о ее гораздо большем, чем у «d», наклоне (в готовом логотипе обе буквы наклонены на среднее арифметическое углов «d» и «k» в этом шрифте). После ряда безуспешных попыток я вынужден был срезать боковые штрихи у буквы «k» из шрифта Times Roman Italic (на рисунке справа) и пересадить их на ствол той же буквы в Monotype Garamond. Разумеется, прививка элементов переходного шрифта (стр. 129) на гуманистическую основу потребовала значительной гуманизации этих заимствований. Как видно на рис. 77, острые углы подверглись сглаживанию, прямые линии расслабились и немного обвисли, — так что контур буквы стал достаточно мягким, обтекаемым и живым.

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

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

ЦВЕТОВАЯ СХЕМА

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

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

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

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

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

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

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

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

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

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

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

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

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

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