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

2. Особенности применения.
Особенность применения пиктограмм просто очевидна. Достаточно окинуть "отвлеченным" взглядом любой профессионально сделанный веб-ресурс, либо рабочий стол Windows, и понять, что иконы применяются исключительно в пользовательских интерфейсах. Улучшение навигации по сайту, увеличение юзабилити, поднятие глубины просмотра страниц, вот лишь малая часть проблем, которые способно решить грамотное применение пиктограмм.

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

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

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

4. Стилистика оформления.
Окончательно разобравшись с концепцией интерфейсов сайта можно переходить к их непосредственному оформлению. Здесь стоит выделить несколько очень важных моментов:
a) Все пиктограммы, всех интерфейсов имеют общую стилистику.
b) Размер пиктограмм в рамках интерфейса един, однако в различных интерфейсах может быть также различен.
c) Все пиктограммы должны быть интуитивно понятны.
d) Пиктограммы никогда не должны выходить на передний план восприятия.
e) Различные интерфейсы не пересекаются.

А теперь подробнее о том, что я имел в виду.

Пункт a.
Стилистика пиктограмм диктуется общим стилем сайта. Содержание картинок может быть абсолютно любым, исходя естественно из сооброжений целесообразности, а вот дизайн должен быть единым. Пользователь не должен видеть кучу пестрых картинок, логически между собой никак не объедененных. К примеру, для создания общего стиля можно использовать определенную цветовую гамму (Netscape Navigator и вся линейка продуктов этой компании), единую перспективу представления объектов на иконах (например все объекты в двух измерениях или 3D под строго определенным углом), или наконец использовать какой либо общий элемент во всех композициях (необычная тень, неправильные формы, etc). Примеров можно привести бесчисленное количество. Стиль пиктограмм диктуется только стилем оформления самого сайта и фантазией дизайнера.

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

Пункт c.
Самый понятный пункт. Если пользователь не понимает, что вы хотели сказать изображением на иконе, то вряд ли он на нее нажмет. Не помогут также ни тег ALT, ни текстовая подпись под картинкой (размер пиктограмм зачастую не позволяет использовать подписи длиннее 10 - 15 символов). На данный момент сформировался целый ряд "штампов", которые позволяют не "изобретая велосипед" четко обозначить назначение той или иной иконы, но эта тема одной из следующих статей.

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

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

Пункт e.
Пересечение интерфейсов, накладывание их друг на друга, один из самых распространенных "грехов" многофункциональных порталов. Зачастую не продвинутый пользователь не может справиться с таким большим количеством возможностей собранных в одном месте. Это вызывает страх, чувство собственной несостоятельности и прочие неприятные эмоции, которые отнюдь не прибавляют любви к сайту. Разделяйте интерфейсы, разносите их по странице, не допускайте их визуального объединения.

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

5. Компоновка элементов
Очень часто при проектировании сайта возникает проблема перенасыщенности. Когда число функций одного интерфейса переваливает за все мыслимые и не мыслимые границы. Естественно, что в такой ситуации использование пиктограмм под каждую функцию, мягко говоря, необоснованно.
Для примера откройте броузер Internet Explorer и взгляните в верхнюю часть экрана. В пиктограммном виде там находятся только наиболее часто используемые кнопки. Назад, вперед, стоп, релоад и т. д. Все остальные возможности скрыты в многочисленных меню. Такое же правило можно применить и к сайту. Выделяете наиболее востребованные функции пиктограммами, все, чем пользователь не будет пользоваться постоянно, следует выкинуть из общего интерфейса и сделать доступным, например, на отдельной странице, вход на которую будет осуществлять кнопка "Настройки" (также к примеру).

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