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

Критиковать чужую работу всегда намного проще, чем создать что-то клевое самому. Но если подойти к критике системно, сделать нумерованный список, подготовить иллюстрации, то это будет уже целый анализ! На мой взгляд, в дизайне иконок сейчас переходный период. Разрешение экранов становится все больше, а следовательно и иконки увеличиваются. Но все еще актуальны иконки размером 16×16 и даже меньше. Итак, вот главные ошибки в дизайне иконок…

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

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

Иконки из раздела Utilities в Mac OS X. Я постоянно путаю их и запускаю не то приложение.

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

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

Чем иконка проще и лаконичнее, тем лучше. Очень желательно, чтобы количество объектов в одной иконке было бы минимальным.

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

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

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

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

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

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

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

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

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

Галочки тут совершенно не нужны. Кстати, почему они красные?

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

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

Буйство стилей в файле shell32.dll из Windows XP. Именно этот набор иконок предлагается по умолчанию пользователю, который хочет сменить иконку.

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

Прогресс не стоит на месте: в интерфейсах появилась возможность использовать полупрозрачность, пропали ограничения на количество цветов, плюс появилась мода на трехмерность. Но пошло ли это не пользу? Не всегда! Особенно, если речь идет о иконках размером 16×16 и меньше.

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

Перcпектива в иконках такого маленького размера совершенно не нужна и даже вредна.

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

По стандарту иконке в Windows XP положена двухпиксельная черная тень. Но в размере 16×16 тень получается слишком большой и выглядит «грязно». Особенно неудачно выглядит иконка Address book.

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

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

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

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

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

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

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

Изображения позаимствованы из статьи про почтовые ящики в Wikipedia.

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

Идея с маркой отличная, но изображение орла — крайне спорный момент. Хороших вестей такая птичка не принесет.

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

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

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

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

Хочешь переключить radiobutton, а нажимается вся иконка!

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

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

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

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

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

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

Иконки экономят место и выглядят свежо. Иконки - это быстрый ответ на сложные вопросы:

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

Мы любим иконки. Пока не начинаем в них путаться.

Иконки бывают разные: на продуктах, в архитектуре, в компьютерах, в списках, на кнопках, для веба и приложений, для iOS и Android. Иконки на панелях инструментов, подписанные и неподписанные, стилизованные и стандартизованные, цветные и монохромные, в иконочных шрифтах, файлах PNG или SVG…

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

Но будьте осторожны. Если «иконка» станет вашим ответом на любой вопрос, однажды Дон Норман постучится в вашу дверь, а когда откроете, пристально посмотрит вам в глаза и скажет:

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

Этими словами Дон Норман поучал своего бывшего работодателя - Apple. Примеры иконотоксиоза Apple встречаются в iTunes, Mail и панели управления iOS.

В твиттере айтюнсовыми иконками пугают как Бабой Ягой. Вот отличный пример из Apple Mail для OS X: сколько из этих иконок вы опознаете без подписи?

Что мы видим на этом примере? Только то, что иконки экономят место и выглядят свежо. Назначение кнопок не вызывает вопросов только у дизайнера, разместившего иконки на этой панели. За иконкой может скрываться тысяча разных слов, и это главная проблема. Когда у слова - тысяча значений, только хорошее понимание контекста позволит избежать разночтений. Вот те же иконки, но с подписями:

Подписи объясняют иконки. С ними интерфейс становится удобнее. Из-за этого некоторые бессердечные люди утверждают, что «лучшая иконка - это текст». Логично, правильные подписи спасают от путаницы. Так почему бы нам не использовать только подписи без иконок?

Функционально «чисто текстовый» дизайн ясен как день (если информационные архитекторы справились со своей задачей), но что-то ломается, когда вы убираете изображения из интерфейса. Жизнь покидает его. Он перестаёт быть свежим и весёлым. Это не волнует дизайн-позитивиста. Но волнует остальных людей. Мы проверили эту гипотезу, удалив иконки из iA Writer. Реакцией пользователей было решительное «Не надо!»

Может быть, лучше не выбирать между текстом и иконкой, а понять, когда использовать только иконки, когда только текст, а когда иконки с подписями. Давайте разберёмся…

Только иконки

