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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ВНУТРЕННИЕ СТРАНИЦЫ

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

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

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

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

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