Первая страница
Относительная важность первой страницы сайта — той самой, URL которой считается адресом всего сайта, — далеко превосходит значение, скажем, титульного листа или даже оглавления в книге. Правильнее сравнить ее с обложкой журнала, завлекающей читателя яркой фотографией, издалека видным названием и крупными заголовками главных статей номера. Как я уже упоминал, очень многие из посетителей вашего сайта не пойдут дальше первой страницы; какие бы побуждения ими при этом ни руководили, вы должны сделать все от вас зависящее, чтобы даже
191
ограниченное одной страницей знакомство с вашим сайтом оставило у них приятные воспоминания. Конечно же, стиль оформления первой страницы должен соответствовать стилю всего сайта и даже, в каком-то смысле, доводить этот стиль до его логического завершения. Так, особенно плотно нагружена первая страница на и без того насыщенных информацией контент-сайтах — здесь и заголовок с логотипом, и краткая аннотация, и ссылки на основные разделы и подразделы (навигационная панель, иногда не одна), и реклама, и список последних новостей и обновлений содержимого. Чтобы разместить все это изобилие материала, нередко применяется верстка текста в несколько колонок и даже «резиновый» каркас страницы (стр. 197).
Первая страница корпоративного сайта, конечно, тоже может содержать последние новости (или, по крайней мере, ссылки на них). Вспомним, однако, что главная цель такого сайта — создание образа фирмы. Чтобы решить эту задачу уже на первой странице, корпоративный сайт чаще всего пользуется большой, яркой, тщательно подобранной фотографией или рисованной графикой, метафорически иллюстрирующей деятельность фирмы, работу ее главного продукта или важнейшую из последних новостей. Как и фотографии на журнальных обложках, это изображение-визуал (стр. 288) становится центром композиции, самой активной ее частью.
Сайты веб-дизайнеров — особый подвид корпоративных сайтов — обычно весьма немногословны: авторы справедливо считают, что их дизайн должен говорить сам за себя. И опять-таки, эта черта дизайнерского сайта доводится до абсурда на его первой странице, — которая обычно не содержит вообще никакого текста, кроме названия фирмы и надписей на кнопках навигации (если же текст и есть, то чаще всего он нарочито загадочен, многозначителен и ни в коем случае не прямолинейно-рекламен). Вместо текста основное пространство страницы либо заполнено тщательно подготовленным, «ударным» визуалом или логотипом фирмы, либо просто оставлено пустым. Вспомним, что говорилось о роли пустого и заполненного пространства в дизайне на стр. 89; для дизайнерских сайтов всегда характерно активное использование пустоты, подчеркивающей их эстетский, антипрагматический, «не от мира сего» стиль.
Пытаясь исправить положение, я протянул от логотипа вправо горизонтальную белую полосу с четкими краями, которая по высоте выравнена со сплошным белым ядром фонового пятна. Теперь название фирмы лежит целиком на белом и, более того, подчеркнуто снизу краем белой полосы.
Эту полосу, пересекающую всю страницу, логично было сделать местом расположения кнопок навигации, — придвинув их, как и текст в логотипе, к нижнему краю. Основная же площадь белой полосы должна быть заполнена чем-то другим. Нетрудно сообразить, что заполнитель этот должен использовать размытую фотографическую текстуру, перекликающуюся с размытым пятном слева и не мешающую восприятию текста на кнопках. Сначала, однако, вместо фотографии я взял искусственно размытые крупные бледные буквы названия компании (рис. 88 на цветной вкладке).
В этом варианте я уже отказался от желто-зеленых тонов в пользу нейтрального серого в комбинации с ярким сине-фиолетовым. Благодаря общему довольно однообразному холодному колориту страница напоминала пейзаж зимней ночи с луной логотипа и сполохами северного сияния в навигационной полосе. Таким образом, к этому моменту была уже определена общая структура страницы и найден основной мотив контраста между фотографическими текстурами, бликами и тенями с одной стороны и геометрически простыми четкими линиями — с другой. Интересно также отметить, что если слева резкий контур логотипа окружен размытым пятном, то справа, наоборот, четко очерченный прямоугольник заключает в себе размытые формы.
Теперь передо мной стояли две задачи: расширение и оживление цветового репертуара и поиск более интересных образцов фотографических текстур для заполнения
319
Рис. 89
(см. цветную вкладку, стр. 336)
навигационной панели. Обе эти задачи были решены введением интенсивно оранжевой фотографии закатного неба, заполняющей все пространство навигационной полосы в правой ее части и постепенно растворяющейся в белизне при движении влево, чтобы избежать близкого контакта с почти противоположным по цвету логотипом (рис. 89 на цветной вкладке).
Комбинация текстур самой фотографии и наложенного на нее градиента прозрачности уравновешивает аналогичные текстуры в левой части, к тому же контрастируя своей облачной аморфностью (стр. 119) как с прямоугольностью подложки, так и с правильной окружностью светового пятна под логотипом.
Из незаметных на первый взгляд нюансов стоит отметить просвечивающее кое-где между желтыми облаками темно-синее небо, чей цвет перекликается с цветом логотипа. В нижней, более узкой панели с адресом и копирайтом использован другой фрагмент этой же фотографии, почти не содержащий синего.
Как видите, выбранная фотография легко вписывается в композицию, связываясь с ней множеством прочных связей. Ее достоинства с запасом перевешивают единственный недостаток — определенную клишированность самой «облачной» темы, очень часто встречающейся в современном компьютерном дизайне (достаточно вспомнить «сплэш-страницу» загрузки Windows). Во всяком случае, в моем дизайне нет и следа самой распространенной ошибки — «недослучайности», назойливого повторения аморфного узора на большой площади (стр. 259).
Чтобы подчеркнуть переход от белого фона, на который падает тень от логотипа и который поэтому кажется лежащим в плоскости страницы, к принципиально иной по своей роли фотографии, я «приподнял» правую часть навигационной панели, подстелив под нее небольшую плавно расширяющуюся слева направо тень. На этом же этапе был окончательно выбран шрифт для кнопок навигации и остальных текстов в графических вставках — тот же самый шрифт Optima, что и в логотипе, но набираемый только строчными буквами. В текстовой части страницы оранжевый цвет неба естественным образом выделил ссылки, маркеры элементов списка (маленькие прямоугольники) и заголовки.
В целом первая страница была уже почти закончена, хотя некоторые важные изменения были все же внесены в нее на этапе работы над дизайном внутренних страниц.
320
