Иконки — это отдельное направление в дизайне. Вот почему мы выделили эти небольшие картинки в отдельную услугу.

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

На деле все гораздо сложнее и занимательнее, чем в повседневной жизни.

 

«Жмёшь на кнопочку — и происходит чудо!»

Это сказал об иконке один хороший клиент, а мы подумали и согласились. Прежде всего в ней — вся суть продукта в одном простом изображении. Обычному пользователю тяжело оценить её важность. Для него срабатывает вау-эффект. Если иконка пользователю нравится, он просто по ней кликнет и начнёт загрузку. Ради этого действия дизайнер трудился не один день. Его задача — выделить одно приложение в списке среди сотен других так, чтобы на этом продукте остановили взгляд.

 

Иконка начинается с общей идеи приложения и множества версий, как эту идею передать в соответствии с

• задачами компании заказчика,

• ожиданиями пользователей,

• стандартами операционных систем,

• актуальными тенденциями мобильного дизайна.

Да, иконки ещё бывают не только главными, но контекстными (внутри приложения). Вот сколько информации сваливается на голову специалиста! Расскажем и вам чуть-чуть для понимания.

 

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

Минимализм — очень актуальный подход в дизайне для мобильных приложений. Касательно иконок — это отсутствие нескольких составных элементов. Дело в том, что физический размер иконки (то есть как видим на экране) очень маленький. Рисовать целые картины неоправданно. Такой подход  — больше амбициозность дизайнера, чем выполнение задач приложения. Тенденция к упрощению здесь наглядна:  вместо изображения календаря на иконке, лучше пусть показывает сегодняшнее число! И понятно, и пользы больше.

За последнее время иконки стали значительно проще. Виной этому популярный flat design. В иконках он особенный упрощёнными логотипами или знаками, которые отбрасывают тень (flat shadow icon). Объём, градиенты и лишний смысл уже не актуальны. Кроме того, — минимализм отличный способ выделиться на фоне остальных иконок приложений в системе.

 

Матчасть

Существуют гайдлайны производителей операционных систем по иконкам. Если, к примеру, с Android Kit Kat проще — указан только допустимый размер, то в iOS очень строго. Эти скруглённые прямоугольники создают общую гармоничность в экосистеме iOS. Для иконок этой ОС разработаны принципы «золотого сечения».

 

Причём в AppStore иконку приложения обязательно проверят на пригодность по стандартам Apple.

Чтобы угодить этой ОС, изначально надо разработать квадратные иконки. Дело в том, что система самостоятельно их округляет.

Начиная с Android L для иконок тоже появились специальные указания по дизайну.

 

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

 

При разработке иконок мы учитываем следующие разрешения:

для IOS 9:29×29, 40×40, 58×58, 60×60, 76×76, 80×80, 120×120, 152×152, 512×512, 1024×1024

для Android:36×36, 48×48, 72×72, 96×96, 144×144, 192×192 проверить, 512×512

На утверждение предоставляется иконка размером не более 152х152 в формате Png.

 

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

Кроме того, есть весёлые тонкости работы. Например, иконка для iOS имеет чётное количество пикселей для удобного масштабирования. У Android — нечётное.

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

Сроки у нас зависят от конкретной задачи. Может быть пара дней, а может и пара недель. Главное — добиться идеального результата.

 

По окончании работы предоставим архив с иконкой во всех размерах и исходные редактируемые документы (Eps или Psd). Все файлы уже наименованы понятно для операционной системы (это бонус программистам, мелочь, а приятно.).

 

Что мы делаем

 

Дизайн главной иконки

Главные иконки у нас заказывают чаще всего. За время работы мы сделали более 100 главных иконок для Windows, MacOS, iPhone / iPad, Android и BlackBerry. У нас самый большой опыт в этом направлении. 

 

Дизайн иконок для сайта

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

 

Иконки для тулбаров и меню

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

 

Комплексное оформление

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

 

10 ошибок в дизайне иконок

 

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

 

Итак, вот главные ошибки в дизайне иконок…

 

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

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

 

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. Мимо пикселей

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

 

Дизайн иконок - это наша работа

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

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

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

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

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