Иконки приложений – Программы Иконки — скачать 46 бесплатно Иконки PNG, SVG, ICO или ICNS

Отличные бесплатные иконки для приложений и для сайтов

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

Спасибо http://www.cssauthor.com и рекомендую к просмотру:

Бесплатные PSD иконки в стиле Material

Скачать

Иконки нарисованные мелом

Скачать

Отличные и маленькие розовые иконки

Скачать

Бизнес иконки разных форматов для сайта

Скачать

Отличные иконки с не толстыми линиями

Скачать

Отличные иконки в необычном и интересном стиле

Скачать

Цветные иконки разнообразных фруктов

Скачать

Крутейшие иконки которые можно использовать для создания логотипов

Скачать

Чёрные иконки для приложений

Скачать

Крутейшие разноцветные иконки совершенно бесплатно

Скачать

Цветные и круглые иконки для сайта и не только

Скачать

Отличные цветные иконки в формате PSD

Скачать

Монохромные и качественные иконки бесплатно

Скачать

Иконки разнообразных овощей

Скачать

Иконки для интернет магазина с тонкими линиями

Скачать

Круглые иконки на разную тематику

Скачать

Круглые иконки еды и напитков

Скачать

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

Скачать

Отличные социальные иконки бесплатно

Скачать

beloweb.ru

14 советов по дизайну иконок для мобильных приложений, которые следует соблюдать | Блог | Разработка и дизайн сайтов и мобильных приложений

Иконка мобильного приложения — это небольшая картинка, представляющая приложение на маркете, таком как Google Play или App Store, и устройстве пользователя. Если вскоре вам предстоит создать свой первый дизайн иконки мобильного приложения, прислушайтесь к этим советам. Они помогут вам избежать ошибок, которые подстерегают новичков.

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

Поэтому примите во внимание следующие советы по созданию дизайна иконки для приложения:

1. Соблюдайте требования руководств

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

Вот руководства, с которых стоит начать:

1. Официальный сайт, посвященный Material Design для Android. Здесь можно прочитать о стиле, анимации, компонентах, паттернах, макетах и юзабилити, а также скачать материалы в помощь дизайнеру.
2. Руководства по iOS Human Interface от Apple пригодятся, если вы хотите создать иконку для iPad или iPhone.

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

2. Знайте свою аудиторию

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

3. Создавайте иконку в нужном размере

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

4. Упрощайте и не перегружайте иконку лишними деталями

Минимализм — ваш лучший друг. Чем больше украшательств и деталей на иконке, тем ниже ее узнаваемость. Иконка должна быть чем-то вроде символа — достаточно простой и понятной. Например, вот иконка, которую мы сделали для приложения с рецептами Кукорама:

5. Правильно расставляйте свет и тени

Этот совет актуален, если вы делаете иконку для Android-приложения. Руководство по Android Material подробно рассказывает об этом аспекте. В нем также приведены значения для теней, отбрасываемых иконкой того или иного цвета.

6. Проверьте, как выглядит иконка на фоне другого цвета (темном, светлом, цветном)

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

7. Не бойтесь использовать перспективу

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

8. Создайте интересную форму

Иконки ниже запоминаются благодаря использованным на них формах:

Форма помогает распознать иконку даже если она очень маленького размера.

9. Ответственно подойдите к цвету

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

10. Не используйте фотографии

Существуют замечательные фотореалистичные иконки, но использование фотографий — это табу.

11. Создавайте иконки приложений без лишнего текста

Мелкий текст тяжело читать, и его использование создаст проблемы в случае локализации, если, например, приложение выйдет для китайского рынка. При этом вы можете использовать первые одну–две буквы из названия компании, как это делают Tumblr или Pinterest:

12. Не используйте на иконке элементы из интерфейса приложения

Это очень плохая практика, которая запутывает пользователя. Элементам интерфейса на место на вашей иконке.

13. Создавайте иконки, которые говорят о главной функции приложения

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

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

14. Изучите иконки конкурентов

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

А вот иконка, которую мы создали для приложения KeepSnap, которое ориентировано на фотографов:

