Иконка мобильного приложения - это небольшая картинка, представляющая приложение на маркете, таком как 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, приложения-агрегатора радиостанций, пришлось менять иконку несколько раз за месяц, потому что она не пришлась по вкусу пользователям.

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

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

Вы получите

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

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

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

iOS Human Interface Guidelines и Android Design Guidelines

Каждая иконка для интерфейса главного меню приложений Android должна быть представлена лаконичными графическими элементами. Они унифицированы согласно стандартам, которые предоставлены в справочнике Android Design Guidelines. Палитра должна быть выдержана в едином стилистическом направлении.

Последние тенденции в дизайне иконок позволяют человеку выбирать из нескольких цветовых тем , как это сделали в наборе Moonrise . Этот пакет значков один из самых лучших за версией TalkAndroid. Он привлекает не только насыщенными темными цветами и оригинальными значками, но и огромным количеством иконок на выбор . Всего их 580 штук.

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

Разработка иконок для iOS

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

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

Принципы создания иконок для приложений

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

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

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

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

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

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

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

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

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

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

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

Графика и разметка в приложениях измеряются в единицах - 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 пикселя с каждой стороны. Отступы образуют легкую тень и гарантируют четкость иконки на любом фоне.

	базовый размер				XXXHDPI (640dpi)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Размеры

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

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

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

• в поиске 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

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

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

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

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

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

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

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

Иконки - лицо любой операционной системы наравне с интерфейсом и общим дизайном. Лично меня всегда привлекали иконки, которые красуются на главном экране смартфонов и планшетов в магазинах и на официальных рендерах. Никто не хочет тапать на приложение с плохой и некрасивой иконкой.
Как говорил , иконки в iOS буквально хочется «лизнуть». Наверное, именно с мобильной ОС от Apple разработчики начали уделять больше внимания такому простому элементу дизайна, как логотипы приложений или игр. Пользователи , в отличие от апологетов iOS, вольны устанавливать любые наборы иконок. Я решил отобрать самые лучшие и интересные из них. Читайте о лучших наборах иконок для Android под катом .

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

Слева направо: Glim Dark UI, Octagons UI

Glim Dark UI - минималистичный и контрастный набор иконок в разных стилях - с фоном и без. Здесь доминируют темные оттенки, сочетающиеся с приглушенными яркими цветов. Присутствует утилита для запроса иконки у разработчиков, если ее нет в наборе. В Glim Dark UI есть 3 700 иконок и более 150 обоев.

Закрывать этот обширный ТОП будет набор OctagonsUI с восьмигранными иконками в едином стиле и цветовой схеме (черный и красный). Также каждая иконка в этом наборе получила объемные тени и грани. В наборе 2 811 иконок и 10 HD-обоев для рабочего стола.

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

29.04.16 24.1K

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

01. Icons8

Icons8 — набор из 20 тысяч плоских иконок в любых форматах, размерах и цвете! Здесь представлены такие категории, как бизнес, одежда, еда и многие другие. Icons8 можно скачать в виде приложения для Mac или в виде ZIP-архива .

02. Freepik

Яркая коллекция векторных иконок от специализированного ресурса Freepik – лишь одна из множества представленных. Она идеально подойдет для деловых и независимых проектов. Дополнительно скачать PSD иконки можно в форматах .AI , .EPS и .SVG .

03. Iconfinder

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

04. 195 flat flag PSD icons

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

05. Metro UI Icon Set

Если вы фанат Windows 8 , то вам стоит познакомиться с этим бесплатным набором иконок. Он включает в себя 700 хорошо оформленных иконок, которые можно свободно применять в проектах любого типа.

06. Modern UI Icons

Еще один набор бесплатных иконок, который можно использовать при создании пользовательского интерфейса программного обеспечения для Windows или для Android/iOS . Скачав данный набор, вы получите 1000 плоских, созданных вручную, иконок, в том числе даже иконки для шторки приложений в Windows Phone .

07. 350 pixel perfect icons

Невероятный набор из 350 идеально четких иконок для приложений или сайтов. При этом их можно изменять в размере без потери качества.

08. 80 mini icons

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

09. Simple and practical web icon vector graphic

Множество полезных иконок, которые можно использовать в личных и коммерческих проектах.

10. Free flat icons

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

11. Mono icons

Набор, который включает в себя 108 уникальных монохромных иконок, выполненных в стиле минимализма. Все они доступны в формате PNG при размере 32 на 32.

12. Metrize icons

Бесплатная коллекция в стиле Metro , которые можно использовать в собственных приложениях и веб-проектах. Иконки социальных сетей PSD бесплатны как для личного, так и для коммерческого использования. В архиве представлены не только форматы PSD , SVG , ESP и AI , но также и веб-шрифты.

13. Tab Bar Icons iOS 7

Элегантный набор иконок, разработанных под вдохновением от iOS 7 , который вы можете использовать в собственных приложениях. Скачать иконки можно в следующих форматах: PSD , AI и ESP .

14. Chunky Pika Icon Set

Иконки в стиле Pika , созданные агентством Dutch Icon из Дании. Этот набор включает в себя 42 идеально четких иконки.

15. Iconic

Еще один набор простых, но привлекательных иконок, которые идеально подойдут для минималистических дизайнов. Iconic представляет собой open source набор, который можно скачать в PNG , SVG , SWC и других форматах, что позволит адаптировать их под собственные дизайны.

16. 44 Shades of Free Icons

Набор из 44 иконок. Он содержит PSD иконки для форума, что позволит без труда отредактировать и адаптировать их под собственные проекты.

17. Token icon set

Token включает в себя 128 уникальных иконок, доступных в формате ICO в размерах 16 на 16 пикселей, 32 на 32 пикселя и 256 на 256 пикселей, а также в формате PNG в размере 128 на 128 пикселей. Каждая иконка представлена в темном и светлом вариантах, и дополнена PSD-файлом .

18. Flat icons (PSD)

Пестрые иконки в плоском стиле, которые можно скачать в формате PSD и отредактировать под собственные нужды.

19. Free 32px icons set

Набор, в котором вы найдете иконку PSD любого назначения: Skype , Facebook , Twitter , RSS , чашка кофе, “лайк ” и многое другое.

20. 48 flat designer icons

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

21. Plex icons set

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

22. Vectory mini free

Набор из более чем 1000 иконок PSD , разработанных командой Icojam . Все они представлены также в формате PNG . Они идеально подойдут для использования при разработке нового сайта, так как их можно бесплатно использовать как в личных, так и коммерческих проектах.

23. Eldorado mini free

Очередная коллекция мини-иконок от Icojam , в которой представлено свыше 1200 иконок в размере 40 на 40 пикселей.