World1000 - Ошибки в создании иконок для сайта
Баннерная сеть

Личный кабинет

Имя

Пароль

Запомнить меня


Забыли пароль?
Зарегистрироваться

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

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


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


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


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

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

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


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

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


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

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

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


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

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

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


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


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

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

Примером такой излишней оригинальности может служить иконка корзины в OS/2 Warp 4, которая является не корзина, а шредером (оригинально, но неудачно).



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

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

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

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

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

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


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


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

Текст внутри иконок
Это нельзя с полной уверенностью назвать ошибкой, потому что существует огромное количество наборов, где текст смотриться наредкость удачно.

Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.


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


Остаётся только пожелать учитывать все возможные ошибка в создании иконок для сайта. Многие, конечно, сочтут нужным вложить свои "пять копеек" в этот список, но самые часто встречаемые недочёты (скажет так) мы уже разобрали. Удачи...
Быстрый переход
  • Company
  • Overview
  • Facts and Figures
  • Why Us
  • Testimonials
  • Careers
  • Capabilities
  • Technology Centers
  • Microsoft .NET
  • Java EE
  • PHP
  • AJAX
  • Skill Set
  • Domain Expertise
  • Web 2.0
  • Rich Internet Applications
  • Business Continuity
  • Quality Management
  • Methodology
  • Services
  • Advanced Web Development
  • Web Application Development
  • Web and Enterprise Portal Development
  • Website Design and Development
  • Web-based Database Programming
  • Web-enabling Legacy Applications
  • Opensource Software Customization
  • Business Application Development
  • Content and Document Management
  • Secure Intranets / Extranets
  • Customer Relationship Management
  • Workflow Management
  • Supply Chain Management
  • Interactive Learning
  • Independent QA and Testing
  • Application Security Consulting
  • Graphic Design / Multimedia
  • Maintenance and Support
  • Outsourcing
  • Outsourcing Overview
  • Dedicated Teams
  • Security and IP Protection
  • Engagement Models
  • Portfolio
  • By Business Domain
  • Corporate / Info Websites
  • Communities and Networks
  • B2B / B2C Internet Portals
  • Retail / Ecommerce
  • Media Distribution
  • Workflow Management
  • Customer Management
  • Enterprise Collaboration
  • Supply Chain Management
  • eLearning / Online Training
  • By Technology Focus
  • Microsoft .NET
  • Java EE
  • PHP
  • By Solution Type
  • Websites
  • Web Applications
  • Enterprise Solutions
  • Contact
  • Contact Form
  • Get Free Evaluation
  • Call Me Back
  • Contact Info
  • Map