Веб-дизайн

Первая страница


Относительная важность первой страницы сай­та — той самой, URL которой считается адресом всего сайта, — далеко превосходит значение, скажем, титульного листа или даже оглавления в книге. Правильнее сравнить ее с обложкой журнала, завлекающей читателя яркой фотогра­фией, издалека видным названием и крупными заголовками главных статей номера. Как я уже упоминал, очень многие из посетителей вашего сайта не пойдут дальше первой страницы; какие бы побуждения ими при этом ни руково­дили, вы должны сделать все от вас зависящее, чтобы даже

191

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

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

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


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

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

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

Теперь передо мной стояли две задачи: расширение и ожи­вление цветового репертуара и поиск более интерес­ных образцов фотографических текстур для заполнения

319

Рис. 89

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

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


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

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

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

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

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

320


Содержание раздела