Иконки в веб-дизайне — Дизайн на vc.ru

{«id»:13958,»url»:»\/distributions\/13958\/click?bit=1&hash=1653c54cdbeec930ff9a7c615ae67978f3e6ecc3d631904994eebf6038843032″,»title»:»\u041b\u0438\u0447\u043d\u044b\u0439 \u043e\u043f\u044b\u0442: \u00ab\u041c\u044b \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u043a\u0430\u0437\u044b \u0441 \u201e\u041c\u0430\u0440\u043a\u0435\u0442\u0430\u201c \u043d\u0430 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0435\u00bb»,»buttonText»:»\u041a\u0430\u043a \u044d\u0442\u043e?»,»imageUuid»:»691462d6-61d9-5119-8edb-356852492b15″}

Иконки на сайтах нужны для ускорения восприятия информации пользователем. Благодаря правильному использованию иконок, пользователь может сразу же понять о чем конкретно идет речь и какие смыслы хотел донести дизайнер.

918
просмотров

Иконки сфер деятельности компании не противоречат описанию, а дополняют и раскрывают суть.

Иконки с кратким описанием преимуществ компании, информация считывается быстро, все иконки подходят к своему описанию.

Использовать иконки, которые не ассоциируются с информацией, которую необходимо донести — неэффективно, такой вариант оформления страницы ресурса только введет пользователя в заблуждение. В таком случае, клиенту прийдется прочитать описание к каждой иконке, что займет больше времени на изучение информации о компании или же приведет к тому, что потенциальный клиент просто покинет ресурс. Например, не стоит заменять привычную всем иконку лупы (поиска) на какой-то другой образ, который может показаться более симпатичным — это может снизить показатели эффективности сайта.

Также, бывают случаи, когда лучше не использовать иконки, а просто прописать всю информацию хорошим текстом, так как иконки могут сбить с толку. Использовать иконки только ради дизайна не всегда удачная мысль, визуальные образы на сайте должны помогать пользователю в восприятии новой информации.

Итак, вот небольшой чек-лист по использованию иконок:

• Иконки должны быть понятные и отражающие суть информации.
• Правильно подобранные иконки помогают быстрее понять текст на сайте.
• Используем иконки только там, где это необходимо и уместно.
• Текст к иконке всегда должен подходить к ее образу.
• Все иконки должны быть в одном стиле.

Перейдем к полезным ресурсам, где можно найти разные иконки для ваших проектов:

• https://app. streamlinehq. com/icons/streamline-mini-line — 1 000 бесплатных иконок с возможностью редактирования;
• https://vertex. im/ — коллекция бесплатных 3д иконок для личного и коммерческого пользования;
• Icons by Premast — коллекция более чем тысячи тематических иконок для ваших проектов;
• IconBros — библиотека из более чем 15 тысяч иконок, сгруппированных в 332 коллекции;
• Pichon — больше 135 тысяч иконок в различных стилях в одном приложении. Можно скачать для Mac, Windows, Figma, Photoshop и т.д.;
• The Icon Of — большая коллекция иконок из более чем 20 категорий с поддержкой самых популярных форматов;
• Streamline Flex Icon Set — коллекция из 500 стильных векторных иконок в минималистичном стиле, которые вы можете бесплатно использовать в любых целях;
• iconer — сервис с большим количеством иконок, можно настроить начертания, цвет и формат для экспорта;
• Iconduck — коллекция из 150+ наборов иконок и иллюстраций с открытым исходным кодом;
• Iconbay — бесплатная коллекция стильных современных иконок в пяти стилях.

Как правило, у людей образное мышление и когда мы видим привычный образ, нам легче понять суть. Потому иконки на сайте — отличный инструмент для привлечение внимания и ускорения восприятия информации. Используйте их правильно и будет вам счастье 🙂

10 наборов качественных бесплатных плоских иконок

Плоский дизайн за последние годы приобрел большую популярность. Это неудивительно, так как у него есть преимущества в художественном и даже техническом плане.

Если вы решили работать с плоским дизайном, то вы, скорее всего всегда ищете новые интересные ресурсы.

Вам повезло! Это именно то, о чем мы собираемся сегодня рассказать.

Иконки, которые я собираюсь представить сегодня преимущественно минималистичны и без излишеств. Большинство иконок ориентированы на пользовательский интерфейс, но есть также общие наборы.

В этой серии мы предлагаем вам подборку социальных иконок, связанных с компьютером и техникой в целом, магазинами, деньгами и электронной коммерцией, хотя и не все из них будут плоскими.

Я предполагаю, что большинство из вас так и делает, но думаю, что напоминание не повредит: прежде чем использовать любой бесплатный продукт, особенно в коммерческих проектах, прочитайте лицензию на всякий случай. Вполне возможно, что некоторые из иконок были бесплатными, когда я включала их в статью, но затем условия лицензии изменились. Всегда лучше быть осторожным, чем потом сожалеть – просто перепроверьте лицензию.

После всех необходимых разъяснений, давайте перейдем к наборам иконок.

1. Основные векторные UI иконки

Независимо от того, для какого сайта/приложения вы создаете дизайн, основные иконки интерфейса всегда приветствуются. Этот набор иконок предлагает более 50 векторных иконок для общих элементов пользовательского интерфейса, таких как Домой, Поиск, Отменить, основная навигация и т.д. Пакет содержит SVG, EPS, PSD и PNG версии иконок.

2. Общие векторные UI иконки

В первом пакете – только самые основные иконки, в дополнение к ним, вам понадобится больше UI иконок. Вот еще один векторный пакет с более чем 100 иконками.

И снова в пакете SVG, EPS, PSD и PNG версии иконок. В этих иконках нет никаких излишеств, но, если вам нужно, их легко отредактировать.

3. 384 бесплатные векторные плоские иконки

В то время как предыдущие две коллекции были черно-белыми, это цветной набор. Это пакет элегантных плоских иконок на разную тематику.

На самом деле это 192 иконки, но в двух версиях – цветной и черно-белой. Что касается форматов, пакет доступен в AI, EPS, PDF и PNG (64px и 128px).

4. Общепринятые векторные иконки

Вполне возможно, что в предыдущих пакетах общих векторных иконок есть все иконки, которые вам нужны (и даже больше), но так как не бывает слишком много бесплатных ресурсов, вот некоторые общепринятые векторные иконки. Это большой пакет – 140+. Он также содержит такие иконки, как для почты, блокировки, диаграмм, круговых диаграмм и многое другое.

Пакет доступен в SVG, EPS, PSD и PNG форматах, что снова означает, что вы можете редактировать иконки, как вам угодно.

5. Круглые плоские UI иконки

Мы вернулись к плоским иконкам. Особенностью этих иконок является то, что вы можете настроить их непосредственно на сайте. В пакете 119 иконок, но с безграничной возможностью настройки, вы можете создать столько вариантов иконок, сколько вы хотите.

Еще одной приятной особенностью этого набора является то, что все иконки имеют названия. К сожалению, во многих пакетах иконки не имеют названий, и приходится догадываться. Правда, в некоторых случаях все достаточно очевидно, но бывает и сложно быть уверенным без названия.

6. Круглые плоские иконки различных форм

Если вам нужны иконки различных форм, просмотрите этот пакет. В нем есть иконки с различными обычными и необычными формами, такими как геометрические фигуры, сердца, цветы, завитки и т.д.

Набор состоит из 82 полностью настраиваемых иконок, но, в отличие от предыдущего набора, многие из форм не имеют названий, так что нужно будет догадаться. Это конечно не портит дела, но с названиями проще.

7. Векторные иконки курсоров и указателей

Подобные иконки всегда нужны дизайнеру. Этот пакет из 70+ бесплатных иконок в SVG, EPS, PSD и PNG не совсем большой, но он предлагает много иконок, которые вы можете использовать в качестве основы для разработки ваших собственных указателей и курсоров. В пакете нет некоторых курсоров, но в целом набор богат.

8. 80+ бесплатных векторных иконок телефонов

Если вы разрабатываете мобильные сайты и приложения, этого пакета из 80+ телефонных иконок может не хватить, но если вам просто нужны иконки телефонов для веб-дизайна, то этот набор – хороший старт.

Пакет содержит векторные иконки смартфонов, стационарных телефонов, вещания и прочих объектов связи. Если вам нужно больше мобильных иконок, посмотрите эту статью, где вы найдете большое количество иконок для Android, iOS и Windows.

9. Округлые векторные иконки связи

Этот пакет иконок связи включает в себя круглые иконки для электронной почты, чата, текста, смартфона, сообщений, заметок и других подобных способов связи. Иконки двухцветные, но так как это векторный набор, вы можете легко перекрасить их, если требуется.

Пакет представлен в двух вариантах – $5 коммерческая лицензионная и бесплатная версия (которая требует указания авторства).

10. Плоские векторные социальные иконки

Существует огромный выбор социальных иконок – плоских или каких-то других. Однако если вы ищете простые, минималистичные, плоские социальные иконки, выбор сужен. 

Набор содержит 12 иконок самых популярных социальных служб. Каждая иконка представлена в квадратной, округлой и круглой форме. Пакет доступен в EPS и PNG (32×32 с центром размещения иконки 16×16).

Вот все 10 различных наборов плоских иконок для вашего будущего проекта.

14-03-2016

3060 значков преимуществ — бесплатно в SVG, PNG, ICO

• Все активы
• 3D иллюстрации
• Лотти Анимации
• Иллюстрации
• Иконки

Фильтры

Все ресурсы

3D-иллюстрации

Анимации Lottie

Иллюстрации

Иконки

Бесплатно

Премиум

Все

Физические лица

Упаковки

Цветной контур

Линия

Символ

Плоский

Скругленный

Двухцветный

Градиент

90 016 Дудл

Изометрия

• Бизнес
• Финансы
• Разнообразный
• Животное
• Домашние питомцы
• Управление бизнесом
• Электронная коммерция и покупки
• Инфографика
• Люди
• Покупка
• Криптовалюта
• Сеть и связь
• Пользовательский интерфейс
• Маркетинг и брендинг
• Школа
• Черная пятница
• Природа
• Корпоративная жизнь
• Сео и Интернет
• Фондовый рынок
• Транспортное средство
• Запускать
• Здравоохранение и медицина
• Коммуникация
• Диета
• Научная технология
• Преступность и безопасность
• Развлечение
• Здания
• Студент

Популярные

Последние

Популярные

Актуальные

Получите неограниченный доступ к более чем 6,5 миллионам активов

Получите неограниченное количество загрузок

Выгода
Значок

Выгода
Значок

Выгодный приз
Значок

Преимущества
Значок

Выгода
Значок

Выгода
Значок

Преимущества
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Преимущества
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Преимущества
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Преимущества
Значок

Преимущества
Значок

Выгода
Значок

Преимущества сторителлинга
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Выгода
Значок

Люди также ищут:

• значок ми png
• иконки гербер
• значок папки сервера
• значок для давонлода
• эмодзи поджигателя
• метод обучения эмодзи
• инновационные сетевые иконки бесплатно
• смайлики монитор камеры видеонаблюдения
• эмодзи стрельба из пистолета
• бесплатные иконки поиска пароля
• значок щита героя скачать
• хранилище неограниченное значок загрузки
• бесплатные иконки эко корзины
• иконки для связи с персоналом
• сердитая тетя значок png
• значок файла obj png
• значки против царапин бесплатно
• казахстанское платье эмодзи
• инопланетянин связи значок
• логотипы музыкальных коллективов
• значок команды кода svg
• игрушка пожертвовать логотип
• бесплатные иконки шрамов на сердце
• лепрекон ирландская икона png
• отключить символ палки
• значок пляжный душ
• бесплатные цветные иконки
• значок убежища от радиоактивных осадков
• сломанная корзина эмодзи
• иконки гонок на время

5 Преимущества библиотеки фирменных значков

