Веб-дизайн

Нетренированному взгляду, возможно, трудно будет заметить, что цвета эти различаются по тоновому компоненту. Поскольку в темных цветах компонент тона менее очевиден для глаза, для темного цвета я выбрал «более зеленый» тон (у этого цвета Н = 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). Этот цвет используется для ссылок, горизонтальных линеек, заголовков и прочих вспомогательных элементов.

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

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

ПЕРВАЯ СТРАНИЦА

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

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

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

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