Top.Mail.Ru

Иконки для интернет-магазина: какие бывают, зачем нужны и где их брать

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

Зачем нужны иконки в интернет-магазине?

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

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

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

Что дают иконки:

  1. Упрощают навигационную часть сайта, делают элементы цепочки более запоминаемыми, оптимизируют путь пользователя.
  2. Экономят место на экране.
  3. Помогают установить связь с посетителем.
  4. Повышают узнаваемость бренда, позволяют идентифицировать свою компанию, продукт или услугу за счет особого стиля, корпоративных цветов.
  5. Привлекают внимание к преимуществам бренда.
  6. Структурируют списки товаров/услуг.
  7. Создают акцент на кнопках, ведущих к целевому действию.
  8. Наглядно объясняют алгоритм заказа.
  9. Выделяют акции, спецпредложения, отдельные категории товаров.

Разновидности иконок

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

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

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

Для этого нужно подобрать подходящее изображение и добавить к нему краткое описание. К примеру:

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

Здесь важно придумать подходящие ассоциации и сформулировать сообщение, которое необходимо транслировать посетителю, буквально в 2-3 предложениях.

Навигационные

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

Примеры навигационных иконок:

  • стрелки, направленные вниз, вверх, вправо или влево – предлагают перейти в нужную часть страницы;
  • тележка – перенаправляет покупателя в раздел «Корзина»;
  • конверт или трубка – делает отсылку на страницу контактов;
  • логотипы социальных сетей – активируют переход на профиль компании в Instagram, Facebook, Twitter, VK.

CTA – призывы к действию

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

Для большей ясности к таким иконкам-символам прикрепляют короткие подписи с активным глаголом:

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

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

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

Если углубляться в техническую часть, можно классифицировать элементы с учетом типа графики:

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

Значки оформляются в различных стилях и бывают плоскими, контурными, объемными в 3D. Для информационных и навигационных блоков чаще всего подбирают элементы, состоящие из линий и контуров. Это лаконичные однотонные иконки, которые встречаются в строгом минималистичном дизайне.

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

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

Еще вариант – подвижные картинки-анимации, простые геометрические фигуры, шрифтовые иконки, которые меняют цвет, размеры и тени.

Правила использования элементов

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

  • придерживаться единого стиля и не выбиваться из визуального ряда. Специалисты рекомендуют гармонично вписывать графические элементы в общую концепцию дизайна сайта, не выходить за пределы выбранной цветовой схемы и избегать пестроты, которая неуместна на коммерческой площадке;
  • выбирать понятные ассоциации. Каждое изображение на сайте выполняет свою функцию, доносит нужный смысл. Важно, чтобы клиент сразу понимал его при виде той или иной картинки. Подходящие ассоциативные связи выбираются с учетом особенностей целевой аудитории магазина;
  • при необходимости дополнять значок текстом. Если смысл иконки неоднозначен, нужно кратко объяснить, что она обозначает;
  • использовать прозрачный фон. Из-за цветных фонов создается лишний визуальный шум, который замедляет восприятие информации. Смотря на такие картинки, посетителям приходится вглядываться, чтобы различить образы. Облегчить процесс интерпретации помогают прозрачные фоны;
  • давать дополнительные подсказки. Если элемент кликабельный, важно показать это. Например, с помощью подсветки при наведении курсора;
  • по возможности отдавать предпочтение векторной графике. Этот тип графики дает больше пространства для веб-дизайна: допускает применение анимации, смену цветовых и других характеристик, сохраняет качество при изменении размеров.

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

Где брать иконки?

Иконки для интернет-магазина можно разработать самостоятельно, заказать у дизайнера, скачать в специализированных сервисах или воспользоваться генераторами. Первый вариант – трудоемкий и затратный по времени, второй – довольно дорогостоящий. А вот сервисы и генераторы – то, чего вполне достаточно большинству онлайн-предпринимателей. Рассмотрим несколько подходящих вариантов.

Wix

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

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

Iconfinder

Iconfinder

В этом сервисе можно выбрать отдельные значки или целую коллекцию для сайта. В базе хранится более 5 миллионов элементов в форматах svg и png. Около 300 тысяч доступны бесплатно. Также есть 2 платных тарифа с доступом к премиальным иконкам. Цены начинаются от 2 долларов за значок.

Выбранные элементы можно редактировать в онлайн-редакторе: перекрашивать в цвета бренда, добавлять текст, настраивать форму, размер и прочие параметры.

Flaticon

Flaticon

В каталоге сервиса Flaticon около 4 миллионов векторных иконок в форматах svg, png, psd, eps, Base64. Для удобства поиска они распределены по категориям. Загружать можно отдельные картинки и коллекции, также есть возможность создать свой значок с помощью шаблонов.

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

Noun Project

Noun Project

Сервис предлагает более 3 миллионов иконок в различных тематиках. Они доступны для бесплатного скачивания, но при этом отключена функция редактирования и нужно обязательно указывать авторство. Чтобы получить больше, необходимо покупать неограниченную подписку (39,99 долларов в год) или отдельную иконку стоимостью от 2,99 долларов.

Icons8

Icons8

На платформе есть много различных инструментов для веб-дизайна, включая иконки, фото, иллюстрации и музыку. Пользователям доступны около 160 тысяч бесплатных картинок в 36 стилях. Поддерживаются форматы png и svg.

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

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

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

Заключение

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

Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Возможно вам также будет интересно:

Идеальный сервис в интернет-магазине: каким его видят клиенты сегодня

26.02.2021
Если не все, то очень многие потребители готовы переплатить за сервис. Столкнувшись с плохим обслуживанием, большинство клиентов уходят к конкурентам,...

Управление репутацией интернет-магазина в соцсетях: рекомендации + подборка сервисов

25.02.2021
Перед тем, как оформить покупку в интернет-магазине, покупатели часто ищут упоминания о нем в социальных сетях. Окончательное решение во многом...

Нейромаркетинг: особенности и способы применения в интернет-магазине

24.02.2021
Невостребованным может быть даже самый перспективный продукт. При этом неважно, сколько денег вкладывается в рекламу. Если не посмотреть на товар...

Обзор бесплатных сервисов для аудита сайта интернет-магазина

22.02.2021
Любой интернет-магазин должен постоянно развиваться. Без этого будет сложно удерживать внимание постоянных клиентов и привлекать новый трафик. Главными условиями для...

Позиционирование интернет-магазина и STP-маркетинг

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

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

19.02.2021
Собственное дело с доходами выше среднего – мечта любого человека с предпринимательской жилкой. Но что делать в условиях ограниченного бюджета?...

Как повысить доверие посетителей к интернет-магазину: подробный обзор основных триггеров

18.02.2021
Страх и недоверие – наиболее частые причины, по которым посетитель покидает интернет-магазин или бросает корзину с понравившимися продуктами. Опасаясь мошенничества,...

Планирование бюджета на рекламу интернет-магазина: основные правила, методы и инструменты

17.02.2021
Любую маркетинговую кампанию необходимо тщательно планировать. Где размещать рекламу, сколько это будет стоить и какие результаты даст – стоит уделить...

10 причин снижения органического трафика в интернет-магазине

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

Начните бесплатно!

Получите все и сразу: поддержку 24х7, адаптивные шаблоны, рекомендации по продвижению

Создайте интернет-магазин за 1 день
Все для продаж уже внутри
Готовые шаблоны дизайна ・ Надежный хостинг ・ Помощь в продвижении ・ Поддержка 24×7 ・ Интеграции оплаты, доставки и 1С ・ 14 дней бесплатно