Чтение онлайн

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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