Ошибки в создании иконок для сайта

 

В последнее время дизайнерский уровень Рунета значительно подрос и мы не будем исключением! Итак, начнём с "малого" и попытаемся выделить главные ошибки в дизайне иконок…

 

Недостаточная различимость иконок

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

Проблема усугубляется, если включен мелкий размер отображения значков.

Слишком много элементов в одной иконке

Чем иконка лаконичнее, чем меньше на ней элементов, тем лучше. Но дизайнеры в Microsoft, вдохновленные новым форматом иконок в операционной системе Windows Vista, решили не мелочиться и нарисовали, как говориться, «сразу на все деньги»:

Проблема в том, что в самых мелких размерах невозможно понять, что же такое нарисовано. Да и в крупном размере воспринять иконку непросто.

Лишние элементы

Иконка на сайте должна легко «читаться», то есть мимолётно посмотрев на неё, человек, даже не опытный, должен сразу понимать, что она значит. Желательно, чтобы значимым было все изображение, а не только его часть - необходимо обращать внимание на контекст, в котором будут использоваться иконки.

Для примера, набор иконок для работы с базой данных:

На первый взгляд все вполне понятно.

Но, если в приложении все действия происходят только с базой данных, то мы можем убрать незначимую часть (само изображение базы данных):

Смысл совершенно не потерян, но значки стали более различимыми и понятными.

Вот реальный пример использования лишних элементов в иконках:

Нет стилевого единства набора

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

Буйство стилей из Windows XP. Такого быть не должно!

Ненужная перспектива и тени в мелких иконках

В интерфейсах появилась возможность полупрозрачности, пропали ограничения на количество цветов, стала популярна трехмерность в иконках.

Возьмем менеджер приложений из GNOME 2.2.0 (RedHat 9):

А вот такой же менеджер приложений в Windows XP:

Иконке в Windows XP по стандарту положена двух пиксельная тень. В размере 16х16 тень получается слишком большой и не аккуратной.

Слишком оригинальные метафоры

Нет учета национальных и социальных особенностей

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

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

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

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

Изображения элементов интерфейса в иконках

Руководство по созданию иконок для Mac OS X предостерегает нас: не используйте в иконках элементы реального интерфейса. Но все напрасно! Например, можно увидеть вот такую иконку:

Или вот интересный пример из интерфейса браузера OmniWeb:

Обратите внимание на кнопки «Previous» и «Next». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!

Текст внутри иконок

Мимо пикселей

Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.

 

Остаётся только пожелать учитывать все возможные ошибка в создании иконок для сайта. Многие, конечно, сочтут нужным вложить свои "пять копеек" в этот список, но самые часто встречаемые недочёты (скажет так) мы уже разобрали. Удачи...

 

Оригинальная статья: http://mt4.turbomilk.com/cgi-bin/mt4/mt-tb.cgi/171