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
Всё для продаж уже внутри!
Возможно вам также будет интересно:

Акции, как способ повышения продаж на «Озон»: как и зачем участвовать в распродажах

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

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

30.11.2021
Маркетинг – ключевая составляющая любого бизнеса. Он помогает создавать благоприятные условия для высокой посещаемости сайта, привлекать внимание целевой аудитории и...

Советы по оформлению главной страницы магазина на маркетплейсах и разбор ошибок

30.11.2021
Маркетплейсы в последние годы стали основным драйвером рынка электронной коммерции в России. Они формируют тренды и выступают в роли конкурентов...

Оптимальное время для рассылки сообщений через email и в мессенджерах

29.11.2021
Время решает все. Если электронное письмо или сообщение в мессенджере было отправлено, когда большая часть аудитории спешила на работу, оно...

Частые ошибки в оформлении карточки товара на маркетплейсах

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

Как использовать web push маркетинг в продвижении интернет-магазина

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

Ловим клиентов горячими или как использовать стоимость лида CPL для раскрутки бизнеса

25.11.2021
Активное продвижение компании в интернете требует четкого таргетирования и быстрого реагирования на промежуточные результаты. Оценивать маркетинговые усилия можно при помощи...

Финансовые сервисы для продавцов на Ozon: рассрочка, кредитование и прочие полезные инструменты

24.11.2021
В последнее время Ozon довольно активно развивает собственную экосистему финансовых сервисов. Это дает хорошие возможности и перспективы для обеих сторон:...

Техники и примеры сторителлинга для интернет-магазина

23.11.2021
Постоянное продвижение – неотъемлемая часть любого бизнеса в e-commerce. Чтобы продать, нужно привлечь внимание как можно большего количества потенциальных покупателей....

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

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

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