Веб-дизайн

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

Есть такая «подкорка» и в дизайне моего сайта. Я постарался, однако, ограничить «пир подсознания» графической составляющей дизайна, оставив текст страницы оплотом однозначности. Фотографические визуалы, занимающие в композиции ключевое положение слева от описания компании и сменяющие друг друга в зависимости от положения мыши (рис. 80), были подобраны таким образом, чтобы протянуть смысловые связи между четырьмя фрагментами описательного текста справа и четырьмя разделами навигационной панели внизу.

Итак, вот авторская интерпретация (лишь одна из возможных) главных смысловых связей страницы:

● Глаз — «we are» — «portfolio»: «Смотрите, кто мы такие и что мы можем делать».

● Часы — «offering» — «interested?»: «Если вы заинтересованы, не тратьте время, напишите нам, чтобы обсудить наши предложения».

● Инструменты — «specializing» — «classes»: «Учитесь пользоваться дизайнерскими инструментами».

● Игрушечный самолет — «integrating» — «dmitry»: «Познакомьтесь с автором и с его творчеством в разных жанрах».

Возвращаясь к дизайну, перечислим основные отношения баланса и поддержки, визуально скрепляющие страницу:

● Одна сплошная светлая горизонтальная полоса вверху страницы (под «Dmitry Kirsanov Studio») уравновешивается тремя пунктирными параллельными полосами в навигационной панели внизу.

● Зона вытянутых по вертикали градиентов вверху страницы сменяется доминированием горизонтальных градиентов в центре и внизу.

● Широкая виньетка в самом верху, составленная из элементов логотипа, начинает собой диагональ, сходящую к выполняющей роль «подписи» копии логотипа в правом нижнему углу. Эта «зеленая» диагональ пе–олин зеленый другой направо рссекается с «текстовой» диагональю, протянутой от описания компании в правой половине центральной части к навигационной панели и далее к левому нижнему углу (в котором расположен перевешивающий все другие по информационной насыщенности раздел portfolio и список latest additions).

рис. 80 Четырехчленная структура страницы иллюстрируется четырьмя фотографическими визуалами, сменяющими друг друга «перекатыванием» (стр. 213)

НАВИГАЦИЯ

Все внутренние страницы сайта www.kirsanov.com следуют в своем дизайне общему плану, заданному на main.html. Возьмем для примера страницу с текстовым содержимым (рис. 81). Ее центральная часть разделена по вертикали на два неравной ширины столбца: пустой левый, отмеченный лишь уменьшенной копией фотографии с первой страницы (а именно — изображением часов, так как страница эта принадлежит к разделу «interested?»), и содержащий заголовок и основной текст правый столбец. Заметьте, что текст плотно прижат снизу к заголовку, а заголовок частично надвинут на фотографию — все точно так же, как было на первой странице. В разделе портфолио страницы устроены аналогично за тем исключением, что место визуала–фотографии там занимает «ноготок» (стр. 258) одной из дизайнерских работ.

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

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

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

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

Рис. 81 Текстовая страница Рис. 82 Страница раздела портфолио

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

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

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

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

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

www.quiotix.com

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

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