Значки помогают всем нам понять мир, осознаем мы это или нет. Даже люди, которые никогда не использовали настоящую дискету, узнают, что значок дискеты означает «сохранить». Восклицательный знак на значке сообщает о необходимости соблюдать осторожность. Наши любимые упрощенные человеческие фигуры (одна в очень треугольном платье) ведут нас в ближайшую ванную комнату.

И вы также можете добавить эту визуальную коммуникацию к своему собственному контенту. Читайте дальше, чтобы узнать о некоторых из самых больших преимуществ добавления пользовательской библиотеки значков в ресурсы дизайна вашего бренда.

1. Иконки создают визуальный язык для вашего бренда и контента.

Вы будете удивлены, насколько маленький визуальный сигнал, такой как значок, может привлечь внимание вашего читателя и помочь ему запомнить ваши сообщения. Это все часть построения визуального языка. Ваша аудитория начнет узнавать ваши иконки, даже если они этого не осознают. Может быть, вы используете значок видеокамеры, когда продвигаете свои вебинары. Или руки, держащие сердце, когда вы говорите о своей благотворительности.

Вы даже можете изобразить свои продукты в упрощенном виде с помощью специальных фирменных значков. Ваша организация не похожа ни на одну другую. Как общий набор иконок действительно может помочь рассказать ваши истории?

Библиотека значков предназначена не только для внешней аудитории. Создавайте пользовательские значки для внутренних коммуникаций. Как бы вы изобразили различные группы ресурсов или льгот для сотрудников?

Вот несколько примеров фирменных значков.  Нажмите на каждое изображение, чтобы увидеть значки в контексте полной инфографики:

2. Библиотека пользовательских значков делает ваш контент более совершенным.

Да, значки великолепны, но использование любого старого JPEG в качестве значка не поможет. Ваши сообщения заслуживают лучшего, чем картинки, верно? Последовательность добавляет легитимности вашему контенту. Иконка, которая не соответствует другим — или, что еще хуже, группа иконок, состоящая из все не совпадают — обесценивают ваш бренд, делая вас менее заслуживающим доверия.

У вас есть важные вещи, которые нужно сказать, и безупречные визуальные эффекты подскажут вашим читателям, что это важно.

3. Специальная библиотека значков делает создание контента более масштабируемым.

Наличие обширной библиотеки значков, соответствующих установленным правилам бренда, экономит время и усилия при создании новых материалов. Даже люди, не являющиеся дизайнерами, могут добавить визуальную изюминку в свой контент, если у них есть доступ к библиотеке и четкие инструкции по использованию. (Например, не растягивайте значки, не добавляйте тени, не меняйте цвета и не забывайте оставлять поля. Спасибо.) 

Члены вашей команды могут даже загружать ваши красивые значки в простые инструменты для создания контента, такие как Canva. Они могут размещать их на слайдах презентации (используя четкие рекомендации бренда по интервалам и стыковке) или использовать их для разбиения блоков текста в обновлениях по электронной почте. Возможности безграничны.

4.

Существует несколько стратегий организации, упрощающих навигацию по библиотеке значков.

«Привет, Дэйв! Во-первых, ты мой любимый коллега. Кроме того, я знаю, что вы должны закончить этот огромный проект в течение следующего часа, и я понимаю, что все остальные в вашей команде застряли на подъемнике и не могут вам помочь, но знаете ли вы, где я могу найти этот значок с большим пальцем вверх? используем иногда?»

Не будь таким человеком. Полная и отполированная библиотека значков легко доступна для скачивания, поэтому члены вашей команды могут найти то, что им нужно, не спрашивая окружающих. Кроме того, если ваши файлы значков названы четко, вы можете избежать дублирования одной и той же идеи (например, только один значок для «электронной почты»). Это способствует согласованности бренда.

Переходя на следующий уровень, менеджер цифровых активов, включающий систему тегов, является наиболее эффективным вариантом хранения библиотек значков. Он всегда актуален в облаке и упрощает обновление или переназначение значков при необходимости.