Смена иконки — это тоже не шутки. Например, владельцам Radium, приложения-агрегатора радиостанций, пришлось менять иконку несколько раз за месяц, потому что она не пришлась по вкусу пользователям.

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

Об авторе

Олег работал в студии в 2011-2016 годах и за это время успел поучаствовать во множестве проектов в качестве UI/UX дизайнера.

stfalcon.com

Проектируем классные иконки приложений — AppTractor

Вы читаете перевод статьи Майкла Флерапа (Michael Flarup) “Designing better app icons”. Над переводом работали Ольга Скулкина и Ринат Шайхутдинов. Перевод выполнен при поддержке iSpring, опубликован на AppTractor.ru с разрешения авторов перевода.

После моей нашумевшей статьи “Let’s talk about white app icons” (“Давайте поговорим о белых иконках приложений”), которая — признаю — написала слегка назидательным тоном, я решил написать еще одну более конструктивную и практическую статью о проектировании классных иконок. Эта статья подойдет любому: от новичка до профессионала. В ней я расскажу о магии иконок и о том, как сделать их дизайн еще лучше.

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

Для начала

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

Что такое “иконка приложения”?

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

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

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

С практической точки зрения, под иконкой приложения понимается комплект из PNG-файлов разных размеров — от небольших (29х29) и до крупных (1024х1024) — которые нужно связать с приложением. Операционная система будет использовать этот комплект иконок в различных контекстах: в App Store и Google Play, на панели настроек устройства и на домашнем экране.

Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.

5 ключевых аспектов

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

1. Масштабируемость

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

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

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

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

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

• Холст 1024х1024 бывает обманчивым — обязательно протестируйте свой дизайн на “живом” девайсе, в разных контекстах и размерах.
• Делайте упор на простоту и сконцентрируйтесь на каком-то одном объекте; предпочтительно, чтобы это была какая-то уникальная форма или элемент, который хорошо сохраняет свои свойства и качество при масштабировании.
• Убедитесь, что иконка хорошо смотрится на разном фоне.

Несколько моих иконок, при создании которых я заботился о масштабируемости.

2. Узнаваемость

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

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

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

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

Для узнаваемости большую роль играет не только масштабируемость, но и новизна. Главная сложность при проектировании иконки — найти баланс этих качеств.

• Безвкусные, перегруженные иконки — враги узнаваемости. Начните убирать лишние детали, пока это можно сделать без ущерба концепции. Затем остановитесь и проанализируйте — стало ли лучше? Повысилась ли узнаваемость?
• Создайте несколько разных вариаций дизайна. Поставьте их рядом и взгляните на все сразу. Отмечайте, какие аспекты дизайна привлекают внимание.
• Попробуйте разобрать на составляющие ваши любимые иконки и попытайтесь понять, почему они вам нравятся и за счет чего привлекли ваше внимание.

3. Согласованность

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

Когда иконка согласуется с интерфейсом, это визуально усиливает идею вашего приложения.

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

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

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

• Один из способов добиться согласованности между приложением и иконкой — это придерживаться одной цветовой палитры и использовать схожий “язык дизайна”. Например, зеленый интерфейс можно усилить зеленой иконкой.
• Следующий способ не всегда возможен, но все же: попробуйте использовать в дизайне иконки символы, напрямую связанные с функциональностью приложения.

Можно разработать согласованные иконки для набора взаимосвязанных приложений.

4. Уникальность

Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!

Приложения в App Store в категории “Производительность” — это отличный пример отсутствия уникальности в дизайне.

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

Уникальность — это коварный аспект дизайна: здесь играют роль не только ваши навыки, но и дизайнерские решения остальных “игроков” на рынке, которые стараются решить ту же задачу.

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

Не важно, какой стиль дизайна вы предпочитаете: работа над уникальностью — это отличное упражнение, которое поможет вам найти новые идеи.

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

5. Не используйте слова

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

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

