10 дизайнерских лайфхаков для создания отличных иконок для приложений
Иконки приложений — это первое, что замечают ваши пользователи, когда натыкаются на ваше приложение. Поскольку миллиарды приложений борются за внимание в магазине приложений, значок приложения стал важным отличительным признаком, который устраняет беспорядок и привлекает пользователей к вашему приложению. Это действительно первая точка соприкосновения, с которой сталкиваются ваши пользователи. Поэтому крайне важно сразу же использовать этот опыт.
В этом посте я предложу несколько дизайнерских лайфхаков, которые помогут вам создать крутые значки приложений, которые будут выделяться в магазине приложений и, возможно, выделять ваше приложение среди других приложений, конкурирующих за установку.
Прежде чем я расскажу вам об основных моментах, вы должны понять, что основная цель значка приложения — установить непосредственную связь и создать когнитивные подсказки. Все, что предлагается в этом посте, в основном восходит к достижению этого.
Вот несколько дизайнерских приемов для создания отличных иконок приложений.
Правило 70%
Среди дизайнеров существует консенсус в отношении использования 70% пространства значка для выделения основного объекта, связанного с приложением. Объектом может быть что угодно, связанное с приложением. Если вы разрабатываете приложение для фотографии, объектом может быть камера или объектив. Для игры это может быть лицо персонажа и так далее.
Другими словами, объект должен занимать большую часть (70%) площади иконки. Идея состоит в том, чтобы развить мгновенное взаимодействие с пользователями и заставить их перейти на страницу приложения для получения описания. Как только они попадут на страницу приложения с описанием, вам станет намного проще привлечь пользователя.
Однако недостаточно предоставить объекту только большее пространство. Он также должен быть свободен от беспорядка. Только тогда он может подключиться и создать более быстрое познание, что подводит нас к следующему пункту.
Сократите беспорядок, пока основы не начнут разваливаться
Продолжайте избавляться от беспорядка, пока не начнет проявляться основная идея объекта внутри значка. Другими словами, уменьшите свою иконку до точки, в которой объект на иконке превратится из осмысленного в бессмысленный. Вырезать до тех пор, пока объект не сохранит свою универсальную форму и не станет узнаваемым для большинства людей.
Например, если вы создаете приложение для скрытия изображений, вы можете придумать значок приложения, который имеет «ключи и замок» в качестве основного объекта. Теперь вы можете удалить тени или счетчики и перейти к полностью плоскому значку. После этого вы можете перейти к минималистскому дизайну, полностью играя с цветами, чтобы создать 3D-эффекты для формы «замок и ключ», используемой в значке.
Тусклый на блестящем и блестящий на тусклом
Следующее, что выделяет значок приложения, — это правильное использование контраста. Дизайнеры часто используют контраст между объектом и фоном значка приложения. Если вы можете выполнить два шага, упомянутых выше, вы можете автоматически приземлиться здесь.
Создание контраста также имеет непосредственное отношение к цветам. Начните с предопределенной цветовой палитры в уме и работайте над ней. Просто помните, что идея состоит в том, чтобы создать яркость и контраст между цветом фона и элементами объекта. Если вы новичок в этом, вы можете обратиться к нескольким проектам на Dribbble и загрузить цветовые палитры по вашему выбору.
После того, как вы закончите с окончательным вариантом, вы можете создать 2-3 версии с большим количеством белого или черного цветов. Теперь вы можете выбрать тот, который кажется вам правильным. После iOS 7 большое внимание уделяется свежим цветам с более сильными оттенками белого.
Не обманывайтесь своим большим Mac
После установки на устройство значок вашего приложения отображается в различных разрешениях. Чтобы он казался значительным даже в самом маленьком аватаре, его нужно спроектировать с учетом пропорций. Часто дизайнеры работают с большими экранами Mac, на которых можно рассмотреть даже мельчайшие детали. Однако, когда один и тот же значок тестируется на смартфоне с разными размерами значков, детали теряются.
Если вы работаете на Mac и сначала создаете магазин приложений со значками, вы можете легко позволить себе добавить некоторые мелкие детали. Но имейте в виду, что самый маленький значок, предназначенный для меню настроек, — это изображение размером 29×29 пикселей. Более мелкие детали, такие как мелкий текст или другие символы, не будут видны на нем.
Что вы можете сделать лучше всего, так это помнить о размере и использовать основные формы и узоры, чтобы выполнить работу. Примите простоту и сосредоточьтесь на одном объекте. Предпочтительна уникальная форма или элемент, который сохраняет свои контуры и детали, несмотря на масштабирование. Таким образом, ваш значок будет выглядеть уместно во всех разрешениях, предложенных в соответствии с рекомендациями Apple и Android.
Попробуйте свою иконку на множестве обоев
У пользователей разные вкусы и предпочтения, что отражается в выборе обоев и тем на их смартфонах. Это означает, что значок вашего приложения должен выделяться среди множества цветов. Следовательно, всегда полезно проверить видимость значка на фоне обоев семи основных цветов. Вы можете увеличить или уменьшить насыщенность белого/черного в используемых вами обоях, чтобы завершить удовлетворительный тест.
Может быть несколько ситуаций, когда обои будут мешать видимости. Обои, такие как селфи, могут иметь неоднородные цвета и могут мешать видимости значка. Здесь вы мало что можете сделать, но, как я уже сказал, вы можете проверить их на семи основных цветах, чтобы начать работу.
Определитесь с абстракцией и сделайте итерации
Дизайнеры постоянно сталкиваются с дилеммой между абстракцией и реальным изображением главного объекта в иконе. С появлением плоских иконок и пользовательских интерфейсов вес сильно сместился в сторону абстракции, но нельзя просто так отказаться от реального изображения объекта. Реальные объекты или скевоморфные значки по-прежнему популярны в магазине приложений, и для этого есть веские причины.
Например, если вы создаете приложение для улучшения звука, вы можете нарисовать скевоморфный усилитель на значке приложения вместо того, чтобы сглаживать его или делать значок в виде линии. Но учитывая тот факт, что усилитель не является привычным товаром, его познание уменьшится, если его сгладить. Для вещей, которые относительно распространены и пользуются всеобщим признанием в массах (камера для приложения для фотографии), вы определенно можете использовать плоскую иконку. Однако, если приложение связано с чем-то неясным, лучше оставить его реальным или скевоморфным.
Еще один отличный способ получить хороший дизайн иконки — сделать несколько итераций со скевоморфной и плоской иконками. При этом вы можете помнить о втором пункте. Сделайте несколько итераций, удаляя несколько деталей за раз. Сложите их все рядом и решите, какой из них вам нравится больше всего и почему.
Для игр определите персонажа
Создание игровых иконок может быть очень увлекательным, так как с их помощью можно добиться многих творческих целей. Между тем, вы, должно быть, заметили, что в играх часто есть истории и персонажи. Если мы придерживаемся правила построения когниции с пользователями, то лица персонажей из самой игры могут отлично с этим справиться. На самом деле, именно по этой причине лица персонажей так часто встречаются на иконках игровых приложений.
Если вы делаете игру, вам нужно найти главного героя или персонажа, который является общим для всех уровней. Из-за сильного знакомства персонажа с игроками его можно использовать для создания сильного воспоминания об игре. И по той же причине он может стать значком приложения для вашего игрового приложения.
Вы можете выбрать цветовую палитру и построить вокруг нее значок приложения. Честно говоря, становится намного легче, если вы идете на лицо. Но в то же время вам может понадобиться добавить некоторые дополнительные эффекты, чтобы выделить его.
Согласованные цветовые палитры и соглашения для значков и пользовательского интерфейса
Пользовательский интерфейс приложения будет иметь определенную тему и использование определенных цветов. Лучше всего использовать те же цвета для дизайна значка. Вы также можете сделать то же самое с определенными элементами, которые вы реализовали в пользовательском интерфейсе, и использовать их в значке. Это сделает ваш дизайн более однородным и приведет к тому, что ваше приложение будет лучше запоминаться и знакомиться с вашим приложением среди пользователей.
Творчество спасает положение
Запустите поиск «делать приложения» в Google Play, и вы наткнетесь на сетку, полную галочек. Да, большинство дизайнеров приложений для списков дел могли придумать только галочку в качестве значка своего приложения — обычный значок для списков дел. Тем не менее, среди этого шума значок Evernote удобно выделяется.
Результаты поиска по запросу «делать приложения». Обратите внимание, что значок Evernote выделяется среди других.
Идея иконы исходит из того, что Слон никогда не забывает. Он сочетается с блестящим исполнением сложенного уха слона, обозначающего блокнот. Это сразу отличает Evernote от других приложений в магазине и создает сильное познание.
Другой пример отличного дизайна иконок можно отнести к Pocket. Начнем с того, что идея приложения уникальна. Хотя закладки существовали уже давно, они не могли заставить пользователей вернуться, чтобы прочитать сохраненный ими контент.
Pocket, с другой стороны, использовал миниатюры, чтобы создать четкую визуальную память. Приложение вызывает эмоцию «сохраните этот контент», и это ясно и умно изображено самим значком. Красная форма означает «карман», а стрелка вниз, без сомнения, означает «загрузить».
Не используйте фотографии или изображения
Помимо вышеупомянутых указателей, вы также можете избежать прямого внедрения фотографий и изображений в иконку приложения. Даже если вы ссылаетесь на фотографию, вы должны создать свои собственные векторы в Illustrator или Photoshop. Только тогда он будет выглядеть аутентично и иметь магнетический эффект.
Это может звучать как клише, но ваш дизайн должен быть чистым. Я уже упоминал о смешивании большего количества белого или черного с цветами, чтобы получить идеальный цветовой тон, который вы хотите. Это очень удобно, чтобы очистить иконку. Если некоторые цвета сделать ярче или наоборот, общий уровень шума в разных случаях действительно снижается.
Иконки приложений должны стать похожими на популярные песни, которые сможет узнать каждый, а следующие дизайнерские лайфхаки помогут вам сделать отличную иконку приложения. Я надеюсь, что вы нашли очки ценными. Если у вас есть, что добавить или предложить, пишите свои комментарии ниже.