Иконки - это картинки. На картинках легко показать обычные предметы. Подпись не нужна иконкам, на которых изображены легко узнаваемые объекты, представляющие знакомые понятия. Например, самолёты для аэропортов, человеческие фигуры для туалетов, корзины для мест, где лежат документы, которые мы скоро выбросим.

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

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

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

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

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

«Когда дело доходит до всегда несовершенного обмена мыслями между людьми, лучшее, что у нас, людей, для этого есть - это речь. Письменная речь придаёт мыслям долговечность и точность (мы редко исправляемся в устрой речи, а это предложение я исправил несколько раз)».

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

«Иконка - это символ, одинаково непонятный на любом языке. Не важно, какие языки вы знаете, значению иконки вам придётся научиться. Люди не просто так придумали фонетические языки, где можно объединить несколько символов, чтобы создать любое слово. Многие дизайнеры уверяли меня использовать иконки в интерфейсе. Я спрашивал их, «это действительно лучший интерфейс, который можно придумать, или он сделан по привычке?» Дизайнеров просто застряли в этой парадигме и не замечают её упадка».

Иконки модно выглядят и круто решают проблемы с нехваткой места. Конечно, не одна Apple виновна в злоупотреблении голыми иконками. Материальный дизайн Google отравлен фирменными символами. Вот для сравнения Gmail:

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

Стоп! А разве Google не измеряет всё на свете? Они наверняка знают, что делают, так? Там работают учёные. Они выбрали подход с иконками без подписей, и они никогда не ошибаются. Значит, иконки - это правильно! Возможно, но то, что подходит Google или Facebook, может не подойти нам. Как будет сказано ниже, Google могли найти причину вне естественных наук. Как бы то ни было, Google предлагает и вариант с голым текстом.

Только текст

Изображения можно интерпретировать по-разному. В зависимости от контекста даже вездесущее увеличительное стекло читается и как «поиск», и как «увеличение». Значение слова тоже зависит от контекста, но читается оно всегда одинаково. Что если иконки заменить на текст? Логично, что такой интерфейс будет работать лучше иконочного. В настройках Gmail можно заменить иконочную панель на текстовую версию:

Что произошло? Смысл кнопок теперь понятен. Но интерфейс стал менее человечным, менее весёлым. Он напоминает рабочий инструмент, стал холоднее, и, на удивление, кажется более сложным. Как это возможно? Текстовый интерфейс объективно удобнее, но из-за эстетических нюансов он таким не воспринимаются.

Текст - это рациональный выбор. Правильно структурированные и названные функции - основа взаимодействия человека с компьютером.

Иконки - это эмоциональный выбор. Правильные иконки добавляют позитива. Эмоциональное воздействие не измерить, но оно не становится от этого менее реальным.

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

Люди - и рациональные и эмоциональные создания: «Мозг не обрабатывает информацию, извлекает знания и сохраняет воспоминания. Если кратко: мозг - не компьютер». Если что-то по теме удобства иконок и доказано, так это то, что «Иконки с подписями работают лучше, чем чисто иконка или чисто текст».

Иконка с подписью

Иконка с подписью и эмоциональна и понятна. Иконки с подписями работают всегда. Если иконка непонятна, подпись объяснит. Так почему бы не использовать эту пару победителей?

Проблема в том, что это компромисс. Он снижает эмоциональный посыл иконок и простоту чистого текста. Он не экономит место и не украшает внешний вид. Он занимает больше места по вертикали и создаёт больше визуального шума, чем чисто иконки или чисто текст.

Эмоционально мы предпочитаем иконки. Рационально нам лучше заменить иконки на текст. В теории иконка с подписью - беспроигрышный вариант. На практике в дизайне нет серебряных пуль.

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

Теория и практика

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

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

Простые правила

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

Иконка обозначает некий раздел или функцию. Она представляет собой некое слово, которое доносит простой и понятный смысл. Смысл сообщения зависит от контекста. Даже самая прекрасная иконка будет бесполезна, если слово подобрано непонятное или не соответствующее контексту. Прежде чем выбрать иконку, спросите себя: Какое слово она будет обозначать? Это правильное слово? Понятное? Оно будет работать в этом контексте? Иконка может скрывать много разных понятий. Слова в контексте не так пластичны. В отличие от иконок они подчинаются многим правилам.