• Совершенно не нужно включать название приложения в иконку — в интерфейсе оно чаще всего будет и так написано рядом. Лучше уделите больше внимания созданию классной графической концепции.
• “Но Facebook использует f в своей иконке!” — говорите вы. Если вы используете только одну букву, и она оказывается хорошей (и уникальной) формой, то буква теряет свои “словарные” свойства и становится иконкой сама по себе. Но это скорее исключение, чем правило.
• Логотип + имя компании в квадратике — это плохое решение. У вас есть какая-то метка или глиф, которые хорошо работают в рамках иконочных ограничений? Если нет, то вам лучше придумать что-то новое. Помните: иконки и логотипы — это разные вещи; не нужно пытаться втиснуть одно в контекст другого.

Создание своей метки

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

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

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

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

Вау, вы дочитали до конца!? Хотите еще информации об иконках? Вот мое выступление на Adobe MAX в Лос-Анджелесе. В этом видео я рассказываю о своих работах, о концепциях, которые я упоминал в этой статье, и, наконец, прямо на сцене улучшаю одну из иконок. Думаю, что я сказал об иконках все, что хотел.

apptractor.ru

Как создать иконки для приложений на Android и iOS

Иконка приложения для Android

1. Разрешение экранов устройств

Приложения для Android разрабатываются с учетом размера устройства и разрешения экрана.

Графика и разметка в приложениях измеряются в единицах — DPI (количество точек на дюйм).

2. Категории DPI

• Low DPI (LDPI) = 120DPI
• Medium DPI (MDPI) = 160DPI
• High DPI (HDPI) = 240DPI (Nexus S, SGS2)
• Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3)
• Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4)

Размер и формат иконок запуска приложения (launcher icon) для Android

Иконка приложения должна разрабатываться специально для Android. Используйте инструкции по разработке иконок от Android в стиле Material Design, не подражайте визуальным элементам и стилям других платформ.

Главное:

Иконка запуска приложения должна быть 32-битной, в формате PNGs с альфа-каналом (с прозрачным фоном).

Базовый размер — 48dp, с краями 1dp — для низкого разрешения. Чем выше плотность пикселей экрана (DPI), тем больше отображается деталей. Для остальных разрешений нужно увеличить масштаб на 400% 192 x 192 dp (с краями 4dp).

Хотите идеальную иконку для любого разрешения и не ищете легких путей? Сделайте несколько иконок разных размеров для всех вариантов разрешений, воспользовавшись таблицей ниже. Можно включить дополнительные значения для последовательного увеличения размеров. Например, иконки 96 x 96 пикселей xhdpi могут содержать промежуточный размер 88 x 88 пикселей с отступами в 4 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

Вы, конечно, помните: любое масштабирование должно сохранять пропорции изображения.

Иконки приложения для публикации на Google Play

Иконка приложения для публикации в Google Play должна быть 512 x 512 пикселей, с высоким разрешением.

Эта иконка используется только для Google Play и не заменяет иконку запуска приложения (launcher icon). Иконка публикации на Google Play должна содержать тот же контент, что и иконка запуска приложения, за исключением некоторых идентификационных знаков.

Раздел “Рекомендуемые”

В разделе «Рекомендуемые» можно продемонстрировать потенциальным пользователям графические возможности приложения. 

Требования к иконке в разделе «Рекомендуемые» :

• JPEG или 24-битный PNG (без альфа-канала)
• 1024 х 500 пикселей

Расположение

Картинка для раздела «Рекомендуемые» располагается над сведениями о приложении в Play Маркете. Если загружен проморолик, поверх нее будет расположена кнопка «Воспроизвести».

Советы

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

Цели иконки приложения

У иконки приложения есть 3 основных цели:

1. Продвижение бренда, рассказ о цели приложения.
2. Помощь пользователю в поиске приложения в Google Play.  
3. Функция запуска.

Продвижение бренда

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

Образцы иконок приложений.

Помогите пользователю найти приложение в Google Play

Иконка должна привлекать внимание пользователя во время скроллинга. Качественный дизайн иконки — однозначный сигнал, о том, что Ваше приложение такого же высокого качества.

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

Правила дизайна иконки для Android

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

Для 3D-иконки:

• Перспектива не противоречит другим иконкам.
• Располагается ее по ходу движения.
• Имеет небольшую глубину.

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

