Дизайн для Web: секреты мастерства

Обзор трех великолепных узлов и приемов дизайна, вдохнувших в них жизнь.

Первые Web-дизайнеры, совсем как художники палеолита, творившие свои «полотна» на стенах пещеры Ласко, обладали относительно ограниченным набором инструментов. Дизайнеры расписывали стены «пещер» Internet, призывая для построения узлов всю свою изобретательность, чтобы показывать информацию привлекательным для глаз посетителей графическим способом.

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

Для примера возьмем Карнеги-холл. Эта сцена, которой уже более ста лет, считается одной из самых престижных для классических и джазовых музыкантов. Как же передать дух этого зала в самой современной информационной среде?

Питер Зейдлер, разрабатывавший узел Web Карнеги-холла (http://www.carnegiehall.com), выражает эти мысли более лаконично: «Как передать обширное пространство зала, теплоту его архитектурных деталей, дух и традиции Карнеги-холла в этой холодной, кремниевой, двоичной среде?»

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

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

Текст заголовка «Welcome to Carnegie Hall» также выполнен в теплом оранжевом цвете, контрастирующем с синим фоном. Здесь проявился талант Зейдлера — еще немного, и такое сочетание цветов резало бы глаз, но этого не произошло. Рукописная буква «C», которая, казалось бы, обречена стать «теплым» элементом, вместо этого «вморожена» в фон, а теплый заголовок набран шрифтом Futura, олицетворяющим холодную современность.

В действительности, если заголовок рассматривать отдельно от фона, его элементы теряют свою теплоту и элегантность (рис. E). Особенно бросаются в глаза оранжевые буквы, как будто сошедшие с плаката, подготовленного футбольными болельщиками, типа «Вперед, тигры Карнеги!». Это абсолютная антитеза утонченности Карнеги-холла.

Но когда заголовок размещается на домашней странице с фоном, он преображается. Шрифт Futura становится похожим на спагетти: он вбирает в себя аромат «соуса», которым его «полили». «Соус» здесь — это теплая элегантность, и в него погружена каждая буква заголовка. Шрифт Futura, несмотря на то, что он был разработан Полем Реннером в конце 20-х годов, придает странице современный вид, при этом не принося в жертву ни одно из традиционных достижений превосходных образцов архитектуры 19-го века.

Элементы страниц основного меню, хотя они совершенно иные и размещены в других местах, по общей композиции совпадают со стилем домашней страницы: меню помещено на фоне темно-синего изображения с рукописной буквой (в данном случае «M»), а ниже, с небольшим отступом от центра, расположена фотография. Текст набран шрифтом Futura с выделениями оранжевым цветом. Все элементы навигации по узлу реализованы в виде изображений GIF с текстом.

Некоторые из внутренних страниц узла выполнены по той же формуле, но с различными вариациями на общую тему. Страница-вступление (Intro) к разделу, посвященному классической музыке (Classics), начинается с колонки повествовательного текста, наложенного для удобства чтения на светло-синий фон. Страницы форматированы с использованием фреймов, что позволяет прокручивать длинные текстовые статьи или изменять содержимое фрейма без воздействия на другие страничные элементы. Во фрейм со светло-голубым фоном помещен только текст HTML, но не графика.

На других страницах также повторяются некоторые общие элементы, поэтому новые темы гармонично вписываются в общую концепцию дизайна узла. Для страницы 98-99 Season вместо холодного синего используется терракотовый цвет, доминирующий в зале. Знакомые шрифтовые решения — рукописная буква «S», набранные шрифтом Futura заголовки — и фотографии отличного качества четко связывают этот раздел со всеми предшествующими страницами.

Что касается содержания, то тщательная проработка дизайнером изобразительной стороны, передающей в электронной сети Web атмосферу Карнеги-холла, помогает ориентироваться среди всего богатства размещенной на страницах узла информации. На странице Concert собрана вся информация о концертах, а также размещена ссылка на форму заказа билетов. Впрочем, эта страница также украшена фотографией зала и графическими заголовками, набранными Futura. Элементы навигации расположены в верхней части страницы, что позволяет посетителям не потеряться во время прогулок по узлу.

По мере загрузки страницы Concerts становится заметна построенная на фреймах структура — слева появляется фрейм с черным фоном, на который выводится текст HTML (рис. F). Изображение, заполняющее фрейм (рис. G), включает в себя все элементы общего стиля, впервые появившегося на домашней странице, при этом оно как бы отделено от остальной части страницы. Но после окончательной загрузки фреймов без контуров в окно браузера цвета фона и элементы переднего плана сливаются и создают на странице непрерывный общий задний план (рис. H).

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

Как передать индивидуальность

Задача воплощения в цифровой информационной среде сущности такого знаменитого концертного зала, как Карнеги-холл, стала настоящим испытанием для Питера Зейдлера и его коллег-дизайнеров из Razorfish, проверкой уровня их мастерства и способности претворить свои ощущения в реальность. Но как быть с компанией, образ которой совсем не так очевиден, или даже кажется совершенно аморфным? Что поможет выразить ее индивидуальность в Web?

Если попросить кого-нибудь четко передать понятие рынка «колпачков и крышечек», то однозначного ответа получить не удастся. Именно такая проблема встала перед SamataMason Design, когда этой студии дизайна заказали создание узла Web для компании AptarGroup, специализирующейся на изготовлении колпачков и крышечек для аэрозолей и известной только специалистам в данной области. Проблема заключалась не только в представлении, но и в отсутствии индивидуальности, которую следовало передать.

В SamataMason использовали анимированную последовательность из 19 GIF-изображений (рис. I — O), которая должна была познакомить посетителей узла с удивительным миром аэрозольных систем (http://www.aptar.com). Еще до того, как зритель увидит ключевые фразы, эти «обнаженные» изображения различных видов крышечек и разбрызгивателей дают точное представление о том, с чем придется иметь дело дальше. Высококонтрастные черно-белые макрофотографии в сочетании с простой типографикой представляют AptarGroup как компетентного, высокотехнологичного лидера на этом рынке.

Анимированная последовательность «приводит» посетителя на домашнюю страницу AptarGroup. Все элементы страницы, изображения и текст черно-белые, а ярко-зеленым цветом в меню навигации выделяется текущая страница и написанные на JavaScript ролловерные ссылки (рис. P). Домашняя страница состоит из GIF-изображений, объединенных в таблицу. Панель навигации из кнопок разделена на секции, которые совмещаются друг с другом, как ячейки таблицы без обрамления. Эту страницу можно было бы реализовать, как карту изображений, но в виде набора изображений и ссылок она быстрее загружается и лучше работает, кроме того, табличная организация облегчает реализацию ролловеров JavaScript.

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

О важности продвижения торговой марки для успешной продажи продукта слышали все. На узле Web в качестве продукта выступает сама компания. Преимуществом AptarGroup является ее направленность на четко определенный сектор рынка упаковки, и узел Web создает впечатление о компании, как о лидере, с которым стоит иметь дело. Вот почему индивидуальность узла определена так же четко, как и ниша продуктов AptarGroup.

Об этом на странице Welcome сказано все: «...очень может быть, что не менее десяти наших продуктов уже сейчас находятся в вашем доме и за последние сутки вы уже использовали некоторые из них... Наш успех основывается на сочетании уникальных новейших технологий изготовления продуктов, отличном качестве и превосходном обслуживании наших заказчиков». Достаточно перевести это в HTML — и получится готовый узел Web.

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

Даже те страницы, на которых нет ни одного изображения, несут в себе черты индивидуальности узла. Текст так же прост и убедителен, как и четкие фотографии. Страница-вступление секции, где рассказывается о компании, состоит из абзаца текста в GIF-представлении и нижнего навигационного элемента. Образ уже вошел в сознание посетителя, а индивидуальность подчеркивается текстом.

Тесная интеграция

Нужен захватывающий образ? Как вам понравится припавший к рулю велосипедист, рассекающий воздух на фоне первозданной природы? Нужна яркая индивидуальность? Компания Specialized изобрела горный велосипед, а ее название и логотип призваны символизировать для любителей катания и гонок на велосипедах по горам всего мира технологическое лидерство и революционный дизайн. Теперь же Adjacency, одна из наиболее уважаемых групп дизайна для Web, сумела передать дух компании Specialized на «World Ride Web»*. Итак, садитесь в седло и выезжайте на прогулку.

Четкий образ, ясная типографика и совершенный велосипед, устремляющийся в чащу (рис. R), — все это помещено в одну большую таблицу без обрамления на домашней странице (http://www.specialized.com). Логотип, фотография, заголовки и ссылки — все они собраны в единую композицию. Заголовочный текст, набранный строчными буквами шрифтом Helvetica Black и чаще всего белый на черном фоне — смотрится довольно броско. Страница выглядит просто безукоризненно.

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

набраны шрифтами без засечек (Geneva, Arial и Helvetica). Благодаря общему цветовому решению и типографике заголовки и текст не вступают друг с другом в борьбу за зрительское внимание, как это нередко происходит на других узлах.

На узле реализована простая и понятная организационная схема, где текстовые заголовки для иерархических ссылок выделяются при помощи ролловеров JavaScript. Если спуститься по иерархии на один слой, то можно увидеть ссылки, помещенные в панель навигации, в свою очередь выровненную вдоль верхнего края каждой страницы. Они представляют собой такой же белый текст на черном фоне, как и на домашней странице, с красным логотипом Specialized, обозначающим ссылку на домашнюю страницу. Иерархические ссылки второго уровня интегрированы в текстовые блоки (рис. S).

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

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

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

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

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

Конечно, обычная последовательность изображений и текста не может долго удерживать внимание посетителя, поэтому все было реализовано на высшем уровне. Изобразительный ряд каждой полосы вызывает чувство постоянного движения, типографика выразительна, цвета яркие, а язык живой. Узел успешно выполняет возложенную на него миссию благодаря тому, что разрабатывался и поддерживается с учетом запросов предполагаемых посетителей. Компания Specialized имеет четкое представление не только о своем персонале, но и о своих заказчиках. И студия Adjacency (среди работников которой, вероятно, тоже есть несколько покупателей продуктов Specialized) нашла способы собрать вместе всех фанатов Specialized на Web. Прогулка по этому узлу не оставила равнодушным и автора, которому захотелось выйти из дома, купить себе Stumpjumper и поскорее добраться до горных троп.

Клей Андрес — бывший внештатный редактор журнала Macweek — имеет более чем десятилетний опыт работы в качестве автора, дизайнера и специалиста в области допечатной подготовки. Среди его книг — Hands-On Photoshop 4, Hands-On Illustrator 7, Illustrator Illuminated (Peachpit Press) и Drag & Drop Design (Adobe Press).

Дизайнер Питер Зейдлер сумел передать элегантность Карнеги-холла на домашней странице (рис. A), где с прохладным синим фоном контрастирует теплое оранжевое сияние анимации GIF, состоящей из трех фотографий сцены и мест для слушателей (рис. B, C, D). Загол

Страница Concerts узла Карнеги-холла построена на основе фреймов, причем во время загрузки страницы в браузер вначале отображается простое черно-серое окно с текстом (рис. F), которое затем дополняется цветной фотографией зала (рис. G) и завершается инфор

Чтобы познакомить посетителей с производимыми компанией AptarGroup крышечками и колпачками, дизайнеры SamataMason использовали последовательную GIF-анимацию их фотографий и текст, которые предваряют домашнюю страницу компании. С помощью этой простой анима

Ярко-зеленые ролловеры контрастируют с черно-белой домашней страницей AptarGroup (рис. P); фотография сопла распылителя дает представление об индивидуальности компании. Карта узла (рис. Q) подчеркивает простую иерархию и навигационную систему.

Насыщенный, агрессивный дизайн, разработанный специализирующейся на Web фирмой Adjacency для домашней страницы компании Specialized (рис. R), построен на таблице без обрамления с фотографией, логотипом, заголовками и ссылками. На страницах второго уровня