Навигация

Все внутренние страницы сайта www.kirsanv.com следуют в своем дизайне общему плану, заданному на main.htmi.Возьмем для примера страницу с текстовым содержимым (рис. 81). Ее центральная часть разделена по вертикали на два неравной ширины столбца: пустой левый, отмеченный лишь уменьшенной копией фотогра­фии с первой страницы (а именно — изображением часов,

Рис. 81

Текстовая стра­ница

Рис. 82

Страница раздела портфолио

так как страница эта принадлежит к разделу «interested?»), и содержащий заголовок и основной текст правый стол­бец. Заметьте, что текст плотно прижат снизу к заголовку, а заголовок частично надвинут на фотографию — все точно так же, как было на первой странице. В разделе портфолио страницы устроены аналогично за тем исключением, что ме­сто визуала-фотографии там занимает «ноготок» (стр. 258) одной из дизайнерских работ.

Двенадцать ссылок на первой странице сайта (рис. 79 на цветной вкладке) разделены на четыре тематических группы (это именно группы, а не ветви древовидной системы, так как у этих групп нет «корневых» страниц). Однако информационная важность этих четырех групп неодинакова. По сути, только две левые группы имеют прямое отношение к дизайн-студии; остальные ссылки ведут к разнородным, хотя и связанным с темой сайта материалам, по большей части расположенным вне домена kirsanov.com.

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

Пространство, высвобожденное в правой части навигаци­онной панели, не остается пустым. На текстовых страницах (рис. 81) оно позволяет подтянуть вверх блок подписи с ло­готипом и копирайтом. На страницах портфолио (рис. 82) этот элемент сдвинут еще и влево, а правый конец па­нели занят линейной (стр. 20?) навигационной системой I для перемещения по цепочке страниц в данном разделе портфолио. Как известно, минимум навигации в таких слу­чаях — пара ссылок, ведущих на следующую и предыдущую страницы цепочки. Однако существенно удобнее система нумерованных ссылок, количество которых равно количе­ству страниц, что позволяет перейти с любой страницы цепочки на любую другую.

Линейная навигация встречается в Интернете реже, чем древовидная; кроме того, в данном случае она является «инородным телом», неожиданностью для посетителя сайта, уже ,

успевшего привыкнуть к иерархически-групповой системе. По этой причине я постарался не только сделать линейную навигацию как можно более простой и интуитивно понят­ной, но и подчеркнуть ее особое положение на сайте:

• элементы линейной навигации используют яркие и кон­трастные цвета логотипа, в отличие от уже привычного светло-оливкового в остальных навигационных ссыл­ках;

• сдвинутый влево логотип-«подпись» выровнен по право­му краю светлой горизонтальной полосы, — тем самым подчеркивая, что в этой точке кончается привычная структура страницы и начинается принципиально новый элемент;

• для перемещения взад и вперед по цепочке предусмо­трены как текстовые кнопки «next»/«prev», так и яркие графические стрелки. Это дублирование информации делает ее более доступной для людей с разными типами восприятия;

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