Правильно и неправильно

Иконка для приложения на iOS

Размеры 

У каждого приложения должна быть маленькая и большая иконка. Маленькая иконка используется на домашнем экране и в системе после установки. Большая иконка нужна для App Store.

Устройство или контекст

Размер иконки

iPhone 6s Plus и выше, iPhone 6 Plus и выше

180x180px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

120x120px

iPad Pro

167x167px

iPad, iPad mini

152x152px

App Store

1024x1024px

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

Также маленькие иконки нужны для показа:

• в поиске Spotlight,
• в приложении настроек смартфона.

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

Устройство

Размер иконок 
в поиске Spotlight

Размер иконки настроек

iPhone 6s Plus и выше, 
iPhone 6 Plus и выше

120x120px

87x87px

iPhone 6s и выше, iPhone 6 и выше, 
iPhone SE и выше

80x80px

58x58px

iPad Pro, iPad, iPad mini

80x80px

58x58px

Внимание:

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

Правила дизайна иконки для iOS:

Подкупающая простота

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

Четкий фокус

Создайте иконку с четким фокусом, который привлекает внимание и идентифицирует приложение.

Узнаваемость

Никто не будет анализировать иконку, чтобы понять ее значение.

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

Без прозрачности, простой фон

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

Без надписей

Используйте надписи только как часть логотипа. Название приложения появляется под иконкой на домашнем экране. Не добавляйте в иконку слова, которые повторяют название или являются инструкциями к приложению, например, “Смотри” или “Играй”. Если дизайн иконки включает слова, добавьте только значимые для содержания приложения.

Без фото, скриншотов и элементов интерфейса

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

Без точных копий продуктов Apple

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

Не помещайте повсюду в интерфейсе иконку приложения

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

Протестируйте иконку на разных обоях

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

Сохраняйте углы иконки квадратными

Система округляет углы иконки автоматически.

Вот и все! Желаем удачи и много красивых иконок для ваших приложений.

blog.sbssoft.ru

Разработка иконок приложений

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

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

От изображения к символу. Иконка — это специальный рисунок. Здесь дизайнер работает с маленькими — 64×64, 32×32 размерами. При таком разрешении, детали просто шумят — разбивают общий контур рисунка и усложняют его восприятие. Поэтому художественные концепты разбиваются на геометрические примитивы — круги, треугольники и квадраты. Крупные элементы вписывается в них, а незначительные детали — удаляются. Обычно, остаются только 1-2 крупных ярких деталей, которые запомнятся — это важно, когда разрабатываются иконки для андроид и других портативных ОС.  

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

Тестирование на фокус-группе. Иконки оцениваются по критерию распознавания — считывает ли пользователь иконку как символ функции, которая она подразумевает. Другой критерий — оценка эстетичности, мы так и спрашиваем у аудитории —  «нравятся ли вам эти иконки». Мы приглашаем тестировать иконки для Android и iOS пользователей, который предпочитают одну из платформ и в жизни.  

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

koloro.ru

Создание иконки для приложения

Разработка дизайна иконок: значение цвета

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

Сравнение красного и зеленого самый наглядный пример в цветовой индикации. Красный – яркий, вызывающий и привлекательный для пользователей. Он подойдет для разработки иконок игровых или спортивных приложений, ведь часто красный – это цвет вызова или соревнований. Зеленый – более спокойный и умиротворённый, его удачно используют для обозначения банковских и офисных приложений. Говорить о том, что красный негативно влияет на конверсию и восприятие пользователя — неверно. Это может сработать только в том случае, если рядом расположить зеленый цвет.

Восприятие цветов со временем менялось и достаточно сильно. Во времена средневековья желтый был цветом измены и слабоумия, одежду Иуды часто рисовали в оттенке светло-желтого. Сейчас желтый практически утратил свои негативные свойства, теперь это цвет счастья, солнца и тепла. Его используют для своих приложений Sprint, DHL, Velloe и Nikon.

