Иконки для веб дизайна: Пакет значков Web design | Значки .SVG 50

для чего нужны и как использовать?

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

Функции иконок на сайте

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

С иконками достаточно посмотреть на экран, чтобы понять, о чем идет речь и что именно нам хочет предложить компания. Каждая иконка соответствует выбранному товару. Диван, например, традиционно относят к мягкой мебели, а иконка плиты – это сантехника. В другом примере нужно вчитываться в текст, чтобы понять смысл.

Еще одна функция иконок – помощь в ориентации на сайте. Есть несколько универсальных символов, которые используются в дизайне для направления пользователя, например:

• значок лупы означает поиск информации;
• значок дома ведет на главную страницу;
• картинка сердца или звезды – избранное;
• силуэт человека в шапке сайта ведет в личный кабинет;
• значок тележки или корзины означает добавление товара в корзину или переход на страницу оформления заказа.

Такие изображения добавляют на сайты интернет-магазинов для облегчения покупки:

Типы иконок в дизайне

Иконок и их видов существует неисчерпаемое разнообразие, и поэтому возникает вопрос: какие иконки лучше использовать? Рассмотрим их виды и попытаемся ответить на этот вопрос.

Линейные

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

Иллюстрации

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

Лучше такую разновидность иконок разрабатывать в стилистике сайта или вашего проекта. Подобный стиль придаст «свежесть» и индивидуальность.

Объемные

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

Простые элементы

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

Примеры использования иконок в веб-дизайне

Мы разобрались, как иконки отличаются по стилистике и методам применения. Теперь рассмотрим распределение элементов по назначению реальных примеров.

Иконки для навигации

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

Информационные иконки

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

Социальные доказательства

Через иконки можно донести до посетителей сайта информацию о количестве купленных товаров, опыте работы компании и прочее:

Разделы каталогов

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

Социальные кнопки

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

Рассмотрим основные правила использования иконок, чтобы дизайн веб-страницы выглядел гармонично и был удобен посетителям.

Как с помощью иконок повысить конверсию сайта

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

1. Привлечь внимание к преимуществам компании.
   Посещая сайты, мы привыкли прокручивать страницы. Иконки помогают пользователю обратить внимание на важную информацию и задержаться взглядом на особенностях и преимуществах компании. Такая информация формирует доверие у клиента и может убедить сделать выбор в пользу вашего магазина, а не конкурента.
   
   
2. Расскажите, как сделать заказ или как работает компания.
   Чтобы новые клиенты знали, по какому алгоритму работает магазин или предоставляются услуги, расскажите об этом с помощью иконок. Так вы сэкономите место на сайте и клиенту не нужно будет читать много текста, чтобы понять, как сделать заказ.
3. Расскажите о товаре с помощью иконок.
   К карточкам товаров можно добавлять как текстовые описания, так и обозначения характеристик или дополнительных параметров с помощью иконок.
4. Выделяйте акции и специальные предложения.
   Чтобы посетитель сайта обратил внимание на акцию или нужный раздел, добавьте иконки. К примеру, красные изображения помогают обратить внимание на акции.

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

Основные правила использования иконок на сайте

Создавая иконки, дизайнеру важно не забывать, что иконки должны соответствовать общему стилю сайта.

1. Иконки должны быть узнаваемы и ассоциироваться с текстом.
   Основное предназначение иконки – облегчить восприятие текста. Чтобы изображение выполняло свою функцию, пользователь должен понимать, какой объект или действие эта картинка обозначает.
   К примеру, обозначение доставки иконкой в виде земного шара подойдет для компании, которая доставляет товары в другие страны. Если вы доставляете в пределах города или одной страны, лучше использовать более локальное обозначение.
   
2. Дополняйте иконку текстом.Изображение несет на себе только визуальную функцию. Чтобы придать значку смысл, добавьте рассказ о том, что он означает.
   
3. Дизайн иконок должен быть похожим между собой.
   Если вы используете несколько иконок одновременно, они должны быть согласованы друг с другом, чтобы не вышло так:
   
   Иконки должны создавать стиль, а не нарушать его. В этом примере мы видим три изображения в одном стиле и одно минималистическое. Оно выбивается из общего ряда и нарушает визуальный порядок.
4. Прозрачный фон иконки облегчает восприятие.
   Использование прозрачного фона увеличивает скорость восприятия. Цветной фон создает визуальный шум, из-за которого иконки могут казаться одинаковыми. Сравните:При просмотре иконок с синим фоном вместо мгновенного понимания, изображенного на картинке, приходится всматриваться и различать образы. Приходится напрягать зрение, чтобы понять смысл. А использование прозрачного фона облегчает восприятие.
5. Используйте векторную графику, если это возможно.
   Применение векторной графики в веб-дизайне значительно упрощает работу дизайнера – иконки не теряют качества при изменении размеров, можно с легкостью изменить цвет и другие параметры, а также эффективно использовать анимацию.  

 

16 универсальных иконок, которые подойдут для любого интерфейса

Аудио перевод статьи

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

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

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

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

1. X

Значение: Закрыть

Применение: Используйте эту иконку, чтобы пользователь мог закрыть элемент, когда он больше не представляет для него интереса.

2. Стрелка (шеврон)

Значение: Раскрыть

Применение: Используйте стрелку (шеврон) для раскрытия элементов и информации пространственно или в рамках навигации.

3. Плюс

Значение: Создать элемент

Применение: Используйте плюс для добавления или создания элементов.

4. Минус

Значение: Удалить элемент

Применение: Используйте минус для удаления элементов.

5. Увеличительное стекло

Значение: Поиск

Применение: Используйте лупу для поиска информации в базе данных.

6. Карандаш

Значение: Редактировать

Применение: Используйте карандаш для редактирования данных.

7. Закладка

Значение: Сохранить

Применение: Используйте закладку для сохранения данных.

8. Корзина

Значение: Удалить

Применение: Используйте корзину для окончательного удаления сведений из базы данных.

9. Сердце

Значение: Избранное

Применение: Используйте сердце, чтобы добавить контент в избранное.

10. Шестеренка

Значение: Настройки

Применение: Используйте шестеренку, чтобы открыть экран настроек.

11.

Гамбургер (три горизонтальные полоски)

Значение: Главное меню

Применение: Используйте гамбургер для открытия главного меню.

12. Три точки

Значение: Дополнительное меню

Применение: Используйте три точки, чтобы сэкономить место и скрывать/открывать дополнительные пункты меню.

13. i

Значение: Дополнительная информация

Применение: Используйте иконку «i» для отображения на экране фрагментов контекстной информации.

14. Вопросительный знак

Значение: Помощь

Применение: Используйте вопросительный знак, чтобы открыть страницу со справочной документацией.

15. Восклицательный знак

Значение: Ошибка

Применение: Используйте восклицательный знак для отображения ошибок и предупреждения деструктивных действий.

16. Галочка

Значение: Завершение

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

Скачать набор иконок

Скачайте 16 универсальных иконок в формате SVG и начните использовать их в своих проектах уже сейчас.