Веб-дизайн - Дмитрий Кирсанов

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

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

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

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

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

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

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

www.quiotix.com

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

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

ЛОГОТИП

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

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

Работу над логотипом я всегда начинаю с посылки заказчику одновременно нескольких (не менее трех) существенно различных вариантов на выбор. Даже если ни один из них не будет безоговорочно принят, комментарии по каждому из вариантов помогают мне лучше понять предпочтения и ожидания клиента. Поэтому первые три варианта логотипа Quiotix (рис. 83) отличались по степени асимметрии композиции, характеру цветового и шрифтового решения.

В данном случае первый же из трех представленных вариантов понравился заказчику своей подчеркнутой асимметрией и непохожестью на известные логотипы других фирм. Кроме того, одобрение вызвало сходство формы графической части этого знака с контурами буквы «Q», начальной буквы имени

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

Рис. 84 Попытка уклониться в сторону (а) заказчиком пресечена, и окончательный вариант (б) почти ничем не отличается от первого наброска

Окрыленный успехом, я начал с того, что заменил шрифт на более простои и вписал фигуру в квадрат вместо прямоугольника (рис. 84, а). Я также изменил наклон фигуры, так чтобы горизонтальные «рукава» прорези (контур которых был в этом варианте максимально сглажен) впадали точно в углы квадрата. Целью всех этих изменений было «переписать логотип набело», сделать его более компактным, логичным и теснее интегрированным.

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

После интенсивных обсуждений и ряда попыток достичь компромисса мы вернулись к варианту, очень мало отличающемуся от исходного (рис. 84, б). Единственным существенным отличием рис. 84, б от рис. 83, а является лучшая координация между текстом и графикой: заметьте, как буква «I» выровнена по центру устья верхнего рукава, а один из двух штрихов буквы «X» лежит на продолжении верхней правой стороны прямоугольника.

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

Рис. 85 Пример подгонки графики логотипа под характер шрифта; в увеличении можно увидеть, что торцы деталей графики вогнуты так же, как и концы штрихов букв

Отдельного абзаца заслуживает история буквы «О». Очертания этой буквы в шрифте Optima (рис. 86, а) не годились для логотипа: хвостик вылезал слишком далеко вниз за нижнюю линию шрифта, что затрудняло вставку надписи в паз фигуры. Моя первая попытка сделать высоту «Q» такой же, как у остальных букв (рис. 86, б), была вдохновлена формой этой буквы в шрифте Erika, который использовался на одном из этапов работы над логотипом (см. рис. 84, а). Этот вариант имел еще и то преимущество, что напоминал своей формой очертания вырезов в графической части знака. К сожалению, в небольших размерах отросток буквы становится трудноразличимым, и «Q» превращается в «О», — а ведь «заумное» название компании, не опирающееся ни на какие известные слова, прочесть и без того непросто. Поэтому в конце концов нам пришлось выбрать не слишком изящный, но стилистически нейтральный и читающийся в любых размерах вариант рис. 86, в. Впоследствии это же начертание буквы «Q» использовалось во всех графических заголовках веб–сайта, также набранных шрифтом Optima.

ПЕРВАЯ СТРАНИЦА

Закончив логотип, я приступил к наброскам первой страницы сайта. Наброски эти, сделанные в векторном графическом редакторе, я поначалу посылал заказчику в виде цельных GIF-файлов. Только после того как дизайн страницы был окончательно согласован, я смог разрезать графические элементы на отдельные оптимизированные GIF-файлы и сверстать их вместе с текстом в HTML.