Библиотека программиста

Все, что необходимо начинающему и опытному программисту

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Второй сайт — одна из версий www.spymac.com  (сейчас, к сожалению, актуальна другая версия, абсолютно шаблонная и неинтересная). Каждый пункт меню — это сюжетная иллюстрация, снабженная подписью.
Конечно, «весит» такая навигация немало, да и изображений на сайте достаточно — при открытии страницы загружается более 110 изображений, а при ролловерных эффектах (наведение мыши и смена изображения) подгружается еще больше. Однако дизайн сайта  настолько богат, что это простительно.

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

Например, при щелчке (обработчик события — onClick) происходит переход по ссылке или открывается доселе невидимый блок (наиболее частотные случаи), при наведении (обработчик события — onMouseOver) всплывает какая-то информация — и так далее.

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

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

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

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

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

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

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

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

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

Последний совет на эту тему — используйте альтернативный текст для тех, кто смотрит сайты с отключенной графикой.

«Закон жанра» (zakonzhanra.com) — прекрасно нарисованный сайт.
Но если отключить загрузку изображений, то страница будет выглядеть криво.
В этом случае труднее понять, куда нужно нажать.

И напоследок, хотелось бы порекомендовать всем, кто собирает делать действительно живые и интерактивные сайты, ресурс coding4.net - создание сайтов на ASP.NET (AJAX) для вас будет весьма простым делом.

<< Назад         В начало         

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru