для маркетологов, предпринимателей, редакторов и всех, кто работат с сайтами. Разбираемся, где взять иконки бесплатно, не нарушая авторские права, как иконки повысить продажи и как использовать икаце, чтобы люди читали ваши тексты.
Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de sécurité :
Бесплатные иконки : 22 лучших сайта
Где купить отдельную иконку или набор
Как заказать иконки у иллюстратора
каких случаях использовать иконки
Как выбрать иконки для проекта
Как использовать иконки на странице
Подведем итоги
Бесплатные иконки : 22 лучших сайта
Где купить отдельную иконку или набор
Как заказать иконки у иллюстратора
каких случаях использовать иконки
Как выбрать иконки для проекта
Как использовать иконки на странице
Подведем итоги
Что такое иконка
Иконка - это максимально упрощенное изображение объекта или действия.
или действия проще, чем слово, что ускорят процесс восприятия инйствия информации. для обозначения сайта, кнопок интерфейса и для того, чтобы сделать акцент. Иконки должны быть запоминающимися, понятными и легко считывамыми. из одного или нескольких объектов, которые составляют гармоничную композицию.
у иконок есть еще одно неоспоримое премущество перед алфавитом - отсутствие языкового барьера. Иллюстрации понимаютому значки используют в операционных системах, в интерфейсах, на сайтах, в презтациях и даже в рекламе.
у иконок есть еще одно неоспоримое премущество перед алфавитом - отсутствие языкового барьера. Иллюстрации понимаютому значки используют в операционных системах, в интерфейсах, на сайтах, в презтациях и даже в рекламе.
"
разнки используют по разным, в зависимости от задачи.
когда для букв мало места или нет вовсе ; когда вы знаете, что пользователь не будет читать текст и в случаях, когда надо выигать вреть время.
разким разрешением, зачаста на экранах с низким разрешением, зачастую, в приложениях. Тут важно использовать недвусмысленные и понятные иконки, которые правильно передают идею.
Как маяки в тексте. текст, с неболь абзацами и подзаголовками, выигат добавлания тематических иконок в ключевых местах и подзаголовками, выигат добавления тематических. за иллцепится иллюстрацию и за текст, которытт, она сопровождает.
Для лучшего восприятия. Здесь действует эффект превосходства образа : изображения мы запоминаем лучше, чем текст. Этот прием используют, чтобы быстрее обучить пользователя или вызать ассоциации. Например, если вы запустите новое приложение и спользуете универсальные, привычные пользователю значки, он быстрее разберется с00.
когда для букв мало места или нет вовсе ; когда вы знаете, что пользователь не будет читать текст и в случаях, когда надо выигать вреть время.
разким разрешением, зачаста на экранах с низким разрешением, зачастую, в приложениях. Тут важно использовать недвусмысленные и понятные иконки, которые правильно передают идею.
Как маяки в тексте. текст, с неболь абзацами и подзаголовками, выигат добавлания тематических иконок в ключевых местах и подзаголовками, выигат добавления тематических. за иллцепится иллюстрацию и за текст, которытт, она сопровождает.
Для лучшего восприятия. Здесь действует эффект превосходства образа : изображения мы запоминаем лучше, чем текст. Этот прием используют, чтобы быстрее обучить пользователя или вызать ассоциации. Например, если вы запустите новое приложение и спользуете универсальные, привычные пользователю значки, он быстрее разберется с00.
Les gens de l'extérieur ne sont pas les mêmes que ceux de l'intérieur, ils sont les mêmes que ceux de l'extérieur. сети сейчас очень много ресурсов, где можно найти иконки. сервисах, купить готовый понравившийся стек (набор) или отдельные, или заказать у диза䐹нки, или заказать у дизайнера разработку уникальных значков. Мы отобрали лучшие источники.
Где взять иконки для сайта ?
и платные, а также написали ресурсы, где можно заказать их у дизайнеров.
Прямо в Тильде
панель для поиска иконок с возможностью изменять вид.
Откройте меню "Контент" блока ижмите на кнопку "Выбрать иконку". по кать иконки по категориям, через поиск или найти подходящую, просколлив библиотеку. редактор, где можно настроить цвет, размер, толщину, цвет фона изру, толщину, цвет скугление изображения.
Откройте меню "Контент" блока ижмите на кнопку "Выбрать иконку". по кать иконки по категориям, через поиск или найти подходящую, просколлив библиотеку. редактор, где можно настроить цвет, размер, толщину, цвет фона изру, толщину, цвет скугление изображения.
Бесплатные иконки : 21 лучший сайт
01. Tilda Icons
02. Thenounproject
первое, что приходит в голову, когда речь идет об иконках. Большая, очень удобный поиск и быстрое скачивание. Можно использовать бесплатно в обмен на указание автора.
03. Smashingmagazine
Коллекции бесплатных иконок, отобранные редакцией Smashing Magazine. Один из лучших ресурсов для поиска иконок высокого качества.
04. Flaticon
Возможно, самая большая коллекция - свыше 220 000 иконок, сгруппированных в 3 600 наборов.
05. Behance
Не самый очевидный способ, но по запросу free icons можно найти готовые наборы с красивыми иконками.
06. Iconmonstr
Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique et de santé publique. Не самая большая коллекция, но что хорошо - иконки в одном стиле.
07. Pixeden
Наборы иконок в png разного размера от 16px до 512px.
08. Pixelsmarket
Сайт-агрегатор, который собирает сылки на менее известные сайты, где можно найти бесплатные иконки хорошего качества.
09. Graphicsfuel
Много коллекций разноцветных иконок со всего интернета.
10. Fribly
Иконки от разных дизайнеров, регулярно обновляется.
11. Icojam
Небольшая команда дизайнеров, которая рисует иконки на продажу (и делает это очень неплохо), но часть раздает бесплатно.
12. Iconshok
архив с двумя миллионами иконок, сгруппированых в 400 наборов. Правда, бесплатно скачать иконки можно только для личного использования (например, для резюме) Один набор стоит $ 19, а за $ 99 можно купить расширеный набор из 987 586 иконок.
13. Queue créative
Нужна необычная иконка ? Немаловероятно, что вы найдете ее на Creative Tail.
14. Ego-icônes
1500+ геометричных иконок в "угловатом" стиле.
15. Dreamstale
Бесплатные иконки с другими плюшками, типа текстур и шрифтов, но может это и неплохо ?
16. Dryicons
Больше 5000 иконок в 77 наборах.
17. Mricons
Более 100 000 иконок на разные темы.
18. Les icônes sans fin
Очень простые элегантные иконки доступны для скачивания в PNG и SVG формате.
19. Mariodelvalle.github
Набор из 350 иконок без какой-то определенной тематики (монстры, стрелки, баблы, коты и человечки), но они векторные, симпатичные и, возможно, именно тут найдется то, что вам нужно.
20. Bonstuffnononsense
Набор небольшой, зато хорошо тбран - иконки высокого качества. Имитируют рисование от руки и абсолютно бесплатные - не требуют даже ссылки.
21. Dribble
ресурс, где можно встретить интересные варианты. Может быть искать их не так удобно, зато можно встретить оригинальный набор.
иконки, так же как изображения, защищены авторским правом. Но вы можете бесплатно использовать те из них, что распространяются по лицензиям Creative Commons. Могут быть :
- разрешенные к коммерческому использованию ;
- запрещенные к коммерческому использованию.
Также важно правильно подписывать изображения по лицензии Creative Commons. Указание авторства - обязательное условие использования. Делается это по шаблону "Имя автора / Наименование источника / Тип лицензии".
Пример : John Wood / Flickr / CC BY-SA или Université d'État de Moscou / Wikimedia / CC BY
Где купить отдельную иконку или набор
нужных вариантов или же вы нашли стек значков, которые значков, зоторые здорово вписываются в концепцию страницы, купите их. у иллчстра, потому чле, таказывать разработку значков у лллюстра, потому что такие наборы продаются неоднократно.
01. PixelLove
- Иконки в стиле iOS 7.
- Продается паком из 5000 иконок.
- иконок можно скачать бесплатно. Полный стек стоит $ 59.
- Форматы - SVG, PNG, ICO, ICNS, AI, PSD.
02. Pixeden
- Плоские, объемные иконтурные иконки в стеках.
- Поиск по категориям и ключевым словам.
- Стоимость - часть иконок можно скачать бесплатно, и спользовать, указав автора. Остальные стеки доступны по подписке : $ 10 в месяц или $ 96 в год.
- Форматы - SVG, PNG, ICO, ICNS, AI, PSD.
03. IconFinder
- Плоские, объемные иконтурные иконки.
- Поиск по категориям, ключевым словам, размеру и типу лицензии.
- бесплатно, и спользовать на сайте, указав автора. $ 9 в месяц за 25 загрузок или $ 29 в месяц без ограничений по загрузкам. Можно оплачивать иконки поштучно : минимальная стоимость $ 1 за иконку.
- Форматы - AI, EPS, PSD.
04. IconSetc
- Контурные и одноцветные иконки.
- Поиск по ключевым словам и тегам.
- Стоимость - $7 в месяц или $69 в год.
- Форматы - SVG, PNG.
05. IconSweets
- Иконки в стиле iOS 7.
- Продается паком из 1000 иконок, без предпросмотра.
- Стоимость - 10 $.
- Форматы - PNG, PSD.
Как заказать иконки у иллюстратора
"
показатель качества вашего проекта. Если сет нарисован под конкретный проект, это сразу заметно.
икония - контур, плоский стиль илий плоский проский прспектива. Учитывается и смысл, который должен передавать значок. Например, нарисовать "яблоко" гораздо проще, чем изобразить понятие "независимость". придется потратить намного больше времени только на то, чтобы придумать не думать придумать не двусмысленую идеограму.
по средней цене $ 10 за иконку. российский проект, в котром сошлись на цене в 500 рублей за штуку. Если проект объёмный интересный, всегда можно немного снизить цену :-)
икония - контур, плоский стиль илий плоский проский прспектива. Учитывается и смысл, который должен передавать значок. Например, нарисовать "яблоко" гораздо проще, чем изобразить понятие "независимость". придется потратить намного больше времени только на то, чтобы придумать не думать придумать не двусмысленую идеограму.
по средней цене $ 10 за иконку. российский проект, в котром сошлись на цене в 500 рублей за штуку. Если проект объёмный интересный, всегда можно немного снизить цену :-)
бирж много исполнителей, которые готовы нарисовать значки для вашего проекта. катор специализируется на иконках. каждый понимает разницу между пиктограмой идеограммой. Многие, что пришло в голову или слизывают идеи с готовых работ, часто пародируя и само исполнение.
Найти иллюстратора можно на профильных ресурсах, предварительно отфильтровав тех, кто специализируется на иконках :
Найти иллюстратора можно на профильных ресурсах, предварительно отфильтровав тех, кто специализируется на иконках :
случаях использовать иконки на сайте
1. Для навигации
Les deux parties sont d'accord sur le fait qu'il s'agit d'une question d'intérêt général et qu'il n'y a pas d'accord sur le fait qu'il s'agit d'une question d'intérêt général. Чаще всего используют в интерфейсах приложений. На сайтах - редко, чтобы не запутать посетителей.
Меню
Корзина
Отчеты
Настройки
для навигации, которые можно использовать без подписей
Самый популя значок навигации вебе - иконка-гамбургер, которой обозначают меню. интернет-магазинах можно найти иконку стележкой - она ведет в корзину. гаечный ключ ассоциируются настройкой.
Не стоит экспериментировать с дизайном таких иком таких и их расположковй гаечный ассоциируются с настройкой. Не столож экспериментировать с дизайном с сайте. у васта, расположите в привычном правом верхнем углу с понятным пользователю значком.
и дизайн должен помогать им ориентироваться на страни, а нестанице, а ставить втупикк.
Не стоит экспериментировать с дизайном таких иком таких и их расположковй гаечный ассоциируются с настройкой. Не столож экспериментировать с дизайном с сайте. у васта, расположите в привычном правом верхнем углу с понятным пользователю значком.
и дизайн должен помогать им ориентироваться на страни, а нестанице, а ставить втупикк.
2. Чтобы привлечь внимание
"
"броблему "быстрого взгляда". и тогда, когда нужно зацепить внимание человека и провести его странице до целевого до целево действия.
быстро скролить страницы, нуждаются в иконках. пугает боль текст, смешанный в единое полотно, поэтому они уходят с сайта.
структуре и даже в режиме "просмотра по горизонтали" уловить суть. Поэтому иконки - важные элементы с точки зрения маркетинга, они работают как маяки и зацепки.
быстро скролить страницы, нуждаются в иконках. пугает боль текст, смешанный в единое полотно, поэтому они уходят с сайта.
структуре и даже в режиме "просмотра по горизонтали" уловить суть. Поэтому иконки - важные элементы с точки зрения маркетинга, они работают как маяки и зацепки.
такими значками сопровождают текст, чтобы расставить акценты и выделить особо интересные и важные моменты. Иллюстрации на таких быть самыми разнобразными и совершено непонятными без текстового сопровождения - одного слова или целой колонки.
детали двухдневного путешествия Москва-Торжок
якорнки - объекты, они вызывают интерес. Если посетителя заинтересовала иллюстрация, он обязательно прочтет подпись к ней.
С помощью иконок легко вынести главную информацию на сайте на первый план, чтобы она не потерялась в простыне текста.
Используйте их, чтобы выделить отдельные услуги или этапы сотрудничества, обозначить преимущества товара или рассказать о комплектаци или тарифах.
С помощью иконок легко вынести главную информацию на сайте на первый план, чтобы она не потерялась в простыне текста.
Используйте их, чтобы выделить отдельные услуги или этапы сотрудничества, обозначить преимущества товара или рассказать о комплектаци или тарифах.
3. Чтобы указать действие
Les enfants de moins de 18 ans sont plus nombreux que les enfants de moins de 18 ans. нажатие сопровождается изображенным на них действием. Самые распространеные значки действий : создать, скачать, добавить, позвонить, написать, вырезать, вставить.
Сохранить
Выйти
Поделиться
Скопировать
Иконки-призывы к действию
понимать иконки по-разному, поэтому используйте недвусмысленные иллюстраци, а еще лучше подписывайте их.
для разных целей - например, стрелку вниз. два действия : "скачать" или "опуститься вниз страницы или блока".
для разных целей - например, стрелку вниз. два действия : "скачать" или "опуститься вниз страницы или блока".
Скачать
Вниз страницы
для разнаковые стрелки для разных действий
Как выбрать иконки для проекта
Если хотите просто скачать и вставить иконку на сайт, нужны форматы ICO, PNG и SVG. Лучше всего использовать последний : это - векторный формат, который масштабирутся до любого размера без потери качества.
кто владеет графическими редакторами и может кастомизировать иконку под себя : добавить несколько штрихов, поправить тень, заменить цвета.
Контурная
Плоская
Объемная
и та же иконка в разных стилях
"
Les deux sont en train de s'entendre sur un plan d'action. Они не сделают сайт крутым и уникальным, а вот наоборот - легко.
в SVG, и они здорово выглядят на экрана любогоголядят любого разреешения. Когда нужной иконки нет в SVG, отрисовываю ее, чтобы она не была черной овцой, хотя на это уходит много времени.
Очень важно подобрать иконки в одном стиле, которые впишутся в концепцию сайта и будут понятны постителям при первом же взляде.
маленький бюджет ина покупку или рисование иконок денег нет, самый адекватный вариант - контурные иконки.
в SVG, и они здорово выглядят на экрана любогоголядят любого разреешения. Когда нужной иконки нет в SVG, отрисовываю ее, чтобы она не была черной овцой, хотя на это уходит много времени.
Очень важно подобрать иконки в одном стиле, которые впишутся в концепцию сайта и будут понятны постителям при первом же взляде.
маленький бюджет ина покупку или рисование иконок денег нет, самый адекватный вариант - контурные иконки.
1. уникальности в пользу узнаваемости
Les deux parties sont d'accord sur le fait qu'il s'agit de l'un des plus grands projets de l'histoire de l'humanité. потому что одна и та жет, сложнее, чем кажя, потому что одна и та же иллюстрация может вызвать разные ассоциации. Чтобы этого не произошло, откажитесь от уникальности в пользу узнаваемости.
Les personnes qui ne sont pas en mesure de s'acquitter de leurs obligations en vertu de la loi sur l'immigration et la protection des réfugiés (LIPR) ne sont pas autorisées à s'inscrire sur la liste des demandeurs d'asile, mais elles peuvent le faire. конка может быть как первым, так и вторым. Разберемся, в чем разница.
Пиктограмма - знак, который буквально обозначает то, что нарисовано.
Пиктограмма - знак, который буквально обозначает то, что нарисовано.
Знак "Плохая дорога"
Указатель "Туалет"
Инструмент "Кисть"
Примеры пиктограмм
Les produits de l'agriculture et de l'élevage sont des produits de consommation courante. - но бозначает который на пиктограму, но бозначает какую-то идею или понятие, связанное с иллюстрацией.
Знак "Обгон запрещен"
Инструмент "Вырезать"
Табличка "Курить запрещено"
Примеры идеограмм
Les enfants de l'école sont en train d'apprendre à lire et à écrire, et ils sont en train d'apprendre à lire et à écrire. как раз из-за разны ассоциациций. Поэтому навигационые иконки, обозначающие действия, часто сопровождают текстом.
2. Ищите иконки в одном стиле, в идеале - одного автора
дизайна, в моду вошли популяризацией материльного дизайна, в моду вошли плоские иконки. Они здорово выглядят и вписываются в концепцию любого сайта, если только там нет объемных объектов и градиентов. Могут быть одноцветными и цветными.
для сайта долж на одинаковой подложке - квадрат, круг - или без нее ; если на значках есть тень, она должна падать с одной стороны и под одинаковым углом ; используемые цвета - либо все чистые и насыщенные, либо все пастельные.
Всегда используйте иконки на сайте в одном стиле - объемные, плоские или контурные. Старайтесь подбирать иконки из одного стека, или хотя бы одного автора, потому что иллюстрации разных авторов будут бросаться в лаза, создавать впечатление небрежной и дешевой работы.
для сайта долж на одинаковой подложке - квадрат, круг - или без нее ; если на значках есть тень, она должна падать с одной стороны и под одинаковым углом ; используемые цвета - либо все чистые и насыщенные, либо все пастельные.
Всегда используйте иконки на сайте в одном стиле - объемные, плоские или контурные. Старайтесь подбирать иконки из одного стека, или хотя бы одного автора, потому что иллюстрации разных авторов будут бросаться в лаза, создавать впечатление небрежной и дешевой работы.
Как использовать иконки на странице
слева справа, но никогда - снизут быть сверху, справа, но никогда - снизу текста. Дизайнеры Тильдеального расположения иконок, и разработали универсальные блоки, которые можете добавить на страницу в несколько кликов.
Блоки с иконками ищите в библиотеке блоков, раздел "Преимущества". Замените стандартные значки : кликните на них, чтобы использовать стандартный загрузчик и найти нужный файл на компьютере.
нужный, создайте свой собсли при помощи инструмента "Нулевой" блок. Как это сделать - смотрите в идеоуроке "Zero Block: созданиесобственых блоков"
нужный, создайте свой собсли при помощи инструмента "Нулевой" блок. Как это сделать - смотрите в идеоуроке "Zero Block: созданиесобственых блоков"
1. Чтобы перечислить преимущества или возможности
2. Чтобы показать схему и этапы работы
3. услуги или ключевые моменты
4. показать различия в тариф планах или комплектациях
Подведем итоги
1
иконки на сайте, чтобы выделить главное, увлечь читателя и провести его по странице до целевого действия.
2
поль, а лучше - подписывайте их. Подпись - одно слово или целая колонка текста.
3
добавить на страницу иконки, воспользуйтесь универсальными блоками Тильды. Это делается в три клика : "Библиотека блоков" → "Преимущества" → один из подходящих блоков. Если этого мало, соберите свой собственный "Нулевой" блок.
4
похожие по исполнению иконки. Лучше всего - из одного стека или одного автора. Если не получается найти схожие по стилю цветные иконки, используйте одноцветные или контурные.
5
Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général et qu'il n'y a pas de raison de s'y opposer. Покупать и заказывать только для крупных проектов, когда хотите показать свою платежеспособность или просто птому, что вы так решили и можете себе это позволить.
Il n'y a pas d'autre choix que d'aller à l'école : Владислав Безпалько, Ира Смирнова
Иллюстрации, дизайн и верстка : Юлия Засс
Иллюстрации, дизайн и верстка : Юлия Засс
расли материал вам понравился, расскажите о нем друзьям. Спасибо !
Читайте также :