Когда ваша структура готова и пора вступать в игру иконкам, радости и прочему, следуйте простому правилу: добавьте необходимый минимум иконок, но не меньше.

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

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

Эссе написано специалистами компании iA.

Когда заказчик приходит к дизайнеру с заданием нарисовать иконку, его волнует два вопроса: стоимость работы и сроки исполнения. Дизайнеру же для ответа нужно четко понимать, что конкретно хочет заказчик. Хорошо, если знаешь, как выглядит иконка-мечта. Но что делать, если не понимаешь, чего хочешь? Ответ прост - смотрите на работы других и прислушивайтесь к себе. Мы собрали девять сайтов, которые помогут вам в этом.

Прежде чем писать дизайнеру иконок

Для того, чтобы разговор с дизайнером о цене и сроках изготовления иконки был легким и продуктивным, сделайте пять действий:

• Шаг #1: Потратьте время на изучение уже существующих коллекций иконок. Ваша задача смотреть, смотреть и еще раз смотреть.
• Шаг #2: Отберите те, которые вам понравились. Скопируйте картинку в Word и опишите что именно понравилось (форма, цветовое решение, идея, стиль), почему иконка пришлась по душе.
• Шаг #3: Отберите иконки, которые современны, но не понравились. Также сохраните иконку и опишите, что в иконке не то.
• Шаг #4: Опишите что делает ваша программа и сформулируйте требования уже к вашей собственной иконке. Если есть какие конкретные пожелания к метафоре - их тоже запишите.
• Шаг #5: С получившимся документом идем к дизайнеру. Теперь получить оценку будет легко и просто.

Где найти примеры современных качественных иконок

Чтобы вы не блуждали по интернету, разыскивая примеры удачных иконок, мы собрали для вас 9 сайтов-галерей иконок. Смотрите и выбирайте.

1. IconsFeed.com

На этом сайте размещены иконки iOS системы. Несомненный плюс ресурса его структура. Выбирайте интересующую вас тему (бизнес, игры, здоровье и фитнес, музыка, медицина) или цвет и наслаждайтесь иконками всех стилей. Коллекция насчитывает более 300 изображений и постоянно пополняется.

2. iOSpirations.com

На этом сайте можно посмотреть на варианты иконок отдельно для MAC, а отдельно для iOS. Суммарно более 200 вариантов иконок всех стилей и тематик. Сайт постоянно обновляется и пополняется новыми образцами.

3.

На девяти страницах собрано более 100 иконок для iOS. Недостаток ресурса – нет рубрикатора, так что вам придется пролистать все 9 страниц. Плюс ресурса есть как известные иконки, так и менее популярные образцы.

4. MobileTuxedo.com

Галерея этого ресурса насчитывает более 50 иконок для iOS. Как и в предыдущем варианте, нет рубрикатора, чтобы облегчить вашу жизнь.

5. Pinterest

