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

Поделиться

Разработка мобильных приложений — перспективный бизнес. По прогнозам, к 2020-му году доход этой сферы будет приносить $189 миллиардов. Средний владелец смартфона использует на устройстве 30 программ ежемесячно. Для поклонников Android создано 2,8 миллиона официальных приложений. В Apple App Store — 2,2 миллиона программ. Как обратить внимание на свое приложений на фоне такой конкуренции?

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

Зачем нужен значок мобильному приложению?

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

image001.png

image003.png

6 советов по созданию логотипов для приложений

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

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

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

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

image005.png

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

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

image007.png

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

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

  • изучите другие иконки в вашей нише. Проанализируйте лучшие работы и сделайте все иначе. Копирование чужих идей в этом случае — путь к неудаче;

  • ищите новые смыслы в комбинациях цветов и символах. Экспериментируйте и делайте много попыток;

  • вдохновляйтесь иконками игровых приложений: в этой нише меньше формальных требований к изображениям и больше возможностей для творчества;

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

image009.png

4. Умеренное количество букв

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

Слова и изображения — противоположные инструменты. Иконка — графическое представление программы. Уделите внимание визуальным деталям, потому что:

  • название приложения и без того будет написано рядом с иконкой;
  • буквы и слова будут отвлекать от изображений — и наоборот. Расфокусированное внимание пользователя приводит к тому, что он сделает выбор не в вашу пользу. Логотип не будет читабельным. The logo will not be readable.

Если название короткое— можно попробовать использовать его в качестве центрального элемента. Так поступила новозеландская компания Xero.

image011.png

5. Соответствие логотипа функционалу

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

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

Удачный пример целостного визуального решения — у Dropbox:

image013.png

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

image015.png

Тенденции дизайна логотипа мобильного приложения

Как сделать иконку для Андроид приложения или программы под iOS, учитывая дизайнерские тренды? Мы собрали несколько рекомендаций, актуальных для дизайна логотипов в ближайшем будущем:

1. Упрощение. Удаляйте лишнее из композиции — делайте акцент на главном. Чем проще изображение — тем лучше оно будет распознаваться на любом типе экрана. Планировщик Smartsheet имеет именно такой логотип:

image017.png

2. Удалите лишние элементы. Убирайте все незначительное: детали, которые не влияют на значение вашего логотипа. Останется главное — и результат будет лучше запоминаться. Пример — Calendly:

image019.png

3. Акцент на деталях. Выделите одну из деталей вашего значка. Или сделайте лого немного ассиметричным. Это привлечет пользовательское внимание. Так сделали разработчики Todoist:

image021.png

4. Градиенты. Это тренд 2018 года, и он остается актуальным. С помощью градиента картинку можно сделать более объемной и глубокой, добиться уникальных визуальных эффектов. Instagram вполне соответствует тренду:

image023.png

5. Неоновые оттенки. Минималистичные логотипы можно оживить с помощью ярких неоновых цветов в градиентных лого. Это тренд взяли за основу дизайнеры Spotify:

image025.png

6. «Ручная работа». Новая тенденция — изображения, нарисованные от руки: с размытыми линиями, естественной цветовой гаммой. Такой вариант выбрали в MetLife:

image027.png

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

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

  • LDPI — 120;
  • MDPI — 160;
  • High DPI — 240;
  • XHDPI — 320;
  • XXHDPI — 480.

Иконку приложения нужно разрабатывать специально под требования Android.

Требования к значкам для запуска программы

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

Минимальный размер иконки для MDPI — 48dp, края — 1dp. Детализация зависит от показателя DPI. Варианты размеров для других показателей (в px):

MDPI

HDPI 

XHDPI 


XXHDPI 

XXXHDPI 

48

72

96

144

192


Требования к иконкам для публикации в Google Play

Значок мобильного приложения должен иметь размер 512х512 пикселей и высокое разрешение. Эту иконку разрабатывают специально под Google Play. Она отличается размерами от иконки, которая используется как ярлык для запуска программы. Но в то же время изображения на разных вариантах иконки должны быть идентичными.

