Веб-дизайн
Шрифт:
компании. В то же время вариант на рис. 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.
Хотя во время всей работы над логотипом его цветовое решение оставалось неизменным — синяя графика (стр. 274) и черный текст на белом фоне, — схему эта совсем не обязательно было брать за основу цветового решения страницы. Конечно, если логотип использует узнаваемые, «фирменные» цвета компании, цвета эти желательно оставить неизменными и в дизайне сайта. Большинство логотипов, однако, терпимо относятся к перекрашиванию, что позволяет вписывать их в композицию с любыми доминирующими цветами. В данном же случае свежесозданный логотип и не предполагал окончательного цветового решения, так что свобода цветового творчества в дизайне сайта не была ничем ограничена.
Моя всегдашняя любовь к зелено–серым тонам проявилась в первом наброске (рис. 87 на цветной вкладке), однообразном по цвету и почти лишенном графической поддержки для логотипа, который поэтому становится слишком ярко выраженным и, следовательно, неустойчивым центром композиции.
Рис. 86 Эволюция буквы «Q»
Рис. 87 (см. цветную вкладку, стр.336)
Рис. 88 (см. цветную вкладку, стр.336)
Однако уже в этом варианте я нашел использованные впоследствии приемы выделения логотипа: небольшая падающая тень, слабый блик, имитирующий металлическую поверхность, а главное — круглое пятно света с размытыми краями в качестве фона, перекликающееся с округлостью внутренних «рукавов» знака и контрастирующее с его прямоугольным внешним контуром.
Этот прием, очевидно, требует достаточно темного фона страницы, чтобы светлому пятну было на чем выделяться. Соответственно, тексту в логотипе при этом приходится переходить с белого фона на темный, что не только наносит ущерб узнаваемости знака в целом, но и влияет на читабельность текста в нем (тем более что, как я уже упоминал, название фирмы семантически никак не мотивировано). Пытаясь исправить положение, я протянул от логотипа вправо горизонтальную белую полосу с четкими краями, которая по высоте выравнена со сплошным белым ядром фонового пятна. Теперь название фирмы лежит целиком на белом и, более того, подчеркнуто снизу краем белой полосы.
Эту полосу, пересекающую всю страницу, логично было сделать местом расположения кнопок навигации, — придвинув их, как и текст в логотипе, к нижнему краю. Основная же площадь белой полосы должна быть заполнена чем–то другим. Нетрудно сообразить, что заполнитель этот должен использовать размытую фотографическую текстуру, перекликающуюся с размытым пятном слева и не мешающую восприятию текста на кнопках. Сначала, однако, вместо фотографии я взял искусственно размытые крупные бледные буквы названия компании (рис. 88 на цветной вкладке).
В этом варианте я уже отказался от желто–зеленых тонов в пользу нейтрального серого в комбинации с ярким сине–фиолетовым. Благодаря общему довольно однообразному холодному колориту страница напоминала пейзаж зимней ночи с луной логотипа и сполохами северного сияния в навигационной полосе. Таким образом, к этому моменту была уже определена общая структура страницы и найден основной мотив контраста между фотографическими текстурами, бликами и тенями с одной стороны и геометрически простыми четкими линиями — с другой. Интересно также отметить, что если слева резкий контур логотипа окружен размытым пятном, то справа, наоборот, четко очерченный прямоугольник заключает в себе размытые формы.
Теперь передо мной стояли две задачи: расширение и оживление цветового репертуара и поиск более интересных образцов фотографических текстур для заполнения навигационной панели. Обе эти задачи были решены введением интенсивно оранжевой фотографии закатного неба, заполняющей все пространство навигационной полосы в правой ее части и постепенно растворяющейся в белизне при движении влево, чтобы избежать близкого контакта с почти противоположным по цвету логотипом (рис. 89 на цветной вкладке). Комбинация текстур самой фотографии и наложенного на нее градиента прозрачности уравновешивает аналогичные текстуры в левой части, к тому же контрастируя своей облачной аморфностью (стр. 119) как с прямоугольностью подложки, так и с правильной окружностью светового пятна под логотипом.