Синий – один из самых популярных цветовых решений для разработки иконок приложений. Логотипы Vkontakte, Skype, Facebook, Twitter, LinkedIn, Telegram созданы с помощью различных оттенков синего цвета. Он считается идеальным для коммуникации: спокойный и уравновешенный, хорошо концентрирует внимание и не перегружает зрение. А в эпоху Рима это был самый не любимый цвет. Его избегали настолько, что в науке родилась теории, что люди Античности просто не воспринимали такой оттенок. Синий цвет считался пугающим и неприятным, а голубые глаза были практически физическим недостатком. Прошло несколько столетий, и теперь это один из самых распространённых и популярных цветов. Поэтому сотрудники KOLORO всегда открыты для экспериментов, мы используем необычные решение, которые с годами станут иконой стиля.

Оранжевый, фиолетовый и пурпурный цвета – новые любимчики разработчиков. Их используют Viber, YAHOO!, Hallmark, Amazon, Kodak и Instagram.

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

koloro.ua

Разработка качественных иконок для мобильных приложений

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

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

Пакеты иконок разного размера.

Во время работы не будет лишним составить набор PNG-файлов разного размера: от 29 × 29 до 1024 × 1024 пикселей. Такой набор вы сможете использовать в разных контекстах операционной системы, когда пользователи будут взаимодействовать с иконкой (iOS App Store, Google Play, панель настроек, результаты поиска и главный экран устройства).

Иконки приложений можно сделать практически в любой программе, которая воспроизводит растровые файлы. Photoshop, Illustrator или Sketch. На сайте Apply Pixels множество PSD-шаблонов.

Небольшой ролик, в котором показано, как обращаться с шаблонами на Apply Pixels

5 ключевых аспектов

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

1) Масштабируемость

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

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

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

Как улучшить масштабируемость

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

2) Узнаваемость

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

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

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

Как сделать иконку заметнее

Банальные, слишком усложненные иконки вредят узнаваемости. Лучше убирать все лишние детали, до тех пор, пока общая идея будет сохраняться. Иконка стала заметнее?

Поэкспериментируйте с несколькими вариантами дизайна. Разместите их сеткой, отметьте, какие детали заметнее.

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

3) Целостность взаимодействия

Как с самим приложением, так и с его иконкой. Хорошая иконка служит продолжением интерфейса. Если это условие соблюдено — приложение запомнится.

Общие черты иконки и UI важны в смысле визуального нарратива.

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

Как добиться единообразия

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

Еще один способ — связать символику иконки непосредственно с функциональностью приложения. Хотя это удается не всегда.

4) Уникальность

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

В категории Productivity App Store можно видеть, что разработчики не всегда учитывают такой нюанс, как уникальность.

Уникальность — штука непростая, поскольку зависит не только от навыков дизайнера, но и от того, что делают конкуренты.

Как повысить уникальность

Посмотрите, что делают другие, и придерживайтесь другого направления. Всегда проводите исследования — миру не нужна еще одна иконка в виде галочки.

Один-единственный глиф на однотонном фоне — скользкий путь. Так сложно добиться уникальности. Экспериментируйте с цветами и композициями, пытайтесь найти новые и понятные визуальные метафоры.

Цвет — хороший способ внести изменения в концепт.

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

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

5) Важно не использовать слова

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

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

Также не нужно добавлять иконке название приложения. Вместо этого потратьте время на интересный иллюстративный концепт.

«Но Facebook же использует ’f’ в своей иконке»! Если присутствует только одна буква, она теряет свое «словесное» выражение и становится частью иллюстрации. А вообще это исключение из общего правила.

Логотип компании и название, втиснуть в канву иконки, нельзя назвать подходящим вариантом дизайна. Вы когда-нибудь видели символ или глиф, который хорошо смотрится в условиях ограниченного пространства? Если нет, тогда лучше выбрать что-то другое. Помните: иконка и логотип — разные вещи. И уместны они в разных контекстах.

В App Store и Google Play много примеров непродуманного дизайна иконок. Иконка — посредник между приложением и его пользователем. Это первое, что человек видит в App Store, и то, с чем он взаимодействует, всякий раз открывая приложение. Когда пользователь думает о приложении, в его сознании всплывает образ иконки.

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

wnfx.ru