Основные цели при дизайне иконки приложения:
Успех иконки зависит от:
Если в компании используется строгий фирменный стиль, то логотип или символ иконки не должны выбиваться из него.
Логотип в виде текста имеет смысл размещать только, если он короткий. Предварительно стоит протестировать, насколько он будет узнаваем при масштабируемости иконки. Длинный текст не будет видно. Но я советую ограничиться только символом, поскольку символ всегда лучше любых слов и быстрее считывается.
Если логотип компании узнаваемый, то он будет лучшим решением. Поскольку сразу заметен среди конкурентов.
Готовая иконка не должна спорить с интерфейсом самого продукта. Пусть они будут взаимосвязаны. Поэтому важно также изучить фирменные цвета и стиль приложения.
Следует обратить внимание на то, что конкуренты используют в качестве символов, как у них эти символы работают и выполняют основную задачу.
Иконка должна быть понятной пользователю и считываться с первого взгляда. В качестве символа также не советую использовать фотографии.Важный пункт — изучить требование руководств маркетов Google Material Design и Human Interface Guidelines. У руководств строгие требования к иконкам. Тот же Google Play автоматически скругляет края иконки на 20% от размера иконки. Нужно обращать внимание и учитывать скругление, чтобы ключевые моменты изображения не обрезались и не выглядели странно.
У обоих руководств есть ключевая сетка. Иконку разумно изображать в ее пределах. Изображение не должно быть прижато к краям. Исключение: иллюстрация для игрового приложения.
При выборе символа не стоит использовать сложные ассоциативные ряды. Символ должен быть узнаваем и однозначен.
Желательно использовать как можно меньше мелких элементов и тонких линий, так как при мелком масштабе они могут быть не видны. Необходимо сохранять пространство между соседними элементами, чтобы они не слипались. Следить за тем, чтобы силуэты были чистыми, точными и ясными. Лучше воспринимаются гладкие формы, а не угловатые.
Не использовать сложных ракурсов, потому что предмет может быть не считываем с первого взгляда, и пользователь пройдет мимо. Пример: пианино сбоку, самолет спереди, продуктовая корзина сверху.
Бейджи о скидках, например ярлыки «FREE» или «-20%» на некоторых приложениях, скорее всего будут незаметны, и при масштабировании будут выглядеть плохо или переставать считываться.
Символ должен выделяться на фоне самой иконки. Для этого можно использовать контрастные или яркие цвета. Если нет строгих правил фирменного стиля, то можно смотреть в сторону современных трендовых цветов и ярких градиентов. Но не забывать о том, что выбор цвета должен быть уместен в контексте продукта и целевой аудитории.
Примеры неудачных инонок:
Пользователь охотнее кликнет на яркие цепляющие и понятные с первого взгляда иконки с продуманной композицией. Проработанная иконка ассоциируется с качественным продуктом и вызывает больше доверия, чем неряшливая или не считываемая.
Предварительно необходимо хорошо забрифовать заказчика и понять задачу.
Если он меняет иконку, то необходимо узнать, каких целей он хочет добиться. Если создает первую иконку, то необходимо узнать про целевую аудиторию, строгие требования по фирменному стилю, конкурентов.
Стоит прислушаться к пожеланиям клиента, так как он знает лучше свой бизнес и понимает, что цепляет его аудиторию. После сбора информации хорошо бы собрать референсы или примеры конкурентов. Потом отрисовать концепции в виде скетчей.
Я учитываю пожелания клиентов в первых вариантах иконки, стараюсь их отработать в нескольких формах, прикинуть приблизительные цвета. Затем уже предлагаю свое видение и концепцию.
Дальше на этапе скетчинга стоит обсудить, какие варианты следует дальше отработать и отрисовать в графических редакторах. Когда первые варианты готовы, то можно провести тестирование или опросить аудиторию.
Тестирование иконки проходит в два этапа.
Первичное — работа самого дизайнера. Что он должен учесть:
Следующий этап тестирования: заскринить иконки конкурентов и разместить рядом с готовыми иконками вашего приложения. Так вы сможете понять, насколько новая иконка выделяется и не выглядит ли она похожей. Можно на первом этапе также сделать опросы среди представителей целевой аудитории.
Второй этап — A/B тестирование, при помощи которого оценивается реакция аудитории на различные версии иконки.
При создании дизайна иконки важно оставаться в тренде; смотреть, что популярно. Я вдохновляюсь работами петербургского диджитал-агентства Cuberto и калифорнийского UI/UX дизайн-агентства Ramotion. Последние новости о трендах всегда можно найти на Behance.
Стоит обращать внимание на крупные бренды, потому что они задают тренды.
Важно уделять внимание цвету, так как он влияет на решение пользователя и на его настроение. Можно использовать современные исследования о цвете.
С окончательным цветовым решением лучше определиться после A/B тестирования и тестирование иконки на различных фонах экранов.
В последнее время стало модно добавлять на иконки ситуативные праздничные элементы. Например, крупные продуктовые компании, «Перекрёсток» и «Лента», в преддверии Нового Года украшают свои иконки соответствующей символикой. Так приложение становится ближе к пользователю. Но тут главное не переусердствовать и не менять иконку под каждый незначительный праздник.