Флэш против дизайна

Флэш против дизайна

2.7

Проблема 1.

Перенасыщенность эффектами

Трудно удержаться и не сделать каждое меню выплывающим с разных сторон, а все разделы открывающимися в новом стиле. Фото­графии при наведении мыши должны покачиваться, а прежде чем текст откроется, по нему будут бегать какие-то подозрительные геометричес­кие фигуры. Первый раз это может позабавить. Второй раз это можно показать другу. Третий раз это может начать раздражать; а если на сайт заходишь только за новостями (30-40 Кб), то весь ролик со спецэффек­тами (240 Кб) каждый раз загружать просто обидно.

Это как раз тот случай, когда красота не делает мир лучше. Рабо­тая на эстетику, разработчик забывает о функциональности.

Проблема 2.

Неполная поддержка традиционных интерфейсных элементов

В среде флэш-ролика правая кнопка мыши работает не так, как на остальных сайтах. С ее помощью нельзя скопировать или вставить информацию, сохранить рисунок или сделать другие очевидные вещи. Особенно это ощущается в Opera, где в контекстном меню собрано очень много полезных функций (не удивлюсь, если формат Flash был спроектирован на компьютерах Apple Macintosh, в системах на которых контекстному меню уделяется намного меньше внимания; даже у по­давляющего числа моделей мыши на них по одной кнопке).

Далее, некорректно работает кнопка «Назад». Дело в том, что большинство флэш-дизайнеров делают сайты на основе одного ролика, в который подгружаются другие. Естественно, что при посещении но­вого раздела не загружается новая страница, и история браузера ничем не пополняется: кнопка «Назад» остается неактивной.

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

Проблема 3. Фиксированная верстка

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

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

А теперь зададимся вопросом: нужна ли была эта флэш-заставка. Функция ее — демонстрация природы и домов. Но эта демонстрация должна быть опциональной, а не принудительной. Каждый раз вместо того, чтобы найти нужную информацию, посетитель вынужден терпеть загрузку ролика весом несколько сотен килобайтов, который он уже не­однократно видел. Внимательные, конечно, найдут ссылку «Пропустить заставку», но он светло-синяя на голубом фоне, и заметить ее не так просто. (Кстати, такие ссылки портят внешний вид страницы с роли­ком, но отказаться от них можно только на сайте, который полностью сделан на флэше.) Логичнее было бы сделать так: заставка демонстриру­ется только первый раз, при втором и последующих посещениях сайта сразу загружается основная страница, а ссылка «Просмотреть заставку» убирается совсем: вместо нее в меню появляется ссылка «Демонстраци­онный ролик» или что-то вроде этого.

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

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

И всегда нужно предусматривать варианты загрузки сайта без флэша.

2.8. Графика против дизайна

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

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

106

Графика против дизайна

2.8

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

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

Интерфейсные изображения чаще всего являются ссылка­ми, но не обязательно. Они призваны уменьшить количество текста на веб-странице, функционально заменить некоторые ссылки и разно­образить композицию страницы. В качестве примеров, которые сразу приходят на ум, можно привести стилизованные (или не стилизован­ные, но чаще всего небольшого размера) изображения конверта или почтового ящика к качестве ссылки на электронный адрес, изображе­ния гаечного ключа, гайки или паззла как ссылку на настроечную стра­ницу, изображения пера или карандаша в качестве ссылку на страницу, позволяющую пользователю что-то написать, а также пиктограмму до­мика для ссылки на главную страницу и лупы для ссылки на страницу поиска. Форма и семантика этих изображений уже знакома посетителю по сайтам, которые он посещал прежде, так что сомнений в их предна­значении у него не возникает: в этом основной смысл пиктограмм, или значимых интерфейсных изображений.

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

Дизайн

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

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

Чтобы графика не работала против общего впечатления от веб-страницы, чтобы она не была направлена против дизайна, можно следовать некоторым правилам.

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

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

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

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

108

Графика против дизайна

2.8

И более изобретательные приемы верстки: например, вынос изображе­ния на поля, полностью или частично (такой вынос несложно реали­зовать средствами CSS, устанавливая различные значения параметров padding и margin для абзацев и изображений), подпись под фотогра­фией, врезанной в текст, и другие варианты.

Очень часто иллюстративные изображения оказываются заимс­твованными с других сайтов либо из внешних источников. В любом случае, необходимо ставить ссылку на источник; если такие ссылки ря­дом с фотографией смотрятся неуместными, то можно отвести особое место на странице или целую страницу, посвященную ссылкам на ис­точники. В западном веб-дизайне такая практика принята повсеместно: во-первых, указываются ссылки на источники и благодарности за пре­доставление информации, а во-вторых, сообщается об условиях исполь­зования информации и ограничениях на ее распространение. Обрати­те внимание на ссылки «Credits» и «Privacy Policy and Important Notices» на зарубежных сайтах и внимательно изучите их содержимое.

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

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

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

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

Дизайн

Детализованная графика достаточно хорошо передает не только очертания объектов, но и многочисленные детали.

Так, уже упоминавшееся изображение телевизора снабжает - ч ся диктором на экране и другими подробностями, а цветовое решение намекает на объемность.

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

Превосходные меню в этом стиле встретились мне как ^ 7 минимум на двух сайтах. Один посвящен автомобилям «Иж» — этому сайту посвящена отдельная глава в книге. На главной странице меню сделано полноценными изображениями, на ос­тальных — фрагментарными, но тоже третьего типа, фоторе - ^Ре­алистичные. Второй сайт — одна из версий Www.Spymac.Com ир? (сейчас, к сожалению, актуальна другая версия, абсолютно ИВ™!/] шаблонная и неинтересная). Каждый пункт меню — это сю­жетная иллюстрация, снабженная подписью. Конечно, «весит» ТІКіГ такая навигация немало, да и изображений на сайте достаточ - щ ~ но — при открытии страницы загружается более 110 изображе­ний, а при ролловерных эффектах (наведение мыши и смена изображения) подгружается еще больше. Однако дизайн сайта ►*-»» настолько богат, что это простительно. ЇЕи_______________________________________

В подавляющем большинстве случаев интерфейсные ИКй» изображения функциональны, то есть при каком-то событии, “ связанном с такими изображениями, инициализируется какой-то про­цесс. Например, при щелчке (обработчик события — опСІіск) про­исходит переход по ссылке или открывается доселе невидимый блок (наиболее частотные случаи), при наведении (обработчик события — onMouseOver) всплывает какая-то информация — и так далее. Оче­видно, что активный элемент (на котором произошел щелчок) должен как-то отличаться от неактивного — это принятые правила интерфей­сов. В этом случае нужно готовить по нескольку вариантов изображе­ний: одно для обычного состояния, другое для активного; третье, ве­роятно, для события MouseOver — чтобы посетитель понял, что данное изображение функционально, принято подсказывать ему это простыми модификациями изображений: изменением цвета, появлением новых деталей. Иногда применяется эффект, когда изображение в обычном состоянии монохромно, а при наведении мыши оно обретает естествен­ные цвета.

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

110

Графика против дизайна

2.8

Логотипы — также интерфейсные элементы. Они объединя­ют веб-страницы, на всех страницах, кроме главной, служат ссылкой на главную страницу, а кроме того, часто являются композиционным центром страницы.

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

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

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

При этом со стилем остальных элементов веб-страницы раздели­тели могут совсем не сочетаться.

^1

Но если отключить загрузку изобра-

Жений, то страница будет выглядеть

Так, как на картинке справа.

В этом случае труднее понять, куда

Нужно нажать.