Как картина!
АрхивВнешняя средаРазработка пиктограмм для веб-сайтов
Вопрос разработки пиктограмм всегда является актуальным для любого веб-дизайнера. Перед ним возникает целый ряд требований, которым иконки должны удовлетворять. Всего можно выделить четыре важных принципа в процессе разработки пиктограмм:
- Ассоциативный ряд
- . Доступность
- Эстетика
- Оригинальность
Далее рассмотрим некоторые принципы более подробно.
Ассоциативный ряд
Прежде чем открывать графический редактор и начинать рисовать иконку, необходимо задуматься над тем, как будущую пиктограмму можно изобразить. Логично, что на иконке для раздела «Тиражирование CD» будет уместно наличие двух или трех компакт-дисков, а на пиктограмме для рубрики «Корм для кошек» – изображение кошачьей мордочки. Но когда дело доходит до распространенных или, наоборот, специфических разделов, следует призвать в помощники ассоциацию.
Другими словами, необходимо перечислить те образы, слова и выражения, которые ассоциируются с предметом разрабатываемой пиктограммы. Например, с чем может ассоциироваться раздел «Форум»?
1. Общение - Люди - Изображение человеческих силуэтов
2. Обмен информацией - Сообщения - Изображение листов бумаги
3. Поиск информации - Вопрос участникам форума - Изображение вопросительного знака
Выше были представлены лишь некоторые варианты составления ассоциативных цепочек, позволяющих в конечном итоге определить оптимальный вид будущей пиктограммы. Этот пример достаточно прост, т.к. использует весьма распространенный тематический объект – форум. Гораздо сложнее составить ассоциативную цепочку для специфических пиктограмм, например, такой, как “Гидрофобизирующие материалы, кашированные стеклохолстом” (реальный пример):
1. Гидрофобизирующие - Не пропускающие влагу - Вода - Изображение капли
2. Стеклохолст - Стекло - Блестящая поверхность с бликами - Холст - Лист бумаги - Изображение листа бумаги с зеркальными бликами
3. Цепочка 1 + Цепочка 2 = Изображение листа бумаги с зеркальными бликами, на фоне которого располагается капля воды
В данном случае слово “кашированные” представляет собой специфический термин, вследствие чего не было включено в составление ассоциативной цепочки. Также следует добавить, что такая пиктограмма может носить исключительно имиджевую функцию – в силу своей специфичности.
В завершение разговора о принципе ассоциативного ряда следует упомянуть такое понятие, как семантика – раздел языкознания, изучающий значение единиц языка, прежде всего слов. Семантический подход к составлению образа пиктограммы позволяет формировать группы значений того или иного тематического направления и выбирать наиболее значимые смысловые элементы для разрабатываемых иконок.
Доступность
Под доступностью пиктограммы принято понимать степень понимания пользователем тематического значения элемента. Другими словами, любая пиктограмма должна быть интуитивно понятна большинству пользователей. Чаще всего использование данного принципа строится на сложившихся стереотипах мышления человека. Например, изображение принтера большинством пользователей ассоциируется с печатью документа, а никак не с отделом оргтехники в компьютерном магазине. Вид открытой папки, выполненной в стиле Windows, дает понять, что пользователь, нажав на такую пиктограмму, сможет открыть какой-то документ.
Однако, здесь разработчика пиктограммы может ожидать несколько «подводных камней». Во-первых, используя «говорящую», но не обладающую явно выраженным значением иконку, можно поставить пользователя в тупик: например, у разных людей изображение раскрытой книги может вызвать совершенно различные смысловые значения – «Обучение», «Библиотека», «Справочник» и т.д. Во-вторых, пользователь может быть не знаком с символикой, использованной на пиктограмме, в том аспекте, в каком его видит дизайнер. Одним из самых распространенных примеров является изображение чашечных весов, которые часто используются для разделов по юриспруденции, законодательству, адвокатуре.
Также необходимо помнить, что устоявшийся образ, признанный людьми в повседневной жизни и быту, не всегда будет подходить для его реализации в Интернете. Например, на одном западном веб-сайте посетителям была предоставлена возможность самим снимать небольшие видеоклипы. С этой целью дизайнеры имитировали стандартную панель управления видеомагнитофоном с соответствующими функциональными кнопками (пиктограммами). В том числе присутствовала кнопка начала записи, представленная в виде красного круга. Казалось бы, ассоциация с нужным действием налицо, однако, многие пользователи оказались в затруднительном положении. Разработчики сайта провели исследование и выяснили, что причиной затруднений с записью являлась та самая красная кнопка, которая определенной части пользователей больше напоминала кнопку остановки, нежели записи видеоклипа.
