Иконки - лицо любой операционной системы наравне с интерфейсом и общим дизайном. Лично меня всегда привлекали иконки, которые красуются на главном экране смартфонов и планшетов в магазинах и на официальных рендерах. Никто не хочет тапать на приложение с плохой и некрасивой иконкой.
Как говорил , иконки в iOS буквально хочется «лизнуть». Наверное, именно с мобильной ОС от Apple разработчики начали уделять больше внимания такому простому элементу дизайна, как логотипы приложений или игр. Пользователи , в отличие от апологетов iOS, вольны устанавливать любые наборы иконок. Я решил отобрать самые лучшие и интересные из них. Читайте о лучших наборах иконок для Android под катом
.
Наборов иконок для Android действительно великое множество. Все они зачастую выполнены в похожих стилях - квадратные и округлые с фоном и без фона. На такие категории я решил разбить все представленные ниже наборы иконок. Все иконки будут представлены в блоке по 3, потому что я отобрал слишком много хороших наборов. Надеюсь, что такой формат будет не слишком неудобным.
Слева направо: Glim Dark UI, Octagons UI
Закрывать этот обширный ТОП будет набор OctagonsUI с восьмигранными иконками в едином стиле и цветовой схеме (черный и красный). Также каждая иконка в этом наборе получила объемные тени и грани. В наборе 2 811 иконок и 10 HD-обоев для рабочего стола.
Надеюсь, что хотя бы несколько иконок из этого набора вам понравились, и вы скачали их с Трешбокса. В будущем эта подборка будет регулярно пополняться новинками.
После моей нашумевшей статьи “ ” (“Давайте поговорим о белых иконках приложений”), которая - признаю - написала слегка назидательным тоном, я решил написать еще одну более конструктивную и практическую статью о проектировании классных иконок. Эта статья подойдет любому: от новичка до профессионала. В ней я расскажу о магии иконок и о том, как сделать их дизайн еще лучше.
На видео выше я за 10 минут рассказываю о пяти основных аспектах дизайна иконок и привожу реальные примеры того, как я работаю с этими аспектами. В видео много историй, советов и пикселей, и я надеюсь, что интересно будет всем: и начинающим, и опытным дизайнерам. Если хотите чуть больше контекста, читайте дальше. Обещаю, будут булиты.
Проектирование одного единственного предмета граф. дизайна, с которым пользователи будут взаимодействовать при каждом использовании продукта, может показаться пугающей задачей. Красивая, узнаваемая и запоминающаяся иконка может сильно повлиять на популярность и успех приложения. Но как именно спроектировать “хорошую” иконку приложения? Что это вообще означает? Не бойтесь, я собрал несколько советов, которые помогут ответить на эти вопросы. Эта статья - ваше руководство по проектированию классных иконок.
Первое, что вы должны понять, принимаясь за проектирование - это что такое “иконка приложения” и какую задачу она выполняет. Иконка приложения - это визуальный якорь вашего продукта. Можете рассматривать иконку как небольшой элемент брендинга, который должен не просто красиво выглядеть и выделяться, но еще и предавать основную суть вашего приложения.
Можно создавать иконки в любом редакторе, который поддерживает создание растровых файлов. Обычно для этого используют Photoshop, Illustrator и Sketch. Бесплатные инструменты типа appicontemplate.com предлагают удобные PSD шаблоны, которые станут отличным подспорьем на начальном этапе.
Теперь давайте изучим некоторые лучшие практики проектирования иконок приложений. Мы рассмотрим каждый из пяти ключевых аспектов в отдельности, и по каждому я дам несколько советов и приведу примеры. Большинство примеров - это мои собственные работы. Это не означает, что мои работы самые лучшие, просто, создавая их, я опирался именно на ту информацию, которую изложил в этой статье. Когда будете читать про каждый из аспектов, попробуйте представить свои любимые иконки и увидеть в них то, о чем я буду говорить. Ну что ж, давайте приступим.
Иконка приложения должна хорошо выглядеть в разном разрешении и передавать суть концепции независимо от размера.
Один из самых важных аспектов иконки - это масштабируемость. Иконка будет использоваться в разных разделах платформы и отображаться в разных размерах - поэтому важно, чтобы она всегда оставалась уникальной и четкой. Иконка должна хорошо выглядеть и в App Store, и на ретина-дисплее, и на панели настроек.
Слишком сложные иконки, перегруженные деталями, как правило, плохо масштабируются.
В процессе проектирования иконки приложения большую долю внимания стоит уделить тому, насколько изящно масштабируется выбранный вами дизайн.
Иконки могут быть детализированными или упрощенными, главное, чтобы они были творческими, интересными и точно передавали ваши намерения.
Иконка приложения - как песня: очень важно, чтобы ее было легко узнать среди других мелодий в магазине (то есть других иконок на домашнем экране). И точно так же, как мелодия песни затрагивает душу слушателя, формы, цвета и идея иконки должны цеплять пользователя.
Дизайн должен передавать запоминающийся и логически связанный образ как на функциональном, так и на эмоциональному уровне.
Ваша иконка будет бороться за внимание пользователя с тысячами других иконок такого же размера, которые тоже несут свой замысел и стараются привлечь внимание.
Для узнаваемости большую роль играет не только масштабируемость, но и новизна. Главная сложность при проектировании иконки - найти баланс этих качеств.
Когда иконка согласуется с интерфейсом, это визуально усиливает идею вашего приложения.
Важно также добиться согласованности между процессом взаимодействия с иконкой и процессом взаимодействия с приложением.
Мне кажется, что хорошая иконка - это продолжение идеи приложения. Если иконка и интерфейс будут согласованы, приложение лучше запомнится пользователю.
Нужно сформировать в сознании пользователей единый, целостный образ приложения - это повышает общую удовлетворенность от использования продукта, а также способствует удержанию существующих клиентов и привлечению новых.
Короче говоря, если ваша иконка гармонично дополняет идею, функциональность и дизайн приложения - можете считать это большой победой.
Приложения в App Store в категории “Производительность” - это отличный пример отсутствия уникальности в дизайне.
Это в общем-то очевидно: постарайтесь создать нечто уникальное. Ладно, вы можете использовать какой-то существующий стиль или тренд, но сделайте это по-своему!
Ваша иконка будет соревноваться за внимание пользователя с другими иконками - и оригинальный дизайн может стать отличным преимуществом.
Уникальность - это коварный аспект дизайна: здесь играют роль не только ваши навыки, но и дизайнерские решения остальных “игроков” на рынке, которые стараются решить ту же задачу.
Это самая больная тема всех времен. Только в очень редких случаях в иконках допускаются слова. Я считаю, что если дизайнер прибегает к использованию слов, значит он не в полной мере использует свой арсенал образов.
Слова и изображения - это совершенно разные инструменты представления. Иконка должна служить графическим представлением приложения, а если в ней намешаны слова и образы, то результат получается перегруженным и расфокусированным - и пользователю сложнее уловить идею такой иконки. Ну неужели не нашлось лучшего способа изобразить идею приложения, чем просто сказать словами? Когда я вижу иконки со словами, мне всегда кажется, что дизайнер просто не смог передать свою задумку более понятно.
В App Store и Google Play есть масса скучных и банальных иконок. Ваша иконка - это ваша самая сильная связь с пользователем. Именно с нее начинается знакомство с приложением в App Store. Именно с ней пользователь взаимодействует всякий раз, когда открывает приложение. Когда у приложения непродуманная, некрасивая или неподходящая иконка, оно теряет свой самый важный визуальный актив. Иконка приложения - это не довесок, о котором вспоминают в последнюю очередь, а важная часть всего процесса разработки приложения.
Иконка приложения - это небольшой кусочек концентрированного дизайна. Если вы хотите создать хорошую иконку, есть набор аспектов, которые нужно продумать. Масштабируемость, узнаваемость, согласованность и уникальность - все эти аспекты есть и в других областях дизайна. Если научитесь создавать классные иконки - повысите свой общий дизайнерский уровень.
У всех иконок - детализированных и упрощенных, креативных и обыкновенных - есть нечто общее: одинаковые по размеру, все они стараются выделиться на фоне конкурентов и привлечь внимание пользователя. Это непростая задача, и решение всегда лежит в пределах все того же фиксированного количества пикселей.
Конечно, дизайнер может чувствовать себя неуверенно: шутка ли - разработать графическое представление всего приложения! Но я надеюсь, что мои советы помогут вам обрести уверенность и смело взяться за работу. А теперь вперед - создайте фантастическую иконку для своего приложения!
Mental notes - это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Иконки являются компонентами дизайна, без которых вы не можете обойтись. Иногда трудно найти хорошие мобильные наборы значков, и вот мой список 11 бесплатных мобильных пакетов иконок, которые я нахожу особенно полезными. Есть еще много пакетов, которые я не включила в эту статью, но этот список представляет собой хорошую коллекцию для панели инструментов каждого дизайнера.
1. A General Vector Pack
Независимо от того, для какой мобильной операционной системы вы создаете дизайн, вам всегда будут нужны базовые образы телефонов и других мобильных устройств. Этот пакет иконок содержит множество подобных образов. Это общий пакет векторных иконок телефонов (мобильных и стационарных), планшетников, телефонных трубок и других предметов, связанных с мобильными звонками и мобильным использованием.
Иконки - черно-белые, но, так как это векторный пакет, вы всегда можете добавить больше цвета и/или изменить размеры значков, если хотите.
2. Flat Phone Vector Icons
Если вам нужно больше иконок телефонов и вы предпочитаете плоские иконки, оцените эти телефонные иконки. Этот упорядоченный пакет содержит около 200 плоских иконок телефонов и других элементов, связанных с мобильными устройствами. Опять же, пакет черно-белый, но у него векторная основа, поэтому будет нетрудно изменить цвета и/или размер значков. Вы можете скачать либо весь пакет, или только те иконки, которые вам нужны.
3. A Huge Megapack of iPhone, iOS7, Android and Windows 8 Icons
Этот огромный мега пакет из 10000 иконок для Android, iPhone, iOS7 и Windows8, вероятно, один из лучших ресурсов, которые можно найти в интернете, и он бесплатен как для личного, так и для коммерческого использования. Когда вы загрузите его, все остальные пакеты могут стать бесполезными, так как он содержит много полезных иконок.
10000 иконок iPhone, Android, Windows8 и IOS приложений - разных размеров, например, 20 × 20, 30 × 30, 60 × 60, 114 × 114, 512 × 512 и больше. Они также оснащены дополнениями и исходными файлами. Несомненно, каждый мобильный дизайнер должен иметь этот мега пакет. Помимо этого бесплатного пакета, авторы предлагают платную версию с более чем 80 000 иконок.
4. Mixed Android Icons and More
По сравнению с предыдущим пакетом, это набор иконок не так внушителен, но все же имеет хорошие иконки для Android которые вы можете использовать в своих личных и коммерческих проектах. Это пакет из смешанных иконок для Android - иконки устройств, общих предметов, основных элементов пользовательского интерфейса и т.д.
Это не единственный пакет иконок на этом сайте. Есть много других Android пакетов, таких как сетевые иконки, фото и видео, плоский пользовательский интерфейс, покупка товаров и т.д. Если вам нужны иконки на конкретную тему, просто просмотрите сайт, чтобы увидеть то, что еще доступно.
5. Another Mixed Android Icons Pack
Этот набор иконок также для Android, но иконки отличаются от других пакетов. Это относительно небольшой пакет из примерно 30 иконок, но он полезен, потому что он содержит значки популярных приложений и сайтов, а также настроек, голосового поиска и т.д.
В отличие от предыдущего пакета, значки красочны, но недостатком является то, что они только в формате PNG, нет векторов, что ограничивает ваши возможности редактирования.
6. 350 Free Android Icons
Еще один пакет упорядоченных иконок для Android. Это большой пакет - он содержит 350 иконок, сгруппированых в несколько категорий, таких как Basic, Buzz, Arrows, Shopping, Photo и Video, Music, Users (Основные, Ключевые Понятия, Стрелки, Покупка, Фото и Видео, Музыка, Пользователи) и т.д. Иконки не цветные, но они доступны в различных форматах, таких как PSD, AI, EPS, SVG и PNG, поэтому легко редактировать их для добавки цвета или других модификаций. По умолчанию иконки в нескольких размерах - от 24 до 512 пикселей, но опять же, вы можете изменить размер, если это необходимо.
7. More Free Android Icons
В отличие от других пакетов иконок для Android, этот пакет не для разработчиков, а для конечных пользователей. Этот пакет можно использовать для замены родных иконок для Android. Однако, поскольку пакет огромен - 207K (да, тысяч) иконок, скорее всего, Android дизайнер найдет довольно много иконок для использования - если не по прямому назначению, по крайней мере, для вдохновения. Не все иконки бесплатны, особенно для коммерческого использования, поэтому, прежде чем использовать их, проверьте лицензию.
8. Action Bar Icon Pack from Google
Если вы хотите иконки из самого Google, вы можете посмотреть пакет иконок панели действий. Для скачивания пакета, нажмите здесь. Иконки в пакете оптимизированы для различных разрешений экрана и лучше всего работают с темами Holo Light и Holo Dark.
В пакете около 150 иконок для обычных действий, таких как основные виды работы (копирование, вставка, редактирование и т.д.), навигация, рейтинги, коллекция, содержание, соц.сети, расположение, камера, медиа, устройства доступа, аппаратное обеспечение, оповещения, и дополнительные действия. Иконки в формате PNG, что не так хорошо, как векторные иконки, из-за ограниченных предложений опций редактирования PNG, но все же это не делает пакет бесполезным.
9. iOS7 Line Icons
После серии Android иконок, пришло время IOS. Первый пакет IOS иконок - это бесплатный пакет iOS7 Line Icons. Пакет содержит 80 иконок в форматах AI, PSD, SVG и PNG (и PNG@2x). Иконки охватывают разнообразные категории - от звонков до фото, музыки и навигации. Пакет в основном содержит иконки для iOS7, но есть несколько и для iOS8. Пакет является бесплатным, но вы должны ввести адрес вашей электронной почты для получения ссылки на скачивание.
10. iOS7 Tab Bar Icons
Если вы ищете иконки панели вкладок для iOS7, оцените этот набор. Пакет содержит 36 иконок панели вкладок для iOS7 в PSD формате. Среди прочего, вы найдете иконки для Inbox, Copy, Trash, Logout, Settings, Locked (Входящих сообщений, Копирования, Мусора, Выхода, Настроек, Блокировки) и т.д. Это базовый пакет, но если вам не нужно больше, чем это, вам будет удобно с тем, что есть.
11. An Android, iOS7, iPhone, and Windows8 Megapack
Это второй мега пакет в этом списке и этот пакет включает в себя иконки для Android, IOS и Windows. Этот огромный пакет содержит 175K иконок в форматах PNG и PSD. Он также сопровождается несколькими дополнениями - иконки в таких категориях, как General, Accounting, Business, Database, Education, Graphics, Multimedia, Networking и Web Design(Главные, Учетная запись, Бизнес, База данных, Образование, Графика, Мультимедиа, Сеть и Веб-дизайн).
Заключение
Ваше приложение или сайт могут изобиловать функциями, но без качественных иконок, это может остаться совсем незамеченным. Даже если вы не можете сами создавать иконки, существует много альтернатив, в том числе бесплатных. Некоторые из лучших наборов иконок для Android, IOS, iPhone и Windows8 бесплатны и я включила их в эту статью. Конечно, есть много других, которые не попали в список, если у вас есть какие-либо другие предложения, мы хотели бы увидеть их в комментариях ниже.
29.04.16 24.1KИконки PSD – незаменимый элемент любого дизайна UI , не уступающий по важности даже шрифтам, однако на практике редко кто занимается разработкой собственных иконок для каждого веб-проекта. С другой стороны, на поиск подходящих по качеству и оформлению иконок также уходит немало времени, но сегодня мы решили помочь вам, и подготовили подборку бесплатных наборов иконок на все случаи жизни.
Создание иконки для мобильного приложения
Работа над небольшим элементом графического дизайна, с которым пользователям приходилось бы часто взаимодействовать, может показаться задачей достаточно сложной. В этой статье описаны несколько советов и приемов, которые помогут найти ответ.
Важно знать, какую функцию выполняют иконки. И чем они, в сущности, являются. Это визуальный символ вашего продукта. Крошечная деталь брендинга, которая должна не только выглядеть привлекательно и выделяться на общем фоне. В идеале она отображает суть вашего приложения. Многие бросаются словом «логотип». Но иконки - не логотипы. У них есть общие моменты. Логотипы - масштабируемые векторные элементы брендинга, предназначенные для билбордов, магазинных витрин и прочих заметных мест. Иконки - чаще всего растровые изображения в квадратной рамке определенного размера. Разные подходы, инструменты, работа и, как следствие, критерии успеха.
Пакеты иконок разного размера.
Во время работы не будет лишним составить набор PNG-файлов разного размера: от 29 × 29 до 1024 × 1024 пикселей. Такой набор вы сможете использовать в разных контекстах операционной системы, когда пользователи будут взаимодействовать с иконкой ( , панель настроек, результаты поиска и главный экран устройства).
Иконки приложений можно сделать практически в любой программе, которая воспроизводит растровые файлы. Photoshop, Illustrator или Sketch. На сайте Apply Pixels множество PSD-шаблонов.
Небольшой ролик, в котором показано, как обращаться с шаблонами на Apply Pixels
Рассмотрим несколько основных приемов, которые используются в .
Это одна из главных особенностей приложения. Иконки разного размера демонстрируются в разных разделах платформы. Поэтому важно, чтобы ваши иконки были разборчивыми и уникальными. Нужно, чтобы они смотрелись хорошо как в App Store, так и на устройствах с экраном Retina, и даже в настройках.
Иконки приложений должны отображаться в разном разрешении, быть понятными независимо от их масштаба.
Сложный дизайн, когда в небольшой квадрат иконки втискивается излишне много деталей, зачастую плохо отображается в измененном масштабе. На начальном этапе, когда создается концепт будущей иконки, нужно уделить достаточно времени вопросу о том, как будет выглядеть конкретная иконка, если изменить размер.
Как улучшить масштабируемость
Дизайн в разрешении 1024 × 1024 пикселей может выглядеть обманчиво. Проверьте иконку на устройстве в разных ситуациях. Важна простота, уникальность формы или элемента, который сохраняет свои контуры и отличительные особенности. Иконка должна смотреться хорошо независимо от фона.
Хорошая иконка приложения все равно, что запоминающаяся песня: ее всегда различишь в окружающем шуме. Главный экран - ключевой компонент хорошего дизайна иконки. Форма, цвет и общая идея иконки должны резонировать с ощущениями пользователя, его внутренним чувством гармонии. Дизайн должен активизировать память на функциональном и эмоциональном уровнях.
Иконка может быть детализированной или простой; главное, чтобы в точности передавала замысел ее создателя.
Ваша иконка будет соперничать за внимание пользователя с тысячами своих конкурентов. Каждый из них - это те же 1024 пикселей, призванные установить эмоциональную и прочую связь с владельцем устройства.
Как сделать иконку заметнее
Банальные, слишком усложненные иконки вредят узнаваемости. Лучше убирать все лишние детали, до тех пор, пока общая идея будет сохраняться. Иконка стала заметнее?
Поэкспериментируйте с несколькими вариантами дизайна. Разместите их сеткой, отметьте, какие детали заметнее.
Попробуйте разобрать на составные части иконки своих любимых приложений и понять, почему они вам нравятся. За счет чего они выделяются на фоне конкурентов? С помощью каких методик их создавали?
Как с самим приложением, так и с его иконкой. Хорошая иконка служит продолжением интерфейса. Если это условие соблюдено - приложение запомнится.
Формируя единообразие программного продукта в глазах пользователей, вы увеличиваете коэффициент удержания и виральность. Проще говоря, если иконка гармонирует с функционалом и дизайном - это большой плюс.
Как добиться единообразия
Один из очевидных способов - придерживаться общей цветовой гаммы и языка дизайна. Так, если интерфейс преимущественно зеленый, иконка тоже должна быть зеленой.
Еще один способ - связать символику иконки непосредственно с функциональностью приложения. Хотя это удается не всегда.
Здесь вроде бы все понятно без лишних слов. Придерживаетесь избранной стилистики, следуете определенному тренду? Прекрасно. Главное, чтобы это был именно ваш дизайн, а не копия. Ваша иконка всегда будет соперничать с другими за внимание пользователей, но способность выделиться на общем фоне - аргумент в ее пользу.
Уникальность - штука непростая, поскольку зависит не только от навыков дизайнера, но и от того, что делают конкуренты.
Как повысить уникальность
Посмотрите, что делают другие, и придерживайтесь другого направления. Всегда проводите исследования - миру не нужна еще одна иконка в виде галочки.
Один-единственный глиф на однотонном фоне - скользкий путь. Так сложно добиться уникальности. Экспериментируйте с цветами и композициями, пытайтесь найти новые и понятные визуальные метафоры.
Цвет - хороший способ внести изменения в концепт.
Чтобы добиться уникальности придется поупражняться в поиске новых идей. От стиля тут мало что зависит.
Дизайн иконок может послужить источником вдохновения: широкий спектр идей, без каких-либо условностей.
Лишь в единичных случаях есть смысл прибегать к дополнительному инструменту абстракции - письменному слову. И, как правило, слова - признак того, что иллюстративный арсенал используется не в полную меру.
Слова и изображения - отдельные инструменты. Если их объединить, графическая репрезентация получится хаотичной, ее будет сложно расшифровать. Неужели нет ничего лучше сухих слов? Если есть слова, скорее всего, дизайнеру не удалось передать свое видение.
Также не нужно добавлять иконке название приложения. Вместо этого потратьте время на интересный иллюстративный концепт.
«Но Facebook же использует ’f’ в своей иконке»! Если присутствует только одна буква, она теряет свое «словесное» выражение и становится частью иллюстрации. А вообще это исключение из общего правила.
Логотип компании и название, втиснуть в канву иконки, нельзя назвать подходящим вариантом дизайна. Вы когда-нибудь видели символ или глиф, который хорошо смотрится в условиях ограниченного пространства? Если нет, тогда лучше выбрать что-то другое. Помните: иконка и логотип - разные вещи. И уместны они в разных контекстах.
В App Store и Google Play много примеров непродуманного дизайна иконок. Иконка - посредник между приложением и его пользователем. Это первое, что человек видит в App Store, и то, с чем он взаимодействует, всякий раз открывая приложение. Когда пользователь думает о приложении, в его сознании всплывает образ иконки.
Иконками не стоит заниматься в последнюю очередь, это часть общего процесса. Они могут быть простыми и незамысловатыми, или же с обилием деталей. Но, как бы там ни было, все иконки объединяет общее свойство: они привлекают внимание людей в условиях ограниченного пространства. В этом отношении все иконки находятся в равных условиях.