О чем речь?

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

По мере развития человечества стали появляться алфавиты, слова стали формироваться не из картинок, а из буквенных символов. Алфавит был более универсальным способом общения. Для отображения окружающего мира с помощью изображений приходилось бы изучать и постоянно добавлять огромное множество символов, в то время как английский алфавит, к примеру, все явления и предметы в мире способен описать с помощью всего лишь 26 букв, а русский — с помощью 33 букв.

Алфавит сделал письменность более универсальной. Но вместе с тем, алфавит стал менее наглядным. И потому сопровождение текстов иллюстрациями было и остаётся очень важной составляющей передачи информации. А порой изображения даже лучше справляются с задачей информирования, чем текст! Например, никто ведь, управляя машиной, не будет читать надпись на знаке «Пешеходный переход», а привычная пиктограмма сообщит ту же информацию в считанные секунды.

Зачем вообще нужны иконки?

Как следует из вступления — пиктограммы помогают быстрее сориентироваться в большом количестве информации.

Иконка ни в коем случае не является полной заменой словесному обозначению, хотя когда-то продвигалась именно эта идея — по возможности заменять все слова пиктограммами, как более понятной сущностью для начинающих пользователей. Именно так в 1985 году компания Apple в руководстве для разработчиков рекомендовала максимально заменять надписи иконками. Такой подход не сработал. Ведь многие определения очень сложны как для передачи в графической форме, так и для её восприятия, например, «Новая редакция уточняющего документа».

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

Современная иконографика. Модные тенденции.

Иконографика прошлого — искусство рисовать узнаваемые образы в миниатюре, создавая достаточную детализацию — канула в лету. Иконки популярных некогда размеров 16х16 и 32х32 пикселов уступают позиции своим большим братьям: в последней версии Mac OS X максимальный размер иконки составляет 1024х1024 пиксела, что с приходом устройств с Retina-дисплеями не кажется чем-то избыточным.

Новая иконка приложения Automator для Mac OS X. Максимальный размер - 1024x1024 px.

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

Как мне заставить иконки работать?

Но как же делать хорошие иконки?
Давайте разбираться.

Целостность

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

Набор иконок IsoIcons Workspace строго соблюдают стилистику и перспективу

Проблема: «Единство стиля»

Разная перспектива, источник света или просто техника рисования — и все, ваши 3, 10, 20 иконок никогда не будут набором, как вы добросовестно их ни отрисовывайте. Для каждого набора должна разрабатываться общая схема, начиная от единого стиля и цветового решения, заканчивая размерами и перспективой.

Стилевое разнообразие — «козырь» стандартных иконок Windows XP

Создание иконок в необходимых размерах

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

Но вот незадача! То, что отлично выглядит для 256х256 пикселов, не так хорошо смотрится в размере 32х32. Сглаживание берет свое, и такая иконка выглядит размытой. Поэтому большую иконку можно брать, как отправную точку, но для каждого из необходимых размеров нужно проводить отдельную оптимизацию.

При изменении размера без оптимизации иконки выглядять размыто

Проблема: «Мимо пикселов»

Распространенной проблемой иконок является непопадание в пикселы. Это случается, когда вершины векторных объектов, из которых состоит иконка, попадают в середину пикселов. В таком случае нужно подогнать вершины под пиксельную сетку.
Иконка 64х64 нуждается в небольшой доработке

Проблема: «Третий не лишний»

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

«Не разобрать» — это катастрофически низкая различимость иконок, заставляющая пользователя постоянно путать кнопки, нажимать не туда, страдать и ругать ни в чем не повинную программу.

Лишние элементы, особенно на малых размерах, очень мешают различать иконки

Простота и реализм

Реализм в иконках — изображение объектов из реального мира, с переносом всех физических свойств. Часто реализм используется не к месту либо бездумно. Реалистичное изображение отлично работает, когда вы хотите описать физический объект: телефон, яблоко или банк. Когда же дело доходит до сущностей по типу «Восстановить последнее сохранение» или «Вычислить налог на добавленную стоимость» — тут не стоит подыскивать реалистичную метафору из реального мира, достаточно ограничиться простой символьной пиктограммой.

Проблема: «Оригинальность»

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

Понятная корзина из Mac OS X и не такой понятный шредер из OS/2 Warp 4

Начнем?

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

А в одной из следующих моих статей мы разработаем свой собственный набор иконок — от идеи до финального результата.