Личный кабинет
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». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!
Текст внутри иконок
Это нельзя с полной уверенностью назвать ошибкой, потому что существует огромное количество наборов, где текст смотриться наредкость удачно.
Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.
Мимо пикселей
Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.
Остаётся только пожелать учитывать все возможные ошибка в создании иконок для сайта. Многие, конечно, сочтут нужным вложить свои "пять копеек" в этот список, но самые часто встречаемые недочёты (скажет так) мы уже разобрали. Удачи...
Недостаточная различимость иконок
Иногда в одном наборе иконок встречаются слишком похожие друг на друга и очень трудно понять, что же они значат. Если не читать подписи, то можно очень легко перепутать значки.
Проблема усугубляется, если включен мелкий размер отображения значков.
Слишком много элементов в одной иконке
Чем иконка лаконичнее, чем меньше на ней элементов, тем лучше. Но дизайнеры в 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». Редкий вид кнопок с подписями снизу! Ой! А они и не кнопки вовсе, а иконки!
Текст внутри иконок
Это нельзя с полной уверенностью назвать ошибкой, потому что существует огромное количество наборов, где текст смотриться наредкость удачно.
Чем же плох текст внутри иконки? Во-первых, он жестко привязан к языку и локализация затруднена. Во-вторых, если иконка мелкая, текст невозможно прочитать. В-третьих, в случае иконки приложения этот текст продублирован в виде названия приложения.
Мимо пикселей
Как правило, эта проблема появляется, если рисовать иконки в векторном редакторе. В большом размере все выглядит красиво и четко. Но в реальности иконки мелкие и при растеризации анти-алиасинг «размывает» границы объектов.
Остаётся только пожелать учитывать все возможные ошибка в создании иконок для сайта. Многие, конечно, сочтут нужным вложить свои "пять копеек" в этот список, но самые часто встречаемые недочёты (скажет так) мы уже разобрали. Удачи...
- Ошибки оптимизации сайта
- Главные ошибки в web-дизайне
- Самые распространенные ошибки веб-оптимизации
- Часто встречающиеся ошибки при работе с flash-баннерами.
- Оптимизация сайта - Продвижение сайта
- Оптимизация сайта - Продвижение сайта
- ИМЯ ДЛЯ ВЕБ-САЙТА
- Дизайн сайта.
- Повышаем тИЦ и PR сайта
- RSS в продвижении сайта
- Репутация сайта
- Продвижение сайта в сети
- Продвижение сайта - как оценить?
- Размещение и поддержка сайта
- Правила хорошего сайта
- Правила хорошего сайта
- Правильная оптимизация сайта
- Оптимизация сайта для каталогов
- Подготовка сайта к индексации
- Правильная структура сайта
- Стиль Вашего сайта
- Стиль Вашего сайта
- Вторичные факторы в раскрутке сайта
- Продвижение сайта. Часть 2. Реклама
- SMO. Продвижение сайта в социальных сетях
- Раскрутка информационного сайта. Сложно ли это?
- Создание сайта с помошью фреймов
- Стратегии продвижения сайта в сети
- Критерии, определяющие качество сайта.
- Проектирование навигационной системы сайта
- РАСКРУТКА САЙТА: ЧТО ТАКОЕ РЕЛЕВАНТНОСТЬ
- МИФЫ О РЕКЛАМЕ И РАСКРУТКЕ САЙТА
- РАСКРУТКА ДИНАМИЧЕСКОГО САЙТА
- Увеличиваем популярность сайта
- Как найти качественный контент для сайта - часть 1
- Риски при поисковой оптимизации интернет-сайта
- Что такое категория сайта и как использовать эту функцию?
- Продвижение сайта. Часть 1. Постановка задачи
- Сколько будет стоить создание сайта?
- Включение сайта в баннерообменную сеть
- Форумы - трата времени или двигатель сайта?
- Раскрутка сайта с помощью досок объявлений
- Дизайн - способ эмоционального восприятия сайта
- Практические рекомендации по раскрутке сайта
- Увеличение видимости сайта по ключевым словам
- Какую информацию следует предоставить для разработки сайта?
- Поднимаем индекс цитирования сайта в поисковых системах
- Пособие по добавлению сайта в каталог, как правильно, шаг за шагом
- Что есть эффективная раскрутка некоммерческого сайта
- Трафик: способы увеличения посещаемости сайта
- О влиянии ошибочных поисковых запросов на поисковый трафик сайта
- Задумайтесь, откуда берутся низкие цены на создание сайта?
- Как получить html-код для показа баннеров на страницах своего сайта?
- Публикация статей как метод генерации трафика и продвижения сайта
- Раскрутка - продвижение сайта - ценообразование или почему Мерседес стоит дорого
- Цветовая гамма твоего сайта. Часть 3. Обзор Макса Трусцова.
- Секреты индексации сайта. Сайт может и должен работать. Пример №2
- Кто такой неоп. Новые оптимизаторы. Задачи SEO - оптимизатора - продвижение сайта
- Памятка заказчику веб-дизайна или о том, как выбирать разработчиков для создания веб-сайта.
- Памятка заказчику веб-дизайна или о том, как выбирать разработчиков для создания веб-сайта.
- Как взлететь к вершинам популярности в рейтинге Google используя внестраничную оптимизацию сайта
- Еще раз о вреде использования "легких, дешевых и быстрых" способов "раскрутки" сайта, или Как можно забыть про свой сайт
- Каков будет дизайн сайта, будет ли он подходить для нашей аудитории?
- Фреймы в HTML документах (2008-11-04)
- 10 признаков дурного тона в web-дизайне (2008-11-04)
- 800 и 1024. Пиксели или проценты? (2008-11-04)
- Как работает формат JPEG? (2008-11-04)
- О композиции в дизайне (2008-11-04)
- Психология в дизайне (2008-11-04)
- Шрифты (2008-11-04)
- Как сделать качественный веб-сайт (2008-11-04)
- Какой вид дизайна выбрать? (2008-11-04)
- Выпадающие меню с помощью CSS (2008-11-04)
- Создание веб-страниц для различных разрешений м... (2008-11-04)
- Веб-дизайн и анимация (2008-11-04)
- Немного об index.html (2008-11-04)
- Психология дизайна (2008-11-04)
- Что такое стильный web-сайт? (2008-11-04)
- Web дизайн :: Что такое хорошо и что такое плохо (2008-11-04)
- Лево, Право или Центр? (2008-11-04)
- Оптимизация изображений в формате JPG (2008-11-04)
- Альтернативные редакторы Flash (2008-11-04)
- Что же такое web-дизайн? (2008-11-04)
- Сайты для тинейджеров: правила дизайна (2008-11-04)
- Маленькие проблемы больших таблиц - HTML (2008-11-04)
- Особенности web-дизайна (2008-11-04)
- Подсказки и советы для веб-мастеров - Топ 100+ (2008-11-04)
- Единицы измерения CSS (2008-11-04)
- Состав изображений (2008-11-04)
- FLASH - ЧТО МОЖЕТ БЫТЬ ХУЖЕ? (2008-11-04)
- FAQ по графическим форматам файлов (2008-11-04)
- ПО необходимое для web-дизайнера (2008-11-04)
- Должностная инструкция веб-мастера (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Стиль Вашего сайта (2008-11-04)
- Orange color: теория и практика (2008-11-04)
- Расположение баннера (2008-11-04)
- Советы "чайникам" (2008-11-04)
- С чего начать (2008-11-04)
- С чего начать (2008-11-04)
- Организация - вот ключ к успеху (2008-11-04)
- Подбор шрифта и верстка текста (2008-11-04)
- Обзор Gif-аниматоров (2008-11-04)
- Каскадные таблицы стилей (преимущества и недост... (2008-11-04)
- Фирменный шрифт (2008-11-04)
- Главные ошибки в web-дизайне (2008-11-04)
- CSS - Для чего нужны таблицы стилей? (2008-11-04)
- Таблицы или слои, что лучше? (2008-11-04)
- О скриптах (2008-11-04)
- Изучаем HTML (2008-11-04)
- Применение нескольких классов к элементу в CSS (2008-11-04)
- Создание сайта с помошью фреймов (2008-11-04)
- Основы работы со слоями в CSS (2008-11-04)
Быстрый переход