Веб-дизайн
Шрифт:
Именно подбор и обработка букв и заняли большую часть времени этого проекта, — хотя результаты этой кропотливой работы, возможно, совсем не бросаются в глаза. Моей целью было не украсить или расцветить буквы логотипа, а наоборот, сделать их по возможности прозрачными для восприятия, убрать малейшие следы вычурности или нарочитости. Иначе говоря, я хотел приблизиться к идеалу очертании гуманистического курсива, — но так, чтобы идеальность его была заметна только вдумчивому взгляду.
За основу я взял шрифт 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).
Нетренированному
Если яркий цвет способен выразительно звучать почти в любых условиях, темному цвету для этого нужна значительная площадь и достаточно темный общий колорит страницы, на фоне которого этот цвет не будет казаться попросту черным. А поскольку принцип экономии запрещает введение новых цветов без необходимости, первым моим действием после раскраски логотипа была заливка фона всей страницы тем же самым темно–зеленым цветом, что и у буквы «d». Чтобы буква эта тем не менее не сливалась с фоном, вполне естественно было подстелить под нее фоновую плашку ярко–зеленого цвета «k». В такой композиции слабая различимость одного из цветов компенсируется большой занимаемой им площадью и наоборот.
Гораздо труднее оказалось выбрать форму плашки под «d». Очевидно, что, чтобы ни одна часть логотипа не потеряла видимости, граница между темным и светлым фоном должна проходить между основными штрихами букв «d» и «k». В то же время эти два наклонных штриха уже вводят концентрированный пучок линий, и добавление к ним еще одной параллельной цветовой границы приведет к недопустимой пестроте в этой области. Чтобы избежать этого, я заменил резкую границу на плавный градиент, выдерживающий требуемое наклонное направление, но не подчеркивающий его какой–либо резкой линией. Это решение также оказалось важным для дизайна всего сайта, так как на других страницах градиентные переходы стали одним из доминирующих мотивов (как вы помните, градиенты вводят принципиально новый тип текстур, стр.120).
Рис. 79(см. цветную вкладку, стр.335)
Остальные границы светлой фоновой области найти было значительно проще. Верх и низ естественно сделать горизонтальными хотя бы для того, чтобы было с чем взаимодействовать наклонному мотиву в логотипе. Слева же, перебрав несколько вариантов, я отказался от какой–либо линии контура вообще, просто дотянув светлую горизонтальную полосу до края окна.
Информационные цвета. Если не считать черный (в названии компании), сплэш–страница ограничена двумя цветами — что, очевидно, является абсолютным минимумом для любой страницы. Поскольку к этому моменту уже было ясно, что белый цвет на сайте использоваться не будет, передо мной встала задача поиска третьего нейтрального цвета, на который бы пришлась основная нагрузка на информационно насыщенных страницах.
Оливковый цвет (#666633), которым залит фон на всем сайте за исключением сплэш–страницы, представляет собой дальнейший сдвиг в область желтого (Н — = 60) и дальнейшее снижение насыщенности (S = 128). Хотя соблазн поискать для фона почти нейтральный, едва зеленоватый серый был велик, я все же решил не разбивать общую цветовую гамму сайта, своей насыщенностью компенсирующую темноватый колорит и узость тонового диапазона.
Однако на первой же странице сайта (www.kirsanov.com/main.html, рис. 79 на цветной вкладке) выяснилось, что цвета логотипа слишком активны и слишком прочно связаны друг с другом, чтобы играть сколько–нибудь заметную роль в композиции. За пределами сплэш–страницы эта цветовая пара годится разве что на роль акцента, украшения, второстепенного декоративного элемента.