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

дизайн иконок для приложений
Чтение займет: 3 мин.

Нельзя просто так взять и сделать дизайн иконки мобильного приложения. Это вам не свободное творчество и не «я художник, я так вижу». Это визуальный символ продукта, не больше, ни меньше. Кроме того, у Apple App Store и Google Play есть четкие требования к иконкам. Так что сегодня мы расскажем, почему логотипа недостаточно для иконки. Посоветуем, как быть с уникальностью и креативом. Объясним, зачем делать A/B тесты дизайна иконки приложения.

Почему логотип — это не иконка

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

Принципы дизайна иконки мобильного приложения

  1. Суть продукта. В идеале, идея приложения должна считываться с иконки за доли секунд, пока пользователь листает App Store и Google Play. Практика показывает, что в основе удачных иконок универсальные метафоры: стилизованные телефонные трубки, здания, профессиональные атрибуты, буквы и формы. По-хорошему, при анализе целевой аудитории нужно собрать все понятные ей посылы и выбирать уже из них.
  2. Продолжение интерфейса. Как правило, это игра в долгую: добиваясь единообразия иконки и интерфейса приложения, вы подчеркиваете связь символики и функциональности. Вот почему важно сохранить цветовую гамму, общие элементы, начертание шрифтов, посыл.
  3. Минимум букв и деталей. Иконка маленькая. Еще раз — маааааленькая. На ней не видны трогательные глаза единорога, ювелирные завитушки надписи Viva в шрифте Aldhabi, веснушки на щечках карапуза. Мы работаем с разными исходниками, но в 100% случаев убираем  убираем из них детали. Избавляемся от мелочей и пересматриваем каждый пиксель до тех пор, пока не уберем балласт, сохранив общую идею приложения.

Размер иконок приложения

4. Ограничение по цветам. Выше мы говорили о стилистическом единстве и общей с интерфейсом цветовой гамме. Но! Даже если в приложении 4-5 цветов, на иконке их стоит сократить. Более того, имеет смысл положить картинку на белый, черный или подходящий однотонный фон и посмотреть на нее в монохроме. Как правило, банальный в 3-4 цвета символ в двухцветном варианте меняется в лучшую сторону.

5. Уникальность. Как можно сделать уникальную иконку, если в Апп сторе и Гугл Плей 5 млн. приложений? Сложно, но нет ничего невозможного. Берем список метафор из анализа целевой аудитории, просматриваем на предмет популярности, отсеиваем самые заезженные, а потом отбираем оставшиеся на предмет стилизации. Или вооружаемся картой ассоциаций. Потом шаг за шагом просматриваем каждую метафору на ассоциации, проверяем их использование у конкурентов и смежников, изучаем возможности модификации.

6. Придерживаемся правил. Апп стор и Гугл Плей разработали правила на все случаи жизни. И для дизайна иконок приложений тоже. Когда дизайнеры создают иконки мобильных приложений для яблочных гаджетов, они ориентируются на руководства по iOS. При разработке под Андроид стараются держаться в рамках правил для Android.
Цветовая гамма иконок приложений

Тестировать, менять и добиваться роста конверсии

Иконка напрямую влияет на скачивания. Зимой 2018 г. в UX Planet опубликовали выжимки 10 исследований, которые подтверждают: после изменения иконки приложения получали рост скачиваний на 40-50%.

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


Полезные ссылки

Добавить комментарий

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