Проектируем классные иконки приложений. Как сделать эффективную иконку приложения
Иконка - это условный графический значок , который обозначает на экране инструмент, программу или приложение. Интерфейс операционных систем построен так, что фактически любой объект представлен в виде иконки . Разработка иконок полезна для быстрого поиска по интерфейсу . В то время, когда текст сливается в единую кучу, лаконичные и точные иконки для мобильных приложений помогают пользователям легко определять, где находятся необходимые приложения . Если разработать логотип мобильного приложения качественно, то пользователь сразу угадает его функционал , даже не читая описания.
Вы получите
персональный руководитель проекта
дизайнер нарисует 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 основных цели:
- Продвижение бренда, рассказ о цели приложения.
- Помощь пользователю в поиске приложения в Google Play.
- Функция запуска.
Продвижение бренда
Создайте уникальную и незабываемую иконку. Используйте цветовую схему Вашего бренда. Не пытайтесь рассказать слишком много с помощью иконки. Простой значок производит лучшее впечатление. Не включайте название приложения в иконку - название будет всегда показываться рядом с иконкой.
Образцы иконок приложений.
Помогите пользователю найти приложение в 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
Не помещайте повсюду в интерфейсе иконку приложения
Пользователя может сбить с толку иконка приложения, встречающаяся повсюду в интерфейсе. Просто используйте цветовую схему иконки в интерфейсе. См. Цвет .
Протестируйте иконку на разных обоях
Люди выбирают различные обои для домашних экранов, поэтому вы должны протестировать иконку приложения на различных фонах.
Сохраняйте углы иконки квадратными
Система округляет углы иконки автоматически.
Вот и все! Желаем удачи и много красивых иконок для ваших приложений.
Создание иконки для мобильного приложения
Работа над небольшим элементом графического дизайна, с которым пользователям приходилось бы часто взаимодействовать, может показаться задачей достаточно сложной. В этой статье описаны несколько советов и приемов, которые помогут найти ответ.
Важно знать, какую функцию выполняют иконки. И чем они, в сущности, являются. Это визуальный символ вашего продукта. Крошечная деталь брендинга, которая должна не только выглядеть привлекательно и выделяться на общем фоне. В идеале она отображает суть вашего приложения. Многие бросаются словом «логотип». Но иконки - не логотипы. У них есть общие моменты. Логотипы - масштабируемые векторные элементы брендинга, предназначенные для билбордов, магазинных витрин и прочих заметных мест. Иконки - чаще всего растровые изображения в квадратной рамке определенного размера. Разные подходы, инструменты, работа и, как следствие, критерии успеха.
Пакеты иконок разного размера.
Во время работы не будет лишним составить набор PNG-файлов разного размера: от 29 × 29 до 1024 × 1024 пикселей. Такой набор вы сможете использовать в разных контекстах операционной системы, когда пользователи будут взаимодействовать с иконкой ( , панель настроек, результаты поиска и главный экран устройства).
Иконки приложений можно сделать практически в любой программе, которая воспроизводит растровые файлы. Photoshop, Illustrator или Sketch. На сайте Apply Pixels множество PSD-шаблонов.
Небольшой ролик, в котором показано, как обращаться с шаблонами на Apply Pixels
5 ключевых аспектов
Рассмотрим несколько основных приемов, которые используются в .
1) Масштабируемость
Это одна из главных особенностей приложения. Иконки разного размера демонстрируются в разных разделах платформы. Поэтому важно, чтобы ваши иконки были разборчивыми и уникальными. Нужно, чтобы они смотрелись хорошо как в App Store, так и на устройствах с экраном Retina, и даже в настройках.
Иконки приложений должны отображаться в разном разрешении, быть понятными независимо от их масштаба.
Сложный дизайн, когда в небольшой квадрат иконки втискивается излишне много деталей, зачастую плохо отображается в измененном масштабе. На начальном этапе, когда создается концепт будущей иконки, нужно уделить достаточно времени вопросу о том, как будет выглядеть конкретная иконка, если изменить размер.
Как улучшить масштабируемость
Дизайн в разрешении 1024 × 1024 пикселей может выглядеть обманчиво. Проверьте иконку на устройстве в разных ситуациях. Важна простота, уникальность формы или элемента, который сохраняет свои контуры и отличительные особенности. Иконка должна смотреться хорошо независимо от фона.
2) Узнаваемость
Хорошая иконка приложения все равно, что запоминающаяся песня: ее всегда различишь в окружающем шуме. Главный экран - ключевой компонент хорошего дизайна иконки. Форма, цвет и общая идея иконки должны резонировать с ощущениями пользователя, его внутренним чувством гармонии. Дизайн должен активизировать память на функциональном и эмоциональном уровнях.
Иконка может быть детализированной или простой; главное, чтобы в точности передавала замысел ее создателя.
Ваша иконка будет соперничать за внимание пользователя с тысячами своих конкурентов. Каждый из них - это те же 1024 пикселей, призванные установить эмоциональную и прочую связь с владельцем устройства.
Как сделать иконку заметнее
Банальные, слишком усложненные иконки вредят узнаваемости. Лучше убирать все лишние детали, до тех пор, пока общая идея будет сохраняться. Иконка стала заметнее?
Поэкспериментируйте с несколькими вариантами дизайна. Разместите их сеткой, отметьте, какие детали заметнее.
Попробуйте разобрать на составные части иконки своих любимых приложений и понять, почему они вам нравятся. За счет чего они выделяются на фоне конкурентов? С помощью каких методик их создавали?
3) Целостность взаимодействия
Как с самим приложением, так и с его иконкой. Хорошая иконка служит продолжением интерфейса. Если это условие соблюдено - приложение запомнится.
Формируя единообразие программного продукта в глазах пользователей, вы увеличиваете коэффициент удержания и виральность. Проще говоря, если иконка гармонирует с функционалом и дизайном - это большой плюс.
Как добиться единообразия
Один из очевидных способов - придерживаться общей цветовой гаммы и языка дизайна. Так, если интерфейс преимущественно зеленый, иконка тоже должна быть зеленой.
Еще один способ - связать символику иконки непосредственно с функциональностью приложения. Хотя это удается не всегда.
4) Уникальность
Здесь вроде бы все понятно без лишних слов. Придерживаетесь избранной стилистики, следуете определенному тренду? Прекрасно. Главное, чтобы это был именно ваш дизайн, а не копия. Ваша иконка всегда будет соперничать с другими за внимание пользователей, но способность выделиться на общем фоне - аргумент в ее пользу.
Уникальность - штука непростая, поскольку зависит не только от навыков дизайнера, но и от того, что делают конкуренты.
Как повысить уникальность
Посмотрите, что делают другие, и придерживайтесь другого направления. Всегда проводите исследования - миру не нужна еще одна иконка в виде галочки.
Один-единственный глиф на однотонном фоне - скользкий путь. Так сложно добиться уникальности. Экспериментируйте с цветами и композициями, пытайтесь найти новые и понятные визуальные метафоры.
Цвет - хороший способ внести изменения в концепт.
Чтобы добиться уникальности придется поупражняться в поиске новых идей. От стиля тут мало что зависит.
Дизайн иконок может послужить источником вдохновения: широкий спектр идей, без каких-либо условностей.
5) Важно не использовать слова
Лишь в единичных случаях есть смысл прибегать к дополнительному инструменту абстракции - письменному слову. И, как правило, слова - признак того, что иллюстративный арсенал используется не в полную меру.
Слова и изображения - отдельные инструменты. Если их объединить, графическая репрезентация получится хаотичной, ее будет сложно расшифровать. Неужели нет ничего лучше сухих слов? Если есть слова, скорее всего, дизайнеру не удалось передать свое видение.
Также не нужно добавлять иконке название приложения. Вместо этого потратьте время на интересный иллюстративный концепт.
«Но Facebook же использует ’f’ в своей иконке»! Если присутствует только одна буква, она теряет свое «словесное» выражение и становится частью иллюстрации. А вообще это исключение из общего правила.
Логотип компании и название, втиснуть в канву иконки, нельзя назвать подходящим вариантом дизайна. Вы когда-нибудь видели символ или глиф, который хорошо смотрится в условиях ограниченного пространства? Если нет, тогда лучше выбрать что-то другое. Помните: иконка и логотип - разные вещи. И уместны они в разных контекстах.
В App Store и Google Play много примеров непродуманного дизайна иконок. Иконка - посредник между приложением и его пользователем. Это первое, что человек видит в App Store, и то, с чем он взаимодействует, всякий раз открывая приложение. Когда пользователь думает о приложении, в его сознании всплывает образ иконки.
Иконками не стоит заниматься в последнюю очередь, это часть общего процесса. Они могут быть простыми и незамысловатыми, или же с обилием деталей. Но, как бы там ни было, все иконки объединяет общее свойство: они привлекают внимание людей в условиях ограниченного пространства. В этом отношении все иконки находятся в равных условиях.
Related Articles
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 пикселей.
После моей нашумевшей статьи “ ” (“Давайте поговорим о белых иконках приложений”), которая - признаю - написала слегка назидательным тоном, я решил написать еще одну более конструктивную и практическую статью о проектировании классных иконок. Эта статья подойдет любому: от новичка до профессионала. В ней я расскажу о магии иконок и о том, как сделать их дизайн еще лучше.
На видео выше я за 10 минут рассказываю о пяти основных аспектах дизайна иконок и привожу реальные примеры того, как я работаю с этими аспектами. В видео много историй, советов и пикселей, и я надеюсь, что интересно будет всем: и начинающим, и опытным дизайнерам. Если хотите чуть больше контекста, читайте дальше. Обещаю, будут булиты.
Для начала
Проектирование одного единственного предмета граф. дизайна, с которым пользователи будут взаимодействовать при каждом использовании продукта, может показаться пугающей задачей. Красивая, узнаваемая и запоминающаяся иконка может сильно повлиять на популярность и успех приложения. Но как именно спроектировать “хорошую” иконку приложения? Что это вообще означает? Не бойтесь, я собрал несколько советов, которые помогут ответить на эти вопросы. Эта статья - ваше руководство по проектированию классных иконок.
Что такое “иконка приложения”?
Первое, что вы должны понять, принимаясь за проектирование - это что такое “иконка приложения” и какую задачу она выполняет. Иконка приложения - это визуальный якорь вашего продукта. Можете рассматривать иконку как небольшой элемент брендинга, который должен не просто красиво выглядеть и выделяться, но еще и предавать основную суть вашего приложения.
Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.
5 ключевых аспектов
Теперь давайте изучим некоторые лучшие практики проектирования иконок приложений. Мы рассмотрим каждый из пяти ключевых аспектов в отдельности, и по каждому я дам несколько советов и приведу примеры. Большинство примеров - это мои собственные работы. Это не означает, что мои работы самые лучшие, просто, создавая их, я опирался именно на ту информацию, которую изложил в этой статье. Когда будете читать про каждый из аспектов, попробуйте представить свои любимые иконки и увидеть в них то, о чем я буду говорить. Ну что ж, давайте приступим.
1. Масштабируемость
Иконка приложения должна хорошо выглядеть в разном разрешении и передавать суть концепции независимо от размера.
Один из самых важных аспектов иконки - это масштабируемость. Иконка будет использоваться в разных разделах платформы и отображаться в разных размерах - поэтому важно, чтобы она всегда оставалась уникальной и четкой. Иконка должна хорошо выглядеть и в App Store, и на ретина-дисплее, и на панели настроек.
Слишком сложные иконки, перегруженные деталями, как правило, плохо масштабируются.
В процессе проектирования иконки приложения большую долю внимания стоит уделить тому, насколько изящно масштабируется выбранный вами дизайн.
- Холст 1024х1024 бывает обманчивым - обязательно протестируйте свой дизайн на “живом” девайсе, в разных контекстах и размерах.
- Делайте упор на простоту и сконцентрируйтесь на каком-то одном объекте; предпочтительно, чтобы это была какая-то уникальная форма или элемент, который хорошо сохраняет свои свойства и качество при масштабировании.
- Убедитесь, что иконка хорошо смотрится на разном фоне.
2. Узнаваемость
Иконки могут быть детализированными или упрощенными, главное, чтобы они были творческими, интересными и точно передавали ваши намерения.
Иконка приложения - как песня: очень важно, чтобы ее было легко узнать среди других мелодий в магазине (то есть других иконок на домашнем экране). И точно так же, как мелодия песни затрагивает душу слушателя, формы, цвета и идея иконки должны цеплять пользователя.
Дизайн должен передавать запоминающийся и логически связанный образ как на функциональном, так и на эмоциональному уровне.
Ваша иконка будет бороться за внимание пользователя с тысячами других иконок такого же размера, которые тоже несут свой замысел и стараются привлечь внимание.
Для узнаваемости большую роль играет не только масштабируемость, но и новизна. Главная сложность при проектировании иконки - найти баланс этих качеств.
- Безвкусные, перегруженные иконки - враги узнаваемости. Начните убирать лишние детали, пока это можно сделать без ущерба концепции. Затем остановитесь и проанализируйте - стало ли лучше? Повысилась ли узнаваемость?
- Создайте несколько разных вариаций дизайна. Поставьте их рядом и взгляните на все сразу. Отмечайте, какие аспекты дизайна привлекают внимание.
- Попробуйте разобрать на составляющие ваши любимые иконки и попытайтесь понять, почему они вам нравятся и за счет чего привлекли ваше внимание.
3. Согласованность
Когда иконка согласуется с интерфейсом, это визуально усиливает идею вашего приложения.
Важно также добиться согласованности между процессом взаимодействия с иконкой и процессом взаимодействия с приложением.
Мне кажется, что хорошая иконка - это продолжение идеи приложения. Если иконка и интерфейс будут согласованы, приложение лучше запомнится пользователю.
Нужно сформировать в сознании пользователей единый, целостный образ приложения - это повышает общую удовлетворенность от использования продукта, а также способствует удержанию существующих клиентов и привлечению новых.
Короче говоря, если ваша иконка гармонично дополняет идею, функциональность и дизайн приложения - можете считать это большой победой.
- Один из способов добиться согласованности между приложением и иконкой - это придерживаться одной цветовой палитры и использовать схожий “язык дизайна”. Например, зеленый интерфейс можно усилить зеленой иконкой.
- Следующий способ не всегда возможен, но все же: попробуйте использовать в дизайне иконки символы, напрямую связанные с функциональностью приложения.
4. Уникальность
Приложения в App Store в категории “Производительность” - это отличный пример отсутствия уникальности в дизайне.
Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!
Ваша иконка будет соревноваться за внимание пользователя с другими иконками - и оригинальный дизайн может стать отличным преимуществом.
Уникальность - это коварный аспект дизайна: здесь играют роль не только ваши навыки, но и дизайнерские решения остальных “игроков” на рынке, которые стараются решить ту же задачу.
- Изучите, что делают другие дизайнеры в вашей нише, а потом попробуйте пойти другим путем. Проведите хорошее исследование - миру не нужна еще одна иконка с галочкой.
- Если вы стремитесь к уникальности, простой глиф на одноцветном фоне - это сомнительная стратегия. Поиграйте с разными цветами и композициями и поставьте себе задачу найти новые, интересные метафоры.
- Цвет - это отличный способ по-новому представить старую концепцию (хотя многие упускают его из виду).
5. Не используйте слова
Это самая больная тема всех времен. Только в очень редких случаях в иконках допускаются слова. Я считаю, что если дизайнер прибегает к использованию слов, значит он не в полной мере использует свой арсенал образов.
Слова и изображения - это совершенно разные инструменты представления. Иконка должна служить графическим представлением приложения, а если в ней намешаны слова и образы, то результат получается перегруженным и расфокусированным - и пользователю сложнее уловить идею такой иконки. Ну неужели не нашлось лучшего способа изобразить идею приложения, чем просто сказать словами? Когда я вижу иконки со словами, мне всегда кажется, что дизайнер просто не смог передать свою задумку более понятно.
Создание своей метки
В App Store и Google Play есть масса скучных и банальных иконок. Ваша иконка - это ваша самая сильная связь с пользователем. Именно с нее начинается знакомство с приложением в App Store. Именно с ней пользователь взаимодействует всякий раз, когда открывает приложение. Когда у приложения непродуманная, некрасивая или неподходящая иконка, оно теряет свой самый важный визуальный актив. Иконка приложения - это не довесок, о котором вспоминают в последнюю очередь, а важная часть всего процесса разработки приложения.
Иконка приложения - это небольшой кусочек концентрированного дизайна. Если вы хотите создать хорошую иконку, есть набор аспектов, которые нужно продумать. Масштабируемость, узнаваемость, согласованность и уникальность - все эти аспекты есть и в других областях дизайна. Если научитесь создавать классные иконки - повысите свой общий дизайнерский уровень.
У всех иконок - детализированных и упрощенных, креативных и обыкновенных - есть нечто общее: одинаковые по размеру, все они стараются выделиться на фоне конкурентов и привлечь внимание пользователя. Это непростая задача, и решение всегда лежит в пределах все того же фиксированного количества пикселей.
Конечно, дизайнер может чувствовать себя неуверенно: шутка ли - разработать графическое представление всего приложения! Но я надеюсь, что мои советы помогут вам обрести уверенность и смело взяться за работу. А теперь вперед - создайте фантастическую иконку для своего приложения!
Mental notes - это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.