Веб-дизайн

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

ДИНАМИКА ЯВНАЯ

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

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

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

Так, на сайте www.chess.ibm.com (пример 17) ярко динамичная фигура спортсмена в прыжке задает наклонное направление, поддержанное и зафиксированное наклонной линией горизонта земного шара (то есть все–таки дугой, хотя и большого радиуса, — вспомните, что я писал на стр.94 о нежелательности наклонных прямых). Наклонность эта поставлена в резкий контраст с горизонтальностью заголовка «the technology» и логотипа «Kasparov vs. Deep Blue», буквально зажавших атлета в тиски и дополнительно усиленных текстурой из горизонтальных полос, наложенной на фотографию.

Ветер по Гауссу. Так же как простая гауссовская размывка обнаруживает свое внутреннее родство с фотографией как классом текстур (стр. 119), размывка со смазыванием (англ. motion blur) великолепно имитирует фотографии движущихся объектов. Этот эффект можно наводить не только на фотографические изображения, но и, что особенно ценно, на более абстрактные объекты, в обычном состоянии почти никакой динамики не имеющие, — текстовые заголовки, простые геометрические фигуры.

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

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

Особенно часто анимация (как и остальные виды «явной динамики») используется в рекламном дизайне. Чтобы быть эффективной, реклама должна гораздо жестче и неуклоннее, чем любой другой носитель информации, вести читателя от привлекающего внимание вводного элемента, через мотивацию действия, которое он должен совершить, к финальному призыву — номеру телефона в рекламе бумажной или надписи «click here» на баннере (подробнее о дизайне рекламных материалов мы будем говорить на стр.275). Очевидно, что анимация просто незаменима на каждом из этапов этого нелегкого пути: естественный отбор приучил глаз человека обращать мгновенное, инстинктивное внимание на любой движущийся объект (прежде всего, конечно, потому, что он может таить в себе опасность).

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

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

ДИНАМИКА НЕЯВНАЯ

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

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

Если у линии свободен только один конец, а второй привязан к какому–то статичному, устойчивому объекту (будь то текстовая надпись, прямоугольник или что–то другое), возникшая асимметрия концов еще сильнее разгоняет восприятие. Отталкиваясь от «глухого» конца, взгляд наш разбегается и, как электрический заряд с острия, стекает с линии в бесконечность (рис. 45, в). Сделать этот полет еще более неудержимым можно, поставив у свободного конца линии небольшой, не мешающий «съезжанию» динамичный объект — треугольник, наконечник стрелы (рис. 45, г).