Нестандартный подход – использовать pinterest для поиска иконок. Но, если вы зададите в графе поиск «IOS» и «Icon» результат вас удивит. Аналогично работает для Android Icon. А вот с Windows Icon не получится:(. Но в нашем портфолио уже сотни примеров, будет из чего выбрать.

6. Flickr

Все, что было сказано строкой выше о pinterest можно смело применить к flickr. Ключ к успеху поисковый запрос «iOS App Icons».

7. iosAppIcons на Tumblr.com

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

8. Icoicon.com

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

9. Подборки для вдохновения

Последний пример – это пример коллекции иконок, собранный дизайнером. В сети гуляет довольно много подобных вариантов, вы можете попробовать найти подобные. Просто погуглите по слову «App Icon Inspiration» или подобному. Возможно, с таким форматом подачи материала вам будет удобно работать.

Ровно через неделю станет известно, что именно владельцам iPhone и iPad предстоит видеть каждый день на экранах своих мобильных устройств в течение как минимум года – 10 июня Apple покажет седьмую по счету версию iOS. Трепетное ожидание накануне выхода iOS 7 ощущается чуть ли не сильнее, чем в преддверии анонса очередного iPhone. Еще бы – ведь с осени разработку новой операционки курирует сам Джонатан Айв, главный дизайнер Apple, ранее отвечавший лишь за облик аппаратных продуктов компании.

Накануне в Сеть «шпионский» снимок главного экрана iOS 7, на котором можно проследить некоторые изменения во внешности «семерки». И хотя, как утверждается, это самая ранняя версия системы, иконки на экране позволяют судить об изменениях в интерфейсе будущей ОС.

Айв известен нелюбовью к лишним украшательствам. Под его руководством внешность некоторых приложений iOS за последние месяцы кардинально поменялась, дизайнеры отказались от «фальшивого» объема и большинства текстур. Созданный Сонни Диксоном совместно с талантливым дизайнером Surenix концепт позволяет оценить дизайн стандартных иконок приложений в iOS 7.

Прежде всего можно заметить, что значки фирменных программ Apple лишились «глянца». Телефон, Музыка, Mail, Сообщения утратили блеск и тени, а сами иконки стали более плоские. У приложения Настройки теперь нет рамки. Значок погоды стал проще – больше нет температуры в цифровом обозначении, появились облака.

О том, что внешность iOS 7 может измениться радикально, в мае . Неназванный источник поделился с журналистом сайта увиденным на одном из тестовых iOS устройств. По его словам, новая операционка не только стала совершенно “плоской”. Айв и его команда якобы пошли еще дальше, сделав многие элементы интерфейса черно-белыми.

Не то чтобы пользователи сильно хотели перемен во внешности iOS – за осовременивание интерфейса ратует лишь наиболее активная и продвинутая прослойка «яблочников». Возможно, кто-то даже возмутится переменами в привычных изображениях на экране. Однако консультироваться с пользователями по поводу еще не реализованных изменений в устройствах в Apple не принято.

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

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

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

1. Как использовать иконки

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

Усиливаем список особенностей

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

Привлекаем внимание к новым особенностям веб приложения

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

Список различных приложений и продуктов

В данном случае нужно рассматривать иконку как логотип, помня о том, что цель логотипа - построить ментальную ассоциацию между продуктом и изображением. Иконка должна быть уникальной, но простой: большинство иконок имеют размер 128 на 128 px, поэтому надо использовать минималистский подход и суметь сказать многое, используя минимум средств.

Пример:

Перечислите ваши услуги и увеличьте легкость чтения списка

Иконки должны соответствовать контенту и иметь простой дизайн. Определите, что вы хотели выразить с помощью контента и создайте на этой основе иконку. Какая тема у веб сайта или статьи? Какие цвета используются? Что это за стиль? Модерн? Классик? Иконки должны быть визуально унифицированы с идеями, выраженными в контенте.

2. Назначение и размещение

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

Акцентирование колонтитулов для придания заголовкам особенного вида

Даже простая иконка может добавить шарма и индивидуальности веб сайту.

Пример:

Увлеките посетителя чтением длинной страницы

Используйте иконки как точки в абзацах. Такой подход существенно повысит удобство чтения даже самого длинного текста.

Пример:

Отделяем заголовки и секции

Используйте иконки, чтобы поставить визуальную точку, отделяющую различные части текста.

Пример:

Размер значения не имеет! Даже маленькие иконки могут быть эффективны

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

Выделяем текст, размещая иконки справа от абзаца

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

Изменяете размер и размещение иконок

Включите воображение! Изменение размера и размещения иконок сделает контент более динамичным и интересным.

3. Выберите свой стиль

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

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

Использование светлых цветов и отличного 3D дизайна иконок отлично дополняет внешний вид сайта: GoodBarry

Использование неряшливого стиля для 2D иконок добавляет глубины: Take the Walk

Выбор уникального и последовательного стиля придает динамичности и профессионализма сайту: Squarespace

Монохроматические иконки могут акцентировать внимание на контенте без отвлечения: Studio 7 Designs

Используйте силу трансформации снимка экрана с простым градиентом в уникальную иконку: Gist

Не надо использовать иконку только потому, что она круто выглядит. Выберите то, что больше подходит к вашему сайту по стилю и марке: Treemo

4. Дополнительные примеры

Ниже приводится несколько примеров эффективного использования иконок.