Иконки – один из обязательных элементов дизайна и юзабилити любого качественного ресурса. Инструмент помогает организовать и структурировать контент, привлечь внимание особой расстановкой акцентов, улучшить восприятие информации. Это некий маячок для посетителя, благодаря которому можно быстрее сориентироваться на незнакомом сайте. В сегодняшней статье рассказываем, почему стоит использовать иконки в интернет-магазине, какие они вообще бывают, где их взять и как с ними работать.
Зачем нужны иконки в интернет-магазине?
Иконка – графический элемент интерфейса, небольшое изображение, которым отмечают ту или иную составляющую сайта: корзину, метки платежных систем, устройства и многое другое. Их называют favicon.
Существуют отдельные иконки и целые серии, сделанные в единой тематике и стилистике, отражающей общую дизайнерскую концепцию ресурса. Именно такие серии зачастую используют в интернет-магазинах.
Ими дополняют навигацию, заменяют текст в адаптивном дизайне, обозначают функциональные кнопки, мета-информацию или любой элемент контента. При нажатии на кликабельный значок запускается определенное действие. Например, переход на соответствующую страницу.
Что дают иконки:
- Упрощают навигационную часть сайта, делают элементы цепочки более запоминаемыми, оптимизируют путь пользователя.
- Экономят место на экране.
- Помогают установить связь с посетителем.
- Повышают узнаваемость бренда, позволяют идентифицировать свою компанию, продукт или услугу за счет особого стиля, корпоративных цветов.
- Привлекают внимание к преимуществам бренда.
- Структурируют списки товаров/услуг.
- Создают акцент на кнопках, ведущих к целевому действию.
- Наглядно объясняют алгоритм заказа.
- Выделяют акции, спецпредложения, отдельные категории товаров.
Разновидности иконок
Иконки на сайте интернет-магазина могут выполнять разные задачи. В зависимости от этого выделяют несколько типов значков.
Информационные
Данный тип иконок передает необходимую информацию. Это могут быть картинки-ссылки или просто иллюстрации. С помощью значков можно рассказать о ключевых ценностях компании, преимуществах товара и других важных аспектах, которые касаются деятельности интернет-магазина.
Для этого нужно подобрать подходящее изображение и добавить к нему краткое описание. К примеру:
- картинка грузовика + информация о доставке;
- картинка кошелька с монетами + данные о возможных способах оплаты в магазине;
- набор ассоциативных картинок под каждое преимущество компании: наушники с микрофоном – круглосуточная техподдержка, копилка – выгодные цены, журнал – удобный каталог, земной шар – мультиязычность.
Здесь важно придумать подходящие ассоциации и сформулировать сообщение, которое необходимо транслировать посетителю, буквально в 2-3 предложениях.
Навигационные
Этот тип иконок дополняет навигационную систему сайта. Главная задача – помочь пользователю сориентироваться. На некоторых сайтах они полностью заменяют текст в меню, что дает возможность избежать перегруженности страниц и упростить их структуру.
Примеры навигационных иконок:
- стрелки, направленные вниз, вверх, вправо или влево – предлагают перейти в нужную часть страницы;
- тележка – перенаправляет покупателя в раздел «Корзина»;
- конверт или трубка – делает отсылку на страницу контактов;
- логотипы социальных сетей.
CTA – призывы к действию
Эти иконки представляют собой кнопки с призывом. Кликабельные значки побуждают к определенному целевому действию и обеспечивают основную конверсию в интернет-магазине. Их оформляют в ярких цветах, добавляя определенный символ. Например, стрелку, «+», значок скачивания.
Для большей ясности к таким иконкам-символам прикрепляют короткие подписи с активным глаголом:
- перейти;
- добавить в корзину;
- посмотреть товар;
- открыть обзор;
- подписаться на рассылку;
- забрать скидку;
- получить секретный промокод;
- купить в рассрочку;
- оформить заказ;
- примерить онлайн;
- увидеть больше предложений;
- участвовать в розыгрыше;
- начать шоппинг;
- выбрать образ и так далее.
Кроме того, иконками обозначают социальные доказательства, разделы каталога, фильтры для поиска товаров.
Приведенная классификация довольно условная. Она отражает ключевые задачи графических элементов интерфейса на коммерческом сайте. Существуют также и другие варианты разделения по типам. Например, некоторые специалисты выделяют иконки меню, переходов и быстрого доступа.
Если углубляться в техническую часть, можно классифицировать элементы с учетом типа графики:
- растровые. Применяются в формате png, подходят для создания изображений с небольшим количеством цветов;
- векторные. Используются в формате svg, поддерживают канал прозрачности, могут масштабироваться, не теряя в качестве;
- символьные. Реализуются с помощью разных иконочных шрифтов, но ограничены в выборе стилей и цветов.
Значки оформляются в различных стилях и бывают плоскими, контурными, объемными в 3D. Для информационных и навигационных блоков чаще всего подбирают элементы, состоящие из линий и контуров. Это лаконичные однотонные иконки, которые встречаются в строгом минималистичном дизайне.
В более оживленных вариантах оформления используют цветные иллюстрированные изображения, выделяющиеся среди основного контента. Зачастую их разрабатывают индивидуально, отрисовывая под конкретный проект.
Объемные значки – это отдельные изображения в виде иконок, сделанные из частей фотографий или тематических картинок. С ними нужно быть осторожным, поскольку они могут сильно загромождать дизайн.
Еще вариант – подвижные картинки-анимации, простые геометрические фигуры, шрифтовые иконки, которые меняют цвет, размеры и тени.
Правила использования элементов
При выборе иконок для интернет-магазина стоит соблюдать такие правила:
- придерживаться единого стиля и не выбиваться из визуального ряда. Специалисты рекомендуют гармонично вписывать графические элементы в общую концепцию дизайна сайта, не выходить за пределы выбранной цветовой схемы и избегать пестроты, которая неуместна на коммерческой площадке;
- выбирать понятные ассоциации. Каждое изображение на сайте выполняет свою функцию, доносит нужный смысл. Важно, чтобы клиент сразу понимал его при виде той или иной картинки. Подходящие ассоциативные связи выбираются с учетом особенностей целевой аудитории магазина;
- при необходимости дополнять значок текстом. Если смысл иконки неоднозначен, нужно кратко объяснить, что она обозначает;
- использовать прозрачный фон. Из-за цветных фонов создается лишний визуальный шум, который замедляет восприятие информации. Смотря на такие картинки, посетителям приходится вглядываться, чтобы различить образы. Облегчить процесс интерпретации помогают прозрачные фоны;
- давать дополнительные подсказки. Если элемент кликабельный, важно показать это. Например, с помощью подсветки при наведении курсора;
- по возможности отдавать предпочтение векторной графике. Этот тип графики дает больше пространства для веб-дизайна: допускает применение анимации, смену цветовых и других характеристик, сохраняет качество при изменении размеров.
Нельзя использовать значки на сайте просто для красоты. На их расшифровку не должно уходить слишком много времени. В идеале иконки – равноценная замена тексту. Там, где они не нужны, непонятны, неуместны, лучше написать обычный текст.
Где брать иконки?
Иконки для интернет-магазина можно разработать самостоятельно, заказать у дизайнера, скачать в специализированных сервисах или воспользоваться генераторами. Первый вариант – трудоемкий и затратный по времени, второй – довольно дорогостоящий. А вот сервисы и генераторы – то, чего вполне достаточно большинству онлайн-предпринимателей. Рассмотрим несколько подходящих вариантов.
Wix
В бесплатной медиатеке редактора Wix есть множество изображений для сайта, в том числе и иконок. Это всевозможные стрелки, формы, боксы, пиктограммы, значки.
Их можно переносить в интернет-магазин в первоначальном виде или же менять на свое усмотрение: обрезать изображение, вставлять необходимые визуальные эффекты, менять цвет и форму, добавлять ссылку или анимацию.
Iconfinder
В этом сервисе можно выбрать отдельные значки или целую коллекцию для сайта. В базе хранится более 5 миллионов элементов в форматах svg и png. Около 300 тысяч доступны бесплатно. Также есть 2 платных тарифа с доступом к премиальным иконкам. Цены начинаются от 2 долларов за значок.
Выбранные элементы можно редактировать в онлайн-редакторе: перекрашивать в цвета бренда, добавлять текст, настраивать форму, размер и прочие параметры.
Flaticon
В каталоге сервиса Flaticon около 4 миллионов векторных иконок в форматах svg, png, psd, eps, Base64. Для удобства поиска они распределены по категориям. Загружать можно отдельные картинки и коллекции, также есть возможность создать свой значок с помощью шаблонов.
Онлайн-редактор позволяет менять цвет и размер, экспортировать изображение в нужный формат. Еще одно преимущество сервиса – подробное руководство по выбору стилей значков для проекта. Премиум-наборы и эксклюзивный контент продаются по цене от 9,99 евро в месяц.
Noun Project
Сервис предлагает более 3 миллионов иконок в различных тематиках. Они доступны для бесплатного скачивания, но при этом отключена функция редактирования и нужно обязательно указывать авторство. Чтобы получить больше, необходимо покупать неограниченную подписку (39,99 долларов в год) или отдельную иконку стоимостью от 2,99 долларов.
Icons8
На платформе есть много различных инструментов для веб-дизайна, включая иконки, фото, иллюстрации и музыку. Пользователям доступны около 160 тысяч бесплатных картинок в 36 стилях. Поддерживаются форматы png и svg.
В каталоге собраны иконки-персонажи, логотипы, стрелки, инфографика и многое другое. Перед скачиваем их перекрашивают, добавляют к ним нужные элементы, настраивают отступы, выбирают оптимальный размер в редакторе.
Если нужны какие-то особые значки, можно запросить их разработку, заполнив специальную форму в соответствующем разделе меню сервиса.
Перечисленные инструменты способны полностью закрыть потребность бизнеса в иконках для сайта.
Заключение
Передавая четкие образы, иконки значительно упрощают восприятие информации на сайте. Но только в том случае, если они расположены в правильном месте, содержат очевидные привычные ассоциации и доносят нужные смыслы. Значки следует тщательно продумывать и подбирать, а не использовать первый приглянувшийся набор. Для этого не обязательно обращаться к профессиональному дизайнеру: зачастую достойные варианты можно найти в одном из рассмотренных в статье сервисов.