It differs in size from the icon, which is used as a shortcut to launch the program.

Другие требования:

  • формат: 32-разрядный PNG;размер файла — до 1024 КБ;
  • цветовое пространство — sRGB;
  • форма — квадрат. Система автоматически применит маску с закругленными углами. Радиус составит 20% от размера иконки;
  • тень не нужна: она будет применена динамически.

Other requirements

  • format: 32-bit PNG;
  • file size — up to 1024 КB;
  • color space— sRGB;
  • shape — square. The system will automatically apply a mask with rounded corners. The radius is 20% of the size of the icon;
  • the shadow is not needed: it will be applied dynamically.

Советы и правила по разработке иконок для Android-приложений

Пользуйтесь такими рекомендациями:

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

Создание значка для мобильного приложения Android можно проводить для достижения определенной цели. Например:

  • Брендирование. Создайте оригинальную иконку, используя цвета и символы вашего бренда.
  • Привлечение пользователей, ищущих программы в Google Play. Качественный дизайн — показатель отличной проработки вашей программы.

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

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

Для каждого приложения под iOS нужно сделать вариант маленького и большого значка. Маленький необходим для отображения на домашнем экране и в системе (после установки приложения). Большая отображается в App Store.

Device

Spotlight icon size

iPhone

120px×120px (40pt×40pt @3x)


80px×80px (40pt×40pt @2x)

iPad Pro, iPad, iPad mini

80px×80px (40pt×40pt @2x)



Device

Settings icon size

iPhone

87px×87px (29pt×29pt @3x)


58px×58px (29pt×29pt @2x)

iPad Pro, iPad, iPad mini

58px×58px (29pt×29pt @2x)



Device

Notification icon size

iPhone

60px×60px (20pt×20pt @3x)


40px×40px (20pt×20pt @2x)

iPad Pro, iPad, iPad mini

40px×40px (20pt×20pt @2x)


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

General icon requirements:

  • 1024 x 1024 pixels;
  • 72 dpi, RGB, one layer, not transparent;
  • JPEG or PNG.

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

Правила дизайна для значков приложений iOS

Придерживайтесь в работе следующих рекомендаций:

  1. Простой дизайн. Центральный элемент, передающий суть программы, на простом и запоминающемся фоне, и с минимумом деталей.
  2. Четкий акцент. Сфокусируйте внимание на элементе, который будет привлекать пользователей и указывать на предназначение вашей программы.
  3. Узнаваемость. Никаких загадок: у пользователя нет времени на разгадку ребусов. Он должен понимать значение иконки и программы мгновенно.
  4. Простой непрозрачный фон, чтобы акцентировать внимание на главном элементе.
  5. Никаких защищенных авторским правом изображений! Это касается и элементов, относящихся к бренду Apple.
  6. Протестируйте значок на разных вариантах фона — чтобы изображение хорошо сочеталось с большинством вариантов пользовательских обоев.
  7. Оставляйте углы прямыми — система скруглит их сама.
  8. Учитывайте особенности темного режима, запущенного в iOS 13. Стандартные иконки приложений смотрятся на ней неуместно. Нужны изображения на темном фоне. Такой вариант еще на этапе бета-тестирования темы предложило издание The Mac Observer.
  9. Consider the features of the dark mode running in iOS 13. Standard application icons look inappropriate on it. Images on a dark background are needed. This option was proposed by  The Mac Observer at the stage of beta testing.

image030.gif

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

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

Logaster

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

image031.png

Makeappicon

Генератор иконок для Android и iOS в правильных размерах. Вы можете загрузить собственное изображение, на основе которого сервис создаст логотипы. Они будут соответствовать актуальным требованиям.

image033.png

IconsFlow

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

image035.png

Font Awesome

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

image037.png

Заключение

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


Поделиться
Материалы по теме:
Обсуждение:
